Angular Tabs 구성 요소 개요
Ignite UI for Angular 모든 기능을 갖춘 사용자 인터페이스 구성 요소로, 주요 목적은 단일 탭 뷰에서 관련 콘텐츠를 구성하고 그룹화하여 공간을 절약하고 콘텐츠를 더 이해하기 쉽게 만드는 것입니다. 애니메이션, 템플릿, 사용자 정의 옵션 등과 같은 다양한 기능이 포함되어 있습니다.
Angular의 탭은 많은 양의 콘텐츠를 카테고리별로 분류하고 간결하고 공간 효율적인 방식으로 표시해야 하는 웹 페이지를 구축할 때 매우 유용합니다.
Ignite UI for Angular 내 컴포넌트는igx-tabs 유사한 데이터 세트를 조직하거나 전환하는 데 사용됩니다. 이 도구는 각각 데이터와 탭 헤더의 컨테이너를 나타내는 래퍼igx-tab-item 역할을 합니다. Angular 탭 컴포넌트는 탭을 상단에 배치하고, 화면에 여러 탭 항목이 있을 때 스크롤을 허용합니다.
Angular Tabs Example
이것은 한 번에 하나의 뷰만 볼 수 있는 다른 탭 안에 하나의 탭이 있는 Angular 중첩 탭의 기본적인 예입니다. Angular에서 중첩 탭을 사용하면 더 나은 구조화된 방식으로 정보를 표시할 수 있습니다.
Getting Started with Ignite UI for Angular Tabs
Ignite UI for Angular Tabs 구성 요소를 시작하려면 먼저 Ignite UI for Angular 설치해야 합니다. 기존 Angular 애플리케이션에서 다음 명령을 입력합니다.
ng add igniteui-angular
Ignite UI for Angular에 대한 전체 소개는 시작 항목을 참조하십시오.
다음 단계는 다음 단계를 가져오는 것입니다.IgxTabsModule 당신의 app.module.ts 파일.
// app.module.ts
...
import { IgxTabsModule } from 'igniteui-angular/tabs';
// import { IgxTabsModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
...
imports: [..., IgxTabsModule],
...
})
export class AppModule {}
또는16.0.0 독립 실행형 의존성으로 가져오IgxTabsComponent 거나, 토큰을IGX_TABS_DIRECTIVES 사용해 컴포넌트와 그 지원 컴포넌트, 명령어를 가져올 수도 있습니다.
// home.component.ts
import { IGX_TABS_DIRECTIVES } from 'igniteui-angular/tabs';
// import { IGX_TABS_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
@Component({
selector: 'app-home',
template: `
<igx-tabs>
<igx-tab-item>
<igx-tab-header>
<span igxTabHeaderLabel>Tab 1</span>
</igx-tab-header>
<igx-tab-content>
This is Tab 1 content.
</igx-tab-content>
</igx-tab-item>
<igx-tab-item>
<igx-tab-header>
<span igxTabHeaderLabel>Tab 2</span>
</igx-tab-header>
<igx-tab-content>
This is Tab 2 content.
</igx-tab-content>
</igx-tab-item>
</igx-tabs>
`,
styleUrls: ['home.component.scss'],
standalone: true,
imports: [IGX_TABS_DIRECTIVES]
/* or imports: [IgxTabsComponent, IgxTabItemComponent, IgxTabHeaderComponent, IgxTabContentComponent, IgxTabHeaderLabelDirective] */
})
export class HomeComponent {}
이제 Ignite UI for Angular Tabs 모듈이나 지시어를 가져왔으니, 컴포넌트igx-tabs 사용을 시작할 수 있습니다.
Using the Angular Tabs
Angular 탭 헤더는 콘텐츠를igx-tab-header 제공함으로써 설정했습니다. 탭 이름을 설정하려면 단순히 지시와 함께igxTabHeaderLabel span을 추가합니다. 탭 항목의 콘텐츠로 나타날 모든 콘텐츠는 태그 사이에igx-tab-content 추가해야 합니다.
<igx-tabs>
<igx-tab-item>
<igx-tab-header>
<span igxTabHeaderLabel>Tab 1</span>
</igx-tab-header>
<igx-tab-content>
This is Tab 1 content.
</igx-tab-content>
</igx-tab-item>
<igx-tab-item>
<igx-tab-header>
<span igxTabHeaderLabel>Tab 2</span>
</igx-tab-header>
<igx-tab-content>
This is Tab 2 content.
</igx-tab-content>
</igx-tab-item>
<igx-tab-item>
<igx-tab-header>
<span igxTabHeaderLabel>Tab 3</span>
</igx-tab-header>
<igx-tab-content>
This is Tab 3 content.
</igx-tab-content>
</igx-tab-item>
<igx-tab-item>
<igx-tab-header>
<span igxTabHeaderLabel>Tab 4</span>
</igx-tab-header>
<igx-tab-content>
This is Tab 4 content.
</igx-tab-content>
</igx-tab-item>
<igx-tab-item>
<igx-tab-header>
<span igxTabHeaderLabel>Tab 5</span>
</igx-tab-header>
<igx-tab-content>
This is Tab 5 content.
</igx-tab-content>
</igx-tab-item>
</igx-tabs>
샘플이 올바르게 구성되면 최종 결과는 다음과 같습니다.
Angular Tabs Alignment
IgxTabs tabAlignment입력 속성은 탭의 위치와 배열을 제어합니다. 시작, 중심, 끝, 그리고 두 가지 값을 모두 수용합니다.
- 시작 (기본값): 탭 헤더의 너비는 콘텐츠(레이블, 아이콘 모두)에 따라 다르며 모든 탭의 패딩은 동일합니다. 첫 번째 탭은 탭 컨테이너 왼쪽에 정렬됩니다.
- Center: 탭 헤더의 너비는 내용에 따라 다르며 탭 컨테이너 센터를 차지합니다. 모든 항목을 담을 만큼 공간이 충분하지 않으면 스크롤 버튼이 표시됩니다.
- End: 탭 헤더의 너비는 내용에 따라 다르며 모든 탭의 패딩은 동일합니다. 마지막 탭은 탭 컨테이너 오른쪽에 정렬됩니다.
- 양쪽 맞춤: 모든 탭 헤더의 너비가 동일하고 탭 컨테이너에 완전히 맞습니다. 모든 항목을 담을 만큼 공간이 충분하지 않으면 스크롤 버튼이 표시됩니다.
아래 샘플은 속성 값 전환tabAlignment 시 탭이 어떻게 정렬되는지 보여줍니다.
Customizing Angular Tabs
탭을 수정하고 지시를 사용해igxTabHeaderIcon 아이콘을 포함시켜 더 매력적으로 만들어봅시다. 이 컴포넌트는igx-tabs Material Design 아이콘과 호환되므로 애플리케이션에 쉽게 적용할 수 있습니다.
Note
만약 아직 사용해보지 않으셨다면,igx-icon 지금까지 지원하실 때, 꼭 다음 파일을 가져오세요IgxIconModule 안에 app.module.ts 진행하기 전에.
먼저, 메인 애플리케이션 폴더의 'styles.scss' 파일에 Material 아이콘을 추가하세요. 다음으로, 명령 집합과igx-icon 함께 자식igxTabHeaderIcon 집합으로 추가합니다igx-tab-header.
// styles.scss
...
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
...
<igx-tabs>
<igx-tab-item>
<igx-tab-header>
<igx-icon igxTabHeaderIcon>library_music</igx-icon>
<span igxTabHeaderLabel>Albums</span>
</igx-tab-header>
<igx-tab-content>
Albums
</igx-tab-content>
</igx-tab-item>
<igx-tab-item>
<igx-tab-header>
<igx-icon igxTabHeaderIcon>favorite</igx-icon>
<span igxTabHeaderLabel>Favorite</span>
</igx-tab-header>
<igx-tab-content>
Favorite
</igx-tab-content>
</igx-tab-item>
<igx-tab-item>
<igx-tab-header>
<igx-icon igxTabHeaderIcon>info</igx-icon>
<span igxTabHeaderLabel>Details</span>
</igx-tab-header>
<igx-tab-content>
Details
</igx-tab-content>
</igx-tab-item>
</igx-tabs>
샘플이 올바르게 구성되면 탭은 다음 예와 같아야 합니다.
라벨과 아이콘 설정만으로는 부족하다면, 태그 간에igx-tab-header 직접 맞춤 콘텐츠를 제공할 수도 있습니다.
<igx-tabs>
<igx-tab-item>
<igx-tab-header>
<!-- your custom tab content goes here -->
<div>
<img src="https://static.infragistics.com/marketing/Website/products/ignite-ui-landing/ignite-ui-logo.svg"
width="80px" height="40px">
</div>
</igx-tab-header>
<igx-tab-content>
<h1>IgniteUI Rocks!</h1>
</igx-tab-content>
</igx-tab-item>
</igx-tabs>
그리고 directigxPrefix ives를 사용igxSuffix 해서 자신만의 맞춤 탭 헤더 접두사와 접미사를 추가할 수도 있습니다. 아래 샘플은 사용자 지정 헤더 내용과 접두사/접미사가 포함된 탭을 추가하는 방법을 보여줍니다.
Integration With Router Outlet Container
이 컴포넌트는igx-tabs 각 탭 항목마다 내용을 지정한 탭 목록으로 사용되도록 설계되었지만, 내용이 탭 내용과 분리된 탭 항목을 정의해야 할 수도 있습니다.
탭 항목을 정의할 때 명령어를 적용할 수 있습니다. 예를 들어, 이 기능을 사용해 Angular 라우터를 이용해 뷰 간 탐색을 할 수 있습니다. 다음 예시는 단일 라우터-콘센트 내에서 세 개의 구성 요소를 전환하도록 구성igx-tabs 하는 방법을 보여줍니다.
우선 컴포넌트를 담igx-tabs을 컴포넌트와 시연용 일부 콘텐츠가 포함된 세 개의 뷰 컴포넌트가 필요합니다. 간단히 하기 위해 뷰 컴포넌트는 매우 짧은 템플릿을 가지고 있습니다.
import { Component } from '@angular/core';
@Component({
selector: 'app-tabs-routing',
styleUrls: ['tabs-routing.component.scss'],
templateUrl: 'tabs-routing.component.html'
})
export class TabsRoutingComponent { }
@Component({
template: '<p>Tab 1 Content</p>'
})
export class TabsRoutingView1Component { }
@Component({
template: '<p>Tab 2 Content</p>'
})
export class TabsRoutingView2Component { }
@Component({
template: '<p>Tab 3 Content</p>'
})
export class TabsRoutingView3Component { }
다음으로, 파일에 적절한 내비게이션 매핑app-routing.module.ts을 만듭니다:
import { RouterModule, Routes } from '@angular/router';
import {
TabsRoutingComponent,
TabsRoutingView1Component,
TabsRoutingView2Component,
TabsRoutingView3Component
} from './tabs-routing.component';
...
const routes: Routes = [
{
path: '',
pathMatch: 'full',
redirectTo: '/tabs-routing'
},
{
path: 'tabs-routing',
component: TabsRoutingComponent,
children: [
{ path: 'view1', component: TabsRoutingView1Component },
{ path: 'view2', component: TabsRoutingView2Component },
{ path: 'view3', component: TabsRoutingView3Component },
]
}
];
@NgModule({
exports: [RouterModule],
imports: [RouterModule.forRoot(appRoutes)]
})
export class AppRoutingModule { }
이제 모든 내비게이션 경로를 설정했으니, 컴포넌트를igx-tabs 선언하고 라우팅을 위해 설정해야 합니다. 뷰 컴포넌트를 렌더링할 때 라우터 콘센트를 꼭 추가하세요.
<!-- tabs-routing.component.html -->
<igx-tabs #tabs1>
<igx-tab-item
routerLinkActive
#rla1="routerLinkActive"
[selected]="rla1.isActive"
>
<igx-tab-header routerLink="view1">
<span igxTabHeaderLabel>Tab 1</span>
</igx-tab-header>
</igx-tab-item>
<igx-tab-item
routerLinkActive
#rla2="routerLinkActive"
[selected]="rla2.isActive"
>
<igx-tab-header routerLink="view2">
<span igxTabHeaderLabel>Tab 2</span>
</igx-tab-header>
</igx-tab-item>
<igx-tab-item
routerLinkActive
#rla3="routerLinkActive"
[selected]="rla3.isActive"
>
<igx-tab-header routerLink="view3">
<span igxTabHeaderLabel>Tab 3</span>
</igx-tab-header>
</igx-tab-item>
</igx-tabs>
<router-outlet></router-outlet>
위 코드는 세 개의 탭 항목으로 구성된 컴포넌트를igx-tabs 생성합니다. 각 탭 항목의 헤더에는 내비게이션에 사용되는 라우팅 링크를 지정하는 지시문이RouterLink 적용됩니다. 링크 중 하나가 활성화되면, 해당 탭 항목은 지시적selected 속성에RouterLinkActive 묶여 있기 때문에 속성이isActive 설정됩니다. 이렇게 하면 선택한 탭 항목이 항상 현재 URL 경로와 동기화됩니다.
Note
라우터링크 지시는 직접igx-tab-header에 설정된 것이 아니라 에igx-tab-item 설정되어 있다는 점을 유의하세요.
Styles
Tabs Theme Property Map
기본 속성을 수정하면 모든 관련 종속 속성이 자동으로 업데이트되어 변경 내용이 반영됩니다.
| 기본 속성 | 종속 속성 | 설명 |
|---|---|---|
$item 배경 |
$item-활성 배경 | 액티브/포커스 탭 배경에 사용된 색상입니다. |
| $item-텍스트-컬러 | 탭 텍스트 색상에 사용된 색상입니다. | |
| $item-아이콘-컬러 | 탭 아이콘에 사용된 색상입니다. | |
| $item-호버-배경 | 마우스 탭에 사용된 배경입니다. | |
| $indicator색 | 활성 탭 표시기에 사용되는 색상입니다. | |
| $button 배경 | 버튼 배경에 사용된 색상입니다. | |
| $button 호버 배경 | 마우스 상의 버튼 배경에 사용된 색상입니다. | |
$item-활성 배경 |
$item-active-icon-color(활성-아이콘-색상) | 활성 탭 아이콘에 사용된 색상입니다. |
| $item-활성 색상 | 활성 탭 텍스트에 사용되는 색상. | |
| $tab-리플-컬러 | 버튼 배경에 사용된 색상입니다. | |
$item-텍스트-컬러 |
$item-호버-컬러 | '$item-호버-배경'이 제공되지 않은 경우 호버 탭에 사용되는 텍스트 색상 |
| $item-아이콘-컬러 | '$item-배경'이 제공되지 않은 경우 탭 아이콘에 사용되는 색상 | |
| $item-활성 색상 | '$item-active-background'가 제공되지 않은 경우 활성 탭 텍스트에 사용되는 색상 | |
| $indicator색 | '$item-배경'이 제공되지 않을 경우 활성 탭 표시기에 사용되는 색상 | |
$item-아이콘-컬러 |
$item-호버-아이콘-컬러 | 마우스를 올리는 탭 아이콘에 사용된 색상입니다. |
| $item-active-icon-color(활성-아이콘-색상) | 활성 탭 아이콘에 사용된 색상입니다. | |
| $indicator색 | 활성 탭 표시기에 사용되는 색상입니다. | |
$button 배경 |
$button 호버 배경 | 마우스 상의 버튼 배경에 사용된 색상입니다. |
| $button색 | 버튼 아이콘/텍스트 색상에 사용된 색상입니다. | |
$button색 |
$button-장애-색상 | 비활성화된 버튼 아이콘/텍스트에 사용된 색상입니다. |
| $button-리플-컬러 | 마우스 상의 버튼 배경에 사용된 색상입니다. | |
| $button 호버 배경 | $button 호버 컬러 | 마우스 상에서 버튼 아이콘/텍스트 색상에 사용된 색상입니다. |
| 기본 속성 | 종속 속성 | 설명 |
|---|---|---|
$item 배경 |
$item-활성 배경 | 액티브/포커스 탭 배경에 사용된 색상입니다. |
| $item-텍스트-컬러 | 탭 텍스트 색상에 사용된 색상입니다. | |
| $item-아이콘-컬러 | 탭 아이콘에 사용된 색상입니다. | |
| $item-호버-배경 | 마우스 탭에 사용된 배경입니다. | |
| $indicator색 | 활성 탭 표시기에 사용되는 색상입니다. | |
| $button 배경 | 버튼 배경에 사용된 색상입니다. | |
| $button 호버 배경 | 마우스 상의 버튼 배경에 사용된 색상입니다. | |
$item-활성 배경 |
$item-active-icon-color(활성-아이콘-색상) | 활성 탭 아이콘에 사용된 색상입니다. |
| $item-활성 색상 | 활성 탭 텍스트에 사용되는 색상. | |
| $tab-리플-컬러 | 탭 상호작용을 위한 리플 색상. | |
$item-텍스트-컬러 |
$item-호버-컬러 | '$item-호버-배경'이 제공되지 않은 경우 호버 탭에 사용되는 텍스트 색상 |
| $item-아이콘-컬러 | '$item-배경'이 제공되지 않은 경우 탭 아이콘에 사용되는 색상 | |
| $item-활성 색상 | '$item-active-background'가 제공되지 않은 경우 활성 탭 텍스트에 사용되는 색상 | |
| $indicator색 | '$item-배경'이 제공되지 않을 경우 활성 탭 표시기에 사용되는 색상 | |
$item-아이콘-컬러 |
$item-호버-아이콘-컬러 | 마우스를 올리는 탭 아이콘에 사용된 색상입니다. |
| $item-active-icon-color(활성-아이콘-색상) | 활성 탭 아이콘에 사용된 색상입니다. | |
| $indicator색 | 활성 탭 표시기에 사용되는 색상입니다. | |
$button 배경 |
$button 호버 배경 | 마우스 상의 버튼 배경에 사용된 색상입니다. |
| $button색 | 버튼 아이콘/텍스트 색상에 사용된 색상입니다. | |
$button색 |
$button-장애-색상 | 비활성화된 버튼 아이콘/텍스트에 사용된 색상입니다. |
| $button-리플-컬러 | 마우스 상의 버튼 배경에 사용된 색상입니다. | |
| $button 호버 배경 | $button 호버 컬러 | 마우스 상에서 버튼 아이콘/텍스트 색상에 사용된 색상입니다. |
| 기본 속성 | 종속 속성 | 설명 |
|---|---|---|
$item 배경 |
$item-활성 배경 | 액티브/포커스 탭 배경에 사용된 색상입니다. |
| $item-텍스트-컬러 | 탭 텍스트 색상에 사용된 색상입니다. | |
| $item-아이콘-컬러 | 탭 아이콘에 사용된 색상입니다. | |
| $item-호버-배경 | 마우스 탭에 사용된 배경입니다. | |
| $indicator색 | 활성 탭 표시기에 사용되는 색상입니다. | |
| $button 배경 | 버튼 배경에 사용된 색상입니다. | |
| $button 호버 배경 | 마우스 상의 버튼 배경에 사용된 색상입니다. | |
| $border색 | 탭의 테두리 색상. | |
$item-활성 배경 |
$item-active-icon-color(활성-아이콘-색상) | 활성 탭 아이콘에 사용된 색상입니다. |
| $item-활성 색상 | 활성 탭 텍스트에 사용되는 색상. | |
| $tab-리플-컬러 | 버튼 배경에 사용된 색상입니다. | |
$item-텍스트-컬러 |
$item-호버-컬러 | '$item-호버-배경'이 제공되지 않은 경우 호버 탭에 사용되는 텍스트 색상 |
| $item-아이콘-컬러 | '$item-배경'이 제공되지 않은 경우 탭 아이콘에 사용되는 색상 | |
| $button색 | '$button-배경'이 제공되지 않을 때 버튼 아이콘/텍스트 색상에 사용되는 색상(비물질) | |
$item-아이콘-컬러 |
$item-호버-아이콘-컬러 | '$item-호버-배경'이 제공되지 않을 경우 호버링 탭 아이콘에 사용되는 색상 |
| $item-텍스트-컬러 | '$item-배경'이 제공되지 않을 경우 탭 텍스트에 사용되는 색상 | |
$button 배경 |
$button 호버 배경 | 마우스 상의 버튼 배경에 사용된 색상입니다. |
| $button색 | 버튼 아이콘/텍스트 색상에 사용된 색상입니다. | |
$button색 |
$button 호버 컬러 | '$button-배경'이 제공되지 않을 경우 마우스를 올리는 버튼 아이콘/텍스트 색상에 사용되는 색상 |
| $button-장애-색상 | 비활성화된 버튼 아이콘/텍스트에 사용된 색상입니다. | |
| $button-리플-컬러 | 마우스 상의 버튼 배경에 사용된 색상입니다. | |
| $button 호버 배경 | $button 호버 컬러 | 마우스 상에서 버튼 아이콘/텍스트 색상에 사용된 색상입니다. |
| 기본 속성 | 종속 속성 | 설명 |
|---|---|---|
$item 배경 |
$item-활성 배경 | 액티브/포커스 탭 배경에 사용된 색상입니다. |
| $item-텍스트-컬러 | 탭 텍스트 색상에 사용된 색상입니다. | |
| $item-아이콘-컬러 | 탭 아이콘에 사용된 색상입니다. | |
| $item-호버-배경 | 마우스 탭에 사용된 배경입니다. | |
| $indicator색 | 활성 탭 표시기에 사용되는 색상입니다. | |
| $button 배경 | 버튼 배경에 사용된 색상입니다. | |
| $button 호버 배경 | 마우스 상의 버튼 배경에 사용된 색상입니다. | |
$item-활성 배경 |
$item-active-icon-color(활성-아이콘-색상) | 활성 탭 아이콘에 사용된 색상입니다. |
| $item-활성 색상 | 활성 탭 텍스트에 사용되는 색상. | |
| $tab-리플-컬러 | 버튼 배경에 사용된 색상입니다. | |
$item-텍스트-컬러 |
$item-호버-컬러 | '$item-호버-배경'이 제공되지 않은 경우 호버 탭에 사용되는 텍스트 색상 |
| $item-아이콘-컬러 | '$item-배경'이 제공되지 않은 경우 탭 아이콘에 사용되는 색상 | |
| $item-활성 색상 | '$item-active-background'가 제공되지 않은 경우 활성 탭 텍스트에 사용되는 색상 | |
| $indicator색 | '$item-배경'이 제공되지 않을 경우 활성 탭 표시기에 사용되는 색상 | |
$item-아이콘-컬러 |
$item-호버-아이콘-컬러 | 마우스를 올리는 탭 아이콘에 사용된 색상입니다. |
| $item-active-icon-color(활성-아이콘-색상) | 활성 탭 아이콘에 사용된 색상입니다. | |
| $indicator색 | 활성 탭 표시기에 사용되는 색상입니다. | |
$button 배경 |
$button 호버 배경 | 마우스 상의 버튼 배경에 사용된 색상입니다. |
| $button색 | 버튼 아이콘/텍스트 색상에 사용된 색상입니다. | |
$button색 |
$button-장애-색상 | 비활성화된 버튼 아이콘/텍스트에 사용된 색상입니다. |
| $button-리플-컬러 | 마우스 상의 버튼 배경에 사용된 색상입니다. | |
| $button 호버 배경 | $button 호버 컬러 | 마우스 상에서 버튼 아이콘/텍스트 색상에 사용된 색상입니다. |
탭 스타일 지정을 시작하려면 모든 테마 기능과 구성 요소 믹스인이 있는 테마 모듈을 가져와야 합니다.
@use "igniteui-angular/theming" as *;
// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
가장 간단한 접근법을 따르면, 우리는 새로운tabs-theme 주제를 만들어 확장합니다. 몇 가지 기본 매개변수—예:$item-background and$item-active-color—만 전달하면 최소한의 노력으로 탭 스타일을 만들 수 있습니다. 테마는 다양한 상호작용 상태에 필요한 모든 배경 및 전경 색상을 자동으로 생성합니다.
물론 추가 매개 변수를 재정의하여 모양을 더 세밀하게 조정할 수 있습니다.
$dark-tabs: tabs-theme(
$item-background: #292826,
$item-active-color: #F4D45C,
);
Note
우리가 방금 한 것처럼 색상 값을 하드코딩하는 대신, andpalette 함수를 사용color 해 색상 측면에서 더 큰 유연성을 얻을 수 있습니다. 사용 방법에 대한 자세한 안내는 해당 주제를 참고Palettes 해 주세요.
만약 우리가tabs-theme 탭을 스타일링할 수 있는 더 많은 부동산이 있다는 것을 알 수 있습니다.
Note
탭 콘텐츠의 일부로 사용되는 구성 요소의 스타일을 지정하려면 해당 구성 요소에 특정한 추가 테마를 만들어야 합니다.
마지막 단계는 애플리케이션에 구성 요소 테마를 포함하는 것입니다.
@include css-vars($dark-tabs);
Demo
Styling with Tailwind
탭은 저희 맞춤형 Tailwind 유틸리티 클래스를 사용해 스타일링할 수 있습니다. 먼저 Tailwind를 꼭 설정 하세요.
전역 스타일시트의 순풍 가져오기와 함께 다음과 같이 원하는 테마 유틸리티를 적용할 수 있습니다.
@import "tailwindcss";
...
@use 'igniteui-theming/tailwind/utilities/material.css';
유틸리티 파일에는 테마 변형 두 가지light가dark 모두 포함되어 있습니다.
- 라이트 테마에는 클래스를 사용
light-*하세요. - 어두운 테마에는 클래스를 사용
dark-*하세요. - 접두사 뒤에 컴포넌트 이름을 덧붙이세요,
light-tabsdark-tabs예: .
이 클래스들이 적용되면 동적 테마 계산이 가능합니다. 그 다음에는 생성된 CSS 변수를 무arbitrary properties 시할 수 있습니다. 콜론 다음에는 유효한 CSS 색상 형식(HEX, CSS 변수, RGB 등)을 입력하세요.
전체 부동산 목록은 IgxTabs 테마에서 확인할 수 있습니다. 문법은 다음과 같습니다:
<igx-tabs
class="!light-tabs
![--item-background:#011627]
![--item-active-icon-color:#FF8040]
![--item-active-color:#FF8040]">
...
</igx-tabs>
Note
느낌표(!)는 유틸리티 클래스가 우선순위가 되도록 보장하기 위해 필요합니다. Tailwind는 레이어에 스타일을 적용하는데, 이 스타일을 중요하게 표시하지 않으면 컴포넌트의 기본 테마에 의해 덮어쓰여집니다.
마지막에 탭은 다음과 같이 보여야 합니다:
API References
- IgxIconComponent
- IgxNavbar구성 요소
- IgxTabs구성 요소
- IgxTabs구성 요소 스타일
- IgxTabItemComponent
- IgxTabHeader구성 요소
- IgxTabContentComponent
Theming Dependencies
Additional Resources
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.
GitHub