快速开始

UI 库依赖一个清理级的工具库 ph-utils

使用

安装

npm install litos-ui

引入

import { Button, regist, ... } from "litos-ui";

// 注册为 Web Components, 注册后, 可以通过 `<l-button></l-button>` 使用
regist(Button);

推荐在入口文件引入并注册

所有的组件有一个前缀 l-, 例如 Button 组件的标签为 <l-button></l-button>; 可以通过一下两种方式修改:

1. 通过 config 方法配置前缀; 通过这种方法更改所有的组件的前缀
2. 通过 regist 时, 传入第二个参数, 为组件配置自定义的标签名; 通过这种方法更改单个组件的标签名

import { Button, regist, config } from "litos-ui";

// 1. 通过 config 方法配置全局前缀
config({ prefix: "lt" }); // 组件的使用变为: <lt-button></lt-button>

// 2. 通过 regist 手动指定名称
regist(Button, "lu-button"); // 组件的使用变为: <lu-button></lu-button>

如果需要使用 Message，但是不想手动引入 css，可以通过 vite-autoimport 自动引入

安装 unplugin-auto-import unplugin-vue-components litosui-unplugin-resolver

npm install unplugin-auto-import unplugin-vue-components litosui-unplugin-resolver

在 vite.config.ts 中配置

import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import LitosUiResolver from "litosui-unplugin-resolver";

export default defineConfig({
  ...
  plugins: [
    AutoImport({
      resolvers: [LitosUiResolver()],
      dts: "src/auto-imports.d.ts"
    }),
    Components({
      resolvers: [LitosUiResolver()]
    })
  ]
})

全局变量

组件库的样式全部使用 CSS 变量控制，为了让样式可控变得简单化，所以需要手动引入全局变量文件；在入口文件，如 main.ts 中引入:

import "litos-ui/styles/vars.css";

内容如下：

:root {
  /* button、input 元素高度 */
  --l-form-control-height: 32px;
  /** 禁用状态颜色 */
  --l-disabled-color: #e6e6e6;
  /* 主题(primary)颜色 */
  --l-primary-color: #722ed1;
  --l-primary-color-light1: #9254de;
  --l-primary-color-light2: #b37feb;
  --l-primary-color-light3: #d3adf7;
  --l-primary-color-light4: #efdbff;
  --l-primary-color-light5: #f9f0ff;
  --l-primary-color-dark1: #531dab;
  --l-primary-color-dark2: #391085;
  /* 表示错误(error)的颜色 */
  --l-error-color: #f5222d;
  --l-error-color-light3: #ffa39e;
  --l-error-color-light5: #fff1f0;
  /* 表示成功(success)的颜色 */
  --l-success-color: #52c41a;
  --l-success-color-light1: #73d13d;
  --l-success-color-light2: #95de64;
  --l-success-color-light3: #b7eb8f;
  --l-success-color-light4: #d9f7be;
  --l-success-color-light5: #f6ffed;
  --l-success-color-dark1: #389e0d;
  /* 表示警告(warn)的颜色 */
  --l-warn-color: #f90;
  /* 表示信息(info)的颜色 */
  --l-info-color: #999;
  --l-info-color-light9: #f5f5f5;
  /* 边框颜色 */
  --l-border-color: #dedede;
  --l-border-radius: 3px;
}
html.dark {
  --l-disabled-color: #262727;
}