svelte-components

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Svelte Components

Svelte组件

Quick Start

快速开始

Component libraries: Bits UI (headless) | Ark UI | Melt UI (primitives)

Form trick: Use

form

attribute when form can't wrap inputs:

svelte

<form id="my-form" action="/submit"><!-- outside table --></form>
<table>
	<tr>
		<td><input form="my-form" name="email" /></td>
		<td><button form="my-form">Submit</button></td>
	</tr>
</table>

组件库： Bits UI（无样式基础组件）| Ark UI | Melt UI（基础原语组件）

表单技巧： 当表单无法包裹输入框时，使用

form

属性：

svelte

<form id="my-form" action="/submit"><!-- outside table --></form>
<table>
	<tr>
		<td><input form="my-form" name="email" /></td>
		<td><button form="my-form">Submit</button></td>
	</tr>
</table>

Web Components

Web组件

javascript

// svelte.config.js
export default {
	compilerOptions: {
		customElement: true,
	},
};

svelte

<!-- MyButton.svelte -->
<svelte:options customElement="my-button" />

<button><slot /></button>

javascript

// svelte.config.js
export default {
	compilerOptions: {
		customElement: true,
	},
};

svelte

<!-- MyButton.svelte -->
<svelte:options customElement="my-button" />

<button><slot /></button>

Reference Files

参考文件

component-libraries.md - Bits UI, Ark UI setup
web-components.md - Building custom elements
form-patterns.md - Advanced form handling

component-libraries.md - Bits UI、Ark UI 配置指南
web-components.md - 自定义元素构建
form-patterns.md - 高级表单处理

Notes

注意事项

Bits UI 1.0: flexible, unstyled, accessible components for Svelte
Form
```
defaultValue
```
attribute enables easy form resets
Use snippets to wrap rich HTML in custom select options
Last verified: 2025-01-14

Bits UI 1.0：为Svelte打造的灵活、无样式、可访问的组件
表单
```
defaultValue
```
属性可实现便捷的表单重置
使用代码片段在自定义选择器选项中包裹富HTML内容
最后验证时间： 2025-01-14