Skip to content

Commit

Permalink
Merge pull request #630 from IgniteUI/randriova-localization-apr
Browse files Browse the repository at this point in the history
[Localization] Adding the latest topic changes - JA.
  • Loading branch information
Stefan Ivanov authored Apr 15, 2022
2 parents 95fcc2e + ab27db0 commit 876533b
Show file tree
Hide file tree
Showing 5 changed files with 27 additions and 20 deletions.
12 changes: 11 additions & 1 deletion jp/components/badge.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,22 @@ Badge コンポーネント シンボルを使用して他のインターフェ

<img class="responsive-img" src="../images/badge_demo.png" srcset="../images/[email protected] 2x" />

## タイプ
## コンテンツ

Badge は、数字やアイコンなど、さまざまなタイプのコンテンツを使用できます。

<img class="responsive-img" src="../images/badge_type.png" srcset="../images/[email protected] 2x" />

## タイプ

Badge は、以下のプリセット カラーの組み合わせのいずれかで使用することで、注意を引くことができます: **default**、info、success、warn および error です。

<img class="responsive-img" src="../images/badge_default.png" srcset="../images/[email protected] 2x" />
<img class="responsive-img" src="../images/badge_info.png" srcset="../images/[email protected] 2x" />
<img class="responsive-img" src="../images/badge_success.png" srcset="../images/[email protected] 2x" />
<img class="responsive-img" src="../images/badge_warn.png" srcset="../images/[email protected] 2x" />
<img class="responsive-img" src="../images/badge_error.png" srcset="../images/[email protected] 2x" />

## スタイル設定

Badge は、さまざまなオプションを通じて背景色や境界線の色を柔軟にスタイル設定できます。適用可能な場合はアイコンの色、テキストのスタイル、基本のインターフェイス要素に影を落とすことも設定できます。
Expand Down
11 changes: 6 additions & 5 deletions jp/components/dropdown.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,13 @@ Dropdown コンポーネントでは、ユーザーがスクロール可能な

<img class="responsive-img" src="../images/dropdown_demo.png" srcset="../images/[email protected] 2x" />

## タイプ
## 表示密度

Dropdown は、デスクトップとモバイルで使用時に適切なサイズで提供されます
Dropdown には 3 つの表示密度の選択肢があります: comfortable、cosy および compact です

<img class="responsive-img" src="../images/dropdown_desktop.png" srcset="../images/[email protected] 2x" />
<img class="responsive-img" src="../images/dropdown_mobile.png" srcset="../images/[email protected] 2x" />
<img class="responsive-img" src="../images/dropdown_comfortable.png" srcset="../images/[email protected] 2x" />
<img class="responsive-img" src="../images/dropdown_cosy.png" srcset="../images/[email protected] 2x" />
<img class="responsive-img" src="../images/dropdown_compact.png" srcset="../images/[email protected] 2x" />

## 項目

Expand All @@ -41,7 +42,7 @@ Dropdown 項目は、5 つの状態をサポートします: Disabled、**Idle**

Dropdown Item は柔軟なアイコンとラベルのテンプレートをサポートします。Sketch でアイコンを表示するには、オーバーライドを Icon/Medium に設定し、スマート レイアウト ルールが項目レイアウトを自動的に調整します。Adobe XD では、アイコン レイヤーを表示し、Stack に配置してレイアウトを自動的に調整することで同じことが可能ですが、コンテンツにアイコンのある項目が必要ない場合は、アイコン レイヤーを削除します。

<img class="responsive-img" src="../images/dropdown_item_idle.png" srcset="../images/dropdown_item_idle@2x.png 2x" />
<img class="responsive-img" src="../images/dropdown_item_label.png" srcset="../images/dropdown_item_label@2x.png 2x" />
<img class="responsive-img" src="../images/dropdown_item_icon.png" srcset="../images/[email protected] 2x" />

## スタイル設定
Expand Down
16 changes: 6 additions & 10 deletions jp/components/navbar.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,23 +20,19 @@ Navbar には、2 つの異なるタイプのバリエーションがありま
<img class="responsive-img" src="../images/navbar_elevated.png" srcset="../images/[email protected] 2x" />
<img class="responsive-img" src="../images/navbar_outlined.png" srcset="../images/[email protected] 2x" />

どちらも 2 つのアクション バリアントがあります: Icon Actions および Icon Button Actions です。

<img class="responsive-img" src="../images/navbar_icon.png" srcset="../images/[email protected] 2x" />
<img class="responsive-img" src="../images/navbar_iconbutton.png" srcset="../images/[email protected] 2x" />

## コンテンツのレイアウト

Navbar のコンテンツは、Left Action と Title で構成される左側の領域と、さまざまな操作用の 4 つの隣接するアイコンがある右側の領域に分割されます。Navbar レイアウトを設定するには、Left Action または右側のアイコンを ~No Symbol に設定し、スマート レイアウトにより、左側のレイアウトが自動的に調整されます。Adobe XD では、不要なコンポーネントを削除するだけで同じことができ、レイアウトは Stack から自動的に調整されます。さらに、Sketch とは異なり、Libraries パネルから追加のコンポーネントを挿入できます。たとえば、右端に Avatar を表示できます。
Navbar のコンテンツは、Left Action と Title で構成される左側の領域と、シンプルなイベントをトリガーする用の 最大 4 つの隣接するアイコン (またはアイコン ボタン) がある右側の領域に分割されます。Navbar のアクションのいずれかを Sketch で ~No Symbol に設定すると、スマート レイアウトにより、左側のレイアウトが自動的に調整されます。Adobe XD では、不要なコンポーネントを削除するだけで同じことができ、レイアウトは Stack から自動的に調整されます。さらに、Sketch とは異なり、Libraries パネルから追加のコンポーネントを挿入できます。たとえば、右端に Avatar を表示できます。

<img class="responsive-img" src="../images/navbar_left&right.png" srcset="../images/navbar_left&[email protected] 2x" />
<img class="responsive-img" src="../images/navbar_noright.png" srcset="../images/[email protected] 2x" />
<img class="responsive-img" src="../images/navbar_noleft.png" srcset="../images/[email protected] 2x" />

## アクション アイコン

Navbar は、さまざまな単純なイベントをトリガーできる右側の最大 4 つの操作アイコンをサポートできます。

<img class="responsive-img" src="../images/navbar_icon4.png" srcset="../images/[email protected] 2x" />
<img class="responsive-img" src="../images/navbar_icon3.png" srcset="../images/[email protected] 2x" />
<img class="responsive-img" src="../images/navbar_icon2.png" srcset="../images/[email protected] 2x" />
<img class="responsive-img" src="../images/navbar_icon1.png" srcset="../images/[email protected] 2x" />

## スタイル設定

Navbar には、タイトル、アイコン、境界線、および背景色に使用できるオプションを通じて、基本的なスタイルの柔軟性があります。
Expand Down
6 changes: 3 additions & 3 deletions jp/components/time-picker.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ _language: ja

## Time Picker (タイム ピッカー)

Time Picker コンポーネントを使用して、日付の時間部分 (時間と分) を視覚的に表し、フォームに表示することおよびドロップダウンまたはダイアログから選択することのための適切な手段を提供します。Time Picker は、[Ignite UI for Angular Time Picker コンポーネント](https://jp.infragistics.com/products/ignite-ui-angular/angular/components/time_picker.html)と視覚的に同じものです。
Time Picker コンポーネントを使用して、日付の時間部分 (時、分、秒) を視覚的に表し、フォームに表示することおよびドロップダウンまたはダイアログから選択することのための適切な手段を提供します。Time Picker は、[Ignite UI for Angular Time Picker コンポーネント](https://jp.infragistics.com/products/ignite-ui-angular/angular/components/time_picker.html)と視覚的に同じものです。

## Time Picker のデモ

Expand All @@ -31,7 +31,7 @@ Time Picker は、水平および垂直方向の Dialog レイアウトおよび

## コンテンツ

Time Picker は、2 種類のコンテンツ モードで 12 時間と 24 時間をサポートします。時間と分の部分の他に 12 時間コンテンツ モードで AM と PM を選択できます。
Time Picker は、2 種類のコンテンツ モードで 12 時間と 24 時間をサポートします。12 時間コンテンツ モードでは、 時、分、秒の他に、AM と PM を選択できます。

<img class="responsive-img" src="../images/timepicker_dropdown.png" srcset="../images/[email protected] 2x" />
<img class="responsive-img" src="../images/timepicker_24mode.png" srcset="../images/[email protected] 2x" />
Expand All @@ -44,7 +44,7 @@ Time Picker の 2 つのボタンは、時間を元の時間に戻す選択の

## スタイル設定

Time Picker は、さまざまなオプションを通じてヘッダー背景、タイトル色、選択した時間、分、AM/PM のテキストの色を柔軟にスタイル設定できます。Cancel と OK のボタンは、[Flat Buttons](button.md) で状況に応じたスタイル設定が可能です。
Time Picker は、ヘッダー背景、タイトル色、選択した時・分・秒、AM/PM のテキストの色など、スタイル設定に柔軟性があります。Cancel と OK のボタンは、[Flat Buttons](button.md) で状況に応じたスタイル設定が可能です。

<img class="responsive-img" src="../images/timepicker_styling.png" srcset="../images/[email protected] 2x" />

Expand Down
2 changes: 1 addition & 1 deletion jp/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ Indigo.Design は、ビジュアル デザイン、UX プロトタイプ、コ

Indigo.Design はデザインから開発までのワークフローをサポートする 3 つの機能を提供します。

<img class="responsive-img" src="../images/indigo_design_how_it_works.png" srcset="../images/[email protected] 2x" />
<img class="responsive-img" src="images/indigo_design_how_it_works.png" srcset="images/[email protected] 2x" />

1. Sketch または Adobe XD で `Indigo.Design システム` を使用してデザインを作成
2. プロトタイプを共有し、`cloud.indigo.design` でユーザーとテストしてコラボレーション
Expand Down

0 comments on commit 876533b

Please sign in to comment.