Component Examples

Trang này demo các Svelte components đã được copy từ claw project.

Counter Component

Component cơ bản với state management (không hoạt động trong MDX độc lập):

<script>
  let count = 0;
</script>

<button on:click={() => count++}>
  Count is: {count}
</button>

Alert Component

Hiển thị thông báo với các variant khác nhau:

Thành công

Thao tác đã được thực hiện thành công!

Glass Card Component

Card với hiệu ứng glassmorphism:

Glass Card Example
Đây là nội dung bên trong glass card. Component này có hiệu ứng glassmorphism với backdrop blur.

Glass Button Component

Button với style glass:

Glass Button

<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-ghost">Ghost</button>

Cách sử dụng

---
title: Bài viết của tôi
description: Mô tả bài viết
---

import Alert from '../../../components/svelte/Alert.svelte';

# Tiêu đề

:::tip[Lưu ý]
Nội dung thông báo ở đây
:::

Lưu ý quan trọng

Luôn thêm client:load hoặc client:only cho Svelte components
Các components đã được style với CSS từ claw project
Xem thêm tài liệu trong file ADD-SVELTE-TO-ASTRO.md