Web Components Divider

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

    Web Components Divider Example

    Dependencies

    먼저 다음 명령을 실행하여 Ignite UI for Web Components npm 패키지를 설치해야 합니다.

    npm install igniteui-webcomponents

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

defineComponents(IgcDividerComponent);

    Ignite UI for Web Components 에 대한 전체 소개는 시작 항목을 참조하세요.

    ​IgcDividerComponent 이미지, 이니셜 또는 아이콘을 포함한 기타 콘텐츠를 표시할 수 있습니다. 선언하는 것은 다음과 같이 간단합니다. IgcDividerComponent​

    <igc-divider></igc-divider>

    Usage

    Vertical Divider

    ​vertical 속성이 설정되면 구분선의 방향이 가로에서 세로로 변경됩니다.

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

    Type

    이 type 속성은 구분 solid 선을 렌더링할지 아니면 구분선을 렌더링할지를 dashed 결정합니다. 기본값은 다음과 같습니다 solid.

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

    Inset Divider

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

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

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

    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>

    CSS Variables

    Inset

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

    Color

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

    API References

    Additional Resources