acl-web 组件

本地Web组件库 升 anduin 设计系统的TypeScript.

安装

npm i @duyluonganduin/acl-web-components

设置

1. 进口部件

import '@duyluonganduin/acl-web-components'

2. 进口设计标志(所需)

令牌文件设置所有 CSS 自定义属性( S)--color-*, (中文(简体) ), --text-*等) 打开 :root。必须从您的应用根导入一次.

@import '@duyluonganduin/acl-web-components/tokens.css';

或在联署材料中:

import '@duyluonganduin/acl-web-components/tokens.css'

尾风集成

尾风 v3

添加预设以将您的 Tailwind 主题与所有设计符号相扩展 :

// tailwind.config.js
import aclPreset from '@duyluonganduin/acl-web-components/tailwind-preset'

export default {
  presets: [aclPreset],
  content: ['./src/**/*.{html,js,ts,jsx,tsx}'],
}

/* main.css */
@import '@duyluonganduin/acl-web-components/tokens.css';
@tailwind base;
@tailwind components;
@tailwind utilities;

尾风 v4

导入 CSS 主题桥而不是配置预设 :

/* main.css */
@import "tailwindcss";
@import "@duyluonganduin/acl-web-components/tokens.css";
@import "@duyluonganduin/acl-web-components/tailwind-theme.css";

没有 tailwind.config.js 需要改变.

使用基于符号的通用类

一旦设置, 您可以直接使用符号值作为 Tailwind 类 :

<p class="text-13 font-medium text-primary-4 leading-20">Heading</p>
<div class="bg-gray-1 rounded-lg shadow-2 p-16 gap-8 flex">...</div>
<span class="text-danger-4 font-semibold">Error message</span>

构成部分

在 HTML 中直接使用组件——它们工作在任何框架中,因为它们是标准自定义元素.

<anduin-button appearance="filled" variant="primary">Save</anduin-button>
<anduin-input placeholder="Search..."></anduin-input>
<anduin-spinner size="small"></anduin-spinner>

框架整合

反应 :

import '@duyluonganduin/acl-web-components'
import '@duyluonganduin/acl-web-components/tokens.css'

export default function App() {
  return (
    <div>
      <anduin-button appearance="filled" variant="primary">Click me</anduin-button>
      <anduin-input placeholder="Enter text..."></anduin-input>
    </div>
  )
}

阴:

<script setup>
import '@duyluonganduin/acl-web-components'
import '@duyluonganduin/acl-web-components/tokens.css'
</script>

<template>
  <anduin-button appearance="filled" variant="primary">Click me</anduin-button>
  <anduin-input placeholder="Enter text..."></anduin-input>
</template>

TypeScript + React — JSX 类型

货船 dist/react.d.ts 用于增加 React.JSX.IntrinsicElements 因此类型脚本接受全部 anduin-* 要素 .tsx 文件没有出错.

以两种方式之一启用它:

备选案文A—— tsconfig.json (建议,适用于整个项目):

{
  "compilerOptions": {
    "types": ["@duyluonganduin/acl-web-components/react"]
  }
}

备选案文B——参考指示 (每个文件或全局文件) .d.ts:

/// <reference types="@duyluonganduin/acl-web-components/react" />

一旦启用,所有组件道具都会被打入:

<anduin-button appearance="filled" variant="primary" disabled>
  Save
</anduin-button>

<anduin-input value={query} placeholder="Search..." status="valid"></anduin-input>

参考文献

软件包导出

发展

npm install
npm run storybook        # Component dev server → http://localhost:6006
npm run build            # Type-check + Vite build → dist/
npm run build-storybook  # Static Storybook export

堆栈

• 升 ——Web组件基础库
• 维特 ——构建工具(图书馆模式)
• 故事书 - 构成部分发展和文件编制
• 类型脚本