iui Design 是一款基于 uni-app 的前端組件庫(kù)，它提供了一套可復(fù)用把夸、易擴(kuò)展、低耦合的移動(dòng)端 UI 組件庫(kù)扎即，幫助開(kāi)發(fā)者快速搭建移動(dòng)應(yīng)用况凉。
設(shè)計(jì)靈感來(lái)自 ArcoDesign，感謝巨人闷营！
預(yù)覽
請(qǐng)使用微信掃碼查看
版本
早期預(yù)覽版可能存在各種問(wèn)題知市。歡迎大家進(jìn)行反饋。
版權(quán)信息
iui Design 遵循 Apache-2.0 開(kāi)源協(xié)議嫂丙，意味著您無(wú)需支付任何費(fèi)用，也無(wú)需授權(quán)跟啤，即可將 iui Design 應(yīng)用到您的產(chǎn)品中。
注意
這并不意味著您可以將 iui Design 應(yīng)用到非法的領(lǐng)域竿奏，比如涉及賭博，暴力等方面泛啸。如因此產(chǎn)生糾紛或法律問(wèn)題秃症，iui Design 相關(guān)方及云磁數(shù)字不承擔(dān)任何責(zé)任候址。
安裝
使用前种柑，請(qǐng)確保你已經(jīng)學(xué)習(xí)過(guò) uni-app 的使用，你可以閱讀 uni-app 文檔赔蒲。
組件庫(kù)
方式一：通過(guò) npm 安裝
npm i iui-design
# or
yarn add iui-design
方式二：通過(guò) HBuilderX 導(dǎo)入
如果您是使用 HbuilderX 開(kāi)發(fā)的用戶，您可以在 uni-app 插件市場(chǎng)通過(guò) uni_modules 的形式進(jìn)行安裝舞虱。
Scss 插件
iui-design 依賴 sass，您必須要安裝此插件矾兜，否則無(wú)法正常運(yùn)行。
- 如果您使用的是 HbuilderX椅寺，您可以在
插件市場(chǎng)中搜索sass進(jìn)行安裝。 - 如果您的項(xiàng)目是由 vue-cli 創(chuàng)建的桐玻，請(qǐng)通過(guò)以下命令安裝對(duì) sass(scss)的支持，如果已安裝镊靴，請(qǐng)略過(guò)链韭。
# 安裝sass
npm i sass -D
# 安裝sass-loader
npm i sass-loader -D
配置
引入樣式
在 App.vue 中引入 iui-design 的樣式。
<style lang="scss">
// 注意給 style 標(biāo)簽添加 lang="scss" 屬性
// npm 模式安裝
@import "iui-design/style/index.scss";
// HBuilderX 插件市場(chǎng)安裝
@import "@/components/iui-design/style/index.scss";
</style>
在 uni.scss 中引入 iui-design 的主題樣式和變量敞峭。
// npm 模式安裝
@import "iui-design/style/theme.scss";
// HBuilderX 插件市場(chǎng)安裝
@import "@/components/iui-design/style/theme.scss";
引入組件
iui-design 支持 easycom 模式，您可以在 pages.json 中與 pages 同級(jí)位置添加 easycom 配置殖蚕，然后無(wú)需引入即可使用組件骗村。
{
"easycom": {
"custom": {
// npm 模式安裝
"^iui-(.*)": "iui-design/components/iui-$1/iui-$1.vue",
// HBuilderX 插件市場(chǎng)安裝
"^iui-(.*)": "@/components/iui-design/components/iui-$1/iui-$1.vue"
}
},
"pages": [
// ...
]
}
如果你覺(jué)得 iui- 這個(gè)前綴太長(zhǎng)了嫌褪，可以在 easycom 規(guī)則中再添加一條規(guī)則胚股。如下，你就可以使用 i- 作為前綴琅拌。當(dāng)然，你也可以自定義你喜歡的前綴刻坊。
{
"easycom": {
"custom": {
"^iui-(.*)": "根據(jù)你的安裝方式填寫路徑",
"^i-(.*)": "根據(jù)你的安裝方式填寫路徑"
}
}
}
貢獻(xiàn)指南
感謝你使用 iui Design
以下是關(guān)于向 iui Design 提交反饋或代碼的指南。在向 iui Design 提交 issue 或者 PR 之前党晋，請(qǐng)先花幾分鐘時(shí)間閱讀以下內(nèi)容谭胚。
提交 issue
- 遇到問(wèn)題時(shí)，請(qǐng)先確認(rèn)這個(gè)問(wèn)題是否已經(jīng)在 issue 中有記錄或者已被修復(fù)灾而。
- 提 issue 時(shí)，請(qǐng)用簡(jiǎn)短的語(yǔ)言描述遇到的問(wèn)題旁趟，并添加出現(xiàn)問(wèn)題時(shí)的環(huán)境和復(fù)現(xiàn)步驟。
參與開(kāi)發(fā)
我們非常樂(lè)意接受各位的優(yōu)質(zhì) PR锡搜，但在此之前我希望您了解 iui Design 是一個(gè)需要兼容多個(gè)平臺(tái)的組件庫(kù)。 所以希望在您修復(fù) bug 并提交之前盡可能的去這些平臺(tái)測(cè)試一下兼容性凡傅。最好能攜帶測(cè)試截圖以方便審核。非常感謝像捶！
Github
如果你喜歡 iui Design桩砰，歡迎給我們點(diǎn)一個(gè) ? Star
