Lets - Web Components 组件库

基于 Lit 和 Storybook 的 Web Components 组件库，集成 color-palette 配色方案。

安装

npm install @ffhope/lets

开发

启动 Storybook：

npm run dev

访问 http://localhost:6006 查看组件文档。

构建

构建 Storybook：

npm run build

构建组件库：

npm run build:lib

组件

• Button - 按钮组件
• Input - 输入框组件
• Card - 卡片组件
• Badge - 徽章组件

主题配色

组件库支持 12 种预设主题配色方案：

• cyan (青色科技)
• purple (紫色幻境)
• pink (粉色霓虹)
• green (绿色能量)
• blue (蓝色深海)
• orange (橙色烈焰)
• red (红色激情)
• gold (金色奢华)
• cyberpunk (赛博朋克)
• silver (银色极简)
• teal (青绿自然)
• amber (琥珀暖阳)

在 Storybook 中可以通过工具栏切换主题。

使用

在 HTML 中使用

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="node_modules/@ffhope/lets/styles/themes.css">
  <link rel="stylesheet" href="node_modules/@ffhope/lets/styles/base.css">
</head>
<body data-theme="cyan">
  <ui-button variant="primary">按钮</ui-button>
  <ui-input label="邮箱" type="email" placeholder="[email protected]"></ui-input>
  <ui-card title="标题" subtitle="副标题">
    <p>内容</p>
  </ui-card>
  <ui-badge variant="primary">徽章</ui-badge>
  
  <script type="module">
    import 'lets';
  </script>
</body>
</html>

在 JavaScript/TypeScript 中使用

import '@ffhope/lets/styles/themes.css';
import '@ffhope/lets/styles/base.css';
import { UIButton, UIInput, UICard, UIBadge } from '@ffhope/lets';

技术栈

• Lit - Web Components 框架
• Storybook - 组件文档工具
• TypeScript - 类型支持
• Vite - 构建工具