Blazor Divider (デバイダー)
Ignite UI for Blazor Divider を使用すると、コンテンツ作成者はコンテンツ間の区切りとして水平/垂直の罫線を簡単に作成し、ページ上の情報を整理しやすくなります。
Blazor Divider の例
依存関係
IgbDivider を使用する前に、次のように登録する必要があります:
// in Program.cs file
builder.Services.AddIgniteUIBlazor(typeof(IgbDividerModule));
スタイルを IgbDivider コンポーネントに適用するには、追加の CSS ファイルをリンクする必要もあります。以下は、Blazor Web Assembly プロジェクトの wwwroot/index.html ファイルまたは Blazor Server プロジェクトの Pages/_Host.cshtml ファイルに配置する必要があります:
<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
Ignite UI for Blazor の完全な概要については、作業の開始トピックを参照してください。
IgbDivider は、画像、イニシャル、またはアイコンを含むその他のコンテンツを表示できます。IgbDivider の宣言は次のように簡単です:
<IgbDivider></IgbDivider>
使用方法
垂直デバイダー
Vertical 属性が設定されている場合、デバイダーの方向は水平から垂直に変更されます。
<igrDivider Vertical></igrDivider>
タイプ
Type 属性は、solid のデバイダー線を描画するか、dashed のデバイダー線を描画するかを決定します。デフォルト値は solid です。
<IgbDivider Type="dashed"></igrDivider>
デバイダーのインセット
IgbDivider は両側に設定できます。デバイダーをインセットする (inset) には、--inset css 変数と組み合わせて Middle 属性を true に設定します。これにより、両側のデバイダーが縮小されます。Middle 属性のデフォルト値は false です。
/* DividerStyles.css */
.withInset{
--inset: 100px;
--color:red;
}
// Both side
<IgbDivider Middle="True" class="withInset"</igrDivider>
// Left side only
<IgbDivider class="withInset"</igrDivider>
Select コンポーネント内での Divider の使用
次のサンプルは、2 つの項目グループを区別するために、IgbSelect 内に IgbDivider を統合する方法を示しています。
<IgbSelect>
<IgbSelectItem>Item 1</IgbSelectItem>
<IgbSelectItem>Item 2</IgbSelectItem>
<IgbDivider></IgbDivider>
<IgbSelectItem>Item 2</IgbSelectItem>
</IgbSelect>
CSS 変数
Inset
--inset css 変数は、開始から指定された量だけデバイダーを縮小します。middle が設定されている場合は、両側から縮小されます。
Color
--color css 変数はデバイダーの色を設定します。