LCDesign 介绍

一个适用于 LCUI 应用程序的 UI 组件库

介绍

LCDesign (LC's Design) 是一个专为 LCUI 设计的 UI 组件库，它提供了用于文本排版和常用元素的基本样式、简单的布局系统、CSS 组件和实用工具。它的 CSS 代码基于 Bootstrap，其用法和 Bootstrap 大致一样，但需要注意的是，受限于 LCUI 现有特性以及对 CSS 标准的支持程度，并未完全实现 Boostrap 中的功能。

注意： 这不是 web 前端组件库，你无法用网络浏览器体验它的效果，正确的做法是下载源代码、构建、然后运行 demo 程序。

组件

• General 通用
  • Button 按钮
  • Icon 图标
  • Typography 排版
    • h1, h2, h3, h4, h5, h6
    • p
    • span
    • blockquote
    • cite
    • ...
• Navigation 导航
  • Dropdown 下拉菜单
• Data Entry 数据录入
  • Checkbox 多选框
  • Radio 单选框
  • Rate 评分
  • Switch 开关
• Data Display 数据展示
  • Tooltip 提示
• Feedback 反馈
  • Alert 警告提示
  • Modal 对话框
  • Message 全局提示
  • Notification 通知提醒框
  • Spinner 加载中

快速开始

有以下方式可以选择:

• 克隆并运行 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 需要如下的依赖项：

• XMake - 一个构建工具，用于编译 C 源代码
• NodeJS - 一个 JavaScript 运行时环境，用于运行 JavaScript 写的构建工具
• Python - 一个环境，用于运行 Python 写的构建工具

在安装完它们后，你需要运行以下命令来安装相关依赖包：

    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/
│   └── ...
└── ...

设计参考

• Bootstrap
• Ant Design
• Element UI