Blazor 스위치

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

    Blazor Switch Example

    EXAMPLE
    MODULES
    RAZOR
    CSS

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

    Usage

    핵심적으로 IgbSwitch 구성 요소는 켜기/끄기 상태 간 전환을 허용합니다. 기본 스타일은 머티리얼 디자인 지침의 선택 제어 사양에 따라 수행됩니다.

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

    // in Program.cs file
    
    builder.Services.AddIgniteUIBlazor(typeof(IgbSwitchModule));
    razor

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

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

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

    Examples

    Label

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

    <IgbSwitch>Label</IgbSwitch>
    razor

    스위치의 LabelPosition 속성을 설정하여 스위치 토글 앞 또는 뒤에 레이블을 배치해야 하는지 지정할 수 있습니다. 허용되는 값은 beforeafter 입니다(기본값):

    <IgbSwitch LabelPosition="@CheckboxBaseLabelPosition.Before">Label</IgbSwitch>
    razor

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

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

    EXAMPLE
    MODULES
    RAZOR
    CSS

    Checked

    checked 속성을 사용하여 스위치를 켤 수 있습니다.

    <IgbSwitch Checked="true" />
    razor

    EXAMPLE
    MODULES
    RAZOR
    CSS

    Required

    required 속성을 사용하여 스위치를 필수로 표시할 수 있습니다.

    <IgbSwitch Required="true" />
    razor

    Invalid

    invalid 속성을 사용하여 스위치를 잘못된 것으로 표시할 수 있습니다.

    <IgbSwitch Invalid="true" />
    razor

    Disabled

    disabled 속성을 사용하여 스위치를 비활성화할 수 있습니다.

    <IgbSwitch Disabled="true" />
    razor

    EXAMPLE
    MODULES
    RAZOR
    CSS

    Forms

    switch를 함께 사용할 때 and 속성을 사용할 name 수 있습니다 Form. value

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

    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);
    }
    css

    EXAMPLE

    API References

    Additional Resources