diff --git a/en/components/ai/skills.md b/en/components/ai/skills.md index ca3c68153d..962585aee9 100644 --- a/en/components/ai/skills.md +++ b/en/components/ai/skills.md @@ -112,8 +112,6 @@ Alternatively, one can use a general Agent Skills config so your Agent can easil 3. The Agent will now discover these skills and load the relevant one automatically based on the context of your request. -> **Tip for VS Code:** VS Code searches for skills in `.github/skills/`, `.claude/skills/`, and `.agents/skills/` by default. You can configure additional locations using the `chat.agentSkillsLocations` setting. - > **Tip:** VS Code searches for skills in `.github/skills/`, `.claude/skills/`, and `.agents/skills/` by default. You can configure additional locations using the `chat.agentSkillsLocations` setting. --- @@ -183,7 +181,7 @@ cp -r node_modules/igniteui-angular/skills/. .agents/skills/ ```powershell # Windows (PowerShell) -Copy-Item -Recurse node_modules\igniteui-angular\skills\* .agents\skills\ +Copy-Item -Recurse node_modules\igniteui-angular\skills .agents\skills ``` Or copy individual skill directories as needed: @@ -199,9 +197,9 @@ cp -r node_modules/igniteui-angular/skills/igniteui-angular-theming .agents/skil **Windows (PowerShell)** ```powershell -Copy-Item -Recurse node_modules\igniteui-angular\skills\igniteui-angular-components .agents\skills\ -Copy-Item -Recurse node_modules\igniteui-angular\skills\igniteui-angular-grids .agents\skills\ -Copy-Item -Recurse node_modules\igniteui-angular\skills\igniteui-angular-theming .agents\skills\ +Copy-Item -Recurse node_modules\igniteui-angular\skills\igniteui-angular-components .agents\skills\igniteui-angular-components +Copy-Item -Recurse node_modules\igniteui-angular\skills\igniteui-angular-grids .agents\skills\igniteui-angular-grids +Copy-Item -Recurse node_modules\igniteui-angular\skills\igniteui-angular-theming .agents\skills\igniteui-angular-theming ``` **Windows (Command Prompt)** diff --git a/jp/components/accordion.md b/jp/components/accordion.md index 4bc9b728b8..baf41cc7a2 100644 --- a/jp/components/accordion.md +++ b/jp/components/accordion.md @@ -294,7 +294,9 @@ $custom-panel-theme: expansion-panel-theme( 最後にコンポーネントのテーマを含めます。 ```scss -@include css-vars($custom-panel-theme); +:host { + @include tokens($custom-panel-theme); +} ``` ### デモ diff --git a/jp/components/action-strip.md b/jp/components/action-strip.md index 4e432c2ae7..9385ac2945 100644 --- a/jp/components/action-strip.md +++ b/jp/components/action-strip.md @@ -187,7 +187,9 @@ $custom-strip: action-strip-theme( 最後に新しく作成されたコンポーネントのテーマをアプリケーションに含めます。 ```scss -@include css-vars($custom-strip); +:host { + @include tokens($custom-strip); +} ``` **注:** Ignite UI for Angular **21.1.0** 以降、これらのスキルはエージェントのスキル パス (例: `.claude/skills`、`.agents/skills`、`.cursor/rules/`) に配置すると自動的に検出されます。このリリースには、これらのスキルをプロジェクトに自動的に追加するオプションの移行が含まれています。 + +AI アシスタントでスキルを使用する方法は 2 つあります。常に自動的に適用される[永続的な IDE エージェントを作成する](#方法-1-永続的な-ide-エージェントを作成する)か、必要に応じて優先する IDE に[手動でダウンロードして読み込む](#手順-2-スキルを-ide-に読み込む)かです。 + +## 方法 1: 永続的な IDE エージェントを作成する + +この方法では、スキルをプロジェクトに永続的に組み込むことで、すべての AI セッションが自動的に Ignite UI for Angular のガイドラインに従うようになります。ココピー＆ペースト は不要です。 + +### GitHub Copilot (VS Code) + +GitHub Copilot は、リポジトリのルートにある `.github/copilot-instructions.md` ファイルからカスタム指示を読み取ります。永続的なエージェントを作成するには: + +1. プロジェクト ルートに `.github/copilot-instructions.md` を作成 (または開く) します。 +2. そのファイルに、該当するスキル内容への参照を追加するか、スキル内容を貼り付けます。例: + + ```markdown + # Copilot Instructions + + This project uses Ignite UI for Angular. Follow the guidelines in the skill files below: + + - Components & Layout: https://github.com/IgniteUI/igniteui-angular/blob/master/skills/igniteui-angular-components/SKILL.md + - Data Grids: https://github.com/IgniteUI/igniteui-angular/blob/master/skills/igniteui-angular-grids/SKILL.md + - Theming & Styling: https://github.com/IgniteUI/igniteui-angular/blob/master/skills/igniteui-angular-theming/SKILL.md + ``` + +3. あるいは、完全にオフラインで自己完結した指示にするために、関連する `SKILL.md` ファイルの完全なコンテンツを `copilot-instructions.md` に直接貼り付けます。 +4. Copilot は、VS Code のすべてのチャットとインライン提案で、これらの指示を自動的に適用するようになります。 + +### Cursor + +Cursor は、`.cursorrules` ファイルまたは `.cursor/rules/` ディレクトリを介して永続的なプロジェクト ルールをサポートします。 + +1. プロジェクト ルートに `.cursorrules` を作成します (または、名前付きルールの場合は `.cursor/rules/igniteui.md` を作成します)。 +2. 目的の `SKILL.md` ファイルのコンテンツをそのファイルに貼り付けます。例: + + ``` + # Ignite UI for Angular Rules + + + + ``` + +3. Cursor は、すべての AI リクエストにこれらのルールを自動的に含めるようになります。チャットで `@rules` メンションを使用して、必要に応じて特定のルールを参照することもできます。 + +### Windsurf + +Windsurf は、プロジェクト ルートにある `.windsurfrules` ファイルから永続的なルールを読み取ります。 + +1. プロジェクト ルートに `.windsurfrules` を作成します。 +2. 関連する `SKILL.md` ファイルの内容を貼り付けます。 +3. Windsurf のすべての Cascade AI セッションに、これらが永続的な指示として含まれるようになります。 + +### JetBrains IDEs (WebStorm、IntelliJ) + +JetBrains AI Assistant は、すべての AI インタラクションに適用されるプロジェクト レベルのプロンプトをサポートします。 + +1. **[設定]** (macOS では **[Preferences]**) → **[ツール]** → **[AI Assistant]** → **[プロジェクト レベルのプロンプト]** を開きます。 +2. 関連する `SKILL.md` ファイルの内容をプロンプト フィールドに貼り付けます。 +3. **[適用]** をクリックします。AI Assistant は、プロジェクト内のすべてのリクエストに対してこれらの指示に従うようになります。 + +### Claude Code + +Claude Code は、プロジェクト ルートにある `CLAUDE.md` ファイルを永続的なエージェント指示としてサポートします。 + +1. プロジェクト ルートに `CLAUDE.md` を作成します。 +2. 関連する `SKILL.md` ファイルの内容を貼り付けます。例: + + ```markdown + # Project Instructions + + This project uses Ignite UI for Angular. Always follow these guidelines: + + + ``` + +3. Claude Code はすべてのセッション開始時に `CLAUDE.md` を自動的に読み込むようになります。 + +### 一般的な AI エージェント + +あるいは、一般的なエージェントのスキル設定を使用して、エージェントがオンデマンドでスキルを簡単に検出して自動的に読み込めるようにすることもできます。 + +1. プロジェクト ルートに `.agents/skills/` ディレクトリを作成します。 +2. `igniteui-angular/skills/` リポジトリからスキル ディレクトリを `.agents/skills/` にコピーします。 + + ``` + .agents/ + skills/ + igniteui-angular-components/ + igniteui-angular-grids/ + igniteui-angular-theming/ + ``` + +3. エージェントはこれらのスキルを検出し、リクエストのコンテキストに基づいて関連するスキルを自動的に読み込むようになります。 + +> **ヒント:** VS Code はデフォルトで `.github/skills/`、`.claude/skills/`、`.agents/skills/` でスキルを検索します。`chat.agentSkillsLocations` 設定を使用して、追加の場所を構成できます。 + +--- + +## 方法 2: スキルをダウンロードして読み込む + +プロジェクトの設定ファイルを永続的に変更することなく、オンデマンドで特定のスキルを読み込みたい場合は、この方法を使用します。 + +### 手順 1: スキル ファイルを取得する + +#### **オプション A - 個別のファイルをダウンロードする** + +各スキル ファイルは GitHub から直接ダウンロードできます。まず、プロジェクト ルートに `.agents/skills/` ディレクトリを作成してから、そこにファイルをダウンロードします。 + +```bash + +# Define the base target directory +BASE_DIR=".agents/skills" + +# Components & Layout +curl --create-dirs -o $BASE_DIR/igniteui-angular-components/SKILL.md https://raw.githubusercontent.com/IgniteUI/igniteui-angular/master/skills/igniteui-angular-components/SKILL.md + +# Data Grids +curl --create-dirs -o $BASE_DIR/igniteui-angular-grids/SKILL.md https://raw.githubusercontent.com/IgniteUI/igniteui-angular/master/skills/igniteui-angular-grids/SKILL.md + +# Theming & Styling +curl --create-dirs -o $BASE_DIR/igniteui-angular-theming/SKILL.md https://raw.githubusercontent.com/IgniteUI/igniteui-angular/master/skills/igniteui-angular-theming/SKILL.md +``` + +スキル ファイルが `.agents/skills/` で利用できるようになり、互換性のある AI アシスタントによって自動的に検出されます。 + + +#### **オプション B - `gemini skills` CLI を使用する** + +`gemini skills install` コマンドは、Git リポジトリから直接スキルをインストールします。2 つのスコープをサポートします。 + +- **ユーザー スコープ** (デフォルト) - ユーザー アカウントにスキルをグローバルにインストールし、すべてのプロジェクトで利用できるようにします。スキルは `~/.gemini/skills/` または `~/.agents/skills/` に配置されます。 +- **ワークスペース スコープ** - 現在のプロジェクト ディレクトリの `.agents/skills/` にスキルをローカルにインストールし、そのプロジェクトのみにスコープします。 + +**ユーザー スコープにインストールする (デフォルト):** + +```bash +gemini skills install https://github.com/IgniteUI/igniteui-angular.git --path skills/igniteui-angular-components +gemini skills install https://github.com/IgniteUI/igniteui-angular.git --path skills/igniteui-angular-grids +gemini skills install https://github.com/IgniteUI/igniteui-angular.git --path skills/igniteui-angular-theming +``` + +**ワークスペース スコープにインストールする:** + +```bash +gemini skills install --scope workspace https://github.com/IgniteUI/igniteui-angular.git --path skills/igniteui-angular-components +gemini skills install --scope workspace https://github.com/IgniteUI/igniteui-angular.git --path skills/igniteui-angular-grids +gemini skills install --scope workspace https://github.com/IgniteUI/igniteui-angular.git --path skills/igniteui-angular-theming +``` + +インストールが完了すると、スキル ファイルはそれぞれの場所で利用できるようになり、互換性のある AI アシスタントによって自動的に検出されます。 + + +#### **オプション C - インストールされた npm パッケージを使用する** + +Ignite UI for Angular がプロジェクトに既にインストールされている場合、スキル ファイルは `node_modules` の下で利用できます。それらをプロジェクトにコピーする (例: `.agents/skills/` の下での一般的な AI エージェントでの使用) には、次のコマンドを実行します。 + +```bash +# macOS / Linux +cp -r node_modules/igniteui-angular/skills/. .agents/skills/ +``` + +```powershell +# Windows (PowerShell) +Copy-Item -Recurse node_modules\igniteui-angular\skills .agents\skills +``` + +または、必要に応じて個別のスキル ディレクトリをコピーします。 + +**macOS / Linux** + +```bash +cp -r node_modules/igniteui-angular/skills/igniteui-angular-components .agents/skills/ +cp -r node_modules/igniteui-angular/skills/igniteui-angular-grids .agents/skills/ +cp -r node_modules/igniteui-angular/skills/igniteui-angular-theming .agents/skills/ +``` + +**Windows (PowerShell)** + +```powershell +Copy-Item -Recurse node_modules\igniteui-angular\skills\igniteui-angular-components .agents\skills\igniteui-angular-components +Copy-Item -Recurse node_modules\igniteui-angular\skills\igniteui-angular-grids .agents\skills\igniteui-angular-grids +Copy-Item -Recurse node_modules\igniteui-angular\skills\igniteui-angular-theming .agents\skills\igniteui-angular-theming +``` + +**Windows (Command Prompt)** + +```cmd +xcopy /E /I node_modules\igniteui-angular\skills\igniteui-angular-components .agents\skills\igniteui-angular-components +xcopy /E /I node_modules\igniteui-angular\skills\igniteui-angular-grids .agents\skills\igniteui-angular-grids +xcopy /E /I node_modules\igniteui-angular\skills\igniteui-angular-theming .agents\skills\igniteui-angular-theming +``` + +スキル ファイルは次の場所にあります: + +``` +node_modules/igniteui-angular/skills/igniteui-angular-components/SKILL.md +node_modules/igniteui-angular/skills/igniteui-angular-grids/SKILL.md +node_modules/igniteui-angular/skills/igniteui-angular-theming/SKILL.md +``` + +#### **オプション D - `npx skills` CLI を使用する** + +`skills` CLI は、スキルをプロジェクトに直接ダウンロードしてインストールするインタラクティブなツールです。プロジェクト ルートで次のコマンドを実行します。 + +```bash +npx skills add IgniteUI/igniteui-angular +``` + +CLI は、一連のプロンプトをガイドします。 + +1. インストールするスキルを選択します (components、grids、theming)。 +2. プロジェクト内のスキル ファイルのターゲット場所を選択します (例: `.agents/skills/`、`.github/skills/`)。 +3. 選択したスキル ファイルを自動的にダウンロードして書き込みます。 + +完了すると、スキルはすぐに使用できます。手動でファイルをコピーする必要はありません。 + +> **注:** Node.js とインターネット接続が必要です。コマンドは、[IgniteUI/igniteui-angular](https://github.com/IgniteUI/igniteui-angular) リポジトリから最新のスキル ファイルを取得します。 + +### 手順 2: スキルを IDE に読み込む + +ファイルを取得したら、それらを開いて AI アシスタントに読み込みます。 + +| IDE / ツール | 読み込み方法 | +|:-----------|:------------| +| **VS Code + GitHub Copilot** | Copilot Chat 入力で `#file:path/to/SKILL.md` を使用して、そのセッションのコンテキストとして添付します。 | +| **Cursor** | `SKILL.md` ファイルをチャット ウィンドウにドラッグするか、`@file` と入力して選択します。 | +| **Windsurf** | Cascade チャット パネルの **[+]** ボタンを使用してファイルを添付します。 | +| **JetBrains AI Assistant** | AI チャットのクリップ アイコンをクリックして、ファイルをコンテキストとして添付します。 | +| **Claude Desktop** | ファイルをチャットにドラッグするか、**[Project] → [Add Content]** を介してプロジェクト ナレッジ ベースに追加します。 | +| **その他のアシスタント** | `SKILL.md` ファイルを開き、その完全なコンテンツをコピーして、システム プロンプトまたは最初のメッセージの上部に貼り付けます。 | + +--- + +## Theming MCP サーバー + +**Theming スキル**には、`igniteui-theming` MCP サーバーのセットアップ手順が含まれています。これにより、AI アシスタントがパレット生成やコンポーネント テーマのひな形作成 などのライブ テーマ ツールにアクセスできます。VS Code、Cursor、Claude Desktop、JetBrains IDE の構成手順については、[Theming スキル ファイル](https://github.com/IgniteUI/igniteui-angular/blob/master/skills/igniteui-angular-theming/SKILL.md)を参照してください。 + +Theming MCP の詳細については、[Ignite UI Theming MCP](./theming-mcp.md)のドキュメントを参照してください。 + +## その他のリソース + +
+ +- [Ignite UI で作業を開始](../general/getting-started.md) +- [Angular Schematics & Ignite UI CLI](../general/cli-overview.md) +- [スタンドアロン コンポーネントの使用方法](../general/how-to/how-to-use-standalone-components.md) +- [コード分割と複数のエントリ ポイント](../general/code-splitting-and-multiple-entry-points.md) + +
+コミュニティに参加して新しいアイデアをご提案ください。 + +- [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/jp/components/ai/theming-mcp.md b/jp/components/ai/theming-mcp.md new file mode 100644 index 0000000000..d58213a5d1 --- /dev/null +++ b/jp/components/ai/theming-mcp.md @@ -0,0 +1,351 @@ +--- +title: Ignite UI Theming MCP | Ignite UI for Angular +_description: Ignite UI for Angular には Ignite UI Theming MCP サーバーが付属しており、Angular アプリケーション用のカスタム テーマ、パレット、タイポグラフィ、エレベーションを作成できます。MCP サーバーを使用してブランドおよび設計要件に合わせたカスタム テーマを生成および適用する方法について説明します。 +_keywords: Ignite UI for Angular, UI コントロール, Angular ウィジェット, web ウィジェット, UI ウィジェット, Angular, ネイティブ Angular コンポーネント スイート, ネイティブ Angular コントロール, ネイティブ Angular コンポーネント ライブラリ, 人工知能, AI, MCP, Model Context Protocol, テーマ設定, カスタム テーマ, パレット, タイポグラフィ, エレベーション +_language: ja +--- + +# Ignite UI Theming MCP + +

Ignite UI Theming MCP は、AI アシスタントが Ignite UI アプリケーション用の本番対応のテーマ コードを生成できるようにする Model Context Protocol (MCP) サーバーです。MCP は、AI アシスタントが外部サーバーによって提供される特殊なツールを呼び出すことができるようにするオープン標準です。Ignite UI Theming MCP をエディターまたはデスクトップ AI クライアントに接続し、必要なものを説明すると、アシスタントが残りを行います。

+ +
+ +## 概要 + +Sass テーマ コードを手動で記述する代わりに、テーマの意図を自然言語で説明し、AI アシスタントに正しいコードを生成させることができます。MCP サーバーは、適切なシェード生成を備えたパレット、タイポグラフィ、エレベーション、コンポーネント デザイン トークン オーバーライドなどを含む、正確なテーマ コードを生成するために必要な知識とツールを AI に提供します。 + +このサーバーは、4 つすべての Ignite UI デザイン システム (**Material**、**Bootstrap**、**Fluent**、**Indigo**) をライトとダークの両方のバリアントでサポートします。このガイドでは Angular に焦点を当てていますが、MCP サーバーは **Ignite UI for Web Components**、**React**、**Blazor** でも動作します。`detect_platform` ツールは `package.json` を読み取り、正しいインポート パスとセレクターを自動的に選択します。 + +ほとんどのツールは、**Sass** または **CSS** 出力のいずれかを生成できます。Sass 出力がデフォルトで、`igniteui-theming` Sass モジュールと統合されます。CSS 出力は、すぐに使用できる CSS カスタム プロパティを生成し、**ローカル Sass ツールチェーンなしで**使用できます。サーバーがコンパイルを行います。 + +**接続後に試すプロンプトの例:** + +> 「プライマリ #2563eb とコーラル セカンダリ #f97316 を使用して、Angular アプリ用の完全な Material Design ダーク テーマを作成して」 + +> 「ボタン コンポーネントで利用可能なデザイン トークンは何ですか? ブランドの紫 #8b5cf6 でカスタマイズして」 + +> 「ブランド ガイドラインでは、すべてのプライマリ シェードに正確な 16 進数値が指定されています。これらの明示的な値でカスタム パレットを作成して」 + +> 「カレンダー コンポーネントでより小さい間隔を使用するようにして」 + +## 前提条件 + +MCP サーバーを構成する前に、次のものがあることを確認してください。 + +- **Node.js** (v18 以降) がインストールされていること - これにより、サーバーの起動に使用される `npx` コマンドが提供されます。 +- `package.json` に依存関係として **Ignite UI パッケージ**がリストされているプロジェクト。Angular の場合、これは `igniteui-angular` (v15.0 以降) です。サーバーは、`igniteui-webcomponents`、`igniteui-react`、`igniteui-blazor` もサポートします。 +- **MCP サポートを備えた AI クライアント** - 例: VS Code と GitHub Copilot、Cursor、Claude Desktop、Claude Code、または AI Assistant プラグインを備えた JetBrains IDE。 + +`igniteui-angular` はまだインストールされていない場合は、次のコマンドを実行します。 + +```bash +ng add igniteui-angular +``` + +## セットアップ + +MCP サーバーは `igniteui-theming` パッケージにバンドルされており、`npx` 経由で起動されます。プロジェクトに Ignite UI パッケージが既にインストールされている以外に、別途インストールする必要はありません。 + +正規の起動コマンドは次のとおりです。 + +```bash +npx -y igniteui-theming igniteui-theming-mcp +``` + +> [!NOTE] +> `-y` フラグは、`npx` にパッケージ ダウンロード プロンプトを自動確認するように指示するため、サーバーは手動介入なしで起動できます。 + +### バージョン解決の仕組み + +`igniteui-theming` は `igniteui-angular` の依存関係であるため、`npm install` 後には既に `node_modules` に存在します。上記の起動コマンドを実行すると、`npx` はローカルにインストールされたコピーを検出し、直接実行します。ネットワーク リクエストは行われません。つまり、MCP サーバーのバージョンは、常に他の Ignite UI パッケージと同期した状態を保ちます。 + +プロジェクトの外部 (または `npm install` を実行する前) でコマンドを実行すると、`npx -y` は代わりに npm から**最新**バージョンを一時キャッシュにダウンロードします。サーバーは引き続き起動しますが、検査する `package.json` がないため、`detect_platform` は `generic` を返します。 + +以下から AI クライアントを選択して、特定の構成手順を確認してください。 + +### VS Code + +VS Code の GitHub Copilot は、ワークスペース レベルの構成ファイルを介して MCP サーバーをサポートします。プロジェクト ルートに `.vscode/mcp.json` を作成または編集します。 + +```json +{ + "servers": { + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + +保存したら、GitHub Copilot チャット パネルを開き、**Agent** モードに切り替えると、Ignite UI Theming ツールが利用できるようになります。 + +> [!NOTE] +> VS Code での MCP サポートには、GitHub Copilot と VS Code 1.99 以降が必要です。 + +### Cursor + +Cursor は、プロジェクト スコープの MCP 構成をサポートします。プロジェクト ルートに `.cursor/mcp.json` を作成または編集します。 + +```json +{ + "mcpServers": { + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + +新しい Cursor チャット セッションを開くと、サーバーが自動的に検出されます。 + +> [!NOTE] +> Cursor の **Settings → MCP** を介して、MCP サーバーをグローバルに構成することもできます。 + +### Claude Desktop + +Claude Desktop 構成ファイルにサーバーを追加します。 + +- **macOS**: `~/Library/Application Support/Claude/claude_desktop_config.json` +- **Windows**: `%APPDATA%\Claude\claude_desktop_config.json` + +```json +{ + "mcpServers": { + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + +保存後、Claude Desktop を再起動します。チャット入力エリアに MCP サーバー インジケーター (スライダー アイコン) が表示され、MCP ツールがアクティブであることが確認できます。 + +### Claude Code + +Claude Code は、CLI とプロジェクト スコープの `.mcp.json` ファイルを介して MCP サーバーをサポートします。構成をチームと共有するには、プロジェクト ルートに `.mcp.json` を作成または編集します。 + +```json +{ + "mcpServers": { + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + +あるいは、ローカル環境のみにコマンド ラインを介してサーバーを追加できます。 + +```bash +claude mcp add igniteui-theming -- npx -y igniteui-theming igniteui-theming-mcp +``` + +Claude Code 内で `/mcp` コマンドを使用して、サーバーが接続されていることを確認します。 + +### JetBrains IDE + +JetBrains AI Assistant は、IDE 設定を介して MCP サーバーをサポートします。 + +1. **[Settings]** (macOS では **[Preferences]**) を開きます。 +2. **[Tools] → [AI Assistant] → [Model Context Protocol (MCP)]** に移動します。 +3. **[+ Add]** をクリックし、**[As JSON]** を選択するか、フォーム フィールドを使用します。 +4. 以下の構成を入力します。 + + ```json + { + "mcpServers": { + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } + } + ``` + +5. **[OK]** をクリックし、AI Assistant を再起動します。 + +> [!NOTE] +> MCP サポートには、JetBrains IDE に AI Assistant プラグインがインストールされて有効になっている必要があります。 + +### その他の MCP クライアント + +その他の MCP 互換クライアントの場合は、次のコマンドと引数で STDIO トランスポートを使用します。 + +- **コマンド**: `npx` +- **引数**: `-y`、`igniteui-theming`、`igniteui-theming-mcp` + +## プロジェクト ルールでの AI 動作のカスタマイズ + +このセクションはオプションです。これは、既存のコードベース規則に一致するように AI がテーマ コードを生成する方法を微調整したいチームを対象としています。 + +VS Code や Cursor などのエディターでは、AI の動作を形成するプロジェクト レベルの指示ファイルを提供できます。MCP サーバーは、どのツールをどの順序で呼び出すかを既に AI に教えています。それを繰り返す必要はありません。代わりに、これらの指示ファイルを使用して、**プロジェクトの設計上の決定、コード規則、ファイル構成**をエンコードして、AI が最初の試行でコードベースに適合するコードを生成するようにします。 + +### VS Code (`.github/copilot-instructions.md`) + +```markdown +## Theming Conventions + +### Sass Code Style +- Use `@use` / `@forward` — never `@import`. +- Extract repeated color values into Sass variables (e.g., `$brand-hover: #a78bfa`). +- Prefer setting primary design tokens over overriding many dependent tokens. + For example, setting `$foreground` on a flat button automatically derives + `$hover-background`, `$focus-background`, and `$active-background`. +- Keep component overrides scoped — use the component's default selector + (e.g., `.igx-button--flat`) unless a narrower scope is needed. +``` + +### Cursor (`.cursor/rules/theming.mdc`) + +```markdown +--- +description: Ignite UI for Angular theming conventions +globs: ["**/*.scss", "**/styles/**"] +--- + +## Project Theming Rules + +### Code conventions +- `@use` / `@forward` only — no `@import`. +- Extract shared colors into variables; do not repeat hex literals. +- Prefer primary tokens — let dependent tokens derive automatically. +- One component override per file. Name the file after the component. +- Comment every override with the design rationale. +- Never hard-code gray shades for text — use palette grays so dark mode works. +- For dark mode, only the palette changes. Component overrides stay the same. +``` + +> [!NOTE] +> 両方のファイルはソース管理にコミットされるため、すべてのチーム メンバーが手動設定なしで同じ AI 動作を得られます。プロジェクトに合わせてブランド カラー、デザイン システム、ファイル パスを調整してください。 + +## 利用可能なツール + +MCP サーバーは、プロンプトに基づいて AI が自動的に使用するツール セットを公開します。それらを直接呼び出す必要はありません。必要なものを説明するだけです。 + +現在の完全なツール リストとそのパラメーターをいつでも確認するには、AI アシスタントに次のように尋ねてください。 + +> 「What tools does the Ignite UI Theming MCP provide?」 (Ignite UI Theming MCP はどのようなツールを提供していますか?) + +各ツールの簡単な概要を以下に示します。 + +| ツール | 説明 | +|------|-------------| +| `detect_platform` | `package.json` を読み取り、プロジェクトが Ignite UI for Angular、Web Components、React、Blazor のいずれを使用しているかを識別します。以降のすべてのツールに対して正しいインポート パスとコンポーネント セレクターを選択します。 | +| `create_palette` | 基本ブランド カラーから自動シェード バリアント (50–900、A100–A700) を持つカラー パレットを生成します。`output` パラメーター (`sass` または `css`) と、スキーマを選択する `designSystem` を受け入れます。 | +| `create_custom_palette` | きめ細かいパレット作成 — 自動生成が適さない場合に、すべてのシェードに対して正確な 16 進数値を指定します。 | +| `create_typography` | 指定されたデザイン システムのフォント ファミリとタイプ スケールを設定します。 | +| `create_elevations` | Material または Indigo デザイン システムのボックス シャドウ エレベーション レベル (0-24) を構成します。 | +| `create_theme` | ワンショット完全テーマ: パレット + タイポグラフィ + エレベーション、`styles.scss` に含める準備ができています。`designSystem` (`material`、`bootstrap`、`fluent`、または `indigo`) と `variant` (`light` または `dark`) を受け入れます。 | +| `set_size` | `--ig-size` をグローバルまたは特定のコンポーネントに設定します (`small`、`medium`、または `large`)。 | +| `set_spacing` | `--ig-spacing` (およびオプションでインライン/ブロック オーバーライド) をグローバルまたはコンポーネントごとに設定します。 | +| `set_roundness` | `--ig-radius-factor` (0 = 四角、1 = 完全な丸) をグローバルまたはコンポーネントごとに設定します。 | +| `get_component_design_tokens` | コンポーネントで利用可能なすべてのデザイン トークンを返します — `create_component_theme` の前に常にこれを呼び出します。 | +| `create_component_theme` | コンポーネントのトークン (色、境界線など) をカスタマイズするための Sass または CSS を生成します。正しいスキーマを選択するために `variant` (`light` または `dark`) を受け入れます。 | +| `get_color` | パレット カラーの CSS 変数参照 (例: `var(--ig-primary-500)`) を返します。オプションのコントラストと不透明度パラメーターをサポートします。 | +| `read_resource` | 4 つのカテゴリに編成された組み込み参照リソースを読み取ります: プラットフォーム構成 (6)、パレット/タイポグラフィ/エレベーション プリセット (5)、カラー ガイダンス (7)、レイアウト/間隔ドキュメント (8)。 | + +> [!NOTE] +> 複合コンポーネント (例: `combo`、`select`、`grid`) の場合、`get_component_design_tokens` はフラットなトークン リストではなく、関連する子テーマのリストを返します。たとえば、`grid` をクエリすると、`grid`、`grid-toolbar`、`grid-filtering`、`paginator` などの子テーマが返される場合があります。AI は、適切なスコープされたセレクターを使用して、各子テーマに対して個別の `create_component_theme` 呼び出しを生成します。 + +> [!NOTE] +> プロジェクトでライセンス版の `@infragistics/igniteui-angular` パッケージを使用している場合は、AI にそのことを伝えてください。そうすることで、パレット、テーマ、コンポーネント ツールで `licensed` パラメーターを設定できます。これにより、生成されるインポート パスがそれに応じて調整されます。 + +## シナリオ例 + +次のシナリオは、MCP サーバーが接続された後に AI に何を依頼できるかを示します。 + +### 新しいプロジェクト テーマ + +> 「Ignite UI を使用して新しい Angular プロジェクトを開始しています。プライマリ #2563eb、セカンダリ #f97316、Roboto フォントで完全な Material Design ライト テーマを作成して。」 + +AI は `create_theme` を呼び出し、すぐに使用できる `styles.scss` ファイルを返します。生成される出力は次のようになります: + +```scss +/* styles.scss */ +@use 'igniteui-angular/theming' as *; + +$my-palette: palette( + $primary: #2563eb, + $secondary: #f97316, + $surface: #fff, + $gray: #9e9e9e, +); + +$my-typography: typography( + $font-family: 'Roboto, sans-serif', +); + +@include core(); +@include typography($my-typography); +@include theme($my-palette, $schema: $light-material-schema); +``` + +### ダーク モード バリアント + +> 「既存のテーマのダーク モード バージョンが必要です。同じプライマリ ブルーを維持しますが、ダーク サーフェス #121212 を使用して。」 + +### ブランド固有のカラー シェード + +> 「デザイン システムでは、プライマリ グリーンの 14 個すべてのシェードに正確な 16 進数値が指定されています。値を貼り付けます - カスタム パレットを作成して」 + +AI は、プライマリ カラーに `mode: "explicit"` を使用して `create_custom_palette` を呼び出し、残りは自動生成します。シェード生成の詳細については、[パレット](./palettes.md)を参照してください。 + +### コンポーネント レベルのカスタマイズ + +> 「フラット ボタンを紫の背景 #8b5cf6 と白いテキストでスタイル設定し、ホバー時にはより明るい紫 #a78bfa にして」 + +AI は最初に `get_component_design_tokens` を呼び出して有効なトークン名を検出し、次に正しい値で `create_component_theme` を呼び出します。 + +### レイアウト調整 + +> 「カレンダーが場所を取りすぎている感じがします — 間隔を減らして、すべてのコンポーネントを少し小さくして」 + +AI は、カレンダー コンポーネントにスコープされた `set_spacing` と `:root` レベルで `set_size` を呼び出します。 + +## トラブルシューティング + +**プラットフォームが検出されない** + +`detect_platform` が `null` または `generic` を返す場合は、`package.jso`n に Ignite UI パッケージ (例: `igniteui-angular`、`igniteui-webcomponents`) が依存関係としてリストされていることを確認してください。AI に明示的に伝えることもできます: 「Angular プラットフォームを使用して」 + +**カラーの輝度警告** + +AI がカラーの輝度について警告した場合、選択したカラーが自動シェード生成がうまく機能するには明るすぎるか暗すぎることを意味します。中間範囲のカラーを選択するか、代わりに明示的なシェード値で `create_custom_palette` を使用するように AI に依頼してください。 + +**サーフェス カラーの不一致** + +ライト テーマには明るいサーフェス (例: `#fafafa`) を使用してください。ダーク テーマには暗いサーフェス (例: `#121212`) を使用してください。不一致のサーフェス カラーは、AI に警告を発生させます。 + +**生成された Sass がコンパイルされない** + +`igniteui-angular` と `igniteui-theming` がインストールされていることを確認してください。 + +```bash +ng add igniteui-angular +``` + +また、`styles.scss` で他のテーマ mixin の前に `core()` が呼び出されていることを確認してください。正しいファイル設定については、[Sass を使用したテーマ](./sass/index.md)を参照してください。 + +## その他のリソース + +関連トピック: + +- [テーマの概要](../themes/index.md) +- [パレット](../themes/palettes.md) +- [タイポグラフィ](../themes/typography.md) +- [エレベーション](../themes/elevations.md) +- [スペーシング](../themes/spacing.md) +- [丸み](../themes/roundness.md) +- [Sass を使用したテーマ](../themes/sass/index.md) + +
+ +コミュニティに参加して新しいアイデアをご提案ください。 + +- [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/jp/components/avatar.md b/jp/components/avatar.md index a66bdbf106..575846a6b5 100644 --- a/jp/components/avatar.md +++ b/jp/components/avatar.md @@ -209,7 +209,7 @@ $custom-avatar-theme: avatar-theme( ```scss .initials { - @include css-vars($custom-avatar-theme); + @include tokens($custom-avatar-theme); } ``` @@ -271,7 +271,7 @@ igx-avatar { } ``` -または、ユニバーサル変数 `--igx-avatar-size` を使用して、すべてのインスタンスをターゲットにすることもできます。 +または、ユニバーサル変数 `--ig-avatar-size` を使用して、すべてのインスタンスをターゲットにすることもできます。 ```html
@@ -281,7 +281,7 @@ igx-avatar { ```scss .my-app { - --igx-avatar-size: 200px; + --ig-avatar-size: 200px; } ``` @@ -314,5 +314,6 @@ igx-avatar {
コミュニティに参加して新しいアイデアをご提案ください。 + - [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) \ No newline at end of file diff --git a/jp/components/badge.md b/jp/components/badge.md index 54fa592566..db0e6905da 100644 --- a/jp/components/badge.md +++ b/jp/components/badge.md @@ -347,10 +347,12 @@ $custom-badge-theme: badge-theme( ); ``` -新しいテーマを含めるには、`css-vars` ミックスインを使用します。 +新しいテーマを含めるには、`tokens` ミックスインを使用します。 ```scss -@include css-vars($custom-badge-theme); +:host { + @include tokens($custom-badge-theme); +} ``` ### デモ diff --git a/jp/components/banner.md b/jp/components/banner.md index 54fa4986a7..e06afeafbc 100644 --- a/jp/components/banner.md +++ b/jp/components/banner.md @@ -286,7 +286,9 @@ $custom-banner-theme: banner-theme( 最後にバナーのカスタム テーマを渡します。 ```scss -@include css-vars($custom-banner-theme); +:host { + @include tokens($custom-banner-theme); +} ``` @@ -1560,7 +1560,7 @@ button { ```scss .my-app { - --igx-button-size: 50px; + --ig-button-size: 50px; } ``` diff --git a/jp/components/calendar.md b/jp/components/calendar.md index c9c67f2dca..d0e495d3c8 100644 --- a/jp/components/calendar.md +++ b/jp/components/calendar.md @@ -791,7 +791,9 @@ $custom-calendar-theme: calendar-theme( 最後に calendar のカスタム テーマを設定します。 ```scss - @include css-vars($custom-calendar-theme); +:host { + @include tokens($custom-calendar-theme); +} ``` 以下のサンプルでは、カスタマイズした CSS 変数を使用したカレンダー コンポーネントが、[`SAP UI5`](https://ui5.sap.com/#/entity/sap.ui.unified.Calendar/sample/sap.ui.unified.sample.CalendarSingleDaySelection) デザイン システムのカレンダーに視覚的に似たデザインを実現している様子を確認できます。 diff --git a/jp/components/card.md b/jp/components/card.md index c1af7817ff..814c3ac15b 100644 --- a/jp/components/card.md +++ b/jp/components/card.md @@ -397,7 +397,9 @@ $colorful-card: card-theme( 最後にコンポーネントのテーマをアプリケーションに**含めます**。 ```scss -@include css-vars($custom-card-theme); +:host { + @include tokens($custom-card-theme); +} ``` 以下のサンプルでは、カスタマイズした CSS 変数を使用したカード コンポーネントが、[`Ant`](https://ant.design/components/card?theme=light#card-demo-meta) デザイン システムのカードに視覚的に似たデザインを実現している様子を確認できます。 diff --git a/jp/components/carousel.md b/jp/components/carousel.md index f378f60658..142bd55615 100644 --- a/jp/components/carousel.md +++ b/jp/components/carousel.md @@ -698,7 +698,9 @@ $carousel-theme: carousel-theme( 最後にコンポーネントのテーマを含めます。 ```scss -@include css-vars($carousel-theme); +:host { + @include tokens($carousel-theme); +} ``` ### デモ diff --git a/jp/components/checkbox.md b/jp/components/checkbox.md index 898eb59806..8482141c2d 100644 --- a/jp/components/checkbox.md +++ b/jp/components/checkbox.md @@ -346,7 +346,9 @@ $custom-checkbox-theme: checkbox-theme( 最後に、カスタム テーマをアプリケーションに**含めます**。 ```scss -@include css-vars($custom-checkbox-theme); +:host { + @include tokens($custom-checkbox-theme); +} ``` 以下のサンプルでは、カスタマイズした CSS 変数を使用したチェックボックス コンポーネントが、[`SAP UI5`](https://ui5.sap.com/#/entity/sap.m.CheckBox/sample/sap.m.sample.CheckBox) デザイン システムのチェックボックスに視覚的に似たデザインを実現している様子を確認できます。 diff --git a/jp/components/chip.md b/jp/components/chip.md index 81a3e1e786..5b574b402b 100644 --- a/jp/components/chip.md +++ b/jp/components/chip.md @@ -626,7 +626,9 @@ $custom-chip-theme: chip-theme( 最後に、カスタム テーマをアプリケーションに**含めます**。 ```scss -@include css-vars($custom-chip-theme); +:host { + @include tokens($custom-chip-theme); +} ``` 以下のサンプルでは、カスタマイズした CSS 変数を使用したチップ コンポーネントが、[`Ant`](https://ant.design/components/tag?theme=light#tag-demo-icon) デザイン システムのチップに視覚的に似たデザインを実現している様子を確認できます。 @@ -689,7 +691,7 @@ igx-chip { } ``` -または、ユニバーサル変数 `--igx-chip-size` を使用して、すべてのインスタンスをターゲットにすることもできます。 +または、ユニバーサル変数 `--ig-chip-size` を使用して、すべてのインスタンスをターゲットにすることもできます。 ```html
@@ -699,7 +701,7 @@ igx-chip { ```scss .my-app { - --igx-chip-size: 50px; + --ig-chip-size: 50px; } ``` diff --git a/jp/components/circular-progress.md b/jp/components/circular-progress.md index 3e4d212a33..dcf1918396 100644 --- a/jp/components/circular-progress.md +++ b/jp/components/circular-progress.md @@ -252,7 +252,9 @@ $custom-theme: progress-circular-theme( 最後にコンポーネントのテーマをアプリケーションに**含めます**。 ```scss -@include css-vars($custom-theme); +:host { + @include tokens($custom-theme); +} ``` ### デモ diff --git a/jp/components/combo.md b/jp/components/combo.md index 18c791c213..002fe5894d 100644 --- a/jp/components/combo.md +++ b/jp/components/combo.md @@ -383,10 +383,10 @@ $custom-checkbox-theme: checkbox-theme( 最後にコンポーネントのテーマを含めます。 ```scss -:host ::ng-deep { - @include css-vars($custom-combo-theme); - @include css-vars($custom-drop-down-theme); - @include css-vars($custom-checkbox-theme); +:host { + @include tokens($custom-combo-theme); + @include tokens($custom-drop-down-theme); + @include tokens($custom-checkbox-theme); } ``` diff --git a/jp/components/date-picker.md b/jp/components/date-picker.md index 5d8dd91597..04e439646d 100644 --- a/jp/components/date-picker.md +++ b/jp/components/date-picker.md @@ -335,7 +335,9 @@ $custom-datepicker-theme: calendar-theme( 最後に Angular Date Picker のカスタム テーマを設定します。 ```scss -@include css-vars($custom-datepicker-theme); +:host { + @include tokens($custom-datepicker-theme); +} ``` >[!WARNING] @@ -344,7 +346,7 @@ $custom-datepicker-theme: calendar-theme( ```scss :host { ::ng-deep { - @include css-vars($custom-datepicker-theme); + @include tokens($custom-datepicker-theme); } } ``` diff --git a/jp/components/date-range-picker.md b/jp/components/date-range-picker.md index c2bf325226..a0c4f2a4d9 100644 --- a/jp/components/date-range-picker.md +++ b/jp/components/date-range-picker.md @@ -536,9 +536,11 @@ $custom-calendar-theme: calendar-theme( 最後にカスタム テーマを渡します。 ```scss -@include css-vars($custom-date-range-theme); -@include css-vars($custom-input-group-theme); -@include css-vars($custom-calendar-theme); +:host { + @include tokens($custom-date-range-theme); + @include tokens($custom-input-group-theme); + @include tokens($custom-calendar-theme); +} ``` >[!WARNING] diff --git a/jp/components/dialog.md b/jp/components/dialog.md index 61d1e2fd4e..d904518628 100644 --- a/jp/components/dialog.md +++ b/jp/components/dialog.md @@ -338,7 +338,9 @@ $custom-button: contained-button-theme( 最後にコンポーネントのテーマを**含めます**。 ```scss -@include css-vars($my-dialog-theme); +:host { + @include tokens($my-dialog-theme); +} ``` >[!NOTE] @@ -347,7 +349,7 @@ $custom-button: contained-button-theme( ```scss :host { ::ng-deep { - @include css-vars($my-dialog-theme); + @include tokens($my-dialog-theme); } } ``` diff --git a/jp/components/drop-down.md b/jp/components/drop-down.md index 756e9d34ff..e0e8de9264 100644 --- a/jp/components/drop-down.md +++ b/jp/components/drop-down.md @@ -636,11 +636,11 @@ $custom-drop-down-theme: drop-down-theme( ); ``` -最後に、カスタム ドロップダウン テーマをクラスまたは要素セレクターに渡します。 +最後に、カスタム ドロップダウン テーマを渡します。 ```scss -.drop-down__scroll-container { - @include css-vars($custom-drop-down-theme); +:host { + @include tokens($custom-drop-down-theme); } ``` diff --git a/jp/components/expansion-panel.md b/jp/components/expansion-panel.md index 9c5e9f8527..2ea43511f4 100644 --- a/jp/components/expansion-panel.md +++ b/jp/components/expansion-panel.md @@ -269,7 +269,7 @@ Angular Expansion Panel は、パネルの縮小時に「更に表示」を描 $body-background $body-color - パネル本文テキストの色 + パネル本体テキストの色 @@ -336,11 +336,13 @@ $custom-panel-theme: expansion-panel-theme( ### コンポーネント テーマの適用 -コンポーネント テーマを適用するには、`css-vars` ミックスインをインクルードし、`$custom-panel-theme` マップを渡します。 +コンポーネント テーマを適用するには、`tokens` ミックスインをインクルードし、`$custom-panel-theme` マップを渡します。 ```scss // In expansion-styling.component.scss -@include css-vars($custom-panel-theme); +:host { + @include tokens($custom-panel-theme); +} ``` Ignite UI テーマ エンジンの使用方法の詳細については、[`こちらをクリックしてください`](themes/sass/component-themes.md)。 diff --git a/jp/components/general/getting-started.md b/jp/components/general/getting-started.md index 09be096a22..058dab2271 100644 --- a/jp/components/general/getting-started.md +++ b/jp/components/general/getting-started.md @@ -18,7 +18,7 @@ Ignite UI for Angular はデュアルライセンス モデルで提供され、
- Visual Studio Code @@ -102,13 +102,15 @@ ng g @igniteui/angular-schematics:upgrade-packages ig upgrade-packages ``` -Schematic はプロジェクトのパッケージの依存関係を切り替え、ソース参照を更新します。[まだセットアップされていない場合、NPM レジストリへのログインが要求されます](ignite-ui-licensing.md#プライベート-npm-フィードを使用するための環境設定方法)。 +Schematic はプロジェクトのパッケージの依存関係を切り替え、ソース参照を更新します。 +[まだセットアップされていない場合、NPM レジストリへのログインが要求されます](ignite-ui-licensing.md#プライベート-npm-フィードを使用するための環境設定方法)。 #### 新しいセットアップで npm レジストリにログイン 上記の方法は、Ignite UI for Angular トライアル版パッケージが既にインストールされているシナリオのみを対象としています。プロジェクトの新しいセットアップを実行する場合、または Ignite UI for Angular を使用する場合は、以下のガイダンスに従ってください。 次の方法で[プライベート npm フィード環境の正しいセットアップを実行する](ignite-ui-licensing.md#プライベート-npm-フィードを使用するための環境設定方法)ことが重要です: + - プライベート レジストリの有効なセットアップを確認します。 - トライアル版以外のユーザー アカウントとパスワードを指定して npm を使用してプライベート フィードにログインします。 @@ -125,7 +127,7 @@ npm i -g @igniteui/angular-schematics または ```cmd -npm install -g igniteui-cli +npm install -g igniteui-cli ``` [Ignite UI CLI を使用したガイド付きエクスペリエンス](cli/step-by-step-guide-using-cli.md)または [Ignite UI for Angular Schematics](cli/step-by-step-guide-using-angular-schematics.md) は、構成したアプリケーションをブートストラップする最も簡単な方法です。 @@ -148,7 +150,7 @@ ig
- + Play Video

はじめての Ignite UI CLI アプリ開発

@@ -281,7 +283,7 @@ ng serve 最終的な結果は以下のようになります。 - +Ignite UI Project ## API リファレンス @@ -290,10 +292,17 @@ ng serve - [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html) - [IgxGridComponent スタイル]({environment:sassApiUrl}/themes#function-grid-theme) +## AI 支援開発 + +Ignite UI for Angular には**エージェントのスキル**が付属しています。これは、AI コーディング アシスタント (GitHub Copilot、Cursor、Windsurf、Claude、JetBrains AI など) にライブラリの使用方法を教える構造化された知識ファイルです。スキルには、コンポーネント、データ グリッド、グリッド データ操作、テーマ設定が含まれます。 + +詳細については、[Ignite UI for Angular スキル](../ai/skills.md)トピックを参照してください。 + ## その他のリソース
+- [Ignite UI for Angular スキル](../ai/skills.md) - [Ignite UI CLI](https://github.com/IgniteUI/igniteui-cli) - [Ignite UI CLI コマンド](https://github.com/IgniteUI/igniteui-cli/wiki#available-commands) - [Grid の概要](../grid/grid.md) diff --git a/jp/components/general/how-to/how-to-customize-theme.md b/jp/components/general/how-to/how-to-customize-theme.md index b9448e9d5f..ed036f3e9c 100644 --- a/jp/components/general/how-to/how-to-customize-theme.md +++ b/jp/components/general/how-to/how-to-customize-theme.md @@ -59,7 +59,7 @@ html, body { 同じテーマのダーク バリエーションが必要で、独自の[カラー パレット](../../themes/palettes.md)をブランディングに合わせて追加し、フォントをデフォルトの `Titillium Web` ではなく `Poppins` に変更します。これらはすべて App Builder から直接変更でき、その変更を App Builder からプル リクエストとしてリポジトリにプッシュできます。 - +App Builder のテーマ設定 - 作業の開始 更新された `styles.scss` は以下のようになります。 @@ -82,7 +82,7 @@ $custom-palette: palette( ご覧のように、コード生成は特定の `@include light-theme($light-material-palette);` (これは[デフォルト テーマ](../../themes/sass/presets/material.md)と[カラー パレット](../../themes/palettes.md))から、一般的な [`theme()`]({environment:sassApiUrl}/themes#mixin-theme) include に変わり、パラメーターとしてカスタム カラー パレットとテーマ構造のための [dark material schema](../../themes/sass/schemas.md) が提供されるようになりました。実行中の Angular アプリの結果は以下のようになります。 - +ダーク アプリの作業の開始 アプリケーションで特定の[コンポーネント テーマ](../../themes/sass/component-themes.md)をさらに掘り下げてカスタマイズしたいので、個々のコンポーネント テーマの CSS 変数を取り込んでこれを行います。この場合、グリッド ツールバーのテーマです。 @@ -111,13 +111,15 @@ $toolbar-theme: grid-toolbar-theme( $background-color: $primary ); -@include css-vars($toolbar-theme); +:host { + @include tokens($toolbar-theme); +} /* END Grid Toolbar */ ``` アプリの結果は以下のようになります。 - +更新されたツールバーのカスタマイズ 同じプロセスを適用して、任意のコンポーネント テーマを個別にオーバーライドおよびカスタマイズできます。 @@ -187,16 +189,16 @@ $custom-palette-light: palette( ``` >[!NOTE] -> [`css-vars()`]({environment:sassApiUrl}/themes#mixin-css-vars) を使用してすべてのテーマ変数を再度含める代わりに、`igx-grid-toolbar` テーマ オーバーライドを 2 つの変数のみをオーバーライドするように切り替えました。 +> [`tokens`]({environment:sassApiUrl}/themes#mixin-tokens) を使用してすべてのテーマ変数を再度含める代わりに、`igx-grid-toolbar` テーマ オーバーライドを 2 つの変数のみをオーバーライドするように切り替えました。 > すべてのテーマ変数は[対応する sass api ドキュメント]({environment:sassApiUrl}/themes#function-grid-toolbar-theme)で見つけることができ、sass 変数と同等ですが、`$` の代わりに `--` を前に付けます。 結果は、ライト OS テーマで次のようになります。 - +ライト カラー スキーマのカスタマイズ ダーク OS テーマは次のようになります。 - +ダーク カラー スキーマのカスタマイズ >[!NOTE] > 完全な実行時の切り替え (Ignite UI テーマ スキーマ プリセットの切り替えを含む) は、2 つの完全なテーマがビルドされている場合にのみ可能です。上記の例では、カラー パレットを切り替えていますが、テーマ スキーマは $light-material-schema のままであるため、ダーク カラー パレットに切り替えたときに、カラー パレットのすべての正しい色合いが使用されるわけではありません。 @@ -220,7 +222,7 @@ Ignite UI テーマは、複数の次元のテーマを抽象化し、非常に いくつかのカスタマイズを行った後、生成および変更したアプリケーションをビルドして、アプリケーション テーマのサイズがどのように見えるかを確認します。 - +初期ビルドの最適化 ご覧のとおり、アプリケーションのテーマは 400kb をわずかに超えていますが、圧縮して転送すると、約 40kb になります。これは大きくありませんが、より最適化できますか? Ignite UI for Angular スイートのすべてのコンポーネントを使用しない限り、答えは「イエス」です。`@include theme()` を呼び出すと、すべてのコンポーネント テーマが取り込まれますが、何を除外するかを関数に伝えるメカニズムがあります。テーマ ミックスインには [`$exclude`]({environment:sassApiUrl}/themes#mixin-theme) パラメーターがあり、コンポーネント名を配列として受け取り、ビルド時にテーマから除外します。パッケージで利用可能なすべてのコンポーネントを見つけて一覧表示するのは簡単ではないため、使用するすべてのコンポーネントを一覧表示できるようにすることをお勧めします。完全なコンポーネント リストを変数として公開します。これには、次の操作を行うとアクセスできます。 @@ -257,7 +259,7 @@ $include: ( 特定のテーマを除外した後、ビルドはどのようになるでしょうか? - +除外後の最適化 ご覧のとおり、スタイルのサイズは元のサイズのほぼ半分に削減されています。現時点ではかなり良いように見えますが、これをさらに削減することはできますか? はい、削減できます。スタイル サイズのほとんどは、スイート内の最大のコンポーネント (この場合、ビューの 1 つにある `IgxTreeGridComponent`) によって占められます。ただし、このコンポーネントは他のビューでは使用しません。`igx-tree-grid` を使用してビューを遅延ロード ルートにすることができ、そのルートにのみグリッドのテーマを含めることができるため、最上位の css をさらに小さくすることができます。これはどのように行われますか？ @@ -398,7 +400,7 @@ $include: ( ビルドの結果は以下のとおりです。 - +モジュールの遅延ロード後の最適化 最上位の `styles.css` は 70kb を少し超える程度になり、圧縮すると 6kb を少し下回ります。~428kb から始めて ~40kb 圧縮し、圧縮サイズで約 7 分の 1 に抑えることができました。残りは、`igx-tree-grid` および `igx-combo` コンポーネントを含むビューがロードされている場合にのみ配信されます。 diff --git a/jp/components/general/localization.md b/jp/components/general/localization.md index bd61532359..dce0ecc211 100644 --- a/jp/components/general/localization.md +++ b/jp/components/general/localization.md @@ -9,9 +9,9 @@ _language: ja ## ローカライズ (i18n) ->注: 20.2.0 以降、これが Ignite UI for Angular コンポーネントにローカライズを適用する推奨方法です。 +>注: 21.1.0 以降、これが Ignite UI for Angular コンポーネントにローカライズを適用する推奨方法です。 -この新しいローカライズでは、ローカライズ文字列の要件を減らしながらより多くの機能を提供し、`Intl` に基づいた利用可能なすべてのロケールの書式設定が含まれています。 +新しいローカライズでは、ローカライズ文字列およびすべての利用可能なロケールに対する書式設定の両方について、より少ない要件でより多くの機能を提供します。書式設定は現在、`Intl` API によって導入された標準に基づいています。 現在、Ignite UI for Angular は次の言語のリソース文字列を提供しています: `ブルガリア語`、`チェコ語`、`デンマーク語`、`オランダ語`、`英語`、`フランス語`、`ドイツ語`、`ハンガリー語`、`イタリア語`、`日本語`、`韓国語`、`ノルウェー語`、`ポーランド語`、`ポルトガル語`、`ルーマニア語`、`スペイン語`、`スウェーデン語`、`トルコ語`、`繁体字中国語`、`簡体字中国語`。これらは、`igniteui-angular` のデフォルトのローカライズとして提供される英語を除き、`igniteui-angular-i18n` パッケージ経由で利用できます。 @@ -36,7 +36,7 @@ _language: ja #### グローバル API -`igniteui-angular` パッケージから提供される `setCurrentI18n` メソッドを使用して、グローバルに使用されるロケールを設定できます。これは、すべてのコンポーネントで使用される書式設定とリソース文字列の両方に影響します。 +`igniteui-angular` パッケージから提供される `setCurrentI18n` メソッドを使用して、グローバルに使用されるロケールを設定できます。これは、すべてのコンポーネントで使用される書式設定および登録済みのリソース文字列の両方に影響します。リソース文字列の詳細については、[ローカライズされたリソース文字列](ローカライズされたリソース文字列)を参照してください。 ```ts setCurrentI18n('de'); @@ -124,7 +124,7 @@ IgxGrid や IgxDatePicker などのコンポーネントでは、日付書式を | 日| d | 数値表示 (可能な場合は 1 桁) | 1, 10 | | | dd | 常に 2 桁表示 (ゼロ埋め)| 01, 10 | | 月 | M, L | 数値表示 (可能な場合は 1 桁) | 8, 12 | -| | MM, LL | 常に 2 桁表示 (ゼロ埋め)| 08, 12 | +| | MM, LL | 常に 2 桁表示 (ゼロ埋め) | 08, 12 | | | MMM, LLL | 月名の短縮表示 | Oct | | | MMMM, LLLL | 月名の完全表示 | October | | | MMMMM, LLLLL | 月名の最小表示 | O | @@ -152,7 +152,7 @@ IgxGrid や IgxDatePicker などのコンポーネントでは、日付書式を | | aa, aaa, tt, ttt | 常に大文字 | AM, PM | | | aaaa, tttt | ロケールに基づく大文字/小文字 | am, pm, AM, PM | | | aaaaa, ttttt | 常に小文字の最小表示 | a, p | -| 時間帯 - 拡張 | b, bb, bbb, B, BB, BBB |短縮表示 (Intl ロケールに基づく) | en-GB: at night | +| 時間帯 - 拡張 | b, bb, bbb, B, BB, BBB | 短縮表示 (Intl ロケールに基づく) | en-GB: at night | | | bbbb, BBBB | 完全表示 (Intl ロケールに基づく)| en-GB: at night | | | bbbbb, BBBBB | 最小表示 (Intl ロケールに基づく) | en-GB: at night | | タイムゾーン | z, zz, zzz, Z, ZZ, ZZZ, O, OO, OOO | 短縮表示 | GMT+4 | @@ -315,7 +315,7 @@ registerI18n(customResources, 'en'); ## レガシー ローカライズ (i18n) ->注: これは 20.2.0 以降の古いローカライズ処理方法です。上記の新しい方法を使用することをお勧めします。これは、今後の通知があるまで引き続き機能します。 +>注: これは 21.0.x まで推奨されていた古いローカライズ処理方法です。新しいバージョンを使用している場合は、上記の新しい方法の使用を推奨します。これは、今後の通知があるまで引き続き機能します。 現在、Ignite UI for Angular は、次の言語と文字のリソース文字列を提供しています: ブルガリア語、チェコ語、デンマーク語、オランダ語、英語、フランス語、ドイツ語、ハンガリー語、イタリア語、日本語、韓国語、ノルウェー語、ポーランド語、ポルトガル語、ルーマニア語、スペイン語、スウェーデン語、トルコ語、繁体字中国語、簡体字中国語。これらは、`igniteui-angular` のデフォルトのローカライズとして提供される英語を除き、`igniteui-angular-i18n` パッケージ経由で利用できます。 diff --git a/jp/components/general/update-guide.md b/jp/components/general/update-guide.md index 62e5536989..a721164dce 100644 --- a/jp/components/general/update-guide.md +++ b/jp/components/general/update-guide.md @@ -59,6 +59,71 @@ ng update @angular/cli 例: 6.2.4 から 7.1.0 にアップデートする場合、[6.x .. から] セクションから始めて変更を適用していきます。 +## 21.0.x から 21.1.x の場合 + +バージョン 21.1.0 では、Sass テーマ フレームワークの廃止予定の `css-vars` ミックスインの代わりに使用できる新しい `tokens` ミックスインが付属しています。表面的には外観的な変更ですが、新しい `tokens` ミックスインは、すべての Ignite UI フレームワークで機能する汎用的なグローバル コンポーネント テーマ トークンを生成します。`css-vars` ミックスインは現在廃止されており、将来のバージョンで削除される予定です。そのため、できるだけ早く新しい `tokens` ミックスインに切り替えることをお勧めします。 + +`tokens` ミックスインは、汎用的な `--ig-*` フォールバック チェーンとローカル トークン参照の適切な書き換えを使用して、`global` または `scoped` モードでコンポーネントの CSS 変数トークンを生成します。 + +**グローバル モード** (デフォルト) - ユニバーサル `--ig-{component}-{property}` トークンを出力します。ローカル `var()` 参照はグローバルな同等のものに書き換えられるため、派生値 (例: `adaptive-contrast`) は任意のスコープで正しく解決されます。サイズ可能な式はスキップされるため、代わりに具体的な値を渡してください。 + +```scss +// 入力: +@include tokens(avatar-theme($background: red)); + +// 出力: +:root { + --ig-avatar-background: red; + /* ... 残りのアバター プロパティ ... */ +} +``` + +**スコープ モード** - フォールバック チェーンを持つコンポーネント スコープ変数 (`--{property}`) を出力します: 構成されたプレフィックス (`--igx-*`) -> ユニバーサル (`--ig-*`) -> スキーマ デフォルト。スタイルシート ルートから呼び出されると、テーマの `selector` がルールの作成に使用されます。セレクター内から呼び出されると、現在のセレクターとコンポーネント セレクターの両方が変数を受け取ります。基本的に、これは現在廃止されている `css-vars` ミックスインと同じ結果を生成します。 + +```scss +// 入力 (ルートから): +@include tokens(avatar-theme($background: red), $mode: 'scoped'); + +// 出力: +igx-avatar { + --background: var(--igx-avatar-background, var(--ig-avatar-background, red)); + /* ... 残りのアバター プロパティ ... */ +} +``` + +```scss +// 入力 (セレクター内から): +.my-theme { + @include tokens(avatar-theme($background: red), $mode: 'scoped'); +} + +// 出力: +.my-theme, +.my-theme igx-avatar { + --background: var(--igx-avatar-background, var(--ig-avatar-background, red)); + /* ... */ +} +``` + +> [!NOTE] +> スコープ モードでは、適切な変数スコープのコンポーネント セレクターを決定するために、生成されたテーマ マップの `selector` プロパティが必要です。ミックスインがスタイルシートのルートから呼び出された場合、生成されたルールはテーマの内部 `selector` 値を使用します。セレクター内から呼び出された場合、そのセレクターとコンポーネント セレクターの両方が変数を受け取ります。 + +```scss +// グローバル オーバーライド: +:root { + @include tokens(avatar-theme($background: orange)); +} +// 結果: --ig-avatar-background: orange; + +// スコープ消費 (明示的なオーバーライドなし): +@include tokens(avatar-theme($schema: $schema), $mode: 'scoped'); +// 結果: --background は var(--igx-avatar-background, var(--ig-avatar-background, #000)) を通じて解決され、 +// --ig-avatar-background からグローバル オレンジ値を取得します。 +``` + +> [!IMPORTANT] +> **グローバル オーバーライドはスコープ モードに流れ込みます。** スコープ変数は `--ig-*` トークンにフォールバックするため、`:root` でグローバル トークンを設定すると、すべてのスコープ インスタンスに伝播されます。 + ## 20.x から 21.0.x の場合 ### マルチ エントリ ポイントのサポート diff --git a/jp/components/general/wpf-to-angular-guide/create-ui-with-components.md b/jp/components/general/wpf-to-angular-guide/create-ui-with-components.md index 17b3656025..ba4a0bcc66 100644 --- a/jp/components/general/wpf-to-angular-guide/create-ui-with-components.md +++ b/jp/components/general/wpf-to-angular-guide/create-ui-with-components.md @@ -27,7 +27,7 @@ Angular で UI を作成する方法は、WPF で UI を作成する方法と非 次に、typescript ファイル内で数行上へ移動し、`@` 記号とコンポーネントを使用した構文を示します。これは実際にはデコレータと呼ばれます。このデコレータは、エクスポートするこのクラスをどのように扱うかを Angular に伝えています。この場合、コンポーネントとして処理しますが、コンポーネントとして処理するため、デコレーターで情報を提供する必要があります。情報を取得する前に、まず typescript ファイルの一番上の行に注意を払いましょう。`import { Component } from '@angular/core'` をインポートします。これは using ステートメントと考えることができます。基本的に、このコンポーネントが機能するために必要なオブジェクトをインポートしています。この場合、`@angular/core` モジュールから`コンポーネント`をインポートするため、実際にこのコンポーネントにデコレータを使用できます。これは、ユーザー コントロールの背後にあるコード内の using ステートメントに非常に似ています。C# 内の `using` ステートメントを使用して、ユーザー コントロールが機能するために必要なクラス内のオブジェクトを使用します。 次にコンポーネント デコレータの内部に戻ります。 -- 4 行目のコード行は、セレクターと呼ばれます。セレクタは、html でこれらの要素をどのように定義するかを決定するのに役立ちます。このセレクタは `app-root` と呼ばれるため、先に進んで index.html を開くと、本文内に `app-root` という要素が表示されます。その要素は、コンポーネント デコレータで定義されたセレクタを使用して、このコンポーネントのインスタンスを定義しています。 +- 4 行目のコード行は、セレクターと呼ばれます。セレクタは、html でこれらの要素をどのように定義するかを決定するのに役立ちます。このセレクタは `app-root` と呼ばれるため、先に進んで index.html を開くと、本体内に `app-root` という要素が表示されます。その要素は、コンポーネント デコレータで定義されたセレクタを使用して、このコンポーネントのインスタンスを定義しています。 - 次に、5 行目には、テンプレート URL と呼ばれるものがあります。これは、`app.component.html` というファイルを指します。このコンポーネントの視覚的なレンダリングを表す html ファイル。これは、WPF のユーザーコントロールの `Sample.xaml` ファイルと非常によく似ています。xaml は、このコントロールのレンダリング方法を表すマークアップです。 - 6行目はスタイル URL です。スタイル URL は CSS ファイルを指しています。このファイルは、コンポーネントのスタイル情報を表します。したがって、`app.component.css` ファイルにスタイリング情報はありませんが、CSS ファイルはリソース ディクショナリへの直接マッピングと考えることができます。XAML のリソース ディクショナリには、ユーザー コントロールまたはユーザー コントロール内の要素のすべてのスタイル情報が含まれているため、デザインに従ってレンダリングされます。これは、CSS で行う場合と全く同じです。 diff --git a/jp/components/grid-lite/binding.md b/jp/components/grid-lite/binding.md index 953ba95d76..51ad05cfb3 100644 --- a/jp/components/grid-lite/binding.md +++ b/jp/components/grid-lite/binding.md @@ -25,10 +25,10 @@ grid.data = [...{ ``` ```html - + - - + + ``` グリッドで `autoGenerate` が有効になっている場合、データが変更されると新しい列の構成が自動的に「推測されます」。 @@ -40,6 +40,15 @@ grid.autoGenerate = true; grid.data = []; ``` +または、グリッドで `@ViewChild` を使用する代わりに、html でそれぞれのプロパティを設定します。 + +```html + + +``` + >[!NOTE] >Grid Lite のソート/フィルター状態は、この方法でデータ ソースを変更しても保持されます。通常は `clearSort()` または `clearFilter()` を呼び出してリセットすることをお勧めします。 diff --git a/jp/components/grid-lite/cell-template.md b/jp/components/grid-lite/cell-template.md index 3bda2fd76d..0b81a0b2c6 100644 --- a/jp/components/grid-lite/cell-template.md +++ b/jp/components/grid-lite/cell-template.md @@ -12,18 +12,27 @@ _language: ja デフォルトでは、グリッドは列のフィールドを使用してセル内の値を文字列としてレンダリングします。これは基本的なシナリオでは問題ありませんが、レンダリングされる出力をカスタマイズしたい場合や、最終的な出力が異なるデータ フィールドの組み合わせである場合は、セル テンプレートをカスタマイズできます。 -列の `cellTemplate` プロパティを設定することで、これを実現できます。 +これを実現するには、コンテンツをテンプレート化する列の `...` 内で **``** を使用します。 + +```html + + + + + + +``` + +**`IgxGridLiteCellTemplateDirective`** をインポートする必要もあります。 ```typescript -protected cellTemplate(params: IgcCellContext) { - // テンプレートの結果を返す -} +import { IgxGridLiteComponent, IgxGridLiteColumnComponent, IgxGridLiteCellTemplateDirective } from 'igniteui-angular/grids/lite'; ``` -```html - - - +それを `imports` 配列に追加します。 + +```typescript +imports: [ IgxGridLiteCellTemplateDirective ] ``` ## フォーマッタ関数として使用する @@ -31,10 +40,15 @@ protected cellTemplate(params: IgcCellContext) { 簡単なシナリオでは、必要に応じてフォーマット済みの値を返すだけで済みます。以下は数値をロケール通貨形式で表示する例です。 ```typescript -const { format: asCurrency } = new Intl.NumberFormat('en-EN', { style: 'currency', currency: 'EUR' }); +public formatter = new Intl.NumberFormat('en-150', { + style: 'currency', + currency: 'EUR' +}); /** 値 `value = 123456.789` に対してカスタム通貨形式を返します。 */ -protected cellTemplate = (params) => asCurrency(params.value); // => "€123,456.79" +protected formatCurrency = (value: number) => { + return this.formatter.format(value); // => "€123,456.79" +}; ``` データ ソース内の異なるフィールドの値を組み合わせることも可能です。 @@ -42,38 +56,56 @@ protected cellTemplate = (params) => asCurrency(params.value); // => "€123,456 Refer to the API documentation for **`GridLiteCellContext`** for more information. --> ```typescript -const { format: asCurrency } = new Intl.NumberFormat('en-EN', { style: 'currency', currency: 'EUR' }); - -/** 価格が 99.99 の品目 10 個の注文に対してカスタム通貨形式を返します。 */ -protected cellTemplate = ({value, row}) => asCurrency(value * row.data.count); // => "€999.90" +public formatter = new Intl.NumberFormat('en-150', { + style: 'currency', + currency: 'EUR' +}); + +/** 製品から得た合計金額をカスタム通貨で返します。 */ +protected formatCurrency = (value: number, unitsSold: number) => { + return this.formatter.format(value * unitsSold); +}; ``` ```html - - - + + + {{formatCurrency(value, row.data.sold)}} + + ``` ## カスタム DOM テンプレート -**`cellTemplate`** プロパティを値フォーマッタとして使用する以外に、独自の DOM テンプレートを作成することもできます。これはセルコンテナー内にレンダリングされます。 +**``** 内で **`igniteui-angular`** のコンポーネントを使用する以外にも、セル コンテナー内にレンダリングされる独自の DOM テンプレートを作成することもできます。 -Lit の機能とタグ付きテンプレート構文を再利用して宣言的な DOM フラグメントを作成しています。 - -標準の DOM 要素だけでなく、他のライブラリの Web コンポーネントもテンプレート化できます。 +標準の DOM 要素だけでなく、他のライブラリの Web コンポーネントもテンプレート化できます。たとえば、次のコード スニペットでは、**`igniteui-webcomponents`** から提供される rating コンポーネントを使用しています。これを適切に使用するには、以下で説明するいくつかの手順を実行する必要があります。 ```typescript -// Lit パッケージから `html` タグ関数をインポートします。 -import { html } from "lit"; - -// グリッド内の `rating` 値を表すために別の Web コンポーネントを使用します。 -protected cellTemplate = ({ value }) => html``; +// カスタム テンプレート用の外部コンポーネントをインポートします +import { + defineComponents, + IgcRatingComponent +} from 'igniteui-webcomponents'; + +// サンプルで使用できるようにそれらを定義します +defineComponents( + IgcRatingComponent +); ``` ```html - - - + + + + + + + ``` >[!NOTE] @@ -87,10 +119,7 @@ protected cellTemplate = ({ value }) => html` = Keys -> { +export interface IgxGridLiteCellTemplateContext { /** * テンプレートのセル要素の親要素です。 */ @@ -107,6 +136,8 @@ export interface GridLiteCellContext< * このセルに対するデータ ソースの値です。 */ value: PropertyType; + + $implicit: PropertyType; } ``` diff --git a/jp/components/grid-lite/column-configuration.md b/jp/components/grid-lite/column-configuration.md index 0b52eb9d51..445914c40f 100644 --- a/jp/components/grid-lite/column-configuration.md +++ b/jp/components/grid-lite/column-configuration.md @@ -13,14 +13,14 @@ _language: ja 列は、グリッド内の列子コンポーネントを使用して宣言的に定義されます。`field` プロパティは、列識別子として機能するため、列に必須の唯一のプロパティです。グリッド行内の関連データをマッピングしてレンダリングするためにも使用されます。 ```html - - + - - + > + + ``` ## データ ソースに基づく設定 @@ -35,17 +35,17 @@ const data: Record[] = [ ``` ```html - + ``` 前のスニペットでは、グリッドは次と同等の列を自動的に作成します: ```html - - - - - + + + + + ``` 追加のカスタマイズを行わずに一部のデータをすばやくレンダリングする場合に便利です。 @@ -64,7 +64,7 @@ const data: Record[] = [ 列の幅を変更するには、列の `width` プロパティを使用します。 ```html - + ``` このプロパティは有効な CSS 長さ単位を受け入れます. @@ -74,7 +74,7 @@ const data: Record[] = [ 列の `hidden` プロパティを設定することで、列を非表示/表示できます。 ```html - + ``` ### 列のリサイズ @@ -82,7 +82,7 @@ const data: Record[] = [ Grid Lite コンポーネントの各列は、列要素の `resizable` プロパティを設定することで、サイズ変更可能に構成できます。 ```html - + ``` 列がサイズ変更可能に設定されている場合、列ヘッダー右端をドラッグして幅を増減できます。リサイズ領域をダブルクリックすると、自動調整がトリガーされ、セルやヘッダーの最大コンテンツに合わせて幅が設定されます。 diff --git a/jp/components/grid-lite/filtering.md b/jp/components/grid-lite/filtering.md index 69c553c25d..d571f884c9 100644 --- a/jp/components/grid-lite/filtering.md +++ b/jp/components/grid-lite/filtering.md @@ -13,20 +13,20 @@ _language: ja Grid Lite は、データ ソースでのフィルター操作をサポートします。データ フィルタリングは列ごとに制御されるため、フィルタリング可能な列とフィルタリング不可能な列を設定できます。デフォルトでは、列構成オブジェクトの `filterable` プロパティで明示的に構成されない限り、列のフィルタリングは無効になっています。 ```html - +> ``` -`filteringCaseSensitive` プロパティまたは `filtering-case-sensitive` 属性を使用して、文字列列のフィルター操作で大文字と小文字を区別するかどうかを制御することもできます: +`filteringCaseSensitive` プロパティを使用して、文字列列のフィルター操作で大文字と小文字を区別するかどうかを制御することもできます: ```html - + filteringCaseSensitive +> ``` これらのプロパティはプログラムで設定することもできます。 @@ -113,18 +113,18 @@ grid.clearFilter(); ```typescript { - filterState: FilterExpression[] = [ + filteringExpressions: IgxGridLiteFilteringExpression[] = [ { key: 'age', condition: 'greaterThan', searchTerm: 21 }, /** 単項条件のため `searchTerm` は不要です。 */ { key: 'active', condition: 'true' }, ]; - - render() { - return html`` - } } ``` +```html + +``` + これを使用すると、コンポーネントの現在のフィルター状態を取得し、アプリケーション内の別の状態に応じて追加の処理を実行できます。 ```typescript @@ -139,9 +139,13 @@ UI を通じてフィルター操作が実行されると、コンポーネン グリッドが新しいフィルター状態を適用すると、**`filtered`** イベントが発生します。対象列のフィルター状態を含み、このイベントはキャンセルできません。 +```html + +``` + ```typescript -grid.addEventListener('filtering', (event: CustomEvent>) => { ... }); -grid.addEventListener('filtered', (event: CustomEvent>) => { ... }); +onFiltering(event: IgxFilteringEvent) { ... } +onFiltered(event: IgxFilteredEvent) { ... } ``` + ``` >[!NOTE] ->`headerTemplate` が指定されている場合、`header` は無視されます。 - +>ヘッダー テンプレートが提供されている場合、`header` は無視されます。 ## ヘッダー テンプレートによるカスタマイズ セル テンプレートと同様に、カスタム テンプレート レンダラーを渡して、列ヘッダー内に独自の DOM を作成できます。 ```typescript -import { html } from 'lit'; - -protected headerTemplate(_params: IgcHeaderContext) { - return html`

⭐ Rating ⭐

`; -} +// そのためのディレクティブをインポートします -> IgxGridLiteHeaderTemplateDirective +import { IgxGridLiteComponent, IgxGridLiteColumnComponent, IgxGridLiteCellTemplateDirective, IgxGridLiteHeaderTemplateDirective } from 'igniteui-angular/grids/lite'; + +// そのためのディレクティブをインポートします + imports: [ + CommonModule, + IgxGridLiteComponent, + IgxGridLiteColumnComponent, + IgxGridLiteCellTemplateDirective, // セルをテンプレート化するため + IgxGridLiteHeaderTemplateDirective // ヘッダーをテンプレート化するため +], ``` ```html - - - + + + +

⭐ Rating ⭐

+ + + + + + + + ``` - - +
+ + + - - + +
` }) export class AppComponent { diff --git a/jp/components/grid-lite/sorting.md b/jp/components/grid-lite/sorting.md index 1356ebedfa..8fda8259e4 100644 --- a/jp/components/grid-lite/sorting.md +++ b/jp/components/grid-lite/sorting.md @@ -13,20 +13,20 @@ _language: ja Grid Lite はデータ ソースに対してソート操作をサポートします。ソートは列単位で制御され、ソート可能な列とソート不可の列を設定できます。グリッド自体も特定のソート動作を制御します。デフォルトでは、`sortable` プロパティで明示的に設定されない限り、列のソートは無効です。 ```html - +> ``` -`sortingCaseSensitive` プロパティまたは `sorting-case-sensitive` 属性を使用して、文字列列のソート操作で大文字と小文字を区別するかどうかを制御することもできます。 +`sortingCaseSensitive` プロパティを使用して、文字列列のソート操作で大文字と小文字を区別するかどうかを制御することもできます。 ```html - + sortingCaseSensitive +> ``` カスタム比較ロジックの場合は、`comparer` 関数を使用して `sortConfiguration` プロパティを設定します: @@ -142,14 +142,14 @@ grid.clearSort(); 例: ```typescript -protected sortState: SortingExpression[] = [ +protected sortState: IgxGridLiteSortingExpression[] = [ { key: 'price', direction: 'descending' }, { key: 'name', direction: 'ascending', caseSensitive: true }, ]; ``` ```html - + ``` これを使用すると、コンポーネントの現在のソート状態を取得し、アプリケーション内の別の状態に応じて追加の処理を実行できます。 @@ -166,9 +166,13 @@ UI を通じてソート操作が実行されると、コンポーネントは グリッドが新しいソート状態を適用した後、`sorted` イベントが発行されます。最後のソート操作で使用された式を含み、キャンセルはできません。 +```html + +``` + ```typescript -grid.addEventListener('sorting', (event: CustomEvent>) => { ... }); -grid.addEventListener('sorted', (event: CustomEvent>) => { ... }); +onSorting(event: IgxSortingEvent) { ... } +onSorted(event: IgxSortedEvent) { ... } ``` 次のサンプルでは、**Name** と **Rating** 列のソートを試みると操作がキャンセルされます。下記のイベント ログで動作を確認してください。 diff --git a/jp/components/grid/grid.md b/jp/components/grid/grid.md index 5634389ed7..0ebbafec0a 100644 --- a/jp/components/grid/grid.md +++ b/jp/components/grid/grid.md @@ -871,6 +871,7 @@ Angular データ グリッドの作成について詳しくは、このビデ - [選択](selection.md) - [列のデータ型](column-types.md#デフォルトのテンプレート) - [igxGrid を使用して CRUD 操作の構築](../general/how-to/how-to-perform-crud.md) +- [Ignite UI for Angular スキル](../ai/skills.md) - グリッド、データ操作、テーマ設定向けのエージェントのスキル
コミュニティに参加して新しいアイデアをご提案ください。 diff --git a/jp/components/grid/groupby.md b/jp/components/grid/groupby.md index e82087d8ed..345996d4ed 100644 --- a/jp/components/grid/groupby.md +++ b/jp/components/grid/groupby.md @@ -407,7 +407,7 @@ $custom-chips-theme: chip-theme( ```scss $custom-grid-schema: extend( - $light-grid, + map.get('grid', $light-material-schema), ( group-row-background: (color:('secondary', 100)), group-row-selected-background: (color:('primary', 400)), @@ -443,8 +443,10 @@ $custom-theme: grid-theme( テーマを適用する最も簡単な方法は、グローバル スタイル ファイルに `sass` `@include` ステートメントを使用することです。 ```scss -@include css-vars($custom-theme); -@include css-vars($custom-chips-theme); +:host { + @include tokens($custom-theme); + @include tokens($custom-chips-theme); +} ``` ### スコープ コンポーネント テーマ @@ -459,11 +461,11 @@ $custom-theme: grid-theme( この例では、チップ テーマに `::ng-deep` を使用する必要があります。 ```scss -@include css-vars($custom-theme); - :host { + @include tokens($custom-theme); + ::ng-deep { - @include chip($custom-chips-theme); + @include tokens($custom-chips-theme); } } ``` diff --git a/jp/components/grids_templates/advanced-filtering.md b/jp/components/grids_templates/advanced-filtering.md index 9006a55cda..0411beeb16 100644 --- a/jp/components/grids_templates/advanced-filtering.md +++ b/jp/components/grids_templates/advanced-filtering.md @@ -6,6 +6,7 @@ _keywords: 高度なフィルター, igniteui for angular, インフラジステ _license: commercial _language: ja --- + } @@if(igxName !== 'IgxGrid'){ --- @@ -15,6 +16,7 @@ _keywords: 高度なフィルター, igniteui for angular, インフラジステ _license: commercial _language: ja --- + } @@ -285,7 +287,7 @@ $custom-query-builder: query-builder-theme( ); igx-advanced-filtering-dialog { - @include css-vars($custom-query-builder); + @include tokens($custom-query-builder); } ``` @@ -308,7 +310,7 @@ $custom-query-builder: query-builder-theme( :host { ::ng-deep { igx-advanced-filtering-dialog { - @include css-vars($custom-query-builder); + @include tokens($custom-query-builder); } } } diff --git a/jp/components/grids_templates/cell-selection.md b/jp/components/grids_templates/cell-selection.md index e68874d5e7..996bb5fb4f 100644 --- a/jp/components/grids_templates/cell-selection.md +++ b/jp/components/grids_templates/cell-selection.md @@ -6,6 +6,7 @@ _keywords: データ選択, igniteui for angular, インフラジスティック _license: commercial _language: ja --- + } @@if (igxName === 'IgxTreeGrid') { --- @@ -15,6 +16,7 @@ _keywords: データ選択, igniteui for angular, infragistics _license: commercial _language: ja --- + } @@if (igxName === 'IgxHierarchicalGrid') { --- @@ -24,6 +26,7 @@ _keywords: データ選択, igniteui for angular, infragistics _license: commercial _language: ja --- + } # Angular セル選択 @@ -81,6 +84,7 @@ _language: ja - マウスでクリックしてドラッグすることで、連続した複数セルの選択が可能です。 @@if (igxName === 'IgxGrid') { + #### デモ @@ -92,6 +96,7 @@ _language: ja
} @@if (igxName === 'IgxTreeGrid') { + #### デモ @@ -191,62 +196,62 @@ this.grid1.selectRange(range); 1. 3 つの異なる単一セルが選択されている場合: -``` -expectedData = [ - { CompanyName: 'Infragistics' }, - { Name: 'Michael Langdon' }, - { ParentID: 147 } -]; -``` + ``` + expectedData = [ + { CompanyName: 'Infragistics' }, + { Name: 'Michael Langdon' }, + { ParentID: 147 } + ]; + ``` 2. 1 列から 3 つのセルが選択されている場合: -``` -expectedData = [ - { Address: 'Obere Str. 57'}, - { Address: 'Avda. de la Constitución 2222'}, - { Address: 'Mataderos 2312'} -]; -``` + ``` + expectedData = [ + { Address: 'Obere Str. 57'}, + { Address: 'Avda. de la Constitución 2222'}, + { Address: 'Mataderos 2312'} + ]; + ``` 3. 1 行 3 列から 3 つのセルをマウスドラッグで選択した場合: -``` -expectedData = [ - { Address: 'Avda. de la Constitución 2222', City: 'México D.F.', ContactTitle: 'Owner' } -]; -``` + ``` + expectedData = [ + { Address: 'Avda. de la Constitución 2222', City: 'México D.F.', ContactTitle: 'Owner' } + ]; + ``` 4. 2 行 3 列から 3 つのセルをマウスドラッグで選択した場合: -``` -expectedData = [ - { ContactTitle: 'Sales Agent', Address: 'Cerrito 333', City: 'Buenos Aires'}, - { ContactTitle: 'Marketing Manager', Address: 'Sierras de Granada 9993', City: 'México D.F.'} -]; -``` + ``` + expectedData = [ + { ContactTitle: 'Sales Agent', Address: 'Cerrito 333', City: 'Buenos Aires'}, + { ContactTitle: 'Marketing Manager', Address: 'Sierras de Granada 9993', City: 'México D.F.'} + ]; + ``` 5. 2 つの異なる範囲が選択されている場合: -``` -expectedData = [ - { ContactName: 'Martín Sommer', ContactTitle: 'Owner'}, - { ContactName: 'Laurence Lebihan', ContactTitle: 'Owner'}, - { Address: '23 Tsawassen Blvd.', City: 'Tsawassen'}, - { Address: 'Fauntleroy Circus', City: 'London'} -]; -``` + ``` + expectedData = [ + { ContactName: 'Martín Sommer', ContactTitle: 'Owner'}, + { ContactName: 'Laurence Lebihan', ContactTitle: 'Owner'}, + { Address: '23 Tsawassen Blvd.', City: 'Tsawassen'}, + { Address: 'Fauntleroy Circus', City: 'London'} + ]; + ``` 6. 2 つの重複範囲が選択されている場合、形式は次のようになります。 -``` -expectedData = [ - { ContactName: 'Diego Roel', ContactTitle: 'Accounting Manager', Address: 'C/ Moralzarzal, 86'}, - { ContactName: 'Martine Rancé', ContactTitle: 'Assistant Sales Agent', Address: '184, chaussée de Tournai', City: 'Lille'}, - { ContactName: 'Maria Larsson', ContactTitle: 'Owner', Address: 'Åkergatan 24', City: 'Bräcke'}, - { ContactTitle: 'Marketing Manager', Address: 'Berliner Platz 43', City: 'München'} -]; -``` + ``` + expectedData = [ + { ContactName: 'Diego Roel', ContactTitle: 'Accounting Manager', Address: 'C/ Moralzarzal, 86'}, + { ContactName: 'Martine Rancé', ContactTitle: 'Assistant Sales Agent', Address: '184, chaussée de Tournai', City: 'Lille'}, + { ContactName: 'Maria Larsson', ContactTitle: 'Owner', Address: 'Åkergatan 24', City: 'Bräcke'}, + { ContactTitle: 'Marketing Manager', Address: 'Berliner Platz 43', City: 'München'} + ]; + ``` @@if (igxName === 'IgxGrid') { > [!NOTE] @@ -323,12 +328,15 @@ $custom-grid-theme: grid-theme( 次にコンポーネントのスタイルにミックスインを含め (アプリ スタイルにすることも可能)、@@igSelector がデフォルトのテーマの代わりに新しく作成されたテーマを使用するようになります。 ```scss -@include css-vars($custom-grid-theme); +:host { + @include tokens($custom-grid-theme); +} ``` カスタム テーマを適用すると、選択したグリッドセルが選択した色で強調表示されます。 @@if (igxName === 'IgxGrid'){ + ### デモ @@ -341,6 +349,7 @@ $custom-grid-theme: grid-theme( } @@if (igxName === 'IgxHierarchicalGrid'){ + ### デモ [!NOTE] ->作成した **button-theme** を `.igx-column-actions` 内に含めて、列を非表示にするボタンのみにスタイルを設定します。 そうでない場合は、グリッド内の他のボタンも影響を受けます。 +>作成した **flat-button-theme** を `.igx-column-actions` 内に含めて、列を非表示にするボタンのみにスタイルを設定します。 そうでない場合は、グリッド内の他のボタンも影響を受けます。 >[!NOTE] >コンポーネントが [`Emulated`](../themes/sass/component-themes.md#表示のカプセル化) ViewEncapsulation を使用している場合、列アクション コンポーネント内のコンポーネント (ボタン、チェックボックスなど) に対して `::ng-deep` を使用してこのカプセル化を`解除する`必要があります。 ```scss -@include css-vars($custom-column-actions-theme); - :host { + @include tokens($custom-column-actions-theme); + ::ng-deep { .igx-column-actions { - @include css-vars($custom-button); + @include tokens($custom-button); } } } diff --git a/jp/components/grids_templates/column-moving.md b/jp/components/grids_templates/column-moving.md index 5709c65aba..f57d33f1f6 100644 --- a/jp/components/grids_templates/column-moving.md +++ b/jp/components/grids_templates/column-moving.md @@ -6,6 +6,7 @@ _keywords: column order, igniteui for angular, infragistics, 列順序 _license: commercial _language: ja --- + } @@if (igxName === 'IgxTreeGrid') { --- @@ -15,6 +16,7 @@ _keywords: column order, igniteui for angular, infragistics, 列順序, イン _license: commercial _language: ja --- + } @@if (igxName === 'IgxHierarchicalGrid') { --- @@ -24,6 +26,7 @@ _keywords: column order, igniteui for angular, infragistics, 列順序, イン _license: commercial _language: ja --- + } # @@igComponent の列の並べ替えと移動 @@ -218,7 +221,9 @@ $dark-grid-column-moving-theme: grid-theme( 最後の手順は、それぞれのテーマを持つコンポーネント ミックスインを**含める**ことです。 ```scss -@include css-vars($dark-grid-column-moving-theme); +:host { + @include tokens($dark-grid-column-moving-theme); +} ``` ### デモ diff --git a/jp/components/grids_templates/column-pinning.md b/jp/components/grids_templates/column-pinning.md index c403daba92..1dc652836f 100644 --- a/jp/components/grids_templates/column-pinning.md +++ b/jp/components/grids_templates/column-pinning.md @@ -6,6 +6,7 @@ _keywords: lock column, ignite ui for angular, infragistics _license: commercial _language: ja --- + } @@if (igxName === 'IgxTreeGrid') { --- @@ -15,6 +16,7 @@ _keywords: lock column, ignite ui for angular, infragistics _license: commercial _language: ja --- + } @@if (igxName === 'IgxHierarchicalGrid') { --- @@ -24,6 +26,7 @@ _keywords: lock column, ignite ui for angular, infragistics _license: commercial _language: ja --- + } # Angular @@igComponent 列ピン固定 @@ -401,9 +404,10 @@ public toggleColumn(col: ColumnType) {
@@if (igxName === 'IgxGrid') { + ## スタイル設定 -igxGridを使用すると、[Ignite UI for Angular テーマ ライブラリ](../themes/sass/component-themes.md) でスタイルを設定できます。[`grid-theme`]({environment:sassApiUrl}/themes#function-grid-theme) は、グリッドのすべての機能をカスタマイズできるさまざまなプロパティを公開します。 +igxGridを使用すると、[Ignite UI for Angular テーマ ライブラリ](../themes/sass/component-themes.md) でスタイルを設定できます。グリッドの[テーマ]({environment:sassApiUrl}/themes#function-grid-theme)は、グリッドのすべての機能をカスタマイズできるさまざまなプロパティを公開します。 以下の手順では、グリッドのピン固定スタイルをカスタマイズする手順を実行しています。 @@ -439,7 +443,9 @@ $custom-theme: grid-theme( テーマを適用する最も簡単な方法は、グローバル スタイル ファイルに `sass` `@include` ステートメントを使用することです。 ```scss -@include css-vars($custom-theme); +:host { + @include tokens($custom-theme); +} ``` ### デモ diff --git a/jp/components/grids_templates/column-resizing.md b/jp/components/grids_templates/column-resizing.md index 7e4c608757..a613034af6 100644 --- a/jp/components/grids_templates/column-resizing.md +++ b/jp/components/grids_templates/column-resizing.md @@ -6,6 +6,7 @@ _keywords: grid 列サイズ変更, igniteui for angular, インフラジステ _license: commercial _language: ja --- + } @@if (igxName === 'IgxTreeGrid') { --- @@ -16,6 +17,7 @@ _canonicalLink: grid/column-resizing _license: commercial _language: ja --- + } @@if (igxName === 'IgxHierarchicalGrid') { --- @@ -26,6 +28,7 @@ _canonicalLink: grid/column-resizing _license: commercial _language: ja --- + } # Angular @@igComponent 列サイズ変更 @@ -279,7 +282,7 @@ column.autosize(); ## 初期化時に列を自動サイズ設定する -`width` を「auto」に設定することで、初期化時に各列を自動サイズに設定できます。 +`width` を 'auto' に設定することで、初期化時に各列を自動サイズに設定できます。 ```html ... @@ -342,7 +345,9 @@ $custom-grid-theme: grid-theme( 最後のステップは、それぞれのテーマを持つコンポーネント ミックスインを**含める**ことです。 ```scss -@include css-vars($custom-grid-theme); +:host { + @include tokens($custom-grid-theme); +} ``` ### デモ diff --git a/jp/components/grids_templates/column-selection.md b/jp/components/grids_templates/column-selection.md index 462abfc998..5cd3ac2277 100644 --- a/jp/components/grids_templates/column-selection.md +++ b/jp/components/grids_templates/column-selection.md @@ -6,6 +6,7 @@ _keywords: column selection, igniteui for angular, 列選択, infragistics, イ _license: commercial _language: ja --- + } @@if (igxName === 'IgxTreeGrid') { --- @@ -15,6 +16,7 @@ _keywords: column selection, igniteui for angular, 列選択, infragistics, イ _license: commercial _language: ja --- + } @@if (igxName === 'IgxHierarchicalGrid') { --- @@ -24,6 +26,7 @@ _keywords: column selection, igniteui for angular, 列選択, infragistics, イ _license: commercial _language: ja --- + } # Angular @@igComponent 列選択 @@ -147,6 +150,7 @@ $custom-grid-theme: grid-theme( } [`grid-theme`]({environment:sassApiUrl}/themes#function-grid-theme) はいくつかのパラメーターを受け入れますが、選択したすべての列の外観を変更するのは以下の 5 つです。 + - **$row-selected-background**- 選択した部分の背景を設定します。 - **$row-selected-text-color** - 選択した部分のテキスト色を設定します。 - **$row-selected-hover-background** - ホバーされたセルまたは複数のセルの色を設定します。 @@ -159,7 +163,9 @@ $custom-grid-theme: grid-theme( 最後にカスタム `igx-grid` テーマを含めます。 ```scss -@include css-vars($custom-grid-theme) +:host { + @include tokens($custom-grid-theme) +} ``` ### デモ @@ -180,27 +186,31 @@ $custom-grid-theme: grid-theme( 以下は、列選択 UI のその他の API です。 - [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html) -- [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumnomponent.html) +- [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html) - [IgxColumnGroupComponent]({environment:angularApiUrl}/classes/igxcolumngroupcomponent.html) - [@@igxNameComponent スタイル]({environment:sassApiUrl}/themes#function-grid-theme) [`@@igxNameComponent`]({environment:angularApiUrl}/classes/@@igTypeDoc.html) プロパティ: -- [columnSelection]({environment:angularApiUrl}/classes/@@igTypeDoc.html#columnselection) + +- [columnSelection]({environment:angularApiUrl}/classes/@@igTypeDoc.html#columnSelection) - [selectedColumns]({environment:angularApiUrl}/classes/@@igTypeDoc.html#selectedColumns) - [selectColumns]({environment:angularApiUrl}/classes/@@igTypeDoc.html#selectColumns) - [deselectColumns]({environment:angularApiUrl}/classes/@@igTypeDoc.html#deselectColumns) - [selectAllColumns]({environment:angularApiUrl}/classes/@@igTypeDoc.html#selectAllColumns) - [deselectAllColumns]({environment:angularApiUrl}/classes/@@igTypeDoc.html#deselectAllColumns) -[`IgxColumnComponent`]({environment:angularApiUrl}/classes/igxcolumnomponent.html) プロパティ: +[`IgxColumnComponent`]({environment:angularApiUrl}/classes/igxcolumncomponent.html) プロパティ: + - [selectable]({environment:angularApiUrl}/classes/IgxColumnComponent.html#selectable) - [selected]({environment:angularApiUrl}/classes/IgxColumnComponent.html#selected) [`IgxColumnGrpupComponent`]({environment:angularApiUrl}/classes/igxcolumngroupcomponent.html) プロパティ: + - [selectable]({environment:angularApiUrl}/classes/igxcolumngroupcomponent.html#selectable) - [selected]({environment:angularApiUrl}/classes/igxcolumngroupcomponent.html#selected) [`@@igxNameComponent`]({environment:angularApiUrl}/classes/@@igTypeDoc.html) イベント: + - [onColumnsSelectionChange]({environment:angularApiUrl}/classes/@@igTypeDoc.html#onColumnsSelectionChange) ## その他のリソース diff --git a/jp/components/grids_templates/excel-style-filtering.md b/jp/components/grids_templates/excel-style-filtering.md index 0f4229b5ea..8fd78b67ea 100644 --- a/jp/components/grids_templates/excel-style-filtering.md +++ b/jp/components/grids_templates/excel-style-filtering.md @@ -6,6 +6,7 @@ _keywords: Excel のようなフィルター, igniteui for angular, インフラ _license: commercial _language: ja --- + } @@if(igxName !== 'IgxGrid'){ --- @@ -15,6 +16,7 @@ _keywords: Excel のようなフィルター, igniteui for angular, インフラ _license: commercial _language: ja --- + } # Angular @@igComponent の Excel スタイル フィルタリング @@ -220,6 +222,7 @@ Excel スタイル フィルタリングをオンにするには、2 つの入 ## テンプレート 列機能を無効にせずに Excel スタイル フィルター メニューをさらにカスタマイズする場合は、カスタム テンプレートを使用できます。Excel スタイル フィルター メニューには、テンプレート化のための 2 つのディレクティブがあります: + - `IgxExcelStyleColumnOperationsTemplateDirective` - ソート、移動、固定などのすべての列操作で領域を再テンプレート化します。 - `IgxExcelStyleFilterOperationsTemplateDirective` - すべてのフィルター固有の操作で領域を再テンプレート化します。 @@ -364,6 +367,7 @@ Excel スタイル フィルタリングをオンにするには、2 つの入 } 以下は、使用可能な Excel スタイルフィルタリング コンポーネントの完全なリストです: + - [`igx-excel-style-header`]({environment:angularApiUrl}/classes/igxexcelstyleheadercomponent.html) - [`igx-excel-style-sorting`]({environment:angularApiUrl}/classes/igxexcelstylesortingcomponent.html) - [`igx-excel-style-moving`]({environment:angularApiUrl}/classes/igxexcelstylemovingcomponent.html) @@ -572,13 +576,17 @@ $custom-grid: grid-theme( ボタン、チェックボックス、リスト、さらにはドロップダウンなど、フィルタリング ダイアログのような Excel 内には明らかに多くのコンポーネントがあります。スタイルを設定するには、それぞれに個別のテーマを作成する必要があります。 ```scss -$custom-button: button-theme( +$custom-button: contained-button-theme( $background: #ffcd0f, $foreground: #292826, $hover-background: #292826, $hover-foreground: #ffcd0f ); +$flat-custom-button: flat-button-theme( + $foreground: #ffcd0f, +); + $custom-checkbox: checkbox-theme( $empty-color: #292826, $fill-color: #292826, @@ -614,19 +622,21 @@ $custom-list: list-theme( 最後にコンポーネントのカスタム テーマを**含めます**。また、入力のプレース ホルダーの色プロパティを設定します。 ```scss -@include css-vars($custom-grid); -@include css-vars($custom-drop-down); - -.igx-excel-filter, -.igx-excel-filter__secondary { - @include css-vars($custom-button); - @include css-vars($custom-checkbox); - @include css-vars($custom-input-group); - @include css-vars($custom-list); - - .igx-input-group__input::placeholder { - color: #ffcd0f; - } +:host { + @include tokens($custom-grid); + @include tokens($custom-drop-down); + + .igx-excel-filter, + .igx-excel-filter__secondary { + @include tokens($custom-button); + @include tokens($custom-checkbox); + @include tokens($custom-input-group); + @include tokens($custom-list); + + .igx-input-group__input::placeholder { + color: #ffcd0f; + } + } } ``` @@ -639,16 +649,16 @@ $custom-list: list-theme( ```scss :host { ::ng-deep { - @include css-vars($custom-grid); - @include css-vars($custom-drop-down); - + @include tokens($custom-grid); + @include tokens($custom-drop-down); .igx-excel-filter, .igx-excel-filter__secondary { - @include css-vars($custom-button); - @include css-vars($custom-checkbox); - @include css-vars($custom-input-group); - @include css-vars($custom-list); + @include tokens($custom-button); + @include tokens($flat-custom-button); + @include tokens($custom-checkbox); + @include tokens($custom-input-group); + @include tokens($custom-list); .igx-input-group__input::placeholder { color: #ffcd0f; diff --git a/jp/components/grids_templates/filtering.md b/jp/components/grids_templates/filtering.md index 9f25832dcc..3343f57ec7 100644 --- a/jp/components/grids_templates/filtering.md +++ b/jp/components/grids_templates/filtering.md @@ -6,6 +6,7 @@ _keywords: angular フィルター, ignite ui for angular, インフラジステ _license: commercial _language: ja --- + } @@if (igxName === 'IgxTreeGrid') { --- @@ -15,6 +16,7 @@ _keywords: angular フィルター, ignite ui for angular, インフラジステ _license: commercial _language: ja --- + } @@if (igxName === 'IgxHierarchicalGrid') { --- @@ -24,6 +26,7 @@ _keywords: angular フィルター, ignite ui for angular, インフラジステ _license: commercial _language: ja --- + } # Angular @@igComponent フィルタリング @@ -65,18 +68,22 @@ IgniteUI for [Angular @@igComponent コンポーネント](https://jp.infragisti フィルタリングが有効かどうか、およびどのフィルタリング モードを使用するかを指定するために、@@igComponent は次のブール プロパティを公開します - [`allowFiltering`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#allowFiltering)、[`allowAdvancedFiltering`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#allowAdvancedFiltering)、[`filterMode`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filterMode) と [`filterable`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#filterable)。 **[allowFiltering]({environment:angularApiUrl}/classes/@@igTypeDoc.html#allowFiltering)** プロパティを使用して、以下のオプションを指定できます: + - **false** - 対応する列のフィルタリングが無効になります /デフォルト値/。 - **true** - 対応する列のフィルタリングが有効になります。 **[allowAdvancedFiltering]({environment:angularApiUrl}/classes/@@igTypeDoc.html#allowAdvancedFiltering)** プロパティを使用して、以下のオプションを指定できます: + - **false** - 対応するグリッドのフィルタリングが無効になります /デフォルト値/。 - **true** - 対応するグリッドのフィルタリングが有効になります。 **[filterMode]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filterMode)** プロパティを使用して、以下のオプションを指定できます: + - **quickFilter** - 簡易なフィルタリング UI /デフォルト値/。 - **excelStyleFilter** - Excel のようなフィルタリング UI。 **[filterable]({environment:angularApiUrl}/classes/igxcolumncomponent.html#filterable)** プロパティを使用して、以下のオプションを指定できます: + - **true** - 対応する列のフィルタリングが有効なになります /デフォルト値/。 - **false** - 対応する列のフィルタリングが無効になります。 @@ -164,6 +171,7 @@ IgniteUI for [Angular @@igComponent コンポーネント](https://jp.infragisti - [`filter`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filter) - 単一の列または複数の列をフィルターします。 以下の 5 つのフィルタリング オペランド クラスが公開されます。 + - [`IgxFilteringOperand`]({environment:angularApiUrl}/classes/igxfilteringoperand.html): カスタムフィルタリング条件の定義時に継承できるベース フィルタリング オペランドです。 - [`IgxBooleanFilteringOperand`]({environment:angularApiUrl}/classes/igxbooleanfilteringoperand.html) は、`boolean` 型のすべてのデフォルト フィルタリング条件を定義します。 - [`IgxNumberFilteringOperand`]({environment:angularApiUrl}/classes/igxnumberfilteringoperand.html) は、`numeric` 型のすべてのデフォルト フィルタリング条件を定義します。 @@ -592,7 +600,7 @@ $custom-grid: grid-theme( ); ``` -以下のように、`grid-theme` は、フィルタリング行とフィルタリングされているそれぞれの列ヘッダーの色のみを制御します。入力グループ、チップ、ボタンなど、フィルタリング行内には明らかに多くのコンポーネントがあります。スタイルの設定は、それぞれに個別のテーマを作成する必要があるため、新しい [`input-group-theme`]({environment:sassApiUrl}/themes#input-group-theme) と新しい [`button-theme`]({environment:sassApiUrl}/themes#button-theme) を作成します。 +以下のように、`grid-theme` は、フィルタリング行とフィルタリングされているそれぞれの列ヘッダーの色のみを制御します。入力グループ、チップ、ボタンなど、フィルタリング行内には明らかに多くのコンポーネントがあります。スタイルの設定は、それぞれに個別のテーマを作成する必要があるため、新しい [`input-group-theme`]({environment:sassApiUrl}/themes#input-group-theme) と新しい [`flat-button-theme`]({environment:sassApiUrl}/themes#flat-button-theme) を作成します。 ```scss $dark-input-group: input-group-theme( @@ -602,36 +610,38 @@ $dark-input-group: input-group-theme( $filled-text-color: #292826 ); -$dark-button: button-theme( - $flat-background: #ffcd0f, - $flat-text-color: #292826, - $flat-hover-background: #292826, - $flat-hover-text-color: #ffcd0f +$dark-button: flat-button-theme( + $background: #ffcd0f, + $foreground: #292826, + $hover-background: #292826, + $hover-foreground: #ffcd0f ); ``` >[!NOTE] >上記のようにカラーの値をハードコーディングする代わりに、[`palette`]({environment:sassApiUrl}/palettes#function-palette) および [`color`]({environment:sassApiUrl}/palettes#function-color) 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](../themes/sass/palettes.md)のトピックをご覧ください。 -この例では、入力グループとボタンのパラメーターの一部のみを変更しましたが、[`input-group-theme`]({environment:sassApiUrl}/themes#function-input-group-theme) と [`button-theme`]({environment:sassApiUrl}/themes#function-button-theme) は、それぞれのスタイルを制御するためのより多くのパラメーターを提供します。 +この例では、入力グループとボタンのパラメーターの一部のみを変更しましたが、[`input-group-theme`]({environment:sassApiUrl}/themes#function-input-group-theme) と [`flat-button-theme`]({environment:sassApiUrl}/themes#function-flat-button-theme) は、それぞれのスタイルを制御するためのより多くのパラメーターを提供します。 最後の手順は、それぞれのテーマを持つコンポーネント ミックスインを**含める**ことです。また、入力のプレース ホルダーの色プロパティを設定します。 ```scss -@include css-vars($custom-grid); +:host { +@include tokens($custom-grid); -.igx-grid__filtering-row { - @include css-vars($dark-button); - @include css-vars($dark-input-group); + .igx-grid__filtering-row { + @include tokens($dark-button); + @include tokens($dark-input-group); - .igx-input-group__input::placeholder { - color: #ffcd0f; - } + .igx-input-group__input::placeholder { + color: #ffcd0f; + } + } } ``` >[!NOTE] ->作成した **button-theme** と **input-group-theme** を `.igx-grid__filtering-row` 内に含めて、フィルタリング行ボタンとその入力グループのみにスタイルを設定します。そうでない場合は、グリッド内の他のボタンと入力グループも影響を受けます。 +>作成した **flat-button-theme** と **input-group-theme** を `.igx-grid__filtering-row` 内に含めて、フィルタリング行ボタンとその入力グループのみにスタイルを設定します。そうでない場合は、グリッド内の他のボタンと入力グループも影響を受けます。 >[!NOTE] >コンポーネントが [`Emulated`](../themes/sass/component-themes.md#表示のカプセル化) ViewEncapsulation を使用している場合、`::ng-deep` を使用してこのカプセル化を解除する必要があります。 @@ -639,11 +649,11 @@ $dark-button: button-theme( ```scss :host { ::ng-deep { - @include css-vars($custom-grid); + @include tokens($custom-grid); .igx-grid__filtering-row { - @include css-vars($dark-button); - @include css-vars($dark-input-group) + @include tokens($dark-button); + @include tokens($dark-input-group) .igx-input-group__input::placeholder { color: #ffcd0f; @@ -675,10 +685,14 @@ $dark-button: button-theme( } @@if (igxName === 'IgxHierarchicalGrid') { + } + >[!NOTE] >このサンプルは、`Change Theme` (テーマの変更) から選択したグローバル テーマに影響を受けません。 diff --git a/jp/components/grids_templates/multi-column-headers.md b/jp/components/grids_templates/multi-column-headers.md index ef5f28f685..e2484836ec 100644 --- a/jp/components/grids_templates/multi-column-headers.md +++ b/jp/components/grids_templates/multi-column-headers.md @@ -6,6 +6,7 @@ _keywords: column headers, ignite ui for angular, infragistics _license: commercial _language: ja --- + } @@if (igxName === 'IgxTreeGrid') { --- @@ -15,6 +16,7 @@ _keywords: column headers, ignite ui for angular, infragistics _license: commercial _language: ja --- + } @@if (igxName === 'IgxHierarchicalGrid') { --- @@ -24,6 +26,7 @@ _keywords: 列ヘッダー, ignite ui for angular, infragistics _license: commercial _language: ja --- + } # Angular @@igComponent 複数列ヘッダーの概要 @@ -157,7 +160,8 @@ _language: ja } -各 [`igx-column-group`]({environment:angularApiUrl}/classes/igxcolumngroupcomponent.html) は、[`移動`](column-moving.md)、[`ピン固定`](column-pinning.md) と [`非表示`](column-hiding.md) をサポートします。 +各 [`igx-column-group`]({environment:angularApiUrl}/classes/igxcolumngroupcomponent.html) は、[`移動`](column-moving.md)、[`ピン固定`](column-pinning.md)と[`非表示`](column-hiding.md)をサポートします。 + > [!NOTE] > 列セットと列グループがある場合、ピン固定は列の一番上の親レベルでのみ可能です。ネストした `column groups` や `columns` のピン固定はできません。
> 複数列ヘッダーでのピン固定を使用すると、グループ全体がピン固定されることに注意してください。
@@ -308,10 +312,13 @@ $custom-theme: grid-theme( 最後の手順は、それぞれのテーマを持つコンポーネント ミックスインを**含める**ことです。 ```scss -@include css-vars($custom-theme); +:host { + @include tokens($custom-theme); +} ``` @@if (igxName === 'IgxGrid') { + ### デモ @@ -323,6 +330,7 @@ $custom-theme: grid-theme( } @@if (igxName === 'IgxTreeGrid') { + ### デモ @@ -334,6 +342,7 @@ $custom-theme: grid-theme( } @@if (igxName === 'IgxHierarchicalGrid') { + ### デモ diff --git a/jp/components/grids_templates/multi-row-layout.md b/jp/components/grids_templates/multi-row-layout.md index 2bcafc5d8e..7325a87ed4 100644 --- a/jp/components/grids_templates/multi-row-layout.md +++ b/jp/components/grids_templates/multi-row-layout.md @@ -61,11 +61,13 @@ _language: ja ## 機能の統合 複数行レイアウトのレンダリング方法は全く異なるため、列固定や列非表示など一部の列機能は `igx-column-layout` コンポーネントでのみ機能します。その他の機能ソートとグループ化などは、`igx-column` コンポーネントで同じように機能します。 + - フィルタリング - Excel スタイルのフィルタリングのみがサポートされています。`filterMode` を `FilterMode.quickFilter` に明示的に設定しても効果はありません。 - ページング - 表示行ではなくレコードで機能します。 - グループ化 - `hideGroupedColumns` オプションは、複数行レイアウトでは効果がありません。グループ化された列は常に表示されます。 - 以下の機能は現在サポート**されません**。 +以下の機能は現在サポート**されません**。 + - 列移動 - 複数列ヘッダー - Excel へエクスポート @@ -173,7 +175,9 @@ $custom-theme: grid-theme( テーマを適用する最も簡単な方法は、グローバル スタイル ファイルに `sass` `@include` ステートメントを使用することです。 ```scss -@include css-vars($custom-theme); +:host { + @include tokens($custom-theme); +} ``` カスタム テーマが特定のコンポーネントのみに影響するように、定義したすべてのスタイルをグローバル スタイル ファイルからカスタム コンポーネントのスタイルファイルに移動できます (`index` ファイルのインポートを含む)。 diff --git a/jp/components/grids_templates/paging.md b/jp/components/grids_templates/paging.md index 8b3ad24702..b56e02f3d8 100644 --- a/jp/components/grids_templates/paging.md +++ b/jp/components/grids_templates/paging.md @@ -6,6 +6,7 @@ _keywords: angular ページネーション, igniteui for angular, インフラ _license: commercial _language: ja --- + } @@if(igxName !== 'IgxGrid') { --- @@ -16,6 +17,7 @@ _license: commercial _canonicalLink: grid/paging _language: ja --- + } # Angular @@igComponent ページネーション @@ -61,7 +63,6 @@ _language: ja ``` - 例: ```html @@ -141,6 +142,7 @@ _language: ja } @@if (igxName === 'IgxHierarchicalGrid') { + ### 子グリッド内のページネーター設定 IgxHierarchicalGrid の子グリッドの実装方法および DI スコープの動作には一定の制限があるため、igx-row-island タグ内でページネーター コンポーネントを定義する場合、ページネーター自体で IgxPaginator ディレクティブを必ず使用してください。これにより、子グリッドが参照として正しいページネーター インスタンスを持つようになります。 @@ -191,6 +193,7 @@ IgxHierarchicalGrid の子グリッドの実装方法および DI スコープ リモート ページングは、データ取得を担当するサービスと、グリッドの構築とデータ サブスクリプションを担当するコンポーネントを宣言することで実現できます。詳細については、[`@@igComponent リモート データ操作`](remote-data-operations.md#リモート-ページング)トピックをご覧ください。 @@if (igxName === 'IgxGrid') { + ## カスタム テンプレートのリモート ページング 独自のページング動作を定義するために、`igx-paginator-content` を使用してカスタム ロジックを追加できます。[このセクション](remote-data-operations.md#カスタム-igx-paginator-content-のリモート-ページング)では、上記を実証するために、リモート ページングの例を拡張する方法を説明します。 @@ -220,7 +223,7 @@ $dark-paginator: paginator-theme( `paginator-theme` はページング コンテナーの色の制御のみですが、ポケットベル UI のボタンには影響しません。これらのボタンにスタイル設定するために、新しいアイコン ボタン テーマを作成しましょう。 ```scss -$dark-button: icon-button-theme( +$dark-button: flat-icon-button-theme( $foreground: #d0ab23, $hover-foreground: #231c2c, $hover-background: #d0ab23, @@ -236,10 +239,12 @@ $dark-button: icon-button-theme( 最後にそれぞれのテーマを持つコンポーネント ミックスインを**含める**ことです。 ```scss -@include css-vars($dark-paginator); +:host { + @include tokens($dark-paginator); -.igx-grid-paginator__pager { - @include css-vars($dark-button); + .igx-grid-paginator__pager { + @include tokens($dark-button); + } } ``` @@ -250,18 +255,19 @@ $dark-button: icon-button-theme( >コンポーネントが [`Emulated`](../themes/sass/component-themes.md#表示のカプセル化) ViewEncapsulation を使用している場合、ボタンのようにページング コンテナー内にあるコンポーネントのスタイルを設定するには、`::ng-deep` を使用してこのカプセル化を`解除する`必要があります。 ```scss -@include css-vars($dark-paginator); - :host { + @include tokens($dark-paginator); + igx-paginator { ::ng-deep { - @include css-vars($dark-button); + @include tokens($dark-button); } } } ``` @@if (igxName === 'IgxGrid'){ + ### ページネーション スタイルの例 @@ -287,6 +293,7 @@ $dark-button: icon-button-theme( @@if (igxName === 'IgxTreeGrid'){ + ### デモ ` に適用される `IgxRowDragGhost` ディレクティブを使用してテンプレート化できます。 +ドラッグゴーストは、`@@igSelector` の本体内の `` に適用される `IgxRowDragGhost` ディレクティブを使用してテンプレート化できます。 ```html <@@igSelector> @@ -306,7 +310,7 @@ export class @@igxNameRowDragComponent { ### ドラッグ アイコンのテンプレート化 ドラッグ ハンドル アイコンは、グリッドの [`dragIndicatorIconTemplate`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#dragIndicatorIconTemplate) を使用してテンプレート化できます。作成している例で、アイコンをデフォルトのもの (`drag_indicator`) から `drag_handle` に変更します。 -`igxDragIndicatorIcon` を使用して `@@igSelector` の本文内にテンプレートを渡して変更できます。 +`igxDragIndicatorIcon` を使用して `@@igSelector` の本体内にテンプレートを渡して変更できます。 ```html <@@igSelector> @@ -328,7 +332,8 @@ enum DragIcon { ``` @@if (igxName === 'IgxTreeGrid' || igxName === 'IgxHierarchicalGrid') { -### ドロップ エリアのスタイル + +### ドロップ エリアのスタイル設定 ドロップ ハンドラが正しく設定されたら、次にドロップ領域をスタイル設定します。 @@ -811,7 +816,6 @@ private changeHighlightedElement(newElement: HTMLElement) { ``` -
#### 行ドラッグでグリッドをスクロールする diff --git a/jp/components/grids_templates/row-editing.md b/jp/components/grids_templates/row-editing.md index 810d4a89b2..67bb28a6ad 100644 --- a/jp/components/grids_templates/row-editing.md +++ b/jp/components/grids_templates/row-editing.md @@ -6,6 +6,7 @@ _keywords: row editing, igniteui for angular, インフラジスティックス _license: commercial _language: ja --- + } @@if(igxName!=='IgxGrid'){ --- @@ -16,6 +17,7 @@ _license: commercial _language: ja _canonicalLink: grid/row-editing --- + } # Angular @@igComponent 行編集 @@ -358,10 +360,12 @@ $banner-theme: banner-theme( ### テーマを含む -次に Sass `@include` ステートメントを使用してテーマを適用します。新しく定義された `$banner-theme` を [`css-vars mixin`]({environment:sassApiUrl}/themes#mixin-css-vars) で渡します。 +次に Sass `@include` ステートメントを使用してテーマを適用します。新しく定義された `$banner-theme` を [`tokens mixin`]({environment:sassApiUrl}/themes#mixin-tokens) で渡します。 ```scss -@include css-vars($banner-theme); +:host { + @include tokens($banner-theme); +} ``` ### コンポーネント スタイル @@ -376,7 +380,7 @@ $banner-theme: banner-theme( :host { ::ng-deep { - @include css-vars($banner-theme); + @include tokens($banner-theme); } } ``` @@ -403,19 +407,19 @@ $banner-theme: banner-theme( ``` -カスタム ボタンを定義した後は、[`button-theme`]({environment:sassApiUrl}/themes#function-button-theme) を使用してスタイルを設定できます。[こちら](../button.md#スタイル設定)で `igx-button` のスタイリングについてさらに学ぶことができます。`[完了]` と `[キャンセル]` のカスタム テーマを作成できます。 +カスタム ボタンを定義した後は、[`flat-icon-button-theme`]({environment:sassApiUrl}/themes#function-flat-icon-button-theme) を使用してスタイルを設定できます。You can learn more about `igx-icon-button` styling in the [Icon Button Styling documentation](../icon-button.md#icon-button-styling).`[完了]` と `[キャンセル]` のカスタム テーマを作成できます。 ```scss // custom.component.scss ... -$button-theme: button-theme( +$button-theme: flat-icon-button-theme( $palette: $purple-palette ); ... .custom-buttons { - @include css-vars($button-theme); + @include tokens($button-theme); } ``` diff --git a/jp/components/grids_templates/row-pinning.md b/jp/components/grids_templates/row-pinning.md index b6304d6c35..7e937a3465 100644 --- a/jp/components/grids_templates/row-pinning.md +++ b/jp/components/grids_templates/row-pinning.md @@ -6,6 +6,7 @@ _keywords: lock row, ignite ui for angular, infragistics, 行のロック, イ _license: commercial _language: ja --- + } @@if (igxName === 'IgxTreeGrid') { --- @@ -15,6 +16,7 @@ _keywords: lock row, ignite ui for angular, infragistics, 行のロック, イ _license: commercial _language: ja --- + } @@if (igxName === 'IgxHierarchicalGrid') { --- @@ -24,6 +26,7 @@ _keywords: lock row, ignite ui for angular, infragistics, 行のロック, イ _license: commercial _language: ja --- + } # Angular @@igComponent 行ピン固定 @@ -36,7 +39,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/grid/grid-row-pinning/" alt="Angular @@igComponent 行ピン固定の例"> } @@ -44,7 +47,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-row-pinning/" alt="Angular @@igComponent 行ピン固定の例"> } @@ -52,7 +55,7 @@ _language: ja + iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-row-pinning/" alt="Angular @@igComponent 行ピン固定の例"> } @@ -418,10 +421,10 @@ public onDropAllowed(args) { - グリッドのスクロール可能領域におけるピン固定行のコピーは、ピン固定行が存在する状態で他のグリッド機能が動作するのに不可欠な役割を果たします。そのため、その生成を無効化または削除することはできません。 - 行選択 は 行 ID のみで動作するため、ピン固定行を選択するとそのコピーも選択されます (逆も同様)。さらに、ピン固定領域での範囲選択 (Shift + クリックにより) は、スクロール可能な領域で行を範囲選択する場合と同じように機能します。結果として、間にある行はピン固定されていなくてもすべて選択されます。API を 介して選択した行を取得すると、選択した各レコードの単一のインスタンスのみを返します。 - グリッドに `primaryKey` が設定されておらず、リモート データ シナリオが有効になっている場合 (ページング、ソート、フィルタリング、スクロール時に、グリッドに表示されるデータを取得するためのリモート サーバーへのリクエストがトリガーされる場合)、データ要求が完了すると、行は次の状態を失います: - - Row Selection - - Row Expand/collapse - - Row Editing - - Row Pinning + - 行の選択 + - 行の展開/縮小 + - 行の選択 + - 行のピン固定
@@ -460,7 +463,9 @@ $custom-grid-theme: grid-theme( 最後にカスタム グリッド テーマを設定します。 ```scss -@include css-vars($custom-grid-theme); +:host { + @include tokens($custom-grid-theme); +} ``` ### デモ diff --git a/jp/components/grids_templates/sorting.md b/jp/components/grids_templates/sorting.md index 0dd7ab0b4f..87abdef773 100644 --- a/jp/components/grids_templates/sorting.md +++ b/jp/components/grids_templates/sorting.md @@ -6,6 +6,7 @@ _keywords: angular sort, ignite ui for angular, infragistics _license: commercial _language: ja --- + } @@if (igxName === 'IgxTreeGrid') { --- @@ -15,6 +16,7 @@ _keywords: angular sort, ignite ui for angular, infragistics _license: commercial _language: ja --- + } @@if (igxName === 'IgxHierarchicalGrid') { --- @@ -24,6 +26,7 @@ _keywords: angular sort, ignite ui for angular, infragistics _license: commercial _language: ja --- + } # Angular @@igComponent のソート @@ -226,6 +229,7 @@ public ngOnInit(): void {
@@if (igxName === 'IgxGrid') { + ## リモート ソート @@igComponent はリモート ソートをサポートします。詳細については、[`@@igComponent リモート データ操作`](remote-data-operations.md)で説明されています。 @@ -289,10 +293,13 @@ $custom-theme: grid-theme( 最後の手順は、それぞれのテーマを持つコンポーネント ミックスインを**含める**ことです。 ```scss -@include css-vars($custom-theme); +:host { + @include tokens($custom-theme); +} ``` @@if (igxName === 'IgxGrid') { + ### デモ @@ -304,6 +311,7 @@ $custom-theme: grid-theme( } @@if (igxName === 'IgxTreeGrid') { + ### デモ @@ -315,6 +323,7 @@ $custom-theme: grid-theme( } @@if (igxName === 'IgxHierarchicalGrid') { + ### デモ diff --git a/jp/components/grids_templates/summaries.md b/jp/components/grids_templates/summaries.md index 445dbc4c1c..75b48e2539 100644 --- a/jp/components/grids_templates/summaries.md +++ b/jp/components/grids_templates/summaries.md @@ -6,6 +6,7 @@ _keywords: angular grid 集計, ignite ui for angular, infragistics _license: commercial _language: ja --- + } @@if (igxName === 'IgxTreeGrid') { --- @@ -16,6 +17,7 @@ _license: commercial _canonicalLink: grid/summaries _language: ja --- + } @@if (igxName === 'IgxHierarchicalGrid') { --- @@ -26,6 +28,7 @@ _license: commercial _canonicalLink: grid/summaries _language: ja --- + } # Angular @@igComponent 集計 @@ -787,21 +790,24 @@ $custom-theme: grid-summary-theme( 最後にコンポーネントのカスタム テーマを**含めます**。 ```scss -@include css-vars($custom-theme); +:host { + @include tokens($custom-theme); +} ``` >[!NOTE] ->コンポーネントが [`Emulated`](../themes/sass/component-themes.md#表示のカプセル化) ViewEncapsulation を使用している場合、`::ng-deep` を使用してこのカプセル化を解除する必要があります。 +>コンポーネントが [`Emulated`](../themes/sass/component-themes.md#表示のカプセル化) ViewEncapsulation を使用している場合、 `::ng-deep` を使用してこのカプセル化を`解除する`必要があります。 -```scss + ```scss :host { ::ng-deep { - @include css-vars($custom-theme); + @include tokens($custom-theme); } } ``` @@if (igxName === 'IgxGrid') { + ### デモ @@ -813,6 +819,7 @@ $custom-theme: grid-summary-theme( } @@if (igxName === 'IgxTreeGrid') { + ### デモ @@ -824,6 +831,7 @@ $custom-theme: grid-summary-theme( } @@if (igxName === 'IgxHierarchicalGrid') { + ### デモ diff --git a/jp/components/grids_templates/toolbar.md b/jp/components/grids_templates/toolbar.md index 71d1d5a726..3be87b9f32 100644 --- a/jp/components/grids_templates/toolbar.md +++ b/jp/components/grids_templates/toolbar.md @@ -6,6 +6,7 @@ _keywords: angular ツールバー, igniteui for angular, インフラジステ _license: commercial _language: ja --- + } @@if(igxName!=='IgxGrid') { @@ -17,6 +18,7 @@ _license: commercial _language: ja _canonicalLink: grid/toolbar --- + } # Angular @@igComponent Toolbar @@ -606,23 +608,25 @@ $dark-checkbox-theme: checkbox-theme( 最後にコンポーネントのテーマを**含めます**。 ```scss -@include css-vars($dark-grid-toolbar-theme); -@include css-vars($dark-column-actions-theme); -@include css-vars($dark-checkbox-theme); -@include css-vars($dark-button-theme); +:host { + @include tokens($dark-grid-toolbar-theme); + @include tokens($dark-column-actions-theme); + @include tokens($dark-checkbox-theme); + @include tokens($dark-button-theme); +} ``` >[!NOTE] >コンポーネントが [`Emulated`](../themes/sass/component-themes.md#表示のカプセル化) ViewEncapsulation を使用している場合、グリッド ツールバー コンポーネント内のコンポーネントのスタイルを設定するために、`::ng-deep` を使用してこのカプセル化を`解除する`必要があります。 ```scss -@include css-vars($dark-grid-toolbar-theme); +@include tokens($dark-grid-toolbar-theme); :host { ::ng-deep { - @include css-vars($dark-column-actions-theme); - @include css-vars($dark-checkbox-theme); - @include css-vars($dark-button-theme); + @include tokens($dark-column-actions-theme); + @include tokens($dark-checkbox-theme); + @include tokens($dark-button-theme); } } ``` diff --git a/jp/components/grids_templates/validation.md b/jp/components/grids_templates/validation.md index d4ddbeb961..e8d51c7f94 100644 --- a/jp/components/grids_templates/validation.md +++ b/jp/components/grids_templates/validation.md @@ -15,6 +15,7 @@ _language: ja ### テンプレート駆動で構成する Angular Forms 検証ディレクティブは、`IgxColumn` で直接動作するよう拡張されています。同じ検証が `igx-column` で宣言的に設定される属性として利用できます。以下の検証は追加設定なしでサポートされます。 + - required - min - max @@ -565,6 +566,7 @@ public stateMessage(cell: CellType) { ``` } + ### クロス フィールドの例 @@if (igxName === 'IgxGrid') { @@ -619,10 +621,10 @@ public stateMessage(cell: CellType) { ### スタイルを含める -エラーの色を変更するには、css 変数 `--igx-error-500` を使用します。 +エラーの色を変更するには、css 変数 `--ig-error-500` を使用します。 ```scss ---igx-error-500: 34, 80%, 63%; +--ig-error-500: 34, 80%, 63%; ``` ### カスタム テンプレート diff --git a/jp/components/hierarchicalgrid/hierarchical-grid.md b/jp/components/hierarchicalgrid/hierarchical-grid.md index dfaac2ce40..e98b2b57e8 100644 --- a/jp/components/hierarchicalgrid/hierarchical-grid.md +++ b/jp/components/hierarchicalgrid/hierarchical-grid.md @@ -353,7 +353,9 @@ $custom-theme: grid-theme( テーマを適用する最も簡単な方法は、グローバル スタイル ファイルに `sass` `@include` ステートメントを使用することです。 ```scss -@include css-vars($custom-theme); +:host { + @include tokens($custom-theme); +} ``` ### スコープ コンポーネント テーマ @@ -434,6 +436,7 @@ platformBrowserDynamic() - [列のピン固定](column-pinning.md) - [列のサイズ変更](column-resizing.md) - [選択](selection.md) +- [Ignite UI for Angular スキル](../ai/skills.md) - グリッド、データ操作、テーマ設定向けのエージェントのスキル
コミュニティに参加して新しいアイデアをご提案ください。 diff --git a/jp/components/icon.md b/jp/components/icon.md index 79927cf9b1..7783be1ed1 100644 --- a/jp/components/icon.md +++ b/jp/components/icon.md @@ -235,7 +235,9 @@ $custom-icon-theme: icon-theme( 最後には、カスタム アイコン テーマをアプリケーションに渡します。 ```scss -@include css-vars($custom-icon-theme); +:host { + @include tokens($custom-icon-theme); +} ``` ### デモ @@ -290,7 +292,7 @@ igx-icon { } ``` -または、ユニバーサル変数 `--igx-icon-size` を使用して、すべてのインスタンスをターゲットにすることもできます。 +または、ユニバーサル変数 `--ig-icon-size` を使用して、すべてのインスタンスをターゲットにすることもできます。 ```html
@@ -300,7 +302,7 @@ igx-icon { ```scss .my-app { - --igx-icon-size: 50px; + --ig-icon-size: 50px; } ``` diff --git a/jp/components/input-group.md b/jp/components/input-group.md index 0523bde0a4..a061781b87 100644 --- a/jp/components/input-group.md +++ b/jp/components/input-group.md @@ -781,7 +781,9 @@ $custom-input-group: input-group-theme( 最後に、新しく作成したテーマを含めます。 ```scss -@include css-vars($custom-input-group); +:host { + @include tokens($custom-input-group); +} ``` 以下のサンプルでは、カスタマイズした CSS 変数を使用した入力グループが、[`Carbon`](https://carbondesignsystem.com/components/text-input/usage/#live-demo) デザイン システムの入力グループに視覚的に似たデザインを実現している様子を確認できます。 diff --git a/jp/components/linear-progress.md b/jp/components/linear-progress.md index bcff036527..985a82ec81 100644 --- a/jp/components/linear-progress.md +++ b/jp/components/linear-progress.md @@ -268,7 +268,9 @@ $custom-theme: progress-linear-theme( 最後にコンポーネントのテーマをアプリケーションに**含めます**。 ```scss -@include css-vars($custom-theme); +:host { + @include tokens($custom-theme); +} ``` ### デモ diff --git a/jp/components/list.md b/jp/components/list.md index 1db5afb65e..499a79911c 100644 --- a/jp/components/list.md +++ b/jp/components/list.md @@ -832,7 +832,9 @@ $my-list-theme: list-theme( 最後にコンポーネントのテーマを**含めます**。 ```scss -@include css-vars($my-list-theme); +:host { + @include tokens($my-list-theme); +} ``` 以下は上記コードの結果です。 diff --git a/jp/components/month-picker.md b/jp/components/month-picker.md index ab6618a980..109003450a 100644 --- a/jp/components/month-picker.md +++ b/jp/components/month-picker.md @@ -205,7 +205,9 @@ $my-calendar-theme: calendar-theme( 次にコンポーネントのテーマをアプリケーションに**含めます**。 ```scss -@include css-vars($my-calendar-theme); +:host { + @include tokens($my-calendar-theme); +} ``` すべて設定できると、結果は以下のようになります。 diff --git a/jp/components/navbar.md b/jp/components/navbar.md index 5f433b6862..7602640229 100644 --- a/jp/components/navbar.md +++ b/jp/components/navbar.md @@ -327,10 +327,12 @@ $custom-navbar-theme: navbar-theme( >[!NOTE] >上記のようにカラーの値をハードコーディングする代わりに、[`palette`]({environment:sassApiUrl}/palettes#function-palette) および [`color`]({environment:sassApiUrl}/palettes#function-color) 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](themes/sass/palettes.md)のトピックをご覧ください。 -最後に、新しく作成されたテーマを `css-vars` ミックスインに渡します。 +最後に、新しく作成されたテーマを `tokens` ミックスインに渡します。 ```scss -@include css-vars($custom-navbar-theme); +:host { + @include tokens($custom-navbar-theme); +} ``` ### デモ diff --git a/jp/components/navdrawer.md b/jp/components/navdrawer.md index ceae0b6ab6..4f42193a72 100644 --- a/jp/components/navdrawer.md +++ b/jp/components/navdrawer.md @@ -481,7 +481,9 @@ $custom-theme: navdrawer-theme( 最後にコンポーネントのテーマをアプリケーションに**含めます**。 ```scss -@include css-vars($custom-theme); +:host { + @include tokens($custom-theme); +} ``` >[!NOTE] @@ -490,7 +492,7 @@ $custom-theme: navdrawer-theme( ```scss :host { ::ng-deep { - @include css-vars($custom-theme); + @include tokens($custom-theme); } } ``` diff --git a/jp/components/overlay-styling.md b/jp/components/overlay-styling.md index 5ff27bbfcc..0d2e0288a5 100644 --- a/jp/components/overlay-styling.md +++ b/jp/components/overlay-styling.md @@ -11,13 +11,13 @@ _language: ja

[`IgxOverlayService`](overlay.md) は、ページ コンテンツの上にコンテンツを表示するために使用されます。Ignite UI for Angular コンポーネントの多くは、[ドロップダウン](drop-down.md)、[コンボ](combo.md)、[日付ピッカー](date-picker.md)などのオーバーレイを使用しているため、オーバーレイがコンテンツを表示する方法を理解することが重要です。 -他の要素上にコンテンツを表示するために、サービスはコンテンツを特別なアウトレット コンテナーに移します (デフォルトではドキュメントの本文の最後にアタッチされています)。この動作は、[特定のコンテナーにスコープされた](#スコープ-コンポーネント-スタイル) スタイルに影響を与える可能性があります。 +他の要素上にコンテンツを表示するために、サービスはコンテンツを特別なアウトレット コンテナーに移します (デフォルトではドキュメントの本体の最後にアタッチされています)。この動作は、[特定のコンテナーにスコープされた](#スコープ-コンポーネント-スタイル) スタイルに影響を与える可能性があります。

## オーバーレイ コンポーネントのスタイル設定 -ほとんどの場合、[グローバル](themes/sass/global-themes.md) テーマのスタイルはオーバーレイ アウトレットの影響を受けません。例として、グローバル [`css-vars`]({environment:sassApiUrl}/themes#mixin-css-vars) ミックスインで[スタイル設定された](drop-down.md#スタイル設定)ドロップダウンを見てみましょう。 +ほとんどの場合、[グローバル](themes/sass/global-themes.md) テーマのスタイルはオーバーレイ アウトレットの影響を受けません。例として、グローバル [`tokens`]({environment:sassApiUrl}/themes#mixin-tokens) ミックスインで[スタイル設定された](drop-down.md#スタイル設定)ドロップダウンを見てみましょう。 ```html @@ -38,7 +38,9 @@ $my-drop-down-theme: drop-down-theme( $background-color: #efefef ); -@include css-vars($my-drop-down-theme); +:host { + @include tokens($my-drop-down-theme); +} ``` グローバル スタイルはスコープされたルール下では生成されず、カプセル化の影響も受けないため、サービスがオーバーレイ アウトレットに移動した `igx-drop-down-item` など、ページ上の任意の要素と一致できます。 @@ -51,7 +53,10 @@ $my-drop-down-theme: drop-down-theme( ```scss // overlay-styling.component.scss -@include css-vars($my-drop-down-theme); + +:host { + @include tokens($my-drop-down-theme); +} ``` >[!NOTE] @@ -61,12 +66,12 @@ $my-drop-down-theme: drop-down-theme( // overlay-styling.component.scss :host { ::ng-deep { - @include css-vars($my-drop-down-theme); + @include tokens($my-drop-down-theme); } } ``` -コンボのリスト内項目は、コンポーネント `ホスト`の子孫ではありません。現在、ドキュメント本文の最後にあるデフォルトのオーバーレイ アウトレットに表示されています。変更するには、`overlaySettings` の [`outlet`]({environment:angularApiUrl}/interfaces/overlaysettings.html#outlet) プロパティを使用します。`outlet` は、オーバーレイ コンテナーをレンダリングする場所を制御します。 +コンボのリスト内項目は、コンポーネント `ホスト`の子孫ではありません。現在、ドキュメント本体の最後にあるデフォルトのオーバーレイ アウトレットに表示されています。変更するには、`overlaySettings` の [`outlet`]({environment:angularApiUrl}/interfaces/overlaysettings.html#outlet) プロパティを使用します。`outlet` は、オーバーレイ コンテナーをレンダリングする場所を制御します。 以下でコンテナーを配置する要素への参照を渡すことができます。 @@ -107,7 +112,9 @@ $my-overlay-theme: overlay-theme( $background-color: rgba(0, 153, 255, 0.3) ); -@include css-vars($my-overlay-theme); +:host { + @include tokens($my-overlay-theme); +} ``` これで、**すべて**のモーダル オーバーレイの背景が紫色になります。 @@ -119,7 +126,7 @@ $my-overlay-theme: overlay-theme( // overlay-styling.component.scss :host { ::ng-deep { - @include css-vars($my-overlay-theme); + @include tokens($my-overlay-theme); } } ``` @@ -133,7 +140,7 @@ $my-overlay-theme: overlay-theme( // styles.scss ... .purple { - @include css-vars($my-overlay-theme); + @include tokens($my-overlay-theme); } ``` diff --git a/jp/components/pivotgrid/pivot-grid-features.md b/jp/components/pivotgrid/pivot-grid-features.md index 021e5154b1..875f7730b7 100644 --- a/jp/components/pivotgrid/pivot-grid-features.md +++ b/jp/components/pivotgrid/pivot-grid-features.md @@ -188,7 +188,7 @@ public pivotUI: IPivotUISettings = { rowLayout: PivotRowLayoutType.Horizontal, h ### キーボード ナビゲーション -`IgxPivotGrid` のキーボード ナビゲーションは、`IgxGrid` のキーボード ナビゲーションと同様に機能します。ピボット グリッドは、`rows`、`columns`、`values` の 3 つの領域に分割されます。`rows` と `columns` の領域はナビゲーションの目的でヘッダーと見なされ、`values` の領域は本文です。 +`IgxPivotGrid` のキーボード ナビゲーションは、`IgxGrid` のキーボード ナビゲーションと同様に機能します。ピボット グリッドは、`rows`、`columns`、`values` の 3 つの領域に分割されます。`rows` と `columns` の領域はナビゲーションの目的でヘッダーと見なされ、`values` の領域は本体です。 キーボードの矢印を使用すると、現在の領域内でのみアクティブな要素をナビゲートできます。 ### ディメンションのドラッグアンドドロップ diff --git a/jp/components/pivotgrid/pivot-grid.md b/jp/components/pivotgrid/pivot-grid.md index d4d8e94736..5c960aafb9 100644 --- a/jp/components/pivotgrid/pivot-grid.md +++ b/jp/components/pivotgrid/pivot-grid.md @@ -345,6 +345,7 @@ public data = [ - [Angular ピボット グリッド機能](pivot-grid-features.md) - [Angular ピボット グリッド カスタム集計](pivot-grid-custom.md) +- [Ignite UI for Angular スキル](../ai/skills.md) - グリッド、データ操作、テーマ設定向けのエージェントのスキル
コミュニティに参加して新しいアイデアをご提案ください。 diff --git a/jp/components/query-builder.md b/jp/components/query-builder.md index 11c35c1092..da152d736d 100644 --- a/jp/components/query-builder.md +++ b/jp/components/query-builder.md @@ -348,21 +348,18 @@ $custom-icon-button: outlined-icon-button-theme( >[!NOTE] >上記のようにカラーの値をハードコーディングする代わりに、[`palette`]({environment:sassApiUrl}/palettes#function-palette) および [`color`]({environment:sassApiUrl}/palettes#function-color) 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](./themes/sass/palettes.md)のトピックをご覧ください。 -最後に、`css-vars` ミックスインを使用して新しいコンポーネント テーマを**含めます**。 +最後に、`tokens` ミックスインを使用して新しいコンポーネント テーマを**含めます**。 ```scss -@include css-vars($custom-query-builder); - :host { - ::ng-deep { - @include css-vars($custom-input-group); - @include css-vars($custom-chip); - @include css-vars($custom-icon-button); + @include tokens($custom-query-builder); + @include tokens($custom-input-group); + @include tokens($custom-chip); + @include tokens($custom-icon-button); .igx-filter-tree__buttons { - @include css-vars($custom-button); + @include tokens($custom-button); } - } } ``` diff --git a/jp/components/radio-button.md b/jp/components/radio-button.md index 108512ba9b..02e0750f10 100644 --- a/jp/components/radio-button.md +++ b/jp/components/radio-button.md @@ -217,7 +217,9 @@ $custom-radio-theme: radio-theme( 最後に、カスタム テーマをアプリケーションに**含めます**。 ```scss -@include css-vars($custom-radio-theme); +:host { + @include tokens($custom-radio-theme); +} ``` [!NOTE] diff --git a/jp/components/select.md b/jp/components/select.md index 1363af563e..e104a0ae19 100644 --- a/jp/components/select.md +++ b/jp/components/select.md @@ -427,7 +427,9 @@ $custom-select-theme: select-theme( 最後には、カスタム ラジオ テーマをアプリケーションに渡します。 ```scss -@include css-vars($custom-select-theme); +:host { + @include tokens($custom-select-theme); +} ``` [!NOTE] > RANGE タイプのスライダーを使用する場合、`ngModel` へのバインディングはスライダーからモデルを更新する方向でのみ動作します。両方の値に双方向バインディングを使用するには、`lowerValue` と `upperValue` バインディングを利用できます。 - 最大値および最小値に近い値が適切でない場合があります。[`minValue`]({environment:angularApiUrl}/classes/igxslidercomponent.html#minValue) と [`maxValue`]({environment:angularApiUrl}/classes/igxslidercomponent.html#maxValue) の設定以外に、ユーザー選択を更に制限するための範囲も設定できます。 これは、[`lowerBound`]({environment:angularApiUrl}/classes/igxslidercomponent.html#lowerBound) および [`upperBound`]({environment:angularApiUrl}/classes/igxslidercomponent.html#upperBound) プロパティで設定します。この設定により、0 ～ 100 および 900 ～ 1000 の範囲でつまみを移動できなくなります。 @@ -424,9 +423,10 @@ public type = SliderType.RANGE; iframe-src="{environment:demosBaseUrl}/interactions/slider-secondary-ticks-mirror/" > +### Orientation > [!NOTE] -> [`ticksOrientaion`]({environment:angularApiUrl}/classes/igxslidercomponent.html#ticksOrientaion) が **Top** または **Mirror** に設定され、**目盛りラベル**が表示されている場合、**つまみラベル**は意図的に非表示になります。このようにして、ユーザー エクスペリエンスの低下と 2 つのラベルの重複を防止できます。 +> [`ticksOrientation`]({environment:angularApiUrl}/classes/igxslidercomponent.html#ticksOrientaion) が **Top** または **Mirror** に設定され、**目盛りラベル**が表示されている場合、**つまみラベル**は意図的に非表示になります。このようにして、ユーザー エクスペリエンスの低下と 2 つのラベルの重複を防止できます。 ### ラベル ビューを含むスライダー目盛り @@ -475,6 +475,7 @@ public type = SliderType.RANGE; > [`context`]({environment:angularApiUrl}/classes/igxtickscomponent.html#context) は各目盛りごとに実行されます。 つまり、次への参照を提供します。 + - 対応する各目盛りの**値** - 目盛りが**プライマリ**の場合 - **目盛り**インデックス @@ -704,7 +705,9 @@ $custom-slider-theme: slider-theme( 最後に新しく作成されたコンポーネントのテーマをアプリケーションに含めます。 ```scss -@include css-vars($custom-slider-theme); +:host { + @include tokens($custom-slider-theme); +} ``` ### デモ diff --git a/jp/components/snackbar.md b/jp/components/snackbar.md index 796de30af3..a4c08fb964 100644 --- a/jp/components/snackbar.md +++ b/jp/components/snackbar.md @@ -337,7 +337,9 @@ $dark-snackbar: snackbar-theme( 最後にコンポーネントのテーマをアプリケーションに**含めます**。 ```scss -@include css-vars($dark-snackbar); +:host { + @include tokens($dark-snackbar); +} ``` ### デモ diff --git a/jp/components/splitter.md b/jp/components/splitter.md index 6b2ebdeea6..4c7c90c770 100644 --- a/jp/components/splitter.md +++ b/jp/components/splitter.md @@ -270,7 +270,9 @@ $splitter-theme: splitter-theme( 次に Splitter のカスタム テーマを渡します。 ```scss -@include css-vars($custom-splitter-theme); +:host { + @include tokens($custom-splitter-theme); +} ``` ### デモ @@ -325,7 +327,7 @@ igx-splitter { } ``` -または、ユニバーサル変数 `--igx-splitter-size` を使用して、すべてのインスタンスをターゲットにすることもできます。 +または、ユニバーサル変数 `--ig-splitter-size` を使用して、すべてのインスタンスをターゲットにすることもできます。 ```html
@@ -335,7 +337,7 @@ igx-splitter { ```scss .my-app { - --igx-splitter-size: 10px; + --ig-splitter-size: 10px; } ``` diff --git a/jp/components/stepper.md b/jp/components/stepper.md index b36c8574b8..f8f07cd284 100644 --- a/jp/components/stepper.md +++ b/jp/components/stepper.md @@ -439,7 +439,9 @@ $stepper-theme: stepper-theme( 最後にコンポーネントのテーマを含めます。 ```scss -@include css-vars($custom-stepper-theme); +:host { + @include tokens($custom-stepper-theme); +} ``` ### デモ diff --git a/jp/components/switch.md b/jp/components/switch.md index 85a06761df..73f0680b83 100644 --- a/jp/components/switch.md +++ b/jp/components/switch.md @@ -386,7 +386,9 @@ $custom-switch-theme: switch-theme( 最後に、カスタム テーマをアプリケーションに**含めます**。 ```scss -@include css-vars($custom-switch-theme); +:host { + @include tokens($custom-switch-theme); +} ``` 以下のサンプルでは、カスタマイズした CSS 変数を使用したスイッチ コンポーネントが、[`SAP UI5`](https://ui5.sap.com/#/entity/sap.m.Switch/sample/sap.m.sample.Switch) デザイン システムのスイッチに視覚的に似たデザインを実現している様子を確認できます。 diff --git a/jp/components/tabbar.md b/jp/components/tabbar.md index 9db79f75a9..468a711ff0 100644 --- a/jp/components/tabbar.md +++ b/jp/components/tabbar.md @@ -471,7 +471,9 @@ $dark-bottom-nav: bottom-nav-theme( 最後にコンポーネントのテーマをアプリケーションに**含めます**。 ```scss -@include css-vars($dark-bottom-nav); +:host { + @include tokens($dark-bottom-nav); +} ``` ### デモ diff --git a/jp/components/tabs.md b/jp/components/tabs.md index 224a4b848d..4f009d80c3 100644 --- a/jp/components/tabs.md +++ b/jp/components/tabs.md @@ -736,7 +736,9 @@ $dark-tabs: tabs-theme( 最後にコンポーネントのテーマを**含めます**。 ```scss -@include css-vars($dark-tabs); +:host { + @include tokens($dark-tabs); +} ``` ### デモ diff --git a/jp/components/texthighlight.md b/jp/components/texthighlight.md index 99c25b83b7..4916215cd5 100644 --- a/jp/components/texthighlight.md +++ b/jp/components/texthighlight.md @@ -378,9 +378,7 @@ $dark-highlight: highlight-theme( ```scss :host { - ::ng-deep { - @include css-vars($dark-highlight); - } + @include tokens($dark-highlight); } ``` @@ -418,7 +416,7 @@ $dark-highlight: highlight-theme( ```scss :host { ::ng-deep { - @include css-vars($dark-highlight); + @include tokens($dark-highlight); .custom-highlight { border: 1px solid #ffcd0f; diff --git a/jp/components/themes/index.md b/jp/components/themes/index.md index 5737724a07..d492c47e05 100644 --- a/jp/components/themes/index.md +++ b/jp/components/themes/index.md @@ -16,6 +16,7 @@ Ignite UI for Angular を使用すると、CSS 変数を使用してすべての ## 基本的な使用方法 Ignite UI for Angular には、パッケージの一部として次のテーマが含まれています: + - Material - Bootstrap - Fluent @@ -80,7 +81,7 @@ Sass が適切でない場合は、[カスタム CSS プロパティ](https://de >[!WARNING] > 一部のコンポーネントは、パレットのカラーを使用しません。そのような場合、カラーを変更するには、コンポーネントの CSS 変数を直接ターゲットにする必要があります。 -> どのパレットのカラーがどのコンポーネントで使用されているかを確認するには、コンポーネントの[ドキュメント]({environment:sassApiUrl}/themes#function-avatar-theme)を参照してください。 +> どのパレットのカラーがどのコンポーネントで使用されているかを確認するには、コンポーネントの[ドキュメント]({environment:sassApiUrl}/themes)を参照してください。 同様に、`エレベーション` (シャドウ) の変更も同様に簡単です。25 のエレベーション レベル (0〜24) が含まれています。 これらの変数がどのように見えるかを簡略化したバージョンを次に示します。 @@ -99,7 +100,7 @@ Sass が適切でない場合は、[カスタム CSS プロパティ](https://de } ``` -これらは基本的に積層された CSS [`box-shadow`](https://developer.mozilla.org/ja/docs/Web/CSS/box-shadow) 宣言です。それらを他の有効な `box-shadow` 値に置き換えることができます。エレベーション レベルの数値が高いほど、シャドウが大きくなります。この場合も、コンポーネントごとに異なるエレベーション レベルが使用されます。コンポーネントが使用するエレベーション レベルを確認するには、[コンポーネントのドキュメント]({environment:sassApiUrl}/themes#function-avatar-theme)を参照してください。ドキュメントの[エレベーション](./elevations.md)でエレベーションを詳しく見ていきます。 +これらは基本的に積層された CSS [`box-shadow`](https://developer.mozilla.org/ja/docs/Web/CSS/box-shadow) 宣言です。それらを他の有効な `box-shadow` 値に置き換えることができます。エレベーション レベルの数値が高いほど、シャドウが大きくなります。この場合も、コンポーネントごとに異なるエレベーション レベルが使用されます。コンポーネントが使用するエレベーション レベルを確認するには、[コンポーネントのドキュメント]({environment:sassApiUrl}/themes)を参照してください。ドキュメントの[エレベーション](./elevations.md)でエレベーションを詳しく見ていきます。 ## 構成 @@ -140,7 +141,7 @@ Sass が適切でない場合は、[カスタム CSS プロパティ](https://de ```css /* styles.css */ :root { - --igx-avatar-background: black; + --ig-avatar-background: black; } igx-avatar { @@ -151,13 +152,13 @@ igx-avatar { 上記のスニペットは、すべてのアバターの背景を orange カラーに設定します。 アバター コンポーネントは、最初に `--background` 変数を探します。明示的に設定されている場合は、その値を取ります。つまり、`local` 変数の優先度は高く、タグ セレクターまたは `igx-avatar` をターゲットとするその他のセレクターを使用して、`igx-avatar` に直接適用された場合に**のみ**機能します。 -グローバル `--igx-avatar-background` はフォールバック変数と考えることができます。ローカルの `--background` が明示的にオーバーライドされていない場合にのみ使用されます。 +グローバル `--ig-avatar-background` はフォールバック変数と考えることができます。ローカルの `--background` が明示的にオーバーライドされていない場合にのみ使用されます。 好奇心旺盛な方のために、これがアバターの内部でどのように実装されているかを次に示します: ```css igx-avatar { - --background: var(--igx-avatar-background, var(--ig-gray-400)); + --background: var(--ig-avatar-background, var(--ig-gray-400)); background: var(--background); } ``` @@ -182,7 +183,7 @@ igx-avatar { ```css /* styles.css */ :root { - --igx-avatar-background: lavender; + --ig-avatar-background: lavender; } ``` diff --git a/jp/components/themes/sass/component-themes.md b/jp/components/themes/sass/component-themes.md index cce590aeed..a67f569c92 100644 --- a/jp/components/themes/sass/component-themes.md +++ b/jp/components/themes/sass/component-themes.md @@ -29,8 +29,52 @@ Ignite UI for Angular でコンポーネント テーマを設定する方法、 コンポーネント テーマは複数のパーツで構成されます。 - **コンポーネント テーマ関数** - Sass 関数は、渡した引数を正規化して コンポーネント ミックスインでテーマを作成します。 -- **CSS 変数 mixin** - コンポーネント テーマを使用し、特定コンポーネントのスタイルに使用される **CSS 変数**を生成する Sass mixin。 -- **コンポーネント mixin** - コンポーネント テーマを使用し、特定コンポーネントのスタイルに使用される **CSS ルール**を生成する Sass mixin。 +- **Tokens ミックスイン** - Ignite UI コンポーネント テーマから CSS 変数トークンを生成するコンポーネント テーマを使用する Sass ミックスインです。 +- **コンポーネント ミックスイン** - コンポーネント テーマを使用し、特定コンポーネントのスタイルに使用される **CSS ルール**を生成する Sass mixin。 + + +### Tokens ミックスイン + +`tokens` ミックスインを使用することは、コンポーネントをカスタマイズするための推奨される方法です。Ignite UI コンポーネント テーマから、グローバル モードまたはスコープ モードのいずれかで CSS カスタム プロパティ (`design tokens`) を生成します。 + +**グローバル モード (デフォルト)** - ユニバーサル `--ig-{component}-{property}` トークンを出力します。ローカル var() 参照はグローバルな同等のものに書き換えられるため、派生値 (例: `adaptive-contrast`) は任意のスコープで正しく解決されます。サイズ可能な式はスキップされるため、代わりに具体的な値を渡す必要があります。 + +```scss +// Input: +@include tokens(avatar-theme($background: red)); + +// Output: +:root { + --ig-avatar-background: red; + /* ... remaining avatar properties ... */ +} +``` + +**グローバル モード (デフォルト)** - ユニバーサル `--ig-{component}-{property}` トークンを出力します。ローカル var() 参照はグローバルな同等のものに書き換えられるため、派生値 (例: `adaptive-contrast`) は任意のスコープで正しく解決されます。サイズ可能な式はスキップされるため、代わりに具体的な値を渡す必要があります。 + +```scss +// Input (from root): +@include tokens(avatar-theme($background: red), $mode: 'scoped'); + +// Output: +igx-avatar { + --background: var(--igx-avatar-background, var(--ig-avatar-background, red)); + /* ... remaining avatar properties ... */ +} + + +// Input (from within a selector): +.my-theme { + @include tokens(avatar-theme($background: red), $mode: 'scoped'); +} + +// Output: +.my-theme, +.my-theme igx-avatar { + --background: var(--igx-avatar-background, var(--ig-avatar-background, red)); + /* ... */ +} +``` アバターのデフォルトテーマに設定するテーマと異なる背景色を持つ新規のグローバル アバター テーマを作成する場合、[**概要セクション**](#概要)のようにコンポーネント テーマを作成する 2 つの一般的な方法があります。 コンポーネントテーマを体系化し、スコープする方法があります。最も簡単な方法は、[**グローバル テーマ**](./global-themes.md)を定義した同じファイルで行う方法です。 @@ -38,35 +82,39 @@ Ignite UI for Angular でコンポーネント テーマを設定する方法、 アバター テーマの定義: ```scss -// Some place after @include theme(...); - // Change the background of the avatar to purple. $avatar-purple-theme: avatar-theme( $background: purple, ); -// Pass the css-vars to the `css-vars` mixin -@include css-vars($avatar-purple-theme); +// Pass the theme to the `tokens` mixin +:root { + @include tokens($avatar-purple-theme); +} ``` 上記のコードは、`igx-avatar` コンポーネントに対して新しい CSS 変数を生成します。これらの新しい CSS 変数は、デフォルトのアバター ルールを上書きします。 -同様に、グローバルな `scss` ファイルに `css-vars` ミックスインを追加した場合、ミックスイン は定義済みのテーマを再び上書きします。 +同様に、グローバルな `scss` ファイルに `tokens` ミックスインを追加した場合、ミックスイン は定義済みのテーマを再び上書きします。 次に例を示します。 ```scss // ... -@include css-vars($avatar-purple-theme); +:root { + @include tokens($avatar-purple-theme); +} // Later $avatar-royalblue-theme: avatar-theme( $background: royalblue, ); -@include css-vars($avatar-royalblue-theme); +:root { + @include tokens($avatar-royalblue-theme); +} ``` -上記コードでは、以前の `css-vars` ミックスインはすべて上書きされるため、事実上のグローバル テーマは `$avatar-royalblue-theme` なります。 +上記コードでは、以前の `tokens` ミックスインはすべて上書きされるため、事実上のグローバル テーマは `$avatar-royalblue-theme` なります。 ここで次のポイントに移ります。 @@ -82,11 +130,11 @@ $avatar-royalblue-theme: avatar-theme( // ... // CSS class selectors .avatar-royalblue { - @include css-vars($avatar-royalblue-theme); + @include tokens($avatar-royalblue-theme); } .avatar-purple { - @include css-vars($avatar-purple-theme); + @include tokens($avatar-purple-theme); } ``` @@ -110,7 +158,7 @@ $avatar-royalblue-theme: avatar-theme( グローバルにスコープし、単一の Sass ファイルに含まれるテーマを作成する方法について説明しました。ただし最適な方法ではないため、Sass ファイルを特定のコンポーネントにバインドした方がよい場合があります。この場合、表示のカプセル化、特に Angular で発生させる方法を考慮する必要があります。 -Angular では、表示のカプセル化に 3 つの方法 Emulated (デフォルト)、Shadow DOM、None を採用しています。各方法の詳細については、[Angular ヘルプ](https://angular.io/api/core/ViewEncapsulation) をご覧ください。表示をカプセル化した親コンポーネントの一部である Ignite UI for Angular コンポーネントのテーマを処理する方法について詳しく説明します。 +Angular では、表示のカプセル化に 3 つの方法 Emulated (デフォルト)、Shadow DOM、None を採用しています。各方法の詳細については、[Angular ヘルプ](https://angular.dev/api/core/ViewEncapsulation) をご覧ください。表示をカプセル化した親コンポーネントの一部である Ignite UI for Angular コンポーネントのテーマを処理する方法について詳しく説明します。 `エミュレートされた`表示のカプセル化とは？このタイプの表示のカプセル化は、Shadow DOM 仕様の利点を享受しませんが、ホスト要素に適用された一意の属性識別子を使用してコンポーネントとその子のスタイルをバインドする方法を利用します。 @@ -147,18 +195,18 @@ $avatar-royalblue-theme: avatar-theme( ); :host { - @include css-vars($avatar-royalblue-theme); + @include tokens($avatar-royalblue-theme); } ``` CSS 変数を使用する間は、`::ng-deep` 擬似セレクターは必要ありません。上記コードで背景色に常に `royalblue` が含まれる `igx-avatar` の CSS 変数を作成しました。カスタム アバターのテーマは、その他の `igx-avatar` コンポーネントに影響しないため、カスタムの `app-avatar` コンポーネント内でカプセル化されたままです。 -上記のインスタンスは、Sass を使用せずに実現することもできます。 `--igx-avatar-background` CSS 変数の値を希望のカラーに設定します。 +上記のインスタンスは、Sass を使用せずに実現することもできます。 `--ig-avatar-background` CSS 変数の値を希望のカラーに設定します。 ```css /* app-avatar.component.css */ :host { - --igx-avatar-background: royalblue; + --ig-avatar-background: royalblue; } ``` diff --git a/jp/components/themes/sass/configuration.md b/jp/components/themes/sass/configuration.md index ad9f1903e3..49bcb2a080 100644 --- a/jp/components/themes/sass/configuration.md +++ b/jp/components/themes/sass/configuration.md @@ -30,8 +30,11 @@ Ignite UI for Angular テーマには、アプリケーション内のすべて // Here we set the scrollbar to have size of 16px, scrollbar thumb to be in color pink, and scrolblar track to be in color green $my-scrollbar-theme: scrollbar-theme($sb-size: 16px, $sb-thumb-bg-color: pink, $sb-track-bg-color: green); -// We use 'css-vars' mixin for generating the css variables with the new scrollbar values. -@include css-vars($my-scrollbar-theme); +// We use 'tokens' mixin for generating the css variables with the new scrollbar values. + +:host { + @include tokens($my-scrollbar-theme); +} ```
@@ -47,9 +50,11 @@ $my-scrollbar-theme: scrollbar-theme($sb-size: 16px, $sb-thumb-bg-color: pink, $ - [アニメーション](./animations.md) アプリケーション全体のテーマを作成する方法の詳細: + - [グローバル テーマ](./global-themes.md) コンポーネント固有のテーマを作成する方法の詳細: + - [コンポーネント テーマ](./component-themes.md) コミュニティに参加して新しいアイデアをご提案ください。 diff --git a/jp/components/themes/sass/elevations.md b/jp/components/themes/sass/elevations.md index 4dbaaffaf9..3baf474174 100644 --- a/jp/components/themes/sass/elevations.md +++ b/jp/components/themes/sass/elevations.md @@ -77,7 +77,9 @@ $card-theme: card-theme( $resting-shadow: elevation(10) ); -@include css-vars($card-theme); +:host { + @include tokens($card-theme); +} ``` `elevation` 関数を利用せずに、単純なボック スシャドウを渡すこともできます。 @@ -88,7 +90,7 @@ $card-theme: card-theme( ); .my-card { - @include css-vars($card-theme); + @include tokens($card-theme); } ``` @@ -124,5 +126,6 @@ $elevations: (
コミュニティに参加して新しいアイデアをご提案ください。 + - [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/jp/components/themes/sass/index.md b/jp/components/themes/sass/index.md index c55cbcef0f..e038f64cec 100644 --- a/jp/components/themes/sass/index.md +++ b/jp/components/themes/sass/index.md @@ -33,7 +33,7 @@ _language: ja ## タイポグラフィ -タイポグラフィは Sass テーマ ライブラリの別のモジュールで、個々のコンポーネント テーマから分離されています。デフォルトで使用されるタイポグラフィもありますが、アプリケーションのスタイル設定をさらにカスタマイズできます。タイポグラフィはスタイル設定で中心的な役割を担います。アプリケーションで見出し、サブ見出し、ボタン、本文などのフォント ファミリ、サイズ、太さを変更するメソッドを提供します。 +タイポグラフィは Sass テーマ ライブラリの別のモジュールで、個々のコンポーネント テーマから分離されています。デフォルトで使用されるタイポグラフィもありますが、アプリケーションのスタイル設定をさらにカスタマイズできます。タイポグラフィはスタイル設定で中心的な役割を担います。アプリケーションで見出し、サブ見出し、ボタン、本体などのフォント ファミリ、サイズ、太さを変更するメソッドを提供します。 ## 丸み @@ -65,9 +65,11 @@ Sass テーマ システムは、各コンポーネントの最小丸みと最 - [アニメーション](./animations.md) アプリケーション全体のテーマを作成する方法の詳細: + - [アプリケーション テーマ](./global-themes.md) コンポーネント固有のテーマを作成する方法の詳細: + - [コンポーネント テーマ](./component-themes.md) コミュニティに参加して新しいアイデアをご提案ください。 diff --git a/jp/components/themes/sass/schemas.md b/jp/components/themes/sass/schemas.md index 989195550f..e155fd5b06 100644 --- a/jp/components/themes/sass/schemas.md +++ b/jp/components/themes/sass/schemas.md @@ -145,7 +145,7 @@ $indigo-avatar: map.get($light-indigo-schema, avatar); // We include the specific schema to a class which we can then set on the avatar component that we want .indigo-avatar { - @include css-vars( + @include tokens( avatar-theme( $schema: $indigo-avatar ) @@ -171,5 +171,6 @@ $indigo-avatar: map.get($light-indigo-schema, avatar);
コミュニティに参加して新しいアイデアをご提案ください。 + - [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/jp/components/time-picker.md b/jp/components/time-picker.md index 64218629b1..664e57efd9 100644 --- a/jp/components/time-picker.md +++ b/jp/components/time-picker.md @@ -416,7 +416,7 @@ $my-time-picker-theme: time-picker-theme( Time Picker ウィンドウは [`IgxOverlayService`](overlay.md) を使用するため、カスタム テーマがスタイルを設定する Time Picker ウィンドウに適用されるように、ダイアログ ウィンドウが表示されたときに DOM に配置される特定のアウトレットを提供します。 -Time Picker内の項目は、コンポーネント `ホスト`の子孫**ではありません**。現在、`ドキュメント`本文の最後にあるデフォルトのオーバーレイ アウトレットに表示されています。これを変更するには、`overlaySettings` の [`outlet`]({environment:angularApiUrl}/interfaces/overlaysettings.html#outlet) プロパティを使用します。`outlet` は、オーバーレイ コンテナーをレンダリングする場所を制御します。 +Time Picker内の項目は、コンポーネント `ホスト`の子孫**ではありません**。現在、`ドキュメント`本体の最後にあるデフォルトのオーバーレイ アウトレットに表示されています。これを変更するには、`overlaySettings` の [`outlet`]({environment:angularApiUrl}/interfaces/overlaysettings.html#outlet) プロパティを使用します。`outlet` は、オーバーレイ コンテナーをレンダリングする場所を制御します。 以下でコンテナーを配置する要素への参照を渡すことができます。 @@ -437,9 +437,10 @@ Time Picker の項目がコンポーネントのホスト**内**に適切にレ >[!NOTE] >[`IgxOverlayService`](overlay.md) を使用して表示される要素にテーマを提供するためのさまざまなオプションの詳細については、[オーバーレイ スタイリングのトピック](overlay-styling.md)をご覧ください。 - ```scss - @include css-vars($my-time-picker-theme); +:host { + @include tokens($my-time-picker-theme); +} ``` >[!WARNING] @@ -447,9 +448,9 @@ Time Picker の項目がコンポーネントのホスト**内**に適切にレ ```scss :host { - ::ng-deep { - @include css-vars($my-time-picker-theme); - } + ::ng-deep { + @include tokens($my-time-picker-theme); + } } ``` diff --git a/jp/components/toast.md b/jp/components/toast.md index 2dee1825fa..6d9f68d922 100644 --- a/jp/components/toast.md +++ b/jp/components/toast.md @@ -237,7 +237,9 @@ $custom-toast-theme: toast-theme( 最後に Toast のカスタム テーマを設定します。 ```scss -@include css-vars($custom-toast-theme); +:host { + @include tokens($custom-toast-theme); +} ``` ### デモ diff --git a/jp/components/toc.yml b/jp/components/toc.yml index f4159b2bb5..0862c575a4 100644 --- a/jp/components/toc.yml +++ b/jp/components/toc.yml @@ -1,4 +1,12 @@ -- name: 概要 +- name: AI 支援開発 + header: true +- name: Ignite UI for Angular スキル + href: ai/skills.md + new: true +- name: Theming MCP + href: ai/theming-mcp.md + new: true +- name: 概要 header: true sortable: true _language: "ja" @@ -1162,7 +1170,7 @@ href: display-density.md - name: スペーシング href: themes/spacing.md - new: true + new: false - name: Sass new: false items: @@ -1216,7 +1224,7 @@ items: - name: Tailwind カスタム クラスの使用 href: themes/misc/tailwind-classes.md - new: true + new: false - name: 印刷スタイル href: themes/misc/printing-styles.md new: false diff --git a/jp/components/tooltip.md b/jp/components/tooltip.md index 1bcaffa0be..f7029c9c56 100644 --- a/jp/components/tooltip.md +++ b/jp/components/tooltip.md @@ -36,7 +36,7 @@ Ignite UI for Angular については、「[はじめに](general/getting-starte // app.module.ts ... -import { IgxTooltipModule } from 'igniteui-angular/directives/tooltip'; +import { IgxTooltipModule } from 'igniteui-angular/tooltip'; // import { IgxTooltipModule } from '@infragistics/igniteui-angular'; for licensed package @NgModule({ @@ -46,7 +46,7 @@ import { IgxTooltipModule } from 'igniteui-angular/directives/tooltip'; export class AppModule {} ``` -あるいは、`16.0.0` 以降、`IgxTooltipDirective` をスタンドアロンの依存関係としてインポートすることも、[`IGX_TOOLTIP_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/directives/tooltip/public_api.ts) トークンを使用してコンポーネントとそのすべてのサポート コンポーネントおよびディレクティブをインポートすることもできます。 +あるいは、`16.0.0` 以降、`IgxTooltipDirective` をスタンドアロンの依存関係としてインポートすることも、[`IGX_TOOLTIP_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/directives/src/directives/tooltip/public_api.ts) トークンを使用してコンポーネントとそのすべてのサポート コンポーネントおよびディレクティブをインポートすることもできます。 ```typescript // home.component.ts @@ -287,13 +287,25 @@ export class AppModule {} ツールチップを表示または非表示にするまでの時間を制御する場合は、[`igxTooltipTarget`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html) ディレクティブの [`showDelay`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#showDelay) と [`hideDelay`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#hideDelay) プロパティを使用します。両プロパティは型 **number** でミリセカンドでタイムスパンを取得できます。 > [!NOTE] -> [`IgxTooltipTargetDirective`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html) の組み込み UI インタラクションは、[`showDelay`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#showDelay) および [`hideDelay`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#hideDelay) プロパティの値を考慮して動作します。一方で、API からツールチップを表示または非表示にする場合や [`IgxTooltipDirective`]({environment:angularApiUrl}/classes/igxtooltipdirective.html) の API を使用する場合、[`showDelay`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#showDelay) や [`hideDelay`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#hideDelay) は考慮されません。必要な場合、ロジックはアプリケーションの仕様を手動で実装する必要があります。 +> [`IgxTooltipTargetDirective`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html) の組み込み UI インタラクションは、[`showDelay`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#showdelay) および [`hideDelay`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#hidedelay) プロパティの値を考慮して動作します。一方で、API からツールチップを表示または非表示にする場合や [`IgxTooltipDirective`]({environment:angularApiUrl}/classes/igxtooltipdirective.html) の API を使用する場合、[`showDelay`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#showdelay) や [`hideDelay`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#hidedelay) は考慮されません。必要な場合、ロジックはアプリケーションの仕様を手動で実装する必要があります。 + +### トリガー + +デフォルトでは、[`igxTooltip`]({environment:angularApiUrl}/classes/igxtooltipdirective.html) は [`igxTooltipTarget`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html) 上にホバーしている間のみトリガーされます。ただし、[`showTriggers`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#showtriggers) および [`hideTriggers`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#hidetriggers) プロパティを使用してこの動作を変更できます。これらのプロパティにより、[`igxTooltip`]({environment:angularApiUrl}/classes/igxtooltipdirective.html) が表示および非表示になるタイミングを制御できます。これらのプロパティは `click`、`focus`、`keypress` などのイベント名を値として受け取り、さまざまなシナリオで [`igxTooltip`]({environment:angularApiUrl}/classes/igxtooltipdirective.html) をトリガーできます。 + + + + +> [!NOTE] +> [`showTriggers`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#showtriggers) および [`hideTriggers`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#hidetriggers) の設定は、[`igxTooltip`]({environment:angularApiUrl}/classes/igxtooltipdirective.html) 自体ではなく [`igxTooltipTarget`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html) とのインタラクション時にのみ有効です。[`igxTooltip`]({environment:angularApiUrl}/classes/igxtooltipdirective.html) のデフォルトのイベント トリガーは `pointerenter` および `pointerleave` です。 ### オーバーレイ構成 [`igxTooltip`]({environment:angularApiUrl}/classes/igxtooltipdirective.html) と [`igxTooltipTarget`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html) の両ディレクティブは、内部的に [`IgxOverlayService`](overlay.md) を使用してツールチップ要素を開閉します。 -[`igxTooltipTarget`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html) ディレクティブは [`positionSettings`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#positionSettings) プロパティを公開しており、ツールチップのアニメーション、UI 上での配置などをカスタマイズできます。未設定の場合はデフォルトの配置設定が適用されます。 +[`igxTooltipTarget`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html) ディレクティブは [`positionSettings`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#positionsettings) プロパティを公開しており、ツールチップのアニメーション、UI 上での配置などをカスタマイズできます。未設定の場合はデフォルトの配置設定が適用されます。 さらに詳細なカスタマイズには、[`igxToggleAction`]({environment:angularApiUrl}/classes/igxtoggleactiondirective.html) から継承された [`overlaySettings`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#overlaysettings) プロパティを使用します。 @@ -338,7 +350,7 @@ public overlaySettings: OverlaySettings = {
Her name is Madelyn James
``` -デフォルトの閉じるボタンをカスタマイズするには、[`closeButtonTemplate`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#closebuttontemplate) プロパティを使用します。 +デフォルトの閉じるボタンをカスタマイズするには、[`closeButtonTemplate`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#closetemplate) プロパティを使用します。 ```html @@ -402,7 +414,7 @@ public overlaySettings: OverlaySettings = { 例: ```ts -export class CustomStrategy extends TooltipPositioningStrategy { +export class CustomStrategy extends TooltipPositionStrategy { constructor(settings?: PositionSettings) { super(settings); } @@ -476,7 +488,9 @@ $dark-tooltip: tooltip-theme( 最後にコンポーネントのテーマをアプリケーションに**含めます**。 ```scss -@include css-vars($dark-tooltip); +:host { + @include tokens($dark-tooltip); +} ``` スタイル設定されたツールチップは以下のようになります。 @@ -551,7 +565,7 @@ $dark-tooltip: tooltip-theme( | 制限 | 説明| | ----------------------------------- | ---------- | -| カスタム配置ストラテジと矢印 | [`igxTooltipTarget`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html) ディレクティブは `TooltipPositionStrategy` を使用してツールチップと矢印を配置します。カスタムの [`positionStrategy`]({environment:angularApiUrl}/interfaces/overlaysettings.html#positioningStrategy) を使用する場合、かつ [`hasArrow`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#hasarrow) を `true` に設定する場合、そのカスタム ストラテジは `TooltipPositionStrategy` を継承している必要があります。そうでない場合、矢印は表示されません。| +| カスタム配置ストラテジと矢印 | [`igxTooltipTarget`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html) ディレクティブは [`TooltipPositionStrategy`]({environment:angularApiUrl}/classes/tooltippositionstrategy.html) を使用してツールチップと矢印を配置します。カスタムの [`positionStrategy`]({environment:angularApiUrl}/interfaces/overlaysettings.html#positioningStrategy) を使用する場合、かつ [`hasArrow`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#hasarrow) を `true` に設定する場合、そのカスタム ストラテジは [`TooltipPositionStrategy`]({environment:angularApiUrl}/classes/tooltippositionstrategy.html) を継承している必要があります。そうでない場合、矢印は表示されません。| ## API リファレンス diff --git a/jp/components/tree.md b/jp/components/tree.md index 4d47428f1b..96905990c6 100644 --- a/jp/components/tree.md +++ b/jp/components/tree.md @@ -433,7 +433,9 @@ $custom-tree-theme: tree-theme( 最後にコンポーネントのテーマを含めます。 ```scss -@include css-vars($custom-tree-theme); +:host { + @include tokens($custom-tree-theme); +} ``` ### デモ diff --git a/jp/components/treegrid/tree-grid.md b/jp/components/treegrid/tree-grid.md index ab678e682e..920bdb5af1 100644 --- a/jp/components/treegrid/tree-grid.md +++ b/jp/components/treegrid/tree-grid.md @@ -1,7 +1,7 @@ --- title: Angular Tree Grid | 最速の Angular Tree テーブル | インフラジスティックス _description: Ignite UI for Angular のツリー グリッドは、階層データまたはフラット データを簡単に表示および操作するために使用されます。コーディングをほとんど行わずにデータをバインドできます。無料でお試しください。 -_keywords: angular tree grid, angular tree table, angular hierarchical tree grid コンポーネント, angular tree table コンポーネント, angular UI コンポーネント, igniteui for angular, インフラジスティックス +_keywords: angular tree grid, angular tree table, angular tree grid コンポーネント, angular tree table コンポーネント, angular UI コンポーネント, igniteui for angular, インフラジスティックス _license: commercial _language: ja --- @@ -322,7 +322,9 @@ $custom-theme: grid-theme( 最後にコンポーネントのテーマを**含めます**。 ```scss -@include css-vars($custom-theme); +:host { + @include tokens($custom-theme); +} ``` ### Angular ツリー グリッド スタイル設定のデモ @@ -408,6 +410,7 @@ platformBrowserDynamic() - [Grid サイズ変更](sizing.md) - [Data Grid](../grid/grid.md) - [行編集](row-editing.md) +- [Ignite UI for Angular スキル](../ai/skills.md) - グリッド、データ操作、テーマ設定向けのエージェントのスキル
コミュニティに参加して新しいアイデアをご提案ください。