Web Components Divider (デバイダー)

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

Web Components Divider の例

import { defineComponents, IgcDividerComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcDividerComponent);

export class DividerOverview {
    constructor() {
    }
}

new DividerOverview();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Divider Overview</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v6.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample center">
        <p>First paragraph</p>
        <igc-divider></igc-divider>
        <p>Second paragraph</p>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

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

依存関係

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

npm install igniteui-webcomponents
cmd

import { defineComponents, IgcDividerComponent } from 'igniteui-webcomponents';

defineComponents(IgcDividerComponent);
ts

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

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

<igc-divider></igc-divider>
html

使用方法

垂直デバイダー

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

<igc-divider vertical></igc-divider>
html

import { defineComponents, IgcDividerComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './DividerStyling.css';

defineComponents(IgcDividerComponent);

export class SelectStyling {
    constructor() {
    }
}

new SelectStyling();
ts


<!DOCTYPE html>
<html>
  <head>
    <title>Vertical Divider</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v6.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample center">
        <div class="content">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa officiis
            suscipit veniam vitae. Ab ad, dolores iure nostrum quo ratione rerum
            sapiente ullam. Adipisci alias architecto eligendi est, expedita,
            explicabo fugiat iure laudantium minima molestiae molestias nam
            obcaecati placeat provident, quam repellendus vitae! Cupiditate eveniet,
            facere harum hic quisquam sed.
          </p>
          <igc-divider vertical></igc-divider>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa officiis
            suscipit veniam vitae. Ab ad, dolores iure nostrum quo ratione rerum
            sapiente ullam. Adipisci alias architecto eligendi est, expedita,
            explicabo fugiat iure laudantium minima molestiae molestias nam
            obcaecati placeat provident, quam repellendus vitae! Cupiditate eveniet,
            facere harum hic quisquam sed.
          </p>
        </div>
      </div> 
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

p{
    text-align: justify;
}

.content{
    display:flex;
    gap: 16px;
}css

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

タイプ

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

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

import { defineComponents, IgcDividerComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcDividerComponent);

export class SelectOverview {
    constructor() {
    }
}

new SelectOverview();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Divider Dashed</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v6.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample center">
        <p>First paragraph</p>
        <igc-divider type="dashed"></igc-divider>
        <p>Second paragraph</p>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

デバイダーのインセット

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

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

// Both side
<igc-divider middle="true" class="withInset"></igc-divider>
// Left side only 
<igc-divider></igc-divider>
html

import { defineComponents, IgcDividerComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './DividerStyling.css';

defineComponents(IgcDividerComponent);

export class SelectStyling {
    constructor() {
    }
}

new SelectStyling();
ts


<!DOCTYPE html>
<html>
  <head>
    <title>Divider With Middle Inset</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v6.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample center">
        <div class="parent">
          <div class="content">
              <h4 class="mb">Both sides inset.</h4>
              <igc-divider class="withInset" middle="true"></igc-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 class="content">
              <h4 class="mb">Left side only(default).</h4>
              <igc-divider class="withInset"></igc-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>
      </div>      
  </div> 
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

.parent{
    display: flex;
    justify-content: space-between;   
}

.content{
    width: 45%;    
    padding: 20px;
}

.withInset{
    --inset: 100px;
    --color:red;
}

h4 {
    margin-top: 0;
}
p {
    margin-top: 0;
}
.mt {
    margin-top: 16px;
    margin-bottom: 0;
}
.mb {
    margin-bottom: 16px;
}


css

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

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

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

<igc-select>
  <igc-select-item>Item 1</igc-select-item>
  <igc-select-item>Item 2</igc-select-item>
  <igc-divider></igc-divider>
  <igc-select-item>Item 3</igc-select-item>
</igc-select>
html

import { defineComponents, IgcSelectComponent, IgcSelectItemComponent, IgcInputComponent, IgcDividerComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcSelectComponent, IgcSelectItemComponent, IgcInputComponent, IgcDividerComponent);

export class SelectOverview {
    constructor() {
    }
}

new SelectOverview();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Divider Inside Select</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v6.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample center">
        <igc-select>
          <igc-select-item>Item 1</igc-select-item>
          <igc-select-item>Item 2</igc-select-item>
          <igc-divider></igc-divider>
          <igc-select-item>Item 3</igc-select-item>
        </igc-select>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

CSS 変数

Inset

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

Color

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

API リファレンス

IgcDividerComponent