介绍
infinni-ui 是一款基于 Vue.js 的前端 UI 库，包含丰富的组件和样式，可以帮助前端开发者快速构建漂亮、易用的界面。
这个库已经发布到 npm 上，直接使用 npm 安装即可。
安装
使用 npm 安装：
npm install infinni-ui --save-dev
如果使用 yarn：
yarn add infinni-ui --dev
安装完成后，在你的应用程序入口文件中，引入 Vue.js 和 infinni-ui：
import Vue from 'vue' import InfinniUI from 'infinni-ui' Vue.use(InfinniUI)
组件列表
infinni-ui 包含了以下组件：
- Button 按钮
- Input 输入框
- Select 选择器
- Badge 徽标
- Avatar 头像
- Card 卡片
- Pagination 分页
- Tabs 标签页
- Modal 模态框
- Message 消息提示
使用示例
Button 按钮组件
-- -------------------- ---- -------
----------
-----
----------- -----------------------------------
--------------------------------
----------- -----------------------------------
----------- -----------------------------------
----------- ---------------------------------
------
-----------Input 输入框组件
<template>
<div>
<inf-input placeholder="请输入用户名"></inf-input>
<inf-input placeholder="请输入密码" type="password"></inf-input>
<inf-input placeholder="请输入邮箱" type="email"></inf-input>
<inf-input placeholder="请输入手机号" type="tel"></inf-input>
</div>
</template>Select 选择器组件
-- -------------------- ---- -------
----------
-----
----------- ------------------ -----------------------------
------
-----------
--------
------ ------- -
------ -
------ -
-------- -
- ------ --- --- ------ --------- --
- ------ --- --- ------ --------- --
- ------ --- --- ------ --------- -
--
------ ---------
-
-
-
---------Badge 徽标组件
<template>
<div>
<inf-badge value="99+">
<inf-button>消息</inf-button>
</inf-badge>
</div>
</template>Avatar 头像组件
<template>
<div>
<inf-avatar src="https://avatars.githubusercontent.com/u/73416673?v=4"></inf-avatar>
</div>
</template>Card 卡片组件
<template>
<div>
<inf-card title="卡片标题" :shadow="true">
<p>卡片内容</p>
</inf-card>
</div>
</template>Pagination 分页组件
-- -------------------- ---- -------
----------
-----
--------------- ------------ ---------------------------------------
------
-----------
--------
------ ------- -
------ -
------ -
------------ -
-
-
-
---------Tabs 标签页组件
-- -------------------- ---- -------
----------
-----
----------
-------- ------------------------------
-------- ------------------------------
-------- ------------------------------
-----------
------
-----------Modal 模态框组件
-- -------------------- ---- -------
----------
-----
----------- ------------------------------------------
---------- ---------------- ------------- -------------------------
------------
---- --------------
----------- ----------------------------------------
----------- -------------- ----------------------------------------
------
------------
------
-----------
--------
------ ------- -
------ -
------ -
---------- -----
-
-
-
---------Message 消息提示组件
-- -------------------- ---- -------
----------
-----
----------- ----------------------------------------
------
-----------
--------
------ - ------- - ---- ------------
------ ------- -
-------- -
------------- -
-----------------------
-
-
-
---------总结
本文介绍了如何使用 npm 包 infinni-ui，以及包含的各种组件的用法和示例。
infinni-ui 的使用可以帮助开发者快速构建前端 UI 界面，提高开发效率和用户体验。希望读者可以通过本文，学习并使用这个有用的前端工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005728281e8991b448e8b46