@luxeanor/ui

简体中文

English

简体中文

English

安装 ​

环境要求 ​

  • Vue ^3.5
  • 现代浏览器（组件使用原生 CSS 变量与 :has() 之外的通用特性，无 IE 支持）

安装包 ​

bash
npm i @luxeanor/ui
bash
pnpm add @luxeanor/ui

包体仅约 30 kB（ESM + 完整类型声明 + 三层 CSS），唯一运行时依赖为浮层定位引擎 @floating-ui/dom。

引入样式 ​

样式分三层，按需引入（顺序重要，tokens 必须最先）：

ts
// main.ts
import '@luxeanor/ui/styles/tokens.css'   // ① 设计令牌（必须）
import '@luxeanor/ui/styles/reset.css'    // ② 基础 reset（可选；文档型站点如 VitePress 勿引，会与站点排版打架）
import '@luxeanor/ui/styles/effects.css'  // ③ 效果层（可选：入场/玻璃/纹理等）
import '@luxeanor/ui/style.css'           // ④ 组件样式（必须）

挂载主题属性 ​

组件颜色由 <html> 上的两个属性决定（缺省会落回默认家族 amethyst 浅色）：

html
<html data-theme="amethyst" data-mode="light">
  • data-theme：配色家族 amethyst（紫）/ obsidian（金）/ ink（蓝）/ emerald（绿）
  • data-mode：明暗档 light / dark

固定主题的站点写死属性即可；需要运行时切换见主题定制。

Nuxt ​

吃 npm 产物无需任何额外配置。若在 monorepo 内以 workspace:* 引用源码，需要转译：

ts
// nuxt.config.ts
export default defineNuxtConfig({
  build: { transpile: ['@luxeanor/ui'] },
})

下一步：快速上手