@alifd/fusion-design-pro 是一款基于阿里 Fusion Design 的高质量组件库,为前端开发提供了许多易用、美观的 UI 组件。本篇文章将对该 npm 包的使用进行详细介绍,并提供一些示例代码作为参考。
安装 @alifd/fusion-design-pro
首先,我们需要使用 npm 或 yarn 进行安装。
--- ------- ------ ------------------------
或者
---- --- ------------------------
使用 @alifd/fusion-design-pro
引入样式
------ -----------------------------------------
注册组件
------ - ------ - ---- --------------------------- -------------------------- --------
使用组件
---------- ----- ------- ---------------------------- --------------------- ------ -----------
如上,我们将 @alifd/fusion-design-pro 中的 Button 组件注册为了 Vue 中的全局组件,这样就可以在模板中直接使用该组件,而且可以传入一些 props 进行配置。
除了在 Vue 中使用,它还支持 React 和 Angular 等其他框架的使用。
主要组件
现在,我们需要讨论 @alifd/fusion-design-pro 提供的主要组件。
Button
Button 是最常用到的组件之一,可以用于提交表单、发起请求等各种场景。Button 组件提供了多种类型,如主要按钮、次要按钮等,并支持自定义类型。
---------- ----- ------- ---------------------------- --------------------- ------- ------------------------------- ------- ------------------------- ------- ---------------------------- ------- -------------------------- ------- ---------------------------- ------ -----------
Icon
Icon 可以用于展示各种图标,支持 FontAwesome、Antd Icon 和自定义 SVG 图标等多种图标库。
---------- ----- ----- -------------- ------------ -- ----- ------------- -- ------ -----------
Input
Input 可以用于输入文本,支持多种类型,如文本框、密码框、带前后缀文本框、多行文本框等。
---------- ----- ------ ----------------- -- ------ --------------- ------------------- -- ------ --------------------- ----------------- --------------------- -- --------------- ------------------- -- ------ -----------
Select
Select 是下拉选择框组件,可以用于选择一个或多个值。
---------- ----- ------- ------------------ -------------- --------------------------------- -------------- --------------------------------- -------------- ------------------------------- --------- ------- ----------------- ----------------------- --------------- -------- ------ ------ -- - -------------- --------------------------------- -------------- --------------------------------- -------------- ------------------------------- --------- ------ -----------
Table
Table 是表格组件,可以用于展示一些数据,支持分页、排序等功能。
---------- ------ ----------------------- --------------- -------------- ------------- ---------- -------------- -- ------------- ---------- ---------------- -- ------------- ---------- ---------------- -- -------- ----------- -------- ------ ------- - ------ - ------ - ----------- - - --- -- ----- ------- ----- ------------ -- - --- -- ----- ------- ----- ------------ -- - --- -- ----- ------ ----- ------------ - - -- - -- ---------
Form
Form 是表单组件,可以用于输入、提交表单等操作。
---------- ----- ------------------- ----------------- ---------------------- ---------- ----------- --------- ------ -- ------------ ---------- ----------- --------- ----------- --------------------- -- ------------ ---------- ----------- --------- ----------- -- ------------ ---------- -------------- --------------- -- ------------ ----------- ------- -------------------------- ------------ ------- ----------- -------- ------ ------- - ------ - ------ - --------- - - ------ ------- ------ --- -- - ------ --------- ------ --- - - -- - -- ---------
小结
@alifd/fusion-design-pro 是一款非常易用的 UI 组件库,在前端开发中非常实用。本篇文章介绍了如何安装、使用、以及 @alifd/fusion-design-pro 提供的主要组件,希望能对大家提供一些帮助。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/143523