セパレータ

コンテンツを視覚的または意味的に区切ります。

Radix プリミティブ

オープンソースのUIコンポーネントライブラリ。

ブログ

ドキュメント

ソース

<script setup lang="ts">
import { Separator } from 'radix-vue'
</script>

<template>
  <div class="w-full max-w-[300px] mx-[15px]">
    <div class="text-white text-[15px] leading-5 font-semibold">
      Radix Primitives
    </div>
    <div class="text-white text-[15px] leading-5">
      An open-source UI component library.
    </div>
    <Separator
      class="bg-[#d7cff9] data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px my-[15px]"
    />
    <div class="flex h-5 items-center">
      <div class="text-white text-[15px] leading-5">
        Blog
      </div>
      <Separator
        class="bg-[#d7cff9] data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px mx-[15px]"
        decorative
        orientation="vertical"
      />
      <div class="text-white text-[15px] leading-5">
        Docs
      </div>
      <Separator
        class="bg-[#d7cff9] data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px mx-[15px]"
        decorative
        orientation="vertical"
      />
      <div class="text-white text-[15px] leading-5">
        Source
      </div>
    </div>
  </div>
</template>

機能

• 水平方向と垂直方向をサポートします。

インストール

コマンドラインからコンポーネントをインストールします。

$ npm add radix-vue

構造

すべてのパーツをインポートして組み立てます。

<script setup>
import { Separator } from 'radix-vue'
</script>

<template>
  <Separator />
</template>

APIリファレンス

ルート

セパレータ。

プロパティ	デフォルト	型
as	'div'	AsTag | コンポーネント このコンポーネントがレンダリングされる要素またはコンポーネント。 asChild で上書きできます
asChild		boolean レンダリングされるデフォルトの要素を子として渡された要素に変更し、それらのプロパティと動作をマージします。 詳細については、コンポジションガイドをお読みください。
装飾的		boolean コンポーネントが純粋に装飾的なものであるかどうか。 true の場合、レンダリングされた要素がアクセシビリティツリーから削除されるように、アクセシビリティ関連の属性が更新されます。
方向	'horizontal'	'vertical' | 'horizontal' コンポーネントの方向。 vertical または horizontal のいずれか。デフォルトは horizontal です。

データ属性	値
[data-orientation]	"vertical" | "horizontal"

アクセシビリティ

separator ロールの要件に準拠しています。