什么是 ant-ng
ant-ng 是一款基于 AngularJS 的 UI 组件库,它提供了很多常用的 UI 组件,比如按钮、表格、弹窗等,可以方便快捷地构建一个 Web 应用程序的前端。
如何使用 ant-ng
使用 ant-ng 需要先安装它,可以通过 npm 安装:
--- ------- ------ ------
安装成功后,在应用程序中引入 ant-ng:
--------- ----- ----- ---------- ------ ----- ---------------- --------- ----------- ----- ---------------- ----------------------------------------------- ------- ------ ---- --------------- ---------- ----------- ------ ------- --------------------------------------------------- ------- ------------------------------------------------------ -------- ----------------------- ------------ --------- ------- -------
接下来就可以在应用程序中使用 ant-ng 提供的组件,比如一个按钮:
------- ------- ---------------------- ---------------
演示效果:https://codepen.io/anon/pen/BgQZXa
ant-ng 提供的组件
ant-ng 提供了很多常用的 UI 组件,可以极大地减少前端开发的时间和难度。这里列举一些常用的组件并提供示例代码。
按钮组件
ant-btn:普通按钮
------- -------------- ---------------
ant-btn-success:成功按钮
------- ------- ---------------------- ---------------
ant-btn-warning:警告按钮
------- ------- ---------------------- ---------------
ant-btn-danger:危险按钮
------- ------- --------------------- ---------------
表格组件
ant-table:基本表格
------ ---------- ------- ---- ----------- ----------- ----------- ----- -------- ------- ---- ----------- ----------- ---------- ----- ---- ----------- ----------- ---------- ----- -------- --------
ant-table-bordered:带边框的表格
------ --------- ------------------- ------- ---- ----------- ----------- ----------- ----- -------- ------- ---- ----------- ----------- ---------- ----- ---- ----------- ----------- ---------- ----- -------- --------
ant-table-striped:带斑马线的表格
------ --------- ------------------ ------- ---- ----------- ----------- ----------- ----- -------- ------- ---- ----------- ----------- ---------- ----- ---- ----------- ----------- ---------- ----- -------- --------
表单组件
ant-input:文本框
------ --------- ------------
ant-input-number:数字输入框
------ ---------------- --------------
ant-checkbox:复选框
------ ------------------- ---------------- ------------
弹窗组件
ant-modal:基本弹窗
------- ------- --------------- ------------------- - ------------------- ---------- --------------------- ----------- --------- ---- ------------------ ------- ------- --------------- ------------------- - ------------------ ------- ------- --------------- ------------------- - ------------------ ------ ------------
演示效果:https://codepen.io/anon/pen/ZVYRMp
结语
ant-ng 是一个非常棒的 AngularJS UI 组件库,它提供了很多常用的组件以及丰富的样式风格,并且使用也非常方便高效。如果你是一个前端开发者,强烈建议你尝试使用 ant-ng 来提升你的开发效率和代码质量。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/600569a581e8991b448e4e28