Divider

デバイダ コンポーネントは、コンテンツを水平と垂直の両方向に分割できます。

Angular Divider の例

デフォルトでは、デバイダは水平の実線です。

このサンプルが気に入りましたか? 完全な Angular ツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

使用方法

<igx-divider></igx-divider>

垂直デバイダ

vertical 属性を追加してその値を true に設定することで、デバイダの方向を水平から垂直に変更できます。

<igx-divider [vertical]="true"></igx-divider>

破線の仕切り

デバイダのデフォルト スタイルは実線ですが、破線も使用できます。 デフォルトの外観を変更するには、デバイダの type 属性を使用してその値を dashed に設定します。

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

インセット デバイダ

デバイダは両側に設定できます。 デバイダを埋め込むには、デバイダの middle 属性を true に設定し、inset 値を指定することにより、デバイダが両端から縮小し始めます。

値の最後に単位 (px,rem,%...) を追加する必要があることに注意してください。単位がない場合は機能しません。

// Both side
<igx-divider [middle]="true" inset="80px"></igx-divider>

// Left side only 
<igx-divider inset="40px"></igx-divider>

middle 属性の値が誤った値に設定されている場合、または属性がそれ以外で省略されている場合は、デバイダは左側にのみ設定されます。

API リファレンス

その他のリソース

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