一个适用于 LCUI 应用程序的 UI 组件库
浏览 LCDesign 的文档 »
(English/中文)
LCDesign (LC's Design) 是一个专为 LCUI 设计的 UI 组件库,它提供了用于文本排版和常用元素的基本样式、简单的布局系统、CSS 组件和实用工具。它的 CSS 代码基于 Bootstrap,其用法和 Bootstrap 大致一样,但需要注意的是,受限于 LCUI 现有特性以及对 CSS 标准的支持程度,并未完全实现 Boostrap 中的功能。
注意: 这不是 web 前端组件库,你无法用网络浏览器体验它的效果,正确的做法是下载源代码、构建、然后运行 demo 程序。
有以下方式可以选择:
克隆并运行 lcui/lc-design-app 示例应用以快速预览 LC Design 的示例效果
# 克隆这个仓库
git clone https://github.com/lc-ui/lc-design-app
# 进入仓库
cd lc-design-app
# 安装 NodeJS 依赖包
npm install
# 安装适用于 x64 CPU 架构的 C/C++ 依赖库
lcpkg install --arch x64
# 以调试模式运行应用程序
lcpkg run start --mode debug
用 lcpkg 安装
# 按照默认选项来安装
lcpkg install github.com/lc-ui/lc-design
# 如果你需要适用于 x64 CPU 架构的版本
lcpkg install github.com/lc-ui/lc-design --arch x64
# 如果你需要适用于 Windows 通用应用平台(UWP) 的版本
lcpkg install github.com/lc-ui/lc-design --arch x64 --platform uwp
如果你使用的不是 Windows 系统,请继续阅读下面的内容。
LCDesign 目前没有适用于 Linux 二进制包,你需要手动下载源码并构建它。
构建 LCDesign 需要如下的依赖项:
在安装完它们后,你需要运行以下命令来安装相关依赖包:
pip install misaka pygments
npm install
npm run build # 构建所有目标
npm run build-bin # 构建 LCUI.css 的二进制文件,包括静态库(.lib/.a)或动态库(.dll/.so)
npm run build-css # 构建 CSS 文件,这些文件由 src/scss/ 中的文件编译而成
npm run build-font # 构建图标字体文件,图标来自 Material Design Icons
npm run build-demo # 构建演示程序,主要功能是呈现文档
npm run build-demo-assets # 构建演示程序的资源文件,包括 CSS 文件和文档
npm run build-demo-bin # 构建演示程序的二进制文件
npm run build-demo-css # 构建演示程序的 CSS 文件,这些文件由 demo/src/scss/ 中的文件编译而成
npm run build-demo-docs # 构建演示程序的文档
npm run demo # 运行演示程序
从 dist 目录中复制文件到你的项目目录,然后配置你的项目资源包含路径。
我们建议你使用如下的目录结构,这样你就能直接从 dist/assets/ 目录中复制文件到 yourapp/app/ 目录。
yourapp/
├── app/
│ ├── assets/
│ │ ├── stylesheets/
│ │ │ ├── app.css
│ │ │ └── lcui.css
│ │ ├── views/
│ │ │ ├── app.xml
│ │ │ └── ...
│ │ ├── fonts/
│ │ │ └── iconfont.ttf
│ │ ├── images/
│ │ └── ...
│ └── ...
├── src/
│ ├── scss/
│ ├── lib/
│ ├── ui/
│ └── ...
└── ...
Liu Chao:
代码基于 MIT 许可协议 发布。
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。
1. 开源生态
2. 协作、人、软件
3. 评估模型