-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #630 from IgniteUI/randriova-localization-apr
[Localization] Adding the latest topic changes - JA.
- Loading branch information
Showing
5 changed files
with
27 additions
and
20 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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 は、さまざまなオプションを通じて背景色や境界線の色を柔軟にスタイル設定できます。適用可能な場合はアイコンの色、テキストのスタイル、基本のインターフェイス要素に影を落とすことも設定できます。 | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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" /> | ||
|
||
## 項目 | ||
|
||
|
@@ -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" /> | ||
|
||
## スタイル設定 | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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 には、タイトル、アイコン、境界線、および背景色に使用できるオプションを通じて、基本的なスタイルの柔軟性があります。 | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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 のデモ | ||
|
||
|
@@ -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" /> | ||
|
@@ -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" /> | ||
|
||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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` でユーザーとテストしてコラボレーション | ||
|