Angular Divider (デバイダー) コンポーネントの概要
デバイダー コンポーネントは、コンテンツを水平と垂直の両方向に分割できます。
Angular Divider の例
デフォルトでは、デバイダーは水平の実線です。
Ignite UI for Angular Divider を使用した作業の開始
Ignite UI for Angular Divider コンポーネントを使用した作業を開始するには、Ignite UI for Angular をインストールする必要があります。既存の Angular アプリケーションで、以下のコマンドを入力します。
ng add igniteui-angular
Ignite UI for Angular については、「はじめに」トピックをご覧ください。
次に、app.module.ts ファイルに IgxDividerModule をインポートします。
// app.module.ts
...
import { IgxDividerModule } from 'igniteui-angular';
// import { IgxDividerModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
...
imports: [..., IgxDividerModule],
...
})
export class AppModule {}
あるいは、16.0.0 以降、IgxDividerDirective をスタンドアロンの依存関係としてインポートできます。
// home.component.ts
import { IgxDividerDirective } from 'igniteui-angular';
// import { IgxDividerDirective } from '@infragistics/igniteui-angular'; for licensed package
@Component({
selector: 'app-home',
template: '<igx-divider></igx-divider>',
styleUrls: ['home.component.scss'],
standalone: true,
imports: [IgxDividerDirective]
})
export class HomeComponent {}
Ignite UI for Angular Divider モジュールまたはディレクティブをインポートしたので、igx-divider コンポーネントの使用を開始できます。
Angular Divider の使用
垂直デバイダー
vertical 属性を追加してその値を true に設定することで、デバイダーの方向を水平から垂直に変更できます。
<igx-divider [vertical]="true"></igx-divider>
破線の仕切り
デバイダーのデフォルト スタイルは solid ですが、dashed も使用できます。
デフォルトの外観を変更するには、デバイダーの 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 リファレンス
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。
GitHub