Separator

1 本の区切り線。

内容を分ける線です。orientation="vertical" にするときは、親に高さが要ります。

export const client = "only";

import { Separator } from "@squadbase/vantage/ui";

export default function Example() {
  return (
    <div className="w-80">
      <div className="text-sm font-medium">売上サマリー</div>
      <p className="text-sm text-muted-foreground">直近 30 日の集計です。</p>
      <Separator className="my-4" />
      <div className="flex h-5 items-center gap-3 text-sm">
        <span>CSV</span>
        <Separator orientation="vertical" />
        <span>JSON</span>
        <Separator orientation="vertical" />
        <span>Parquet</span>
      </div>
    </div>
  );
}

import { Separator } from "@squadbase/vantage/ui";

PropType

orientation?"horizontal" | "vertical"

線の向き。

Type"horizontal" | "vertical"

Default"horizontal"

装飾目的の線なので、支援技術には読み上げられません。