Card

Cardは、コンテンツを整理し、視覚的にグループ化するためのコンポーネントです。

インストールの手順

以下のコンポーネントのコードを、使いたいプロジェクトにコピー＆ペーストします。
パスは実際のプロジェクトの構成にあわせて更新します。

atoms/Card.svelte 
        <!--
@component
## 概要
- 情報をグループ化して表示するためのコンポーネントです

## 機能
- 枠線でグループ化して表示することができます
- 任意のコンテンツを配置できます

## Usage
```svelte
<Card>
  <p>カードの中身</p>
</Card>
```
-->

<script module lang="ts">
  import type { Snippet } from 'svelte';
  import type { ClassValue } from 'svelte/elements';
  import { cva, type VariantProps } from 'class-variance-authority';

  export const cardVariants = cva('flex flex-col gap-6 p-6 border border-base-stroke-default rounded-lg shadow-xs');

  export type CardVariants = VariantProps<typeof cardVariants>;

  export interface CardProps extends CardVariants {
    /** クラス */
    class?: ClassValue;
    children?: Snippet<[]>;
  }
</script>

<script lang="ts">
  let { class: className, children }: CardProps = $props();

  let cardVariantsClass = $derived(cardVariants({ class: className }));
</script>

<div class={cardVariantsClass}>
  {@render children?.()}
</div>

使い方

サンプル

Image

画像を使ったサンプルです。

Form

入力要素を使ったサンプルです。

List

リストを使ったサンプルです。