Blazor 스위치

    Ignite UI for Blazor는 iOS의 스위치 구성 요소와 비슷하게 동작하는 이진 선택 구성 요소입니다.

    Blazor Switch Example

    Usage

    At its core, the IgbSwitch component allows for toggling between on/off states. The default styling is done according to the selection controls specification in the Material Design guidelines.

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

    // in Program.cs file

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

    스타일링을 컴포넌트에 적용하려면 추가 CSS 파일을 연결해야 합니다IgbSwitch. 다음 내용은 Blazor Web Assembly 프로젝트의 wwwroot/index.html 파일 또는 Blazor Server 프로젝트의 Pages/_Host.cshtml 파일에 포함되어야 합니다:

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

    <IgbSwitch />

    [!WARNING] The IgbSwitch component doesn't work with the standard <form> element. Use Form instead.

    Examples

    Label

    스위치에 의미 있는 레이블을 제공하려면 여는 태그와 닫는 태그 사이에 텍스트를 배치하면 됩니다.

    <IgbSwitch>Label</IgbSwitch>

    You can specify if the label should be positioned before or after the switch toggle by setting the LabelPosition attribute of the switch. Allowed values are before and after(default):

    <IgbSwitch LabelPosition="@ToggleLabelPosition.Before">Label</IgbSwitch>

    스위치는 스위치 외부의 요소로 라벨을 붙일 수도 있습니다. 이 경우 사용자는 필요에 따라 라벨의 위치와 스타일을 지정할 수 있는 모든 권한을 갖게 됩니다.

    <span id="switch-label>Label</span>
<IgbSwitch AriaLabelledBy="switch-label" />

    Checked

    You can use the checked attribute to toggle on the switch.

    <IgbSwitch Checked="true" />

    Required

    You can use the required attribute to mark the switch as required.

    <IgbSwitch Required="true" />

    Invalid

    You can use the invalid attribute to mark the switch as invalid.

    <IgbSwitch Invalid="true" />

    Disabled

    You can use the disabled attribute to disable the switch.

    <IgbSwitch Disabled="true" />

    Forms

    You can use the name and value attributes when using the switch with Form.

    <IgbSwitch Name="wifi" Value="enabled" />

    Styling

    이 컴포넌트는IgbSwitch 스타일링을 완전히 제어할 수 있도록 여러 CSS 파트를 노출합니다:

    이름 설명
    base 스위치의 기본 래퍼입니다.
    control switch 입력 요소입니다.
    thumb 스위치의 위치 표시기입니다.
    label 스위치 레이블입니다. 
    igc-switch::part(thumb) {
  background-color: var(--ig-success-500);
  box-shadow: none;
}

igc-switch::part(thumb checked) {
  background-color: var(--ig-gray-50);
}

igc-switch::part(control checked) {
  background-color: var(--ig-success-500);
}

    API References

    Additional Resources