React Divider

    Ignite UI for React 구분기는 콘텐츠 작성자가 페이지 내 정보를 더 잘 정리하기 위해 콘텐츠 사이에 수평/수직 규칙을 쉽게 만들 수 있게 해줍니다.

    React Divider Example

    Dependencies

    먼저, 다음 명령을 실행하여 Ignite UI for React 설치해야 합니다.

    npm install igniteui-react

    그 다음에는 필요한 CSS를 가져오IgrDivider 고, 그 모듈을 등록해야 합니다. 다음과 같습니다:

    import { IgrDividerModule, IgrDivider } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrDividerModule.register();

    Ignite UI for React에 대한 완전한 소개는 '시작 주제'를 읽어보세요.

    ​IgrDivider이미지, 이니셜 또는 아이콘 등 모든 콘텐츠를 표시할 수 있습니다. anIgrDivider 선언은 다음과 같이 간단합니다:

    <IgrDivider></IgrDivider>

    Usage

    Vertical Divider

    속성이vertical 설정되면 디바이더의 방향이 수평에서 수직으로 바뀝니다.

    <IgrDivider vertical></IgrDivider>

    Type

    속성은type 렌더링 라인을 렌더링solid 할지 나dashed 누기 라인을 렌더링할지 결정합니다. 기본 값은 다음과 같습니다solid.

    <IgrDivider type="dashed"></IgrDivider>

    Inset Divider

    ​IgrDivider양쪽 모두 삽입할 수 있습니다. 디바이더에 대해inset 속성을 true로 설정middle 하고 css 변수를--inset 조합하세요. 이렇게 하면 양쪽 경계선이 줄어들게 됩니다. 속성의middle 기본 값은 false입니다.

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

    // Both side
<IgrDivider middle="true" className="withInset"></IgrDivider>
// Left side only
<IgrDivider  className="withInset"></IgrDivider>

    Using Divider Inside Select Component

    다음 예시는 두IgrDivider 가지 항목 그룹을 구분하기 위해 어떻게 통합IgrSelect 할 수 있는지 보여줍니다.

    <IgrSelect>
  <IgrSelectItem><span>Item 1</span></IgrSelectItem>
  <IgrSelectItem><span>Item 2</span></IgrSelectItem>
  <IgrDivider></IgrDivider>
  <IgrSelectItem><span>Item 2</span></IgrSelectItem>
</IgrSelect>

    CSS Variables

    Inset

    CSS 변수는--inset 처음부터 주어진 양만큼 분할자를 축소합니다. 가운데가 맞춰져 있으면 양쪽에서 수축합니다.

    Color

    css 변수는--color 디바이더의 색상을 설정합니다.

    API References

    Additional Resources