@als-tp/als- react-ts-ui (英语)
一个全面的反光 TypeScript UI 组件库建在顶端 基础UI,提供50+可访问,自定义的组件,并配有完整的TypeScript支持,包括AI和布局原始.
特征
- 🎨 50+ 组件: UI, AI, Strapi, 和布局组件
- 💪 类型脚本第一: 完全类型安全和IntelliSense支持
- ♿ 可访问:在基地UI上建造,符合ARIA规定
- 🎭 可自定义: CSS 模块,带有CSS变量用于主题
- 📦 树能震动: 只导入您需要的东西
- 🔧 现代堆栈: 反应 19, TypeScript 6, Vite 8
安装
# npm
npm install @als-tp/als-react-ts-ui
# pnpm
pnpm add @als-tp/als-react-ts-ui
# yarn
yarn add @als-tp/als-react-ts-ui
同伴依赖关系
此库需要以下对等依赖 :
pnpm install react react-dom @base-ui/react@^1.4.0
使用量
导入样式
首先,导入 CSS 令牌和应用程序条目中所需的样式域 :
import '@als-tp/als-react-ts-ui/styles/tokens';
import '@als-tp/als-react-ts-ui/styles/components';
如果您需要完整样式表而不是域分隔 :
import '@als-tp/als-react-ts-ui/styles';
导入组件
import { ALSButton, ALSDialog, ALSInput } from '@als-tp/als-react-ts-ui';
function App() {
return (
<div>
<ALSButton variant="primary" size="md">
Click me
</ALSButton>
<ALSInput placeholder="Enter text..." />
</div>
);
}
类型脚本支持
所有组件全部输入。 TypeScript 将提供自动完成和类型检查 :
import type { ALSButtonProps } from '@als-tp/als-react-ts-ui';
const buttonProps: ALSButtonProps = {
variant: 'primary',
size: 'lg',
onClick: () => console.log('clicked')
};
可用组件
窗体组件
ALSButton- 有变体和大小的 Versatile 按钮ALSInput- 文本输入字段ALSCheckbox- 有标签的复选框ALSCheckboxGroup- 一组复选框ALSRadio- 无线电按钮ALSSwitch- 切换开关ALSSelect- 选择下拉ALSCombobox- 自动完成组合框ALSAutocomplete- 自动完成输入ALSNumberField- 数字输入ALSSlider- 射程滑动器ALSField- 表格字段包装器ALSFieldset- 窗体设置ALSForm- 表格容器
版式组件
MainLayout- 主要应用程序布局ALSSeparator- 视觉分隔器ALSScrollArea- 可滚动容器ALSTabs- 标签导航ALSToolbar- 工具箱
重叠组件
ALSDialog- 模块对话框ALSAlertDialog- 警报/确认对话ALSPopover- 溢出覆盘ALSTooltip- 工具提示ALSMenu- 下放菜单ALSContextMenu- 上下文菜单ALSMenubar- 菜单栏ALSNavigationMenu- 导航菜单
反馈组件
ALSToast- 敬酒通知ALSProgress- 进度指标ALSMeter- 计量/计量
内容 构成部分
ALSAccordion- 可扩展手风琴ALSCollapsible- 可折叠的内容ALSAvatar- 用户外观ALSPreviewCard- 预览卡
交互式组件
ALSToggle- 切换按钮ALSToggleGroup- 切换按钮组
自定义
图书馆使用 --als-* 主题的 CSS 变量 .
首先导入库符号, 然后导入您使用的样式域, 最后您的主题会覆盖 :
import '@als-tp/als-react-ts-ui/styles/tokens';
import '@als-tp/als-react-ts-ui/styles/components';
import './als-theme.css';
可用样式条目 :
@als-tp/als-react-ts-ui/styles用于完整的 CSS 捆绑@als-tp/als-react-ts-ui/styles/tokens只用于公共 CSS 变量和字体声明@als-tp/als-react-ts-ui/styles/components用于核心组件和 Strapi 样式@als-tp/als-react-ts-ui/styles/ai用于 AI 组件样式@als-tp/als-react-ts-ui/styles/layout用于布局样式
对于这个寄存器的本地演示和"故事本"外壳,全球演示的靴子生活在 src/styles/init.css。软件包消费者应当从上面导入软件包样式条目,而不是直接引用该文件.
全球主题覆盖
使用 :root 如果您想要整个应用程序使用您的主题 :
:root {
--als-color-brand: #d92d20;
--als-color-brand-strong: #b42318;
--als-color-brand-subtle: #fee4e2;
--als-color-accent: #f97316;
--als-color-accent-strong: #c2410c;
--als-color-border-focus: var(--als-color-brand);
--als-color-text-primary: #1f2937;
--als-color-text-secondary: #667085;
--als-color-surface-page: #f8fafc;
--als-color-surface-default: #ffffff;
--als-color-surface-subtle: #f1f5f9;
--als-font-family-base: "Inter", system-ui, sans-serif;
--als-font-size-base: 1rem;
--als-radius-md: 0.75rem;
}
范围主题覆盖
如果您只想要部分应用程序使用自定义主题, 请使用包装类 :
.als-theme-acme {
--als-color-brand: #0f766e;
--als-color-brand-strong: #115e59;
--als-color-brand-subtle: #ccfbf1;
}
<div className="als-theme-acme">
<ALSButton variant="primary">Save</ALSButton>
</div>
建议先覆盖的托肯斯
- 品牌 :
--als-color-brand, (中文(简体) ),--als-color-brand-strong, (中文(简体) ),--als-color-brand-subtle - 文本 :
--als-color-text-primary, (中文(简体) ),--als-color-text-secondary - 表面 :
--als-color-surface-page, (中文(简体) ),--als-color-surface-default, (中文(简体) ),--als-color-surface-subtle - 边界和重点:
--als-color-border-default, (中文(简体) ),--als-color-border-subtle, (中文(简体) ),--als-color-border-focus - 类型 :
--als-font-family-base, (中文(简体) ),--als-font-size-base - 形状和间隔 :
--als-radius-*, (中文(简体) ),--als-space-*
页:1
- 对于新的融合,倾向于
--als-*符号而不是旧的遗留变量名称. - 大多数组件使用语义符号,例如
--als-color-brand而不是原始调色板值,所以改变这些顶级的符号通常足以重命名库. - 如果您需要完整可用的符号列表,请参见 弧形/样式/托克.css。 。 。 .
发展
图书馆的建设
pnpm run build:lib
运行故事本
pnpm storybook
运行测试
pnpm test
许可证
麻省理工学院