当前位置:网站首页 > 技术博客 > 正文

angular移动端ui框架



iui Design 是一款基于 的前端组件库,它提供了一套可复用、易扩展、低耦合的移动端 UI 组件库,帮助开发者快速搭建移动应用。

设计灵感来自 ArcoDesign,感谢巨人!

请使用微信扫码查看

npm

iui Design 遵循 Apache-2.0 开源协议,意味着您无需支付任何费用,也无需授权,即可将 iui Design 应用到您的产品中。

使用前,请确保你已经学习过 的使用,你可以阅读 uni-app 文档。

组件库

方式一:通过 npm 安装

方式二:通过 HBuilderX 导入

如果您是使用 HbuilderX 开发的用户,您可以在 插件市场通过 的形式进行安装。

下载地址

Scss 插件

依赖 ,您必须要安装此插件,否则无法正常运行。

  • 如果您使用的是 HbuilderX,您可以在 中搜索 进行安装。
  • 如果您的项目是由 vue-cli 创建的,请通过以下命令安装对 sass(scss)的支持,如果已安装,请略过。

引入样式

在 中引入 的样式。

在 中引入 的主题样式和变量。

引入组件

支持 模式,您可以在 中与 同级位置添加 配置,然后无需引入即可使用组件

感谢你使用 iui Design

以下是关于向 iui Design 提交反馈或代码的指南。在向 iui Design 提交 issue 或者 PR 之前,请先花几分钟时间阅读以下内容。

提交 issue

  • 遇到问题时,请先确认这个问题是否已经在 issue 中有记录或者已被修复。
  • 提 issue 时,请用简短的语言描述遇到的问题,并添加出现问题时的环境和复现步骤。

参与开发

我们非常乐意接受各位的优质 PR,但在此之前我希望您了解 iui Design 是一个需要兼容多个平台的组件库。 所以希望在您修复 bug 并提交之前尽可能的去这些平台测试一下兼容性。最好能携带测试截图以方便审核。非常感谢!

如果你喜欢 iui Design,欢迎给我们点一个 ⭐ Star

跟随系统暗色模式

uni-app 文档:DarkMode 适配

  1. 在根目录创建 ,并配置颜色变量。

完成定义后,可在 中全局配置或页面配置的相关属性中以 开头引用:

  1. 在 中配置 为

完成以上配置后,即可在微信小程序和 H5 中实现跟随系统暗色模式。

手动切换暗色模式

iui Design 使用 CSS 变量 来构建的暗黑主题。组件内部内置了两套色板,一套默认的亮色,另外一套是根据主题色自动生成的暗色色板。

组件库默认提供了一套蓝色主题,用户可以根据自己的需求定制新主题,以满足业务和品牌上的多样化需求。

如果你想更改主题色,你只需要更改 、、、 这几个变量的值即可,算法会自动帮你生成 1 号到 9 号的颜色。并且会自动生成暗色下反转后的 1 号到 9 号颜色。

本质上我们采用了 CSS Custom properties,所以不兼容 IE 浏览器。

版权声明


相关文章:

  • 多目标优化怎么求解2025-06-02 18:01:02
  • ddos攻击工具有哪些2025-06-02 18:01:02
  • c++ string转int2025-06-02 18:01:02
  • java内存结构和jvm内存结构2025-06-02 18:01:02
  • jdk js引擎2025-06-02 18:01:02
  • 线程安全的api2025-06-02 18:01:02
  • 源码免费分享网2025-06-02 18:01:02
  • 密码学基础入门2025-06-02 18:01:02
  • 程序员入门课程2025-06-02 18:01:02
  • rbac权限管理设计五张表2025-06-02 18:01:02