Web Components Divider (デバイダー)

Ignite UI for Web Components Divider を使用すると、コンテンツ作成者はコンテンツ間の区切りとして水平/垂直の罫線を簡単に作成し、ページ上の情報を整理しやすくなります。

Web Components Divider の例

依存関係

まず、次のコマンドを実行して、Ignite UI for Web Components npm パッケージをインストールする必要があります:

npm install igniteui-webcomponents

import { defineComponents, IgcDividerComponent } from 'igniteui-webcomponents';

defineComponents(IgcDividerComponent);

Ignite UI for Web Components の完全な概要については、作業の開始トピックを参照してください。

IgcDividerComponent は、画像、イニシャル、またはアイコンを含むその他のコンテンツを表示できます。IgcDividerComponent の宣言は次のように簡単です:

<igc-divider></igc-divider>

使用方法

垂直デバイダー

vertical 属性が設定されている場合、デバイダーの方向は水平から垂直に変更されます。

<igc-divider vertical></igc-divider>

タイプ

type 属性は、solid のデバイダー線を描画するか、dashed のデバイダー線を描画するかを決定します。デフォルト値は solid です。

<igc-divider type="dashed"></igc-divider>

デバイダーのインセット

IgcDividerComponent は両側に設定できます。デバイダーをインセットする (inset) には、--inset css 変数と組み合わせて middle 属性を true に設定します。これにより、両側のデバイダーが縮小されます。middle 属性のデフォルト値は false です。

/* DividerStyles.css */
.withInset{
    --inset: 100px;
    --color:red;
}

// Both side
<igc-divider middle="true" class="withInset"></igc-divider>
// Left side only 
<igc-divider></igc-divider>

Select コンポーネント内での Divider の使用

次のサンプルは、2 つの項目グループを区別するために、IgcSelectComponent 内に IgcDividerComponent を統合する方法を示しています。

<igc-select>
  <igc-select-item>Item 1</igc-select-item>
  <igc-select-item>Item 2</igc-select-item>
  <igc-divider></igc-divider>
  <igc-select-item>Item 3</igc-select-item>
</igc-select>

CSS 変数

Inset

--inset css 変数は、開始から指定された量だけデバイダーを縮小します。middle が設定されている場合は、両側から縮小されます。

Color

--color css 変数はデバイダーの色を設定します。

API リファレンス

IgcDividerComponent