Angular 분할기 구성 요소 개요
구분선 구성 요소를 사용하면 사용자가 콘텐츠를 가로 및 세로로 구분할 수 있습니다.
Angular Divider Example
기본적으로 구분선은 실선 수평선입니다.
Getting Started with Ignite UI for Angular Divider
Ignite UI for Angular Divider 구성 요소를 시작하려면 먼저 Ignite UI for Angular 설치해야 합니다. 기존 Angular 애플리케이션에서 다음 명령을 입력합니다.
ng add igniteui-angular
Ignite UI for Angular에 대한 전체 소개는 시작 항목을 참조하십시오.
다음 단계는 다음 단계를 가져오는 것입니다.IgxDividerModule 당신의 app.module.ts 파일.
// app.module.ts
...
import { IgxDividerModule } from 'igniteui-angular/directives';
// import { IgxDividerModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
...
imports: [..., IgxDividerModule],
...
})
export class AppModule {}
또는16.0.0 독립 실행형 의존성으로 가져올IgxDividerDirective 수도 있습니다.
// home.component.ts
import { IgxDividerDirective } from 'igniteui-angular/directives';
// import { IgxDividerDirective } from '@infragistics/igniteui-angular'; for licensed package
@Component({
selector: 'app-home',
template: '<igx-divider></igx-divider>',
styleUrls: ['home.component.scss'],
standalone: true,
imports: [IgxDividerDirective]
})
export class HomeComponent {}
이제 Ignite UI for Angular 디바이더 모듈이나 디렉티브를 가져왔으니, 컴포넌트igx-divider 사용을 시작할 수 있습니다.
Using the Angular Divider
Vertical Divider
속성을 추가vertical 하고 값을 설정true 하면, 디바이더의 방향을 수평에서 수직으로 바꿀 수 있습니다.
<igx-divider [vertical]="true"></igx-divider>
Dashed Divider
디바이더의 기본 스타일은 선이지만solid 선dashed 일 수도 있습니다. 기본 외관을 변경하려면 디바이더의 속성을 사용하고type 값을 다음과dashed 같이 설정하면 됩니다.
<igx-divider type="dashed"></igx-divider>
Inset Divider
칸막이는 양쪽에 설치할 수 있습니다. 분할기를 삽입하려면, 분할기의 속성을 에middle 설정true 하고 원하는inset 값을 제공하면, 분할기가 양쪽 끝에서 점점 줄어들기 시작합니다.
값 끝에 unit(px,rem,%...)을 추가해야 한다는 점을 명심하세요. 그렇지 않으면 작동하지 않습니다.
// Both side
<igx-divider [middle]="true" inset="80px"></igx-divider>
// Left side only
<igx-divider inset="40px"></igx-divider>
속성의 값middle이 거짓 값으로 설정되었거나 아예 생략된 경우, 디바이더는 왼쪽에만 설정됩니다.
API References
Additional Resources
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.
GitHub