diff --git a/docs/angular/src/content/jp/components/general/cli/component-templates.mdx b/docs/angular/src/content/jp/components/general/cli/component-templates.mdx index aaeff053ce..fe07debaf4 100644 --- a/docs/angular/src/content/jp/components/general/cli/component-templates.mdx +++ b/docs/angular/src/content/jp/components/general/cli/component-templates.mdx @@ -32,7 +32,7 @@ llms: |レイアウト | |dock-manager |Ignite UI Schematics コレクション:
ng g @igniteui/angular-schematics:c dock-manager newDockManager
Ignite UI CLI:
ig add dock-manager newDockManager
基本 IgcDockManager。
|9 つのコンテンツ スロットの [IgcDockManager](../../dock-manager.mdx)。 | | |carousel |Ignite UI Schematics コレクション:
ng g @igniteui/angular-schematics:c carousel newCarousel
Ignite UI CLI:
ig add carousel newCarousel
基本 IgxCarousel。
| 一連の画像を循環する [IgxCarousel](../../layouts/carousel.mdx)。 | -|tabs |Ignite UI Schematics コレクション:
ng g @igniteui/angular-schematics:c tabs newTabs
Ignite UI CLI:
ig add tabs newTabs
基本 IgxTabs。
| 3 つのカスタマイズされたタブグループを含む [IgxTabs](../../tabs.mdx) コンポーネント。 | +|tabs |Ignite UI Schematics コレクション:
ng g @igniteui/angular-schematics:c tabs newTabs
Ignite UI CLI:
ig add tabs newTabs
基本 IgxTabs。
| 3 つのカスタマイズされたタブグループを含む [IgxTabs](../../layouts/tabs.mdx) コンポーネント。 | |bottom-nav |Ignite UI Schematics コレクション:
ng g @igniteui/angular-schematics:c bottom-nav newBottomNav
Ignite UI CLI:
ig add bottom-nav newBottomNav
3 項目の下部ナビゲーション テンプレート。
| 3 項目の下部 [navbar](../../navbar.mdx) テンプレート。| |データ入力と表示| |chip |Ignite UI Schematics コレクション:
ng g @igniteui/angular-schematics:c chip newChip
Ignite UI CLI:
ig add chip newChip
基本 IgxChip。
| igx-chips-area 内の [IgxChip](../../inputs/chip.mdx) コンポーネント。 | diff --git a/docs/angular/src/content/jp/components/tabs.mdx b/docs/angular/src/content/jp/components/tabs.mdx deleted file mode 100644 index 49f634b3fc..0000000000 --- a/docs/angular/src/content/jp/components/tabs.mdx +++ /dev/null @@ -1,616 +0,0 @@ ---- -title: Tabs コンポーネント - ネイティブ Angular | Ignite UI for Angular | MITライセンス -description: Ignite UI for Angular Tabs コンポーネントはタブを上側に配置し、複数のタブ項目がある場合にスクロールを許可します。今すぐお試しください。 -keywords: Angular Tabs コンポーネント, Angular Tabs コントロール, Angular Tabs, Angular Tabbar コンポーネント, Ignite UI for Angular, UI コントロール, Angular ウィジェット, web ウィジェット, UI ウィジェット, Angular, ネイティブ Angular コンポーネント スイート, ネイティブ Angular コンポーネント, Angular UI コンポーネント, ネイティブ Angular コンポーネント ライブラリ -license: MIT -_language: ja -llms: - description: "Ignite UI for Angular Tabs は、関連するコンテンツを 1 つのタブ付きビューで整理およびグループ化することを主な目的とするフル機能のユーザー インターフェース コンポーネントです。" ---- - -import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; -import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; -import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - -# Angular Tabs (タブ) コンポーネントの概要 - -Ignite UI for Angular Tabs は、関連するコンテンツを 1 つのタブ付きビューで整理およびグループ化することを主な目的とするフル機能のユーザー インターフェース コンポーネントです。これにより、スペースを節約し、コンテンツをよりわかりやすくします。アニメーション、テンプレート化、カスタマイズ オプションなどのさまざまな機能がパックされています。 - -Angular のタブは、多くのコンテンツを含む Web ページをカテゴリに分類し、簡潔かつスペース効率の良い方法で表示する必要がある場合に非常に便利です。 - -
- -Ignite UI for Angular コンポーネントは、同様なデータ セットの体系化や切り替えに使用します。 のラッパーとして機能し、それぞれデータのコンテナーおよびタブ ヘッダーを表します。Angular Tabs コンポーネントは、タブを上側に配置して複数のタブ項目がある場合にスクロールを許可します。 - -
- -## Angular Tabs の例 - -これは、一度に 1 つのビューしか表示できない別のタブ内に 1 つのタブがある Angular のネストされたタブの基本的な例です。Angular でネストされたタブを使用して、より適切で構造化された方法で情報を表示できます。 - - - -
- -## Ignite UI for Angular Tabs を使用した作業の開始 - -Ignite UI for Angular Tabs コンポーネントを使用した作業を開始するには、Ignite UI for Angular をインストールする必要があります。既存の Angular アプリケーションで、以下のコマンドを入力します。 - -```cmd -ng add igniteui-angular -``` - -Ignite UI for Angular については、「[はじめに](./general/getting-started.mdx)」トピックをご覧ください。 - -次に、**app.module.ts** ファイルに `IgxTabsModule` をインポートします。 - -```typescript -// 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`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/tabs/src/tabs/tabs/public_api.ts) トークンを使用してコンポーネントとそのすべてのサポート コンポーネントおよびディレクティブをインポートすることもできます。 - -```typescript -// 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: ` - - - - Tab 1 - - - This is Tab 1 content. - - - - - Tab 2 - - - This is Tab 2 content. - - - - `, - 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` コンポーネントの使用を開始できます。 - -## Angular Tabs の使用 - -`igx-tab-header` にコンテンツを提供することにより、Angular Tabs ヘッダーを設定します。タブの名前を設定するには、`igxTabHeaderLabel` ディレクティブを使用してスパンを追加するだけです。タブ項目のコンテンツとして表示されるコンテンツは、`igx-tab-content` タグの間に追加する必要があります。 - -```html - - - - Tab 1 - - - This is Tab 1 content. - - - - - Tab 2 - - - This is Tab 2 content. - - - - - Tab 3 - - - This is Tab 3 content. - - - - - Tab 4 - - - This is Tab 4 content. - - - - - Tab 5 - - - This is Tab 5 content. - - - -``` - -サンプルを構成した後、結果は以下のようになります。 - - - - - -## Angular Tabs の配置 - -`IgxTabs` 入力プロパティは、タブの配置と配置の方法を制御します。start、center、end、justify の 4 つの異なる値を受け入れます。 -- **Start** (デフォルト): タブ ヘッダーの幅はコンテンツ (ラベル、アイコン、両方) によって異なり、すべてのタブに同じパディングがあります。最初のタブは、タブ コンテナーの左側に配置されます。 -- **Center**: タブ ヘッダーの幅はコンテンツによって異なり、タブ コンテナーの中央を占めます。スペースが足りない場合、スクロール ボタンが表示されます。 -- **End** (デフォルト): タブ ヘッダーの幅はコンテンツによって異なり、すべてのタブに同じパディングがあります。最後のタブは、タブ コンテナーの右側に配置されます。 -- **Justify**: すべてのタブ ヘッダーは幅が等しく、タブ コンテナーに完全に適合します。スペースが足りない場合、スクロール ボタンが表示されます。 - -以下のサンプルは、`tabAlignment` プロパティ値を切り替えるときにタブがどのように整列されるかを示しています。 - -Sample below demonstrates how tabs get aligned when switching between `tabAlignment` property values. - - - - - -## Angular Tabs のカスタマイズ - -タブに `igxTabHeaderIcon` ディレクティブを追加します。`igx-tabs` コントロールはマテリアル デザイン [**アイコン**](https://material.io/icons/)と互換性があるため、アプリケーションにアイコンを簡単に追加できます。 - -これまでアプリケーションで `igx-icon` を使用したことがない場合は、続行する前に必ず **app.module.ts** の `IgxIconModule` をインポートしてください。 - - -はじめに Material Icons をメイン アプリケーション フォルダーの 'styles.scss' ファイルにインポートします。次に、`igx-tab-header` の子として、`igxTabHeaderIcon` ディレクティブが設定された `igx-icon` を追加します。 - -```css -// styles.scss - -... -@import url('https://fonts.googleapis.com/icon?family=Material+Icons'); -... -``` - -```html - - - - library_music - Albums - - - Albums - - - - - favorite - Favorite - - - Favorite - - - - - info - Details - - - Details - - - - -``` - -サンプルを正しく構成した場合、タブは以下の例のようになります。 - - - -
- -ラベルとアイコンを設定するだけでは不十分な場合は、`igx-tab-header` タグの間に独自のカスタム コンテンツを直接提供することもできます。 - -```html - - - - -
- -
- - -

IgniteUI Rocks!

- - - -``` - -`igxPrefix` および `igxSuffix` ディレクティブを使用するだけで、独自のカスタム タブ ヘッダーのプレフィックスとサフィックスを追加することもできます。以下のサンプルは、カスタム ヘッダー コンテンツとプレフィックス/サフィックスを含むタブを追加する方法を示しています。 - - - -
- -## ルーター アウトレット コンテナーとの統合 - -`igx-tabs` コンポーネントは、タブ 項目ごとにコンテンツが指定されたタブのリストとして使用することを目的としています。しかし、コンテンツがタブ コンテンツとは別のタブ項目を定義する場合があります。 - -タブ項目を定義する際にディレクティブを適用することができます。たとえば、この機能を使用して、Angular Router を使用してビュー間のナビゲーションを実現できます。次の例は、`igx-tabs` コンポーネントを構成して、単一の router-outlet で 3 つのコンポーネントを切り替える方法を示しています。 - -まず、`igx-tabs` コンポーネントを保持するメイン コンポーネントと、デモ用のコンテンツを含む 3 つのビュー コンポーネントが必要です。簡単にするために、ビュー コンポーネントには短いテンプレートがあります - -```typescript -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: '

Tab 1 Content

' -}) -export class TabsRoutingView1Component { } - -@Component({ - template: '

Tab 2 Content

' -}) -export class TabsRoutingView2Component { } - -@Component({ - template: '

Tab 3 Content

' -}) -export class TabsRoutingView3Component { } -``` - -次のステップでは、`app-routing.module.ts` ファイルに適切なナビゲーション マッピングを作成します。 - -```typescript -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` コンポーネントを宣言し、ルーティング用に構成する必要があります。ビュー コンポーネントをレンダリングするための router-outlet を必ず追加してください。 - -```html - - - - - - Tab 1 - - - - - Tab 2 - - - - - Tab 3 - - - - - -``` - -上記のコードは、3 つのタブ項目を持つ `igx-tabs` コンポーネントを作成します。各タブ硬毛区のヘッダーには、ナビゲーションに使用されるルーティング リンクを指定するために使用される `RouterLink` ディレクティブが適用されています。リンクのいずれかがアクティブになると、`RouterLinkActive` ディレクティブの `isActive` プロパティにバインドされるため、対応するタブ項目の プロパティが設定されます。このようにして、選択したタブ項目は常に現在の URL パスと同期します。 - - - - -routerLink ディレクティブは、直接 `igx-tab-item` ではなく、`igx-tab-header` に設定されていることに注意してください。 - - -## スタイル設定 - -### Tabs テーマのプロパティ マップ - -プライマリ プロパティを変更すると、関連するすべての依存プロパティが自動的に更新され、変更が反映されます。 - -
- - - - - - - - - - -
- -
- - | Primary Property | Dependent Property | Description | -| --- | --- | --- | -| **$item-background** | $item-active-background | The color used for the active/focused tab background. | -| | $item-text-color | The color used for the tab text color. | -| | $item-icon-color | The color used for the tab icon. | -| | $item-hover-background | The background used for the tabs on hover. | -| | $indicator-color | The color used for the active tab indicator. | -| | $button-background | The color used for the button background. | -| | $button-hover-background | The color used for the button background on hover. | -|**$item-active-background** | $item-active-icon-color | The color used for the active tab icon. | -| | $item-active-color | The color used for the active tabs text. | -| | $tab-ripple-color | The color used for the button background. | -| **$item-text-color** | $item-hover-color | The text color used for the tabs on hover if no `$item-hover-background` is provided | -| | $item-icon-color | The color used for the tab icon if no `$item-background` is provided | -| | $item-active-color | The color used for the active tabs text if no `$item-active-background` is provided | -| | $indicator-color | The color used for the active tab indicator if no `$item-background` is provided | -|**$item-icon-color** | $item-hover-icon-color | The color used for the tab icon on hover. | -| | $item-active-icon-color | The color used for the active tab icon. | -| | $indicator-color | The color used for the active tab indicator. | -| **$button-background** | $button-hover-background | The color used for the button background on hover. | -| | $button-color | The color used for the button icon/text color. | -| **$button-color** | $button-disabled-color | The color used for the disabled button icon/text. | -| | $button-ripple-color | The color used for the button background on hover. | -| **$button-hover-background** | $button-hover-color | The color used for the button icon/text color on hover. | - -
-
- - | Primary Property | Dependent Property | Description | -| --- | --- | --- | -| **$item-background** | $item-active-background | The color used for the active/focused tab background. | -| | $item-text-color | The color used for the tab text color. | -| | $item-icon-color | The color used for the tab icon. | -| | $item-hover-background | The background used for the tabs on hover. | -| | $indicator-color | The color used for the active tab indicator. | -| | $button-background | The color used for the button background. | -| | $button-hover-background | The color used for the button background on hover. | -|**$item-active-background** | $item-active-icon-color | The color used for the active tab icon. | -| | $item-active-color | The color used for the active tabs text. | -| | $tab-ripple-color | The ripple color for the tab interaction. | -| **$item-text-color** | $item-hover-color | The text color used for the tabs on hover if no `$item-hover-background` is provided | -| | $item-icon-color | The color used for the tab icon if no `$item-background` is provided | -| | $item-active-color | The color used for the active tabs text if no `$item-active-background` is provided | -| | $indicator-color | The color used for the active tab indicator if no `$item-background` is provided | -|**$item-icon-color** | $item-hover-icon-color | The color used for the tab icon on hover. | -| | $item-active-icon-color | The color used for the active tab icon. | -| | $indicator-color | The color used for the active tab indicator. | -| **$button-background** | $button-hover-background | The color used for the button background on hover. | -| | $button-color | The color used for the button icon/text color. | -| **$button-color** | $button-disabled-color | The color used for the disabled button icon/text. | -| | $button-ripple-color | The color used for the button background on hover. | -| **$button-hover-background** | $button-hover-color | The color used for the button icon/text color on hover. | - -
-
- - | Primary Property | Dependent Property | Description | -| --- | --- | --- | -| **$item-background** | $item-active-background | The color used for the active/focused tab background. | -| | $item-text-color | The color used for the tab text color. | -| | $item-icon-color | The color used for the tab icon. | -| | $item-hover-background | The background used for the tabs on hover. | -| | $indicator-color | The color used for the active tab indicator. | -| | $button-background | The color used for the button background. | -| | $button-hover-background | The color used for the button background on hover. | -| | $border-color | The border color of the tabs. | -| **$item-active-background** | $item-active-icon-color | The color used for the active tab icon. | -| | $item-active-color | The color used for the active tabs text. | -| | $tab-ripple-color | The color used for the button background. | -| **$item-text-color** | $item-hover-color | The text color used for the tabs on hover if no `$item-hover-background` is provided | -| | $item-icon-color | The color used for the tab icon if no `$item-background` is provided | -| | $button-color | The color used for the button icon/text color if no `$button-background` is provided (non-material) | -| **$item-icon-color** | $item-hover-icon-color | The color used for the tab icon on hover if no `$item-hover-background` is provided | -| | $item-text-color | The color used for the tab text color if no `$item-background` is provided | -| **$button-background** | $button-hover-background | The color used for the button background on hover. | -| | $button-color | The color used for the button icon/text color. | -| **$button-color** | $button-hover-color | The color used for the button icon/text color on hover if no `$button-background` is provided | -| | $button-disabled-color | The color used for the disabled button icon/text. | -| | $button-ripple-color | The color used for the button background on hover. | -| **$button-hover-background** | $button-hover-color | The color used for the button icon/text color on hover. | - -
-
- - | Primary Property | Dependent Property | Description | -| --- | --- | --- | -| **$item-background** | $item-active-background | The color used for the active/focused tab background. | -| | $item-text-color | The color used for the tab text color. | -| | $item-icon-color | The color used for the tab icon. | -| | $item-hover-background | The background used for the tabs on hover. | -| | $indicator-color | The color used for the active tab indicator. | -| | $button-background | The color used for the button background. | -| | $button-hover-background | The color used for the button background on hover. | -|**$item-active-background** | $item-active-icon-color | The color used for the active tab icon. | -| | $item-active-color | The color used for the active tabs text. | -| | $tab-ripple-color | The color used for the button background. | -| **$item-text-color** | $item-hover-color | The text color used for the tabs on hover if no `$item-hover-background` is provided | -| | $item-icon-color | The color used for the tab icon if no `$item-background` is provided | -| | $item-active-color | The color used for the active tabs text if no `$item-active-background` is provided | -| | $indicator-color | The color used for the active tab indicator if no `$item-background` is provided | -|**$item-icon-color** | $item-hover-icon-color | The color used for the tab icon on hover. | -| | $item-active-icon-color | The color used for the active tab icon. | -| | $indicator-color | The color used for the active tab indicator. | -| **$button-background** | $button-hover-background | The color used for the button background on hover. | -| | $button-color | The color used for the button icon/text color. | -| **$button-color** | $button-disabled-color | The color used for the disabled button icon/text. | -| | $button-ripple-color | The color used for the button background on hover. | -| **$button-hover-background** | $button-hover-color | The color used for the button icon/text color on hover. | - -
- -
-
- -タブのスタイル設定は、すべてのテーマ関数とコンポーネント ミックスインが存在するテーマ モジュールをインポートする必要があります。 - -```scss -@use "igniteui-angular/theming" as *; - -// 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。 -// @import '~igniteui-angular/lib/core/styles/themes/index'; -``` - -最もシンプルな方法として、 を拡張する新しいテーマを作成します。`$item-background` や `$item-active-color` などの少数のベース パラメーターを指定することで、最小限の労力でタブのスタイルを設定できます。テーマは、さまざまなインタラクション状態に必要なすべての背景の色と前景の色を自動的に生成します。 - -追加のパラメーターをオーバーライドして、外観をさらに微調整することもできます。 - -```scss -$dark-tabs: tabs-theme( - $item-background: #292826, - $item-active-color: #F4D45C, -); -``` - - -上記のようにカラーの値をハードコーディングする代わりに、 および 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](./themes/sass/palettes.mdx)のトピックをご覧ください。 - - -次に、 を拡張する新しいテーマを作成し、タブグループのスタイルを設定できるさまざまなプロパティを受け取ります。 - - -タブのコンテンツの一部として使用されるコンポーネントをスタイルするには、それぞれのコンポーネントに固有の追加テーマを作成する必要があります。 - - -最後にコンポーネントのテーマを**含めます**。 - -```scss -:host { - @include tokens($dark-tabs); -} -``` - -### デモ - - - -### Tailwind によるスタイル設定 - -カスタム Tailwind ユーティリティ クラスを使用して tabs をスタイル設定できます。まず [Tailwind を設定して](./themes/misc/tailwind-classes.mdx)ください。 - -グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します: - -```scss -@import "tailwindcss"; -... -@use 'igniteui-theming/tailwind/utilities/material.css'; -``` - -ユーティリティ ファイルには、`light` テーマと `dark` テーマの両方のバリエーションが含まれています。 - -- `light-*` クラスはライト テーマ用です。 -- `dark-*` クラスはダーク テーマ用です。 -- プレフィックスの後にコンポーネント名を追加します (例: `light-tabs`、`dark-tabs`)。 - -これらのクラスを適用すると、動的なテーマの計算が可能になります。そこから、`任意のプロパティ`を使用して、生成された CSS 変数をオーバーライドできます。コロンの後に、有効な CSS カラー形式 (HEX、CSS 変数、RGB など) を指定します。 - -プロパティの完全なリストは で確認できます。構文は次のとおりです: - -```html - - ... - -``` - - -ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 - - -最終的に、tabs は次のようになります: - - - -
- -## API リファレンス - - - -- -- -- -- -- -- -- - -## テーマの依存関係 - -- -- -- - -## その他のリソース - -
- -コミュニティに参加して新しいアイデアをご提案ください。 - -- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular) diff --git a/docs/angular/src/content/jp/components/toc.json b/docs/angular/src/content/jp/components/toc.json index 701290814e..73d5ada28f 100644 --- a/docs/angular/src/content/jp/components/toc.json +++ b/docs/angular/src/content/jp/components/toc.json @@ -2229,8 +2229,8 @@ }, { "name": "Tabs", - "href": "tabs.mdx", - "new": false + "href": "layouts/tabs.mdx", + "updated": true }, { "name": "Card",