Skip to content
This repository has been archived by the owner on Jun 17, 2024. It is now read-only.

Latest commit

 

History

History
194 lines (149 loc) · 6.75 KB

README.zh-cn.md

File metadata and controls

194 lines (149 loc) · 6.75 KB

LCDesign

GitHub Actions Build Status License Github Release Github All Releases Repo size Code size

一个适用于 LCUI 应用程序的 UI 组件库
浏览 LCDesign 的文档 »


目录

介绍

(English/中文)

LC Design Preview

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 需要如下的依赖项:

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

设计参考

作者

Liu Chao:

许可

代码基于 MIT 许可协议 发布。