svelte-components-v4
Advanced tools
一个基于 Svelte 4 构建的现代化组件库，提供丰富的 UI 组件和优秀的开发体验。采用源码分发策略，确保最佳性能和开发体验。
npm install svelte-components-v4
<script>
import { Button, Card, Input } from 'svelte-components-v4';
</script>
<!-- 直接在模板中使用组件 -->
<Button text="Click me" variant="primary" />
<Card variant="elevated" hoverable>
<h3>Hello World</h3>
<p>这是一个卡片组件的内容</p>
</Card>
<Input label="Username" placeholder="Enter your username" />
<!DOCTYPE html>
<html>
<head>
<title>使用 Svelte 组件库</title>
</head>
<body>
<div id="app"></div>
<script type="module">
import { Button, Card } from 'svelte-components-v4';
// 创建按钮
const button = new Button({
target: document.getElementById('app'),
props: {
text: 'Click me',
variant: 'primary'
}
});
// 创建卡片
const card = new Card({
target: document.getElementById('app'),
props: {
variant: 'elevated',
hoverable: true
}
});
</script>
</body>
</html>
一个现代化的按钮组件，支持多种变体、尺寸和状态。
<script>
import { Button } from 'svelte-components-v4';
</script>
<!-- 基础用法 -->
<Button text="Click me" />
<!-- 不同变体 -->
<Button text="Primary" variant="primary" />
<Button text="Secondary" variant="secondary" />
<Button text="Success" variant="success" />
<Button text="Danger" variant="danger" />
<!-- 不同尺寸 -->
<Button text="Small" size="small" />
<Button text="Medium" size="medium" />
<Button text="Large" size="large" />
<!-- 状态 -->
<Button text="Loading" loading />
<Button text="Disabled" disabled />
<Button text="Block" block />
Props:
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
text | string | '' | 按钮显示的文本 |
variant | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'primary' | 按钮变体 |
size | 'small' | 'medium' | 'large' | 'medium' | 按钮尺寸 |
disabled | boolean | false | 是否禁用 |
loading | boolean | false | 是否显示加载状态 |
block | boolean | false | 是否占满容器宽度 |
一个灵活的卡片组件，支持多种样式变体和交互效果。
<script>
import { Card } from 'svelte-components-v4';
</script>
<!-- 基础用法 -->
<Card>
<h3>Card Title</h3>
<p>Card content goes here</p>
</Card>
<!-- 不同变体 -->
<Card variant="elevated">
<h3>Elevated Card</h3>
<p>This card has elevation</p>
</Card>
<Card variant="outlined">
<h3>Outlined Card</h3>
<p>This card has an outline</p>
</Card>
<!-- 交互效果 -->
<Card hoverable clickable>
<h3>Interactive Card</h3>
<p>Hover and click effects enabled</p>
</Card>
Props:
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
variant | 'default' | 'elevated' | 'outlined' | 'default' | 卡片变体 |
padding | 'small' | 'medium' | 'large' | 'none' | 'medium' | 内边距大小 |
hoverable | boolean | false | 是否显示悬停效果 |
clickable | boolean | false | 是否可点击 |
一个功能丰富的输入框组件，支持标签、占位符和验证。
<script>
import { Input } from 'svelte-components-v4';
</script>
<!-- 基础用法 -->
<Input placeholder="Enter text..." />
<!-- 带标签 -->
<Input label="Username" placeholder="Enter your username" />
<!-- 不同尺寸 -->
<Input size="small" placeholder="Small input" />
<Input size="large" placeholder="Large input" />
<!-- 状态 -->
<Input disabled placeholder="Disabled input" />
<Input error="This field is required" placeholder="Input with error" />
Props:
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
label | string | '' | 输入框标签 |
placeholder | string | '' | 占位符文本 |
value | string | '' | 输入值 |
disabled | boolean | false | 是否禁用 |
error | string | '' | 错误信息 |
size | 'small' | 'medium' | 'large' | 'medium' | 输入框尺寸 |
克隆项目
git clone <repository-url>
cd svelte-components-v4
安装依赖
npm install
启动开发服务器
npm run dev
启动 Storybook
npm run storybook
# 开发相关
npm run dev # 启动开发服务器
npm run storybook # 启动 Storybook 开发服务器
npm run build-storybook # 构建 Storybook 静态文件
# 构建相关
npm run build # 构建应用
npm run localbuild # 本地构建应用（无内存限制）
npm run build-analyze # 构建并分析包大小
# 代码质量
npm run check # 运行 Svelte 类型检查
本组件库采用 源码分发 策略：
.svelte 源码文件更新版本号
npm version patch # 或 minor, major
直接发布
npm publish
{
"name": "svelte-components-v4",
"version": "1.5.0",
"main": "src/lib/index.js",
"module": "src/lib/index.js",
"svelte": "src/lib/index.js",
"exports": {
"./package.json": {
"types": "./package.json",
"svelte": "./package.json"
},
".": {
"types": "./src/lib/index.js",
"svelte": "./src/lib/index.js",
"default": "./src/lib/index.js"
}
},
"files": [
"src",
"README.md"
],
"peerDependencies": {
"svelte": "^4.0.0"
}
}
<script>
import { Button, Card, Input } from 'svelte-components-v4';
let username = '';
let showCard = false;
function handleClick() {
showCard = !showCard;
}
</script>
<Input
bind:value={username}
label="Username"
placeholder="Enter your username"
/>
<Button
text="Toggle Card"
variant="primary"
on:click={handleClick}
/>
{#if showCard}
<Card variant="elevated" hoverable>
<h3>Hello, {username}!</h3>
<p>Welcome to our application.</p>
</Card>
{/if}
组件库使用 CSS 变量，便于主题定制：
:root {
--primary-color: #667eea;
--secondary-color: #764ba2;
--success-color: #10b981;
--danger-color: #ef4444;
--warning-color: #f59e0b;
--info-color: #3b82f6;
}
我们欢迎社区贡献！请遵循以下步骤：
git checkout -b feature/AmazingFeature)git commit -m 'Add some AmazingFeature')git push origin feature/AmazingFeature)本项目基于 MIT 许可证开源 - 查看 LICENSE 文件了解详情。
如果你遇到任何问题或有建议，请：
Happy Coding! 🚀
FAQs
A modern Svelte component library with beautiful UI components
The npm package svelte-components-v4 receives a total of 3 weekly downloads. As such, svelte-components-v4 popularity was classified as not popular.
We found that svelte-components-v4 demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket MCP now lets AI assistants review org alerts, investigate threats using the Socket threat feed, and inspect package files in addition to dependency scoring.
Product
Socket Firewall blocks malicious VS Code and Open VSX extensions before install, protecting developers from compromised editor marketplaces.
Research
More than 140 Mastra npm packages were compromised in a supply chain attack that used a typosquatted dependency to deliver a cross-platform infostealer during installation.