Divider (区分線)

    Divider コンポーネントは、コンテンツを水平方向または垂直方向に分離し、リストなどのセクションに視覚的にグループ化するために使用される、目立たない微妙な線です。Divider は、コンテンツをより迅速に理解するのに役立ちます。これは、レイアウト要素を空白だけで十分に分離できないシナリオで非常にうまく機能します。Divider は、Ignite UI for Angular Divider コンポーネントと視覚的に同じです。

    Divider のデモ

    方向

    Divider は、次の 2 つの方向をサポートしています: コンテンツ レイアウトに基づいて使用する水平および垂直方向。水平方向の Divider はコンテンツを垂直方向に分離するために使用され、垂直方向の Divider はコンテンツを水平方向に分離するために使用されます。

    タイプ

    Divider には、実線と破線の 2 つのタイプがあります。Figma では、右側のサイドバーの 「Design」 タブの下にある Type プロパティから、簡単に切り替えることができます。

    スタイル設定

    Divider は、線の色を変更することでスタイルを設定できます。

    使用方法

    Divider は、不要なノイズや蓄積が発生しないように、レイアウトでは慎重に使用する必要があります。グループ化するコンテンツとセクションに応じて長さを調整できます。たとえば、レイアウトの長さ全体にまたがる仕切りや、レイアウトの中央に配置され、一部のレイアウト要素と整列する仕切りなどです。

    良い例 悪い例

    その他のリソース

    関連トピック:

    コミュニティに参加して新しいアイデアをご提案ください。