Web Components Divider

Ignite UI for Web Components Divider를 사용하면 컨텐츠 작성자가 페이지의 정보를 더 잘 구성하기 위해 컨텐츠 사이의 구분으로 수평/세로 규칙을 쉽게 만들 수 있습니다.

Web Components Divider Example

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

Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.

Dependencies

먼저 다음 명령을 실행하여 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

Usage

Vertical Divider

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

이 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

Inset Divider

이 IgcDividerComponent 양쪽에 설정할 수 있습니다. 받는 사람 inset 디바이더는 middle 속성을 true와 함께 사용합니다.--inset css 변수. 이렇게 하면 양쪽에서 구분선이 축소됩니다. 의 기본값 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

Using Divider Inside Select Component

다음 샘플에서는 두 개의 항목 그룹을 구분하기 위해 를 IgcDividerComponent 통합 IgcSelectComponent 하는 방법을 보여 줍니다.

<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

CSS Variables

Inset

--inset css 변수는 처음부터 주어진 양만큼 구분선을 축소합니다. 중간을 설정하면 양쪽에서 축소됩니다.

Color

--color css 변수는 구분선의 색상을 설정합니다.

API References

IgcDividerComponent

Web Components Divider