Svelte 用户界面
一个Svelte组件库,拥有TypeScript支持和材质设计启发的造型.
QQ 预览发布: 此库在预览中 。 API在稳定1.0放出前可能会有变化.
特征
- 设计灵感组件
- ARIA 支持和键盘导航
- 移动设备触控优化
- 暗模式和高对比模式支持
- 包含类型脚本定义
- 可树动的ES模块
- 由 Svelte 5 个 API 创建
安装
npm install @14ch/svelte-ui
# or
pnpm install @14ch/svelte-ui
# or
yarn add @14ch/svelte-ui
设置
1. 导入样式
组件从 --svelte-ui-* CSS变量,所以设计符号必须被加载.
对于一个应用,导入一切(建议):
// Icon fonts + design tokens + app-wide base rules
import '@14ch/svelte-ui/styles';
对于将svelte-ui组件嵌入到其他应用程序的软件包,只导入组件需要的东西,所以不会漏入主机页面:
// Design tokens only: CSS variables on :where(:root) and the dark/high-contrast switches.
// No external requests, no rules on elements.
import '@14ch/svelte-ui/styles/tokens';
// Material Symbols fonts (loaded from Google Fonts).
// Needed only when components render an icon: Icon, IconButton, Fab, the `icon` props,
// and built-in icons such as clear buttons, popup arrows, pickers and PopupMenu check marks.
import '@14ch/svelte-ui/styles/icons';
部件与 styles/tokens 独自一人,如满地 styles。完全导入还对整个页面适用这些基本规则: box-sizing: border-box 每个元素的重置 button, (中文(简体) ), color: inherit 页:1 dialog, (中文(简体) ), font-weight: normal 页:1 label,自动填充背景修正 input,则 .sr-only 课.
可选额外( Sass 源; 您的建设需要) sass:
import '@14ch/svelte-ui/styles/optional/fonts.scss'; // Roboto, Noto Sans JP, YakuHanJP
import '@14ch/svelte-ui/styles/optional/reset.scss'; // CSS reset
2. 基本用途
<script>
import { Button, Input, Dialog } from '@14ch/svelte-ui';
let dialogRef;
let inputValue = $state('');
</script>
<Input bind:value={inputValue} placeholder="Enter your name" />
<Button onclick={() => dialogRef.open()}>Open Dialog</Button>
<Dialog bind:this={dialogRef} title="Greeting">
<p>Hello {inputValue}!</p>
<p>Welcome to Svelte UI Component Library.</p>
{#snippet footer()}
<Button onclick={() => dialogRef.close()}>Close</Button>
{/snippet}
</Dialog>
可用组件
窗体组件
Button- 各种按钮样式和状态Input- 有验证支持的文本输入Textarea- 多行文字输入Checkbox- 带有自定义样式的复选框CheckboxGroup- 多个复选框选择组Radio- 无线电按钮组RadioGroup- 无线电按钮组包装器Select- 下拉选择Combobox- 可搜索的下降Slider- 范围滑动器输入Switch- 切换开关ColorPicker- 颜色选择输入Datepicker- 带有日历的日期选择FileUploader- 拖放文件上传( D)ImageUploader- 有预览的图像上传
布局导航( N)
Tab编号 :TabItem- 标签导航Pagination- 页面导航
模块
Dialog- 模块对话框ConfirmDialog- 确认对话框Drawer- 边抽屉
弹出菜单( M)
Popup- 填充内容PopupMenu编号 :PopupMenuButton- 上下文菜单
通知和反馈
Snackbar编号 :SnackbarItem- 敬酒通知LoadingSpinner- 装入指标
斯凯勒通装入器
Skeleton- 用预设模式加载占位符
图标按钮( B)
Icon- 材料符号图标IconButton- 基于图标的按钮Fab- 浮动动作按钮
构成部分实例
按钮变量
<script>
import { Button } from '@14ch/svelte-ui';
</script>
<!-- Different variants -->
<Button variant="filled">Filled Button</Button>
<Button variant="outlined">Outlined Button</Button>
<Button variant="text">Text Button</Button>
<!-- With icons -->
<Button icon="add">Add Item</Button>
<!-- Different sizes -->
<Button size="small">Small</Button>
<Button size="medium">Medium</Button>
<Button size="large">Large</Button>
<!-- States -->
<Button disabled>Disabled</Button>
<Button loading>Loading...</Button>
表格验证
<script>
import { Input, Checkbox, Button } from '@14ch/svelte-ui';
let email = $state('');
let password = $state('');
let agreed = $state(false);
const handleSubmit = () => {
if (!email || !password || !agreed) {
alert('Please fill all fields');
return;
}
// Handle form submission
};
</script>
<Input bind:value={email} type="email" placeholder="Email" required />
<Input bind:value={password} type="password" placeholder="Password" required />
<Checkbox bind:value={agreed}>I agree to the terms and conditions</Checkbox>
<Button onclick={handleSubmit} disabled={!agreed}>Sign Up</Button>
复选框和无线电组
<script>
import { CheckboxGroup, RadioGroup } from '@14ch/svelte-ui';
const options = [
{ label: 'Option 1', value: 'opt1' },
{ label: 'Option 2', value: 'opt2' },
{ label: 'Option 3', value: 'opt3' }
];
let selectedCheckboxes = $state([]);
let selectedRadio = $state(null);
</script>
<CheckboxGroup bind:value={selectedCheckboxes} {options} direction="vertical" gap="16px" />
<RadioGroup bind:value={selectedRadio} {options} direction="horizontal" gap="24px" />
斯凯勒通装入器
<script>
import { Skeleton, SkeletonBox, SkeletonText, SkeletonAvatar } from '@14ch/svelte-ui';
</script>
<!-- Using preset patterns -->
<Skeleton patterns={[{ type: 'article-list' }]} repeat={3} />
<Skeleton patterns={[{ type: 'product-list' }]} repeat={4} />
<!-- Using individual components for custom layouts -->
<div>
<SkeletonAvatar showName={true} />
<SkeletonBox width="100%" height="200px" />
<SkeletonText lines={3} />
</div>
带有确认的对话框
<script>
import { Button, ConfirmDialog } from '@14ch/svelte-ui';
let confirmDialogRef;
const handleDelete = () => {
confirmDialogRef.open();
};
const onConfirm = () => {
// Delete logic here
console.log('Item deleted');
confirmDialogRef.close();
};
</script>
<Button variant="outlined" onclick={handleDelete}>Delete Item</Button>
<ConfirmDialog
bind:this={confirmDialogRef}
title="Confirm Delete"
message="Are you sure you want to delete this item? This action cannot be undone."
onconfirm={onConfirm}
oncancel={() => confirmDialogRef.close()}
/>
黑暗主题
通过设置应用暗模式 data-theme 属性 :
<script>
import { Button } from '@14ch/svelte-ui';
import { onMount } from 'svelte';
let theme = $state('light');
const toggleTheme = () => {
theme = theme === 'light' ? 'dark' : 'light';
document.body.setAttribute('data-theme', theme);
};
onMount(() => {
document.body.setAttribute('data-theme', theme);
});
</script>
<Button onclick={toggleTheme}>Toggle Theme</Button>
您也可以对特定区域应用暗模式 :
<div data-theme="dark">
<!-- This section and its children will use dark mode -->
<Button>Dark Mode Button</Button>
</div>
自定义
CSS 自定义属性
库使用 CSS 自定义属性来方便主题:
:root {
--svelte-ui-primary-color: #1976d2;
--svelte-ui-surface-color: #ffffff;
--svelte-ui-text-color: #1f1f1f;
--svelte-ui-border-radius: 8px;
/* ... and many more */
}
自定义暗模式颜色
您可以通过压倒性的 CSS 变量自定义暗模式颜色 :
[data-theme='dark'] {
--svelte-ui-primary-color: #90caf9;
--svelte-ui-surface-color: #121212;
--svelte-ui-text-color: #ffffff;
/* ... customize other colors as needed */
}
类型脚本支持
所有组件都带有完整的类型脚本定义:
import type { MenuItem } from '@14ch/svelte-ui';
const menuItems: MenuItem[] = [
{ title: 'Home', href: '/' },
{ title: 'About', href: '/about' },
{ title: 'Contact', href: '/contact' }
];
无障碍
该图书馆的建设考虑到了无障碍性:
- ARIA 属性
- 键盘导航支持
- 屏幕阅读器通知
- 重点管理
- 高对比度模式支持
浏览器支持
- 克罗梅/第88号+
- Firefox 78+ (英语)
- 萨法里14+
许可证
麻省理工学院的执照 - 看 自由主义 详细文件.
更改日志
页:1
- 改进 Tab 项目徘徊行为:用指示栏不透明变化替换背景颜色
- Tab 项目现在显示选中的文本颜色和指示栏, 以获取更好的视觉反馈
- 中断更改:已替换
variant道具为inline在 Combobox、 Datepicker 和选择组件中的道具
页:1
- 使用按钮、 Fab、 Tab 项目、 复选框和 Radio 组件改进文本垂直对齐
text-box-trim - 文本标签现在在其容器内显示的视线更集中
页:1
(前出释注
页:1
- 初步释放
- 40+ 组件 (按钮, 输入, 对话框, Skeleton 加载器等)
- 复选框组和无线电组
- 带有预设模式的 Skeleton 组件
- 设计灵感造型
- 类型脚本支持
- ARIA 键盘导航、屏幕阅读器支持
- 高对比度模式支持
- Svelte 5 函数 API