@contant-core-ui/base 是一个前端 UI 组件库,可以帮助开发者快速构建基础 UI 组件。在本篇文章中,我们将会介绍如何使用 @contant-core-ui/base 包。
安装
要使用 @contant-core-ui/base 包,你需要先安装 npm。如果你还没有安装 npm,请按照 npm 官网的指引 安装。
然后使用以下命令进行安装:
--- ------- ---------------------
使用
引入
在使用 @contant-core-ui/base 包之前,你需要先引入包。你可以在你的项目的入口文件中引入它:
------ --------------------------------------- ------ - ------ - ---- ------------------------
组件
通过以下代码实现一个 Button 组件:
------ - ------ - ---- ------------------------ ------------- -----------
Button 组件默认添加了类名 “button-primary”,这是一个默认样式。你也可以使用其它属性来自定义样式,属性介绍如下:
属性 | 说明 |
---|---|
className | 自定义的类名 |
children | Button 内容,可以是文本或者其它组件 |
disabled | 禁用状态 |
type | 按钮类型,默认为 button |
onClick | 点击事件的回调函数 |
buttonType | 按钮类型,默认为 "primary" |
element | 组件元素,默认为 "button" |
size | 尺寸,默认为 "medium",支持 "small"/"large" |
block | 块状按钮 |
rounded | 圆角按钮 |
link | 链接按钮 |
buttonVariant | 按钮主题 |
buttonDisabled | 按钮禁用状态 |
buttonSize | 按钮尺寸 |
示例
下面是一个使用 Button 组件的示例:
------ - ------ - ---- ------------------------ -------- ----- - ----- ----------- - -- -- - ----------------------- -- ------ - -- ------- --------------------------- ----------- --- -- -
总结
@contant-core-ui/base 是一个优秀的前端 UI 组件库,可以帮助开发者快速构建基础 UI 组件。在本篇文章中,我们介绍了如何在你的项目中使用 @contant-core-ui/base 包。如果你想进一步了解 @contant-core-ui/base 包的使用,请参考其官方文档。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/60066b5451ab1864dac669a1