Blazor 스위치
Ignite UI for Blazor 구성 요소는 iOS의 스위치 구성 요소와 유사하게 작동하는 바이너리 선택 선택 구성 요소입니다.
Blazor Switch Example
Usage
핵심적으로 IgbSwitch
구성 요소는 켜기/끄기 상태 간 전환을 허용합니다. 기본 스타일은 머티리얼 디자인 지침의 선택 제어 사양에 따라 수행됩니다.
IgbSwitch
사용하기 전에 다음과 같이 등록해야 합니다.
// in Program.cs file
builder.Services.AddIgniteUIBlazor(typeof(IgbSwitchModule));
또한 IgbSwitch
구성 요소에 스타일을 적용하려면 추가 CSS 파일을 연결해야 합니다. 다음은 Blazor 웹 어셈블리 프로젝트의 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. UseForm
instead.
Examples
Label
스위치에 의미 있는 레이블을 제공하려면 여는 태그와 닫는 태그 사이에 텍스트를 배치하면 됩니다.
<IgbSwitch>Label</IgbSwitch>
스위치의 LabelPosition
속성을 설정하여 스위치 토글 앞 또는 뒤에 레이블을 배치해야 하는지 지정할 수 있습니다. 허용되는 값은 before
과 after
입니다(기본값):
<IgbSwitch LabelPosition="@CheckboxBaseLabelPosition.Before">Label</IgbSwitch>
스위치는 스위치 외부의 요소로 라벨을 붙일 수도 있습니다. 이 경우 사용자는 필요에 따라 라벨의 위치와 스타일을 지정할 수 있는 모든 권한을 갖게 됩니다.
<span id="switch-label>Label</span>
<IgbSwitch AriaLabelledBy="switch-label" />
Checked
checked
속성을 사용하여 스위치를 켤 수 있습니다.
<IgbSwitch Checked="true" />
Required
required
속성을 사용하여 스위치를 필수로 표시할 수 있습니다.
<IgbSwitch Required="true" />
Invalid
invalid
속성을 사용하여 스위치를 잘못된 것으로 표시할 수 있습니다.
<IgbSwitch Invalid="true" />
Disabled
disabled
속성을 사용하여 스위치를 비활성화할 수 있습니다.
<IgbSwitch Disabled="true" />
Forms
switch를 함께 사용할 때 and 속성을 사용할 name
수 있습니다 Form
. value
<IgbSwitch Name="wifi" Value="enabled" />
Styling
스위치 구성 요소는 여러 CSS 부분(base
, control
, thumb
및 label
)을 노출하여 스타일을 완벽하게 제어할 수 있습니다.
igc-switch::part(control) {
background: beige;
border-radius: 0;
}
igc-switch::part(thumb) {
background: olive;
border-radius: 2px;
box-shadow: none;
}
API References
Form
LabelPosition
IgbSwitch