React Divider (デバイダー)

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

React Divider の例

依存関係

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

npm install igniteui-react

次に、以下のように、IgrDivider とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります:

import { IgrDividerModule, IgrDivider } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrDividerModule.register();

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

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

<IgrDivider></IgrDivider>

使用方法

垂直デバイダー

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

<IgrDivider vertical></IgrDivider>

タイプ

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

<IgrDivider type="dashed"></IgrDivider>

デバイダーのインセット

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

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

// Both side
<IgrDivider middle="true" className="withInset"></IgrDivider>
// Left side only
<IgrDivider  className="withInset"></IgrDivider>

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

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

<IgrSelect>
  <IgrSelectItem><span>Item 1</span></IgrSelectItem>
  <IgrSelectItem><span>Item 2</span></IgrSelectItem>
  <IgrDivider></IgrDivider>
  <IgrSelectItem><span>Item 2</span></IgrSelectItem>
</IgrSelect>

CSS 変数

Inset

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

Color

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

API リファレンス

IgrDivider