Angular 스위치 구성 요소 개요
Ignite UI for Angular는 iOS의 스위치 구성 요소와 비슷하게 동작하는 이진 선택 구성 요소입니다.
Angular Switch Example
Getting Started with Ignite UI for Angular Switch
Ignite UI for Angular Switch 구성 요소를 시작하려면 먼저 Ignite UI for Angular 설치해야 합니다. 기존 Angular 애플리케이션에서 다음 명령을 입력합니다.
ng add igniteui-angular
Ignite UI for Angular에 대한 전체 소개는 시작 항목을 참조하십시오.
다음 단계는 다음 단계를 가져오는 것입니다.IgxSwitchModule 당신의 app.module.ts 파일.
// app.module.ts
...
import { IgxSwitchModule } from 'igniteui-angular/switch';
// import { IgxSwitchModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
...
imports: [..., IgxSwitchModule],
...
})
export class AppModule {}
또는16.0.0 독립 실행형 의존성으로 가져올IgxSwitchComponent 수도 있습니다.
// home.component.ts
import { IgxSwitchComponent } from 'igniteui-angular/switch';
// import { IgxSwitchComponent } from '@infragistics/igniteui-angular'; for licensed package
@Component({
selector: 'app-home',
template: ` <igx-switch [checked]="true"> Simple switch </igx-switch> `,
styleUrls: ['home.component.scss'],
standalone: true,
imports: [IgxSwitchComponent],
})
export class HomeComponent {}
이제 Ignite UI for Angular 스위치 모듈이나 컴포넌트를 가져왔으니, 컴포넌트를igx-switch 사용할 수 있습니다.
Using the Angular Switch
핵심적으로 스위치 구성 요소는 켜기/끄기 상태 간 전환을 허용합니다. 기본 스타일은 머티리얼 디자인 지침의 선택 제어 사양에 따라 수행됩니다.
데모에 있는 것과 같은 간단한 스위치를 얻으려면 구성요소 템플릿 내에 다음 코드를 추가하세요.
<igx-switch [checked]="true"> Simple switch </igx-switch>
Switch properties
위 코드를 개선해 스위치 속성을 일부 데이터에 바인딩해 봅시다. 예를 들어, 각 객체에 두 개의 속성 -nameandstate를 가진 여러 Settings 객체가 있다고 가정해봅시다. 스위치 컴포넌checked 트 속성을 기본 객체 상태 속성에 바인딩할 수 있습니다. 비유적으로, 값 속성을 name에 묶을 수 있습니다.
// toggle.component.ts
...
public settings = [
{ name: 'WiFi', state: false},
{ name: 'Bluetooth', state: true},
{ name: 'Device visibility', state: false}
];
각 설정에 대한 스위치를 추가한 다음 해당 속성을 바인딩하여 구성 요소 템플릿을 향상합니다.
<!--toggle.component.html-->
<igx-switch *ngFor="let setting of settings" [checked]="setting.state">
{{ setting.name }}
</igx-switch>
몇 가지 스타일을 추가하세요.
:host {
display: flex;
flex-flow: column nowrap;
padding: 16px;
}
igx-switch {
margin-top: 24px;
}
최종 결과는 다음과 같아야 합니다.
Label Positioning
스위치의labelPosition 속성을 이용해 라벨을 위치시킬 수 있습니다:
<igx-switch labelPosition="before"></igx-switch>
만약 가labelPosition 설정되어 있지 않으면, 라벨은 스위치 뒤에 위치하게 됩니다.
스타일링
Switch Theme Property Map
기본 속성을 수정하면 모든 관련 종속 속성이 자동으로 업데이트되어 변경 내용이 반영됩니다.
| 기본 속성 | 종속 속성 | 설명 |
|---|---|---|
$track색 어긋나 |
$thumb색 어긋나 | 스위치가 꺼져 있을 때 엄지 색 |
| $track-장애-컬러 | 스위치가 비활성화되었을 때 트랙 색상 | |
$thumb색 어긋나 |
$track색 어긋나 | 스위치가 꺼져 있을 때의 트랙 색상 |
| $thumb-장애-컬러 | 스위치가 비활성화되었을 때 엄지 색상 | |
$track 온 컬러 |
$thumb색 | 스위치가 켜져 있을 때 엄지 색깔 |
| $track 호버 컬러 | 스위치가 켜지고 떠돌았을 때의 트랙 색상 | |
| $track 장애 색상 | 스위치가 켜지고 비활성화된 상태에서 선로 색상 | |
$thumb색 |
$track 온 컬러 | 스위치가 켜져 있을 때 선로 색상 |
| $thumb 장애 색상 | 스위치가 켜져 있고 비활성화되었을 때 엄지 색깔 |
| 기본 속성 | 종속 속성 | 설명 |
|---|---|---|
$thumb색 어긋나 |
$border색 | 엄지손가락 오프 색상에서 파생된 테두리 색상 |
| $thumb-호버-컬러 | 호버 시 엄지 색상 | |
$border색 |
$thumb색 어긋나 | 테두리 색상에서 유래한 엄지 중지 색상 |
| $border-호버-컬러 | 호버 시 테두리 색상 | |
| $border-장애-색상 | 비활성화 시 테두리 색상 | |
$track색 어긋나 |
$thumb색 어긋나 | 트랙 오프 색상에서 파생된 엄지 제거 색상 |
| $border-호버-컬러 | 호버 시 테두리 색상 | |
| $track-장애-컬러 | 비활성화 시 트랙 색상 | |
$track 온 컬러 |
$thumb색 | 스위치가 켜져 있을 때 엄지 색깔 |
| $thumb 장애 색상 | 스위치가 켜져 있고 비활성화된 엄지손가락 색깔 | |
| $border-온 컬러 | 스위치가 켜져 있을 때의 테두리 색상 | |
| $border 호버 컬러 | 스위치가 켜져 있고 마우스를 올렸을 때 테두리 색상 | |
| $track 호버 컬러 | 스위치가 켜지고 떠돌았을 때의 트랙 색상 | |
| $track 장애 색상 | 켜져 있고 비활성화했을 때 트랙 색상 |
| 기본 속성 | 종속 속성 | 설명 |
|---|---|---|
$thumb색 어긋나 |
$border색 | 엄지손가락 오프 색상에서 파생된 테두리 색상 |
| $thumb-호버-컬러 | 호버 시 엄지 색상 | |
$border색 |
$thumb색 어긋나 | 테두리 색상에서 유래한 엄지 중지 색상 |
| $border-호버-컬러 | 호버 시 테두리 색상 | |
| $border-장애-색상 | 비활성화 시 테두리 색상 | |
$track색 어긋나 |
$thumb색 어긋나 | 트랙 오프 색상에서 파생된 엄지 제거 색상 |
| $border-호버-컬러 | 호버 시 테두리 색상 | |
| $track-장애-컬러 | 비활성화 시 트랙 색상 | |
$track 온 컬러 |
$thumb색 | 스위치가 켜져 있을 때 엄지 색깔 |
| $thumb 장애 색상 | 스위치가 켜져 있고 비활성화된 엄지손가락 색깔 | |
| $border-온 컬러 | 스위치가 켜져 있을 때의 테두리 색상 | |
| $border 호버 컬러 | 스위치가 켜져 있고 마우스를 올렸을 때 테두리 색상 | |
| $track 호버 컬러 | 스위치가 켜지고 떠돌았을 때의 트랙 색상 | |
| $track 장애 색상 | 켜져 있고 비활성화했을 때 트랙 색상 | |
| $focus-필-컬러 | 스위치가 초점을 맞췄을 때 채우기 색상 | |
$focus-필-컬러 |
$focus-윤곽-색상 | 초점 채움에서 파생된 윤곽선 색상 |
| $focus-채우기-호버-컬러 | 마우스를 올렸을 때 초점 채우기 색상 |
| 기본 속성 | 종속 속성 | 설명 |
|---|---|---|
$thumb색 어긋나 |
$border색 | 엄지손가락 오프 색상에서 파생된 테두리 색상 |
| $thumb-호버-컬러 | 호버 시 엄지 색상 | |
$border색 |
$thumb색 어긋나 | 테두리 색상에서 유래한 엄지 중지 색상 |
| $border-호버-컬러 | 호버 시 테두리 색상 | |
| $border-장애-색상 | 비활성화 시 테두리 색상 | |
$track색 어긋나 |
$thumb색 어긋나 | 트랙 오프 색상에서 파생된 엄지 제거 색상 |
| $border-호버-컬러 | 호버 시 테두리 색상 | |
| $track-장애-컬러 | 비활성화 시 트랙 색상 | |
$track 온 컬러 |
$thumb색 | 스위치가 켜져 있을 때 엄지 색깔 |
| $thumb 장애 색상 | 스위치가 켜져 있고 비활성화된 엄지손가락 색깔 | |
| $border-온 컬러 | 스위치가 켜져 있을 때의 테두리 색상 | |
| $track 호버 컬러 | 스위치가 켜지고 떠돌았을 때의 트랙 색상 | |
| $track 장애 색상 | 켜져 있고 비활성화했을 때 트랙 색상 | |
$border-온 컬러 |
$border 호버 컬러 | 스위치가 켜져 있고 마우스를 올렸을 때 테두리 색상 |
| $focus-윤곽선-색상 집중 | 초점 초점 색상은 집중 상태를 나타내는 색상을 그려 |
스위치 스타일링을 시작하려면, 모든 테마 함수와 컴포넌트 믹싱이 있는 파일을 가져와index야 합니다:
@use "igniteui-angular/theming" as *;
// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
그다음, 두 가지 매개변수만 제공하면 와 를 확장switch-theme 하는 새로운 테마를 만들 수 있습니다.$thumb-off-color$thumb-on-color 그리고 이 두 가지 색상을 기반으로 테마가 필요한 나머지 색상을 모두 생성하므로 완전히 스타일링된 스위치를 사용할 수 있습니다. 물론 다른 매개변수를 덮어써서 맞춤형 룩을 만들 수도 있습니다:
$custom-switch-theme: switch-theme(
$thumb-off-color: #7cadd5,
$thumb-on-color: #ecaa53,
);
마지막으로 애플리케이션에 사용자 지정 테마를 포함 합니다.
@include css-vars($custom-switch-theme);
아래 샘플에서 맞춤형 CSS 변수와 함께 스위치 컴포넌트를 사용하면 디자인 시스템에서 사용되는SAP UI5 스위치와 시각적으로 유사한 디자인을 만들 수 있음을 알 수 있습니다.
Styling with Tailwind
저희의 맞춤형 Tailwind 유틸리티 클래스를 사용해 스위치를 스타일링할 수 있습니다. 먼저 Tailwind를 꼭 설정 하세요.
전역 스타일시트의 순풍 가져오기와 함께 다음과 같이 원하는 테마 유틸리티를 적용할 수 있습니다.
@import "tailwindcss";
...
@use 'igniteui-theming/tailwind/utilities/material.css';
유틸리티 파일에는 테마 변형 두 가지light가dark 모두 포함되어 있습니다.
- 라이트 테마에는 클래스를 사용
light-*하세요. - 어두운 테마에는 클래스를 사용
dark-*하세요. - 접두사 뒤에 컴포넌트 이름을 덧붙이세요,
light-switchdark-switch예: .
이 클래스들이 적용되면 동적 테마 계산이 가능합니다. 그 다음에는 생성된 CSS 변수를 무arbitrary properties 시할 수 있습니다. 콜론 다음에는 유효한 CSS 색상 형식(HEX, CSS 변수, RGB 등)을 입력하세요.
전체 속성 목록은 IgxSwitch 테마에서 확인할 수 있습니다. 문법은 다음과 같습니다:
<igx-switch
class="!light-switch ![--thumb-on-color:#FF4E00]"
[checked]="true">
...
</igx-switch>
Note
느낌표(!)는 유틸리티 클래스가 우선순위가 되도록 보장하기 위해 필요합니다. Tailwind는 레이어에 스타일을 적용하는데, 이 스타일을 중요하게 표시하지 않으면 컴포넌트의 기본 테마에 의해 덮어쓰여집니다.
마지막에 스위치는 다음과 같이 보여야 합니다:
API References
Theming Dependencies
Additional Resources
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.
GitHub