Angular 슬라이더 구성 요소 개요
Ignite UI for Angular 트랙을 따라 엄지 손가락을 움직여 주어진 범위에서 선택할 수 있는 양식 구성 요소입니다. 트랙은 연속 또는 계단식으로 정의할 수 있으며 사용자가 단일 값과 범위(하한 및 상한 값) 슬라이더 유형 중에서 선택할 수 있도록 슬라이더를 구성할 수 있습니다.
Angular Slider Example
Getting Started with Ignite UI for Angular Slider
Ignite UI for Angular Slider 구성 요소를 시작하려면 먼저 Ignite UI for Angular 설치해야 합니다. 기존 Angular 애플리케이션에서 다음 명령을 입력합니다.
ng add igniteui-angular
Ignite UI for Angular에 대한 전체 소개를 보려면 시작하기 항목을 읽어보세요.
다음 단계는 IgxSliderModule
당신의 app.module.ts 파일.
Warning
이 구성 요소는 HammerModule
필요. 터치 조작이 예상대로 작동하도록 응용 프로그램의 루트 모듈로 가져올 수 있습니다..
// app.module.ts
import { HammerModule } from '@angular/platform-browser';
import { IgxSliderModule } from 'igniteui-angular';
// import { IgxSliderModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
...
imports: [..., IgxSliderModule, HammerModule],
...
})
export class AppModule {}
또는 16.0.0
부터 IgxSliderComponent
독립 실행형 종속성으로 가져오거나 IGX_SLIDER_DIRECTIVES
토큰을 사용하여 구성 요소와 모든 지원 구성 요소 및 지시어를 가져올 수 있습니다.
// home.component.ts
import { FormsModule } from '@angular/forms';
import { IGX_SLIDER_DIRECTIVES } from 'igniteui-angular';
// import { IGX_SLIDER_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
@Component({
selector: 'app-home',
template: '<igx-slider [minValue]="0" [maxValue]="100" [step]="10" [(ngModel)]="task.completion"></igx-slider>',
styleUrls: ['home.component.scss'],
standalone: true,
imports: [IGX_SLIDER_DIRECTIVES, FormsModule]
/* or imports: [IgxSliderComponent, FormsModule] */
})
export class HomeComponent {
public task: Task;
}
독립 실행형 구성 요소를 HammerModule
사용하는 경우 파일로 가져와야 app.config
합니다.
//app.config.ts
import { ApplicationConfig, importProvidersFrom } from '@angular/core';
import { provideRouter } from '@angular/router';
import { appRoutes } from './app.routes';
import { HammerModule } from '@angular/platform-browser';
export const appConfig: ApplicationConfig = {
providers: [
importProvidersFrom(HammerModule),
provideRouter(appRoutes)
],
};
이제 Ignite UI for Angular 가져왔으므로 igx-slider
구성 요소 사용을 시작할 수 있습니다.
Using the Angular Slider
Discrete Slider
기본적으로 Slider 구성 요소는 Discrete 유형으로 설정됩니다. 개별 슬라이더는 숫자 레이블(거품)을 사용하여 현재 값을 시각화합니다. 슬라이더 썸에 마우스를 올리면 거품이 표시됩니다.
사전 정의된 단계가 있는 슬라이더를 사용하여 사용자에게 의미 있는 값만 추적할 수도 있습니다.
다음 예에서는 0%에서 100%까지의 값을 표시하는 개별 슬라이더를 정의하고 step
증가/감소당 10%로 설정됩니다.
또한 Angular ngModel
사용하여 "completion"이라는 구성 요소의 속성에 슬라이더 value
바인딩하여 입력 구성 요소와의 양방향 바인딩을 허용합니다.
<!--sample.component.html-->
<igx-slider [minValue]="0" [maxValue]="100" [step]="10" [(ngModel)]="task.completion"></igx-slider>
<igx-input-group type="border">
<input igxInput id="percentInput" type="number" [(ngModel)]="task.completion" />
<label igxLabel for="percentInput">Task Completion</label>
<igx-suffix>%</igx-suffix>
</igx-input-group>
// sample.component.ts
import { Component, ViewChild } from '@angular/core';
import { IgxInputDirective, IgxSliderComponent } from 'igniteui-angular';
// import { IgxInputDirective, IgxSliderComponent } from '@infragistics/igniteui-angular'; for licensed package
@Component({
selector: 'app-sample',
styleUrls: ['./sample.component.scss'],
templateUrl: './sample.component.html'
})
export class SampleComponent {
public task = {
completion: 10
};
constructor() { }
}
이제 두 구성 요소 간의 양방향 데이터 바인딩이 표시됩니다.
Continuous Slider
먼저 continuous
입력을 true로 설정하여 슬라이더 유형을 지정합니다. 다음으로 minValue
및 maxValue
사용하여 최소값과 최대값을 정의합니다.
Note
연속 슬라이더에는 트랙 위에 단계 표시기가 없으며 상호 작용 중에 표시되는 썸 레이블이 없습니다.
<!--sample.component.html-->
<igx-slider
id="slider"
[minValue]="0"
[maxValue]="100"
[continuous]=true
[(ngModel)]="volume">
</igx-slider>
<label igxLabel for="slider">Volume: {{volume}}</label>
또한 슬라이더 value
"볼륨"이라는 구성 요소의 속성에 바인딩해 보겠습니다.
// sample.component.ts
// Set an initial value
public volume = 20;
샘플이 올바르게 구성된 경우 슬라이더 썸을 드래그하면 아래 레이블이 업데이트되고 슬라이더 값은 지정된 최소값과 최대값 사이로 제한되어야 합니다.
Range Slider
먼저 슬라이더 type
RANGE
로 설정합니다. 다음으로, lower
값과 upper
값에 대한 속성을 사용하여 슬라이더 값을 개체에 바인딩합니다.
<!--sample.component.html-->
<igx-slider
[type]="sliderType.RANGE"
[minValue]="0"
[maxValue]="1000"
[(lowerValue)]="priceRange.lower"
[(upperValue)]="priceRange.upper">
</igx-slider>
<igx-input-group type="border">
<label igxLabel for="lowerRange">From</label>
<igx-prefix>$</igx-prefix>
<input igxInput id="lowerRange" type="number" [(ngModel)]="priceRange.lower" />
</igx-input-group>
<igx-input-group type="border">
<label igxLabel for="upperRange">To</label>
<igx-prefix>$</igx-prefix>
<input igxInput id="upperRange" type="number" [(ngModel)]="priceRange.upper" />
</igx-input-group>
// sample.component.ts
import { Component } from '@angular/core';
import { IgxSliderType } from 'igniteui-angular';
// import { IgxSliderType } from '@infragistics/igniteui-angular'; for licensed package
@Component({
selector: 'app-sample',
styleUrls: ['./sample.component.scss'],
templateUrl: './sample.component.html'
})
export class SampleComponent {
public sliderType = IgxSliderType;
public priceRange = {
lower: 200,
upper: 800
};
constructor() { }
}
Note
RANGE 유형의 슬라이더를 사용하는 경우 ngModel
에 대한 바인딩은 슬라이더에서 모델을 업데이트하는 방향으로만 작동합니다. 두 값 모두에 대해 양방향 바인딩을 사용하려면 lowerValue
및 upperValue
바인딩을 활용할 수 있습니다.
어떤 경우에는 최소값과 최대값에 가까운 값이 적절하지 않습니다. minValue
및 maxValue
설정과 함께 사용자 선택을 제한하기 위해 유용한 범위를 추가로 제공할 수 있습니다. 이는 lowerBound
및 upperBound
설정하여 수행할 수 있습니다. 이제 사용자는 0~100 범위와 900~1000 범위에서 엄지손가락을 움직일 수 없게 됩니다.
<!--sample.component.html-->
<igx-slider
[type]="sliderType.RANGE"
[minValue]="0"
[maxValue]="1000"
[(lowerValue)]="priceRange.lower"
[(upperValue)]="priceRange.upper"
[lowerBound]="100"
[upperBound]="900">
</igx-slider>
Labels mode
정보를 표시하기 위해 사용할 수 있는 또 다른 접근 방식이 있지만 지금까지는 엄지손가락에 있는 숫자만 보았습니다. 즉, 기본 값 배열을 사용하는 것입니다.
Note
기본 값 배열에는 두 개 이상의 값이 포함되어야 합니다. 그렇지 않으면 labelsView
활성화되지 않습니다.
이전 규칙에 해당하는 정의가 있으면 이를 labels
입력 속성에 제공할 준비가 된 것입니다. 이 속성은 데이터를 track
전체에 균등하게 분산시켜 처리합니다. 이제 레이블 값은 컬렉션에서 정의한 모든 기본 값을 나타냅니다. lowerLabel 또는 upperLabel 을 요청하여 API를 통해 언제든지 액세스할 수 있습니다.
Note
labelsView
가 활성화되면 maxValue
, minValue
및 step
입력에 대한 제어가 수행된다는 사실을 고려하십시오.
또 다른 중요한 요소는 labelsView
활성화되었을 때 slider
업데이트 프로세스를 처리하는 방식입니다. 이는 단순히 컬렉션의 index(es)
로 작동합니다. 이는 각각 value
, lowerBound
및 upperBound
속성이 해당 항목(index(es)
)을 따르거나 설정하여 track
제어한다는 것을 의미합니다.
<!--sample.component.html-->
<igx-slider #slider3 [type]="sliderType" [labels]="labels" [lowerBound]="1" [upperBound]="5">
<ng-template igxSliderThumbFrom let-value let-labels="labels">
<span class="ellipsis">{{ labels[value.lower] }}</span>
</ng-template>
<ng-template igxSliderThumbTo let-value let-labels="labels">
<span class="ellipsis">{{ labels[value.upper] }}</span>
</ng-template>
</igx-slider>
// sample.component.ts
public sliderType: SliderType = SliderType.RANGE;
public labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
위의 샘플에서 볼 수 있듯이 boundaries
설정은 여전히 유효한 작업입니다. lowerBound
및 upperBound
처리하면 슬라이드할 수 있는 범위가 제한됩니다.
Lables templating
위 쇼케이스에서 우리는 의도적으로 맞춤 서비스를 제공할 수 있는 방법을 보여주었습니다. label
템플릿, 두 가지를 모두 사용하여 igxSliderThumbFrom 그리고 igxSliderThumbTo 지시문. 직관적으로 우리는 다음과 같이 가정할 수 있습니다. igxSliderThumbFrom에 해당 lowerLabel 그리고 igxSliderThumbTo ~로 upperLabel.
그만큼 문맥 여기서는 암시적으로 다음 항목에 대한 참조를 제공합니다. value
입력 속성과 명시적으로 labels
입력 만약에 labelsView
사용 가능.
<ng-template igxSliderThumbFrom let-value let-labels="labels">
<span class="ellipsis">{{ labels[value.lower] }}</span>
</ng-template>
<ng-template igxSliderThumbTo let-value let-labels="labels">
<span class="ellipsis">{{ labels[value.upper] }}</span>
</ng-template>
Slider Tick Marks & labels
슬라이더 눈금 표시는 특정 기간, 요일 등과 같은 데이터 시각화를 위한 새롭고 더욱 매력적인 방법을 제공합니다. 이 새로운 기능을 사용하면 사용자는 어떤 데이터 범위가 표시되는지 확인하기 위해 Angular Slider와 상호 작용할 필요가 없습니다. 눈금 표시 및 눈금 레이블의 위치 및 방향 제어와 관련하여 매우 유연합니다. 체크 표시는 켜 거나 끌 수 있을 뿐만 아니라 기본, 보조 또는 둘 다 간에 전환할 수도 있습니다. 또한 이 기능은 기본, 보조 눈금 레이블 또는 둘 다를 켜 거나 끄는 방법을 제공합니다. 눈금 레이블은 회전 형식을 수평에서 수직으로 변경할 수 있습니다(위에서 아래로 (90) 또는 아래에서 위로 (-90)).
Enable ticks
우리는 진드기 슬라이더를 설정하여 showTicks
에게 진실.
사용 primaryTicks
기본 틱 수를 설정합니다.
사용 SecondaryTicks
보조 틱 수를 설정합니다.
<!--sample.component.html-->
<igx-slider
id="slider"
[maxValue]="100"
[step]="10"
[showTicks]="true"
[primaryTicks]="3"
[secondaryTicks]="4">
</igx-slider>
// sample.component.ts
// Change slider type initial value
public type = SliderType.RANGE;
Labels orientation and visibility.
다음 샘플에서는 모두 비활성화합니다. 보조 라벨 설정으로 secondaryTickLabels
에게 거짓.
<igx-slider
[step]="10"
[type]="type"
[maxValue]="100"
[continuous]="true"
[showTicks]="true"
[primaryTicks]="3"
[secondaryTicks]="4"
[secondaryTickLabels]="false"
[tickLabelsOrientation]="labelsOrientation">
</igx-slider>
또한 TickLabelsOrientation
BottomToTop
으로 설정하여 실행 가능한 모든 레이블을 회전합니다.
```typescript
...
{
public type = SliderType.RANGE:
public labelsOrientation = TickLabelsOrientation.BottomToTop;
}
...
Ticks position
계속해서 진드기 위치를 변경하는 방법을 살펴보겠습니다.
<div class="slider-container">
<igx-slider
[maxValue]="20"
[showTicks]="true"
[secondaryTicks]="21"
[primaryTickLabels]="false"
[ticksOrientation]="ticksOrientation">
</igx-slider>
</div>
포지션 변화는 다음에서 왔다. ticksOrientation
입력은 다음과 같이 변경됩니다. 맨 아래 (기본값) 거울. 이는 시각화를 반영합니다. 진드기 슬라이더 위와 아래에 표시합니다.
// The available options are: Top, Bottom and Mirror
public ticksOrientation = TicksOrientation.Mirror;
Note
ticksOrientaion
이 Top 또는 Mirror로 설정되고 눈금 라벨이 보이는 경우 썸 라벨은 의도적으로 숨겨집니다. 이렇게 하면 나쁜 사용자 경험과 두 레이블 간의 중복을 방지할 수 있습니다.
Slider ticks with labels view
이 예에서는 눈금 레이블과 썸 레이블이 함께 작동하는 방식을 보여줍니다.
<igx-slider
[labels]="labels"
[showTicks]="true"
[secondaryTicks]="3"
></igx-slider>
public type: SliderType = SliderType.RANGE;
public labels = ["04:00", "08:00", "12:00", "16:00", "20:00", "00:00"];
여기서는 어떤 방식으로든 반영되지 않기 때문에 primaryTicks
입력이 설정되지 않았습니다. 컬렉션의 길이가 컬렉션보다 우선합니다. 이는 secondaryTicks
설정할 수 없다는 의미는 아닙니다. 모든 보조 눈금은 비어 있습니다(레이블 없음).
Template labels
마지막으로 눈금 레이블에 대한 사용자 정의 템플릿을 제공하는 방법과 template context
제공하는 내용을 살펴보겠습니다.
<igx-slider
[showTicks]="true"
[primaryTicks]="3"
[secondaryTicks]="3">
<ng-template igxSliderTickLabel let-value let-primary="isPrimary" let-idx="index">
{{ tickLabel(value, primary, idx) }}
</ng-template>
</igx-slider>
지원 IgxTickLabelTemplateDirective
~로 ng-template
템플릿을 전체에 할당합니다. 눈금 라벨.
Note
context
각 틱마다 실행됩니다.
즉, 다음에 대한 참조를 제공합니다.
- 각 해당 눈금 값
- 해당 틱이 기본 인 경우.
- 틱 인덱스.
- 그리고 그러한
labels
컬렉션이 있다면 라벨 컬렉션도 마찬가지입니다.
public tickLabel(value, primary, index) {
if (primary) {
return Math.round(value);
}
return value;
}
위의 TickLabel 콜백에서는 모든 기본 틱의 값을 반올림합니다.
스타일링
새로운 테마를 만들어 슬라이더 구성 요소의 기본 스타일을 변경해 보겠습니다.
Demo
새로운 테마를 적용한 최종 결과입니다.
Creating a component theme
먼저 사용자 정의 팔레트를 만들어야 합니다. 이제 구성 요소 테마를 만들고 해당 사용자 정의 팔레트를 전달해 보겠습니다.
// In app-slider-styling.component.scss
// Create slider theme.
$custom-slider-theme: slider-theme(
$track-color: #ff7400,
$track-hover-color: #ff7400,
$thumb-color: #ff7400,
$base-track-color: #ddd,
$base-track-hover-color: #ccc,
$tick-label-color: #b246c2,
$tick-label-color-tall: #ff7400,
$tick-color: #b246c2,
$tick-color-tall: #ff7400,
);
구성요소 테마 적용
이제 구성 요소 테마를 적용하기 위해 남은 것은 css-vars
mixin을 포함하고 $custom-slider-theme
맵을 전달하는 것입니다.
// In app-slider-styling.component.scss
// Pass our custom-slider-theme to `css-vars` mixin.
// The `:host` here makes sure that all the theming will affect only this slider component.
:host {
@include css-vars($custom-slider-theme);
}
API References
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.