Blazor Divider

    Ignite UI for Blazor 구분선을 사용하면 컨텐츠 작성자가 컨텐츠 사이의 구분으로 가로/세로 규칙을 쉽게 만들어 페이지의 정보를 더 잘 구성할 수 있습니다.

    Blazor Divider Example

    Dependencies

    사용하기 IgbDivider 전에 다음과 같이 등록해야 합니다.

    // in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbDividerModule));

    또한 구성 요소에 IgbDivider 스타일을 적용하려면 추가 CSS 파일을 연결해야 합니다. 다음은 Blazor Web Assembly 프로젝트의 wwwroot/index.html 파일 또는 Blazor Server 프로젝트의 Pages/_Host.cshtml 파일에 배치해야 합니다.

    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

    Ignite UI for Blazor에 대한 전체 소개를 보려면 시작하기 항목을 읽어보세요.

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

    <IgbDivider></IgbDivider>

    Usage

    Vertical Divider

    속성이 Vertical 설정되면 구분선의 방향이 수평에서 수직으로 변경됩니다.

    <igrDivider Vertical></igrDivider>

    Type

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

    <IgbDivider Type="dashed"></igrDivider>

    Inset Divider

    이 IgbDivider 양쪽에 설정할 수 있습니다. 받는 사람 inset 구분선, Middle 속성을 true와 함께--inset css 변수. 이렇게 하면 양쪽에서 구분선이 축소됩니다. 의 기본값 Middle 속성이 false입니다.

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

    // Both side
<IgbDivider Middle="True" class="withInset"</igrDivider>
// Left side only 
<IgbDivider class="withInset"</igrDivider>

    Using Divider Inside Select Component

    다음 샘플에서는 두 항목 그룹을 구별하기 위해 을 통합 IgbSelect 하는 방법을 IgbDivider 보여 줍니다.

    <IgbSelect>
 <IgbSelectItem>Item 1</IgbSelectItem>
 <IgbSelectItem>Item 2</IgbSelectItem>
 <IgbDivider></IgbDivider>
 <IgbSelectItem>Item 2</IgbSelectItem>
</IgbSelect>

    CSS Variables

    Inset

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

    Color

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

    API References

    Additional Resources