Angular Divider (デバイダー) コンポーネントの概要

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

Angular Divider の例

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

EXAMPLE

MODULES

TS

HTML

SCSS

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { IgxDividerModule } from "igniteui-angular";
import { DividerDefaultComponent } from "./default/divider-default.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	DividerDefaultComponent
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxDividerModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { Component } from '@angular/core';

@Component({
    selector: 'app-divider-default',
    styleUrls: ['./divider-default.component.scss'],
    templateUrl: './divider-default.component.html'
})
export class DividerDefaultComponent {

    constructor() {
    }

}
tsコピー

<div class="divider-sample">
  <div>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, culpa delectus eius fuga ipsa iste laborum nemo, numquam omnis perferendis soluta sunt. Animi asperiores aspernatur assumenda doloribus eligendi officiis veritatis.</p>
      <igx-divider></igx-divider>
      <p class="mt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, culpa delectus eius fuga ipsa iste laborum nemo, numquam omnis perferendis soluta sunt. Animi asperiores aspernatur assumenda doloribus eligendi officiis veritatis.</p>
  </div>
</div>
htmlコピー

.divider-sample {
    display: flex;
    padding: 20px;
    border: 1px solid #ededed;
    p {
        margin-top: 0;
    }
    .mt {
        margin-top: 20px;
    }
}
scssコピー

Edit in: CodesandboxStackBlitz

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

60 以上のコンポーネント、柔軟な API、強力なテーマ設定およびブランディング機能、必要な速度と機能を備えた Angular アプリケーションを構築するための豊富な機能セット。

無料で試してみる

Ignite UI for Angular Divider を使用した作業の開始

Ignite UI for Angular Divider コンポーネントを使用した作業を開始するには、Ignite UI for Angular をインストールする必要があります。既存の Angular アプリケーションで、以下のコマンドを入力します。

ng add igniteui-angular
cmd

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 {}
typescript

あるいは、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 {}
typescript

Ignite UI for Angular Divider モジュールまたはディレクティブをインポートしたので、igx-divider コンポーネントの使用を開始できます。

Angular Divider の使用

垂直デバイダー

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

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

EXAMPLE

MODULES

TS

HTML

SCSS

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { IgxDividerModule } from "igniteui-angular";
import { DividerVerticalComponent } from "./vertical/divider-vertical.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	DividerVerticalComponent
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxDividerModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { Component } from '@angular/core';

@Component({
    selector: 'app-divider-vertical',
    styleUrls: ['./divider-vertical.component.scss'],
    templateUrl: './divider-vertical.component.html'
})
export class DividerVerticalComponent {

    constructor() {
    }

}
tsコピー

<div class="divider-sample">
    <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At facere fugit in libero nisi pariatur quo reiciendis sequi tempore vitae! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, culpa delectus eius fuga ipsa iste laborum nemo, numquam omnis perferendis soluta sunt. Animi asperiores aspernatur assumenda doloribus eligendi officiis veritatis.</p>
    </div>
    <igx-divider [vertical]="true"></igx-divider>
    <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At facere fugit in libero nisi pariatur quo reiciendis sequi tempore vitae! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, culpa delectus eius fuga ipsa iste laborum nemo, numquam omnis perferendis soluta sunt. Animi asperiores aspernatur assumenda doloribus eligendi officiis veritatis.</p>
    </div>
</div>
htmlコピー

.divider-sample {
    display: flex;
    padding: 20px;
    border: 1px solid #ededed;
    > div {
        margin-left: 20px;
        text-align: left;
        &:first-of-type {
            text-align: right;
            margin-left: 0;
            margin-right: 20px;
        }
    }
    p {
        margin: 0;
    }
    .mt {
        margin-top: 20px;
    }
}
scssコピー

Edit in: CodesandboxStackBlitz

破線の仕切り

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

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

EXAMPLE

MODULES

TS

HTML

SCSS

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { IgxDividerModule } from "igniteui-angular";
import { DividerDashedComponent } from "./dashed/divider-dashed.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	DividerDashedComponent
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxDividerModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { Component } from '@angular/core';

@Component({
    selector: 'app-divider-dashed',
    styleUrls: ['./divider-dashed.component.scss'],
    templateUrl: './divider-dashed.component.html'
})
export class DividerDashedComponent {

    constructor() {
    }

}
tsコピー

<div class="divider-sample">
    <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, culpa delectus eius fuga ipsa iste laborum nemo, numquam omnis perferendis soluta sunt. Animi asperiores aspernatur assumenda doloribus eligendi officiis veritatis.</p>
        <igx-divider type="dashed"></igx-divider>
        <p class="mt mb">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, culpa delectus eius fuga ipsa iste laborum nemo, numquam omnis perferendis soluta sunt. Animi asperiores aspernatur assumenda doloribus eligendi officiis veritatis.</p>
    </div>
</div>
htmlコピー

.divider-sample {
    display: flex;
    padding: 20px;
    border: 1px solid #ededed;
    p {
        margin-top: 0;
    }
    .mt {
        margin-top: 16px;
    }
    .mb {
        margin-bottom: 0;
    }
}
scssコピー

Edit in: CodesandboxStackBlitz

インセット デバイダー

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

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

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

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

html

EXAMPLE

MODULES

TS

HTML

SCSS

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { IgxDividerModule } from "igniteui-angular";
import { DividerInsetComponent } from "./inset/divider-inset.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	DividerInsetComponent
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxDividerModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { Component } from '@angular/core';

@Component({
    selector: 'app-divider-inset',
    styleUrls: ['./divider-inset.component.scss'],
    templateUrl: './divider-inset.component.html'
})
export class DividerInsetComponent {

    constructor() {
    }

}
tsコピー

<div class="divider-sample">
    <div>
        <h4 class="mb">Both sides inset.</h4>
        <igx-divider [middle]="true" inset="100px"></igx-divider>
        <p class="mt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad alias at consectetur dolor magnam maiores nihil quasi quod repudiandae similique.  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, culpa delectus eius fuga ipsa iste laborum nemo, numquam omnis perferendis soluta sunt. Animi asperiores aspernatur assumenda doloribus eligendi.</p>
    </div>
    <div>
        <h4 class="mb">Left side only(default).</h4>
        <igx-divider inset="40px"></igx-divider>
        <p class="mt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad alias at consectetur dolor magnam maiores nihil quasi quod repudiandae similique.  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, culpa delectus eius fuga ipsa iste laborum nemo, numquam omnis perferendis soluta sunt. Animi asperiores aspernatur assumenda doloribus eligendi.</p>
    </div>
</div>
htmlコピー

.divider-sample {
    display: flex;
    padding: 20px;
    border: 1px solid #ededed;
    > div {
        margin-left: 40px;
        &:first-of-type {
            margin-left: 0;
            margin-right: 0;
        }
    }
    h4 {
        margin-top: 0;
    }
    p {
        margin-top: 0;
    }
    .mt {
        margin-top: 16px;
        margin-bottom: 0;
    }
    .mb {
        margin-bottom: 16px;
    }
}

.inset-sample {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.divider-indent-text {
    padding-left: 40px;
}
scssコピー

Edit in: CodesandboxStackBlitz

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

API リファレンス

• IgxDividerDirective
• IgxDividerDirective スタイル

その他のリソース

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

• Ignite UI for Angular フォーラム (英語)
• Ignite UI for Angular GitHub (英語)