Skip to content

Commit ff4d860

Browse files
randriovarandriova
committed
Update JA for #1630, #1757 and #1759 
1 parent 38c722a commit ff4d860

File tree

3 files changed

+126
-7
lines changed

3 files changed

+126
-7
lines changed

‎doc/jp/components/grids/_shared/cell-merging.md‎

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,15 @@ Ignite UI for {Platform} {ComponentTitle} には、同じ値を持つ隣接セ
1515

1616
## {Platform} {ComponentTitle} セル結合の例
1717

18-
`sample="/{ComponentSample}/cell-merge", height="700", alt="{Platform} {ComponentTitle} セル結合の例"`
18+
<!-- ComponentStart: Grid -->
19+
`sample="/{ComponentSample}/cell-merge", height="600", alt="{Platform} {ComponentTitle} セル結合の例"`
20+
<!-- ComponentEnd: Grid -->
21+
<!-- ComponentStart: HierarchicalGrid -->
22+
`sample="/{ComponentSample}/cell-merge", height="475", alt="{Platform} {ComponentTitle} セル結合の例"`
23+
<!-- ComponentEnd: HierarchicalGrid -->
24+
<!-- ComponentStart: TreeGrid -->
25+
`sample="/{ComponentSample}/cell-merge", height="755", alt="{Platform} {ComponentTitle} セル結合の例"`
26+
<!-- ComponentEnd: TreeGrid -->
1927

2028
## セル結合の有効化と使用
2129

@@ -225,13 +233,19 @@ constructor() {
225233
grid.cellMergeMode = 'always';
226234
}
227235
```
228-
<!-- end: WebComponents -->
229-
<!-- ComponentStart: Grid -->
230236

231237
### デモ
232238

233-
`sample="/{ComponentSample}/cell-merge-custom-sample", height="700", alt="{Platform} {ComponentTitle} セル結合の例"`
239+
<!-- end: WebComponents -->
240+
<!-- ComponentStart: Grid -->
241+
`sample="/{ComponentSample}/cell-merge-custom-sample", height="600", alt="{Platform} {ComponentTitle} セル結合の例"`
234242
<!-- ComponentEnd: Grid -->
243+
<!-- ComponentStart: HierarchicalGrid -->
244+
`sample="/{ComponentSample}/cell-merge-custom-sample", height="425", alt="{Platform} {ComponentTitle} セル結合の例"`
245+
<!-- ComponentEnd: HierarchicalGrid -->
246+
<!-- ComponentStart: TreeGrid -->
247+
`sample="/{ComponentSample}/cell-merge-custom-sample", height="755", alt="{Platform} {ComponentTitle} セル結合の例"`
248+
<!-- ComponentEnd: TreeGrid -->
235249

236250
## 機能の統合
237251

‎doc/jp/components/themes/tailwind.md‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
---
2+
title: {Platform} の Tailwind 統合
3+
_description: Ignite UI のテーマ エンジンのカスタム ユーティリティ クラスと Tailwind CSS を統合する方法について説明します。このガイドでは、セットアップの手順を説明し、ユーティリティ ファーストのアプローチでカラー、タイポグラフィ、シャドウのデザイン トークンを使用する方法について説明します。
4+
_keywords: {ProductName}, Infragistics, Themes, Styling, Tailwind CSS, custom CSS, utility classes, theming engine, typography, shadows, colors, スタイル, テーマ設定, カスタム CSS, ユーティリティ クラス, テーマ設定エンジン, タイポグラフィ, シャドウ, カラー, インフラジスティックス
5+
mentionedTypes: ["ConfigureTheme"]
6+
_language: ja
7+
---
8+
9+
# Tailwind CSS と Ignite UI for WebComponents の統合
10+
Ignite UI for WebComponents は、CSS 変数を通じて完全なテーマ カスタマイズを提供します。このガイドでは、Tailwind CSS をプロジェクトに統合し、`igniteui-theming` パッケージが提供するカスタム ユーティリティ クラスを活用する方法を紹介します。これらのクラスは Ignite UI のデザイン トークンをユーティリティとして公開し、カラー・シャドウ・タイポグラフィの一貫したスタイリングを可能にします。
11+
<br>
12+
13+
## 概要
14+
15+
このガイドでは、**Ignite UI Theming** がすでにインストールされていることを前提としています。そうでない場合は、次を実行します。
16+
17+
```cmd
18+
npm install igniteui-theming
19+
```
20+
21+
## Tailwind のセットアップ
22+
23+
まず、[公式の Tailwind インストール ガイド](https://tailwindcss.com/docs/installation)に従って、選択したビルド ツールまたはフレームワークに応じて Tailwind CSS をインストールします。
24+
25+
Tailwind をセットアップしたら、Tailwind と Ignite UI テーマ設定の両方をグローバル スタイルシートにインポートします。
26+
27+
```css
28+
@import 'tailwindcss';
29+
@import 'igniteui-theming/tailwind/theme';
30+
```
31+
32+
プロジェクトでスタイル設定に `sass` を使用している場合:
33+
34+
```scss
35+
@import "tailwindcss";
36+
@use "igniteui-theming/tailwind/theme";
37+
```
38+
39+
## Ignite UI カスタム ユーティリティ クラスの使用
40+
`igniteui-theming` パッケージには、Ignite UI のデザイン トークンをユーティリティ クラスとして公開する Tailwind のカスタム設定が含まれています。これには以下が含まれます:
41+
42+
- カラーとコントラスト カラー
43+
44+
- エレベーション (シャドウ)
45+
46+
- タイポグラフィ スタイル
47+
48+
それぞれの使い方を見ていきましょう。
49+
50+
### カラー ユーティリティ クラス
51+
当社のカラー ユーティリティ クラスは、各 Ignite UI テーマのトークンを活用しています。これらを HTML に直接適用できます。
52+
53+
<!-- WebComponents -->
54+
```html
55+
<h1 class="bg-primary-500 text-primary-500-contrast">This is a title</h1>
56+
```
57+
<!-- end: WebComponents -->
58+
59+
Tailwind の完全なカラー システムは[こちら](https://tailwindcss.com/docs/color)で確認でき、Ignite UI が提供するクラス名を使って適用できます。
60+
<br>
61+
62+
### シャドウ ユーティリティ クラス
63+
64+
定義済みの[エレベーション レベル](https://jp.infragistics.com/products/ignite-ui-web-components/web-components/components/themes/elevations) (0 ～ 24) のいずれかを使用して深度を追加できます。
65+
66+
<!-- WebComponents -->
67+
```html
68+
<div class="shadow-elevation-8">Elevated container</div>
69+
```
70+
<!-- end: WebComponents -->
71+
72+
Tailwind が提供するすべてのシャドウ関連のユーティリティ クラスは、[こちら](https://tailwindcss.com/docs/box-shadow)で見つけることができます。
73+
<br>
74+
75+
### タイポグラフィ カスタム ユーティリティ スタイル
76+
フォントを適用するには、トップ レベルの要素に `font-ig` クラスを追加します。`text-base` ユーティリティ クラスを使用して基本フォント サイズを定義することもできます。
77+
各タイポグラフィ レベル (例: h1、h2、body-1) ごとにカスタム ユーティリティ クラスを提供しています。以下のように使用してください。
78+
79+
<!-- WebComponents -->
80+
```html
81+
<p class="type-style-h3">This paragraph gets the h3 styles</p>
82+
```
83+
<!-- end: WebComponents -->
84+
85+
各クラスは、[Ignite UI のタイプ スケール](https://jp.infragistics.com/products/ignite-ui-web-components/web-components/components/themes/typography)に応じて、必要なすべてのフォント設定、間隔、サイズを適用します。
86+
87+
## サンプル
88+
89+
以下のサンプルでは、`shadows`、`colors`、`typography` 用のカスタム ユーティリティを含む、Tailwind ユーティリティ クラスのみを使用して構築された 404 ページが表示されます。
90+
91+
`sample="/layouts/tailwind/styling", height="400", alt="{Platform} Tailwind の統合"`
92+
93+
>[!NOTE]
94+
>このサンプルは架空の完全カスタム例であり、Ignite UI コンポーネント ライブラリの一部ではありません。
95+
96+
## まとめ
97+
わずか数ステップの設定で、Tailwind のユーティリティ ファースト アプローチと Ignite UI の堅牢なデザイン システムを組み合わせることができます。この統合により、カラー・エレベーション・タイポグラフィのトークンを直接 HTML で活用し、一貫性のあるテーマ付き UI コンポーネントを迅速に構築できます。

‎docfx/jp/components/toc.json‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -187,7 +187,8 @@
187187
{
188188
"exclude": ["Angular"],
189189
"name": "列のピン固定",
190-
"href": "grids/grid/column-pinning.md"
190+
"href": "grids/grid/column-pinning.md",
191+
"status": ["UPDATED_REACT", "UPDATED_WEBCOMPONENTS"]
191192
},
192193
{
193194
"exclude": ["Angular"],
@@ -425,7 +426,8 @@
425426
{
426427
"exclude": ["Angular"],
427428
"name": "列のピン固定",
428-
"href": "grids/hierarchical-grid/column-pinning.md"
429+
"href": "grids/hierarchical-grid/column-pinning.md",
430+
"status": ["UPDATED_REACT", "UPDATED_WEBCOMPONENTS"]
429431
},
430432
{
431433
"exclude": ["Angular"],
@@ -669,7 +671,7 @@
669671
"exclude": ["Angular"],
670672
"name": "列のピン固定",
671673
"href": "grids/tree-grid/column-pinning.md",
672-
"status": ["NEW_REACT"]
674+
"status": ["UPDATED_REACT", "UPDATED_WEBCOMPONENTS"]
673675
},
674676
{
675677
"exclude": ["Angular"],
@@ -1917,6 +1919,12 @@
19171919
"href": "themes/styles.md",
19181920
"status": ""
19191921
},
1922+
{
1923+
"exclude": ["Angular", "React", "Blazor"],
1924+
"name": "カスタム Tailwind クラス",
1925+
"href": "themes/tailwind.md",
1926+
"status": "NEW"
1927+
},
19201928
{
19211929
"exclude": ["Angular"],
19221930
"name": "非推奨のコンポーネント",

0 commit comments

Comments
 (0)