Separator

Separatorは、コンテンツを分ける際に使用するコンポーネントです。

プロパティ

Separatorは、以下のプロパティをサポートしています。

名前 型 デフォルト値 説明
direction string horizontal 線の方向を指定します。horizontal, vertical のいずれかを選択できます。

インストールの手順

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

atoms/Separator.svelte 
        <!--
@component
## 概要
- セクション間の区切り線（セパレーター）を表示するためのコンポーネントです

## 機能
- directionに応じて、横または縦の区切り線を表示します

## Props
- direction: 方向を指定すると、それに合わせたスタイルが適用されます

## Usage
```svelte
<Separator direction="horizontal" />
<Separator direction="vertical" />
```
-->

<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 separatorVariants = cva('bg-base-stroke-default', {
    variants: {
      /** セパレーターの方向 */
      direction: {
        horizontal: ['w-full h-px'],
        vertical: ['w-px h-full'],
      },
    },
    defaultVariants: {
      direction: 'horizontal',
    },
  });

  export type SeparatorVariants = VariantProps<typeof separatorVariants>;

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

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

  let separatorVariantClass = $derived(separatorVariants({ direction, class: className }));
</script>

<div class={separatorVariantClass}></div>

使い方

サンプル

Horizontal

水平方向に区切る線です。

Vertical

垂直方向に区切る線です。