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';
// 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';
// 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