Adding changes from #2102, #2095, #2086, #2085, #2080

jp/components/calendar.md

@@ -144,10 +144,10 @@ public ngOnInit() {
 </div>
 
 ### イベント
-Let's explore the events emitted by the calendar:
-- [`onSelection`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#onselection) - emitted when selecting date(s) in the calendar.
-- [`viewDateChanged`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#viewdatechanged) - emitted every time when the presented month/year is changed - for example after navigating to the `next` or `previous` month.
-- [`activeViewChanged`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#activeviewvhanged) - emitted after the active view is changed - for example after the user has clicked on the `month` or `year` section in the header.
+カレンダーが発するイベントを見てみましょう：
+- [`onSelection`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#onselection) - カレンダーで日付を選択すると発生します。
+- [`viewDateChanged`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#viewdatechanged) - 提示された月/年が変更されるたびに発生します。たとえば、`next` または `previous` の月に移動した後。
+- [`activeViewChanged`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#activeviewvhanged) - アクティブなビューが変更された後に発生します。たとえば、ユーザーがヘッダーの `month` または `year` セクションをクリックした後。
 
 ```html
 <!-- app.component.html -->
@@ -157,7 +157,7 @@ Let's explore the events emitted by the calendar:
     (activeViewChanged)="activeViewChanged($event)">
 </igx-calendar>
 ```
-The [`onSelection`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#onselection) event is suitable to build input validation logic. Use the code from below to alert the user if selection exceeds 5 days, and then reset the selection:
+[`onSelection`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#onselection) イベントは入力検証ロジックを構築するのに適しています。以下のコードを使用して、選択が 5 日を超えた場合にユーザーに警告し、選択をリセットします。
 
 ```typescript
 // app.component.ts
@@ -178,7 +178,7 @@ public onSelection(dates: Date[]) {
     }
 ```
 
-Use the demo below to play around (change selection, navigate through months and years) and see the events logged real time:
+以下のデモを試して (選択を変更し、月と年を移動し)、リアルタイムで記録されたイベントを確認してください。
 <div class="sample-container loading" style="height: 420px">
     <iframe id="calendar-sample-3-iframe" data-src='{environment:demosBaseUrl}/scheduling/calendar-sample-3' width="100%" height="100%" seamless frameBorder="0" class="lazyload"></iframe>
 </div>

jp/components/navbar.md

@@ -105,7 +105,7 @@ export class AppModule {}
 
 #### カスタム アクション アイコンの追加
 
-アプリのナビゲーションでナビゲーション バーの左端にあるデフォルト アイコンではなくカスタム アクション アイコンを使用したい場合、`igx-action-icon` ディレクティブを使用してデフォルトの操作アイコンをコンテンツで置き換えます。`igx-action-icon` ディレクティブを使用してデフォルトの操作アイコンをコンテンツで置き換えます。これには Font Awesome ホーム アイコンを使用します。
+アプリのナビゲーションでナビゲーション バーの左端にあるデフォルト アイコンではなくカスタム アクション アイコンを使用したい場合、`igx-navbar-action` ディレクティブを使用してデフォルトの操作アイコンをコンテンツで置き換えます。`igx-navbar-action` ディレクティブを使用してデフォルトの操作アイコンをコンテンツで置き換えます。これには Font Awesome ホーム アイコンを使用します。
 
 ```css
 /* navbar.component.css */
@@ -127,14 +127,14 @@ export class AppModule {}
     <igx-icon>favorite</igx-icon>
     <igx-icon>more_vert</igx-icon>
 
-    <igx-action-icon>
+    <igx-navbar-action>
         <igx-icon class="customIcon" fontSet="fa" name="fa-home"></igx-icon>
-    </igx-action-icon>
+    </igx-navbar-action>
 </igx-navbar>
 ```
 
 > [!NOTE]
-> [`igx-action-icon`]({environment:angularApiUrl}/classes/igxactionicondirective.html) の場合、デフォルト [`actionButtonIcon`]({environment:angularApiUrl}/classes/igxnavbarcomponent.html#actionbuttonicon) が使用されます。 
+> [`igx-navbar-action`]({environment:angularApiUrl}/classes/igxnavbaractiondirective.html) または [`igxNavbarAction`]({environment:angularApiUrl}/classes/igxnavbaractiondirective.html) の場合、デフォルト [`actionButtonIcon`]({environment:angularApiUrl}/classes/igxnavbarcomponent.html#actionbuttonicon) が使用されません。 
 
 以下はカスタム アクション アイコンをした場合の navbar の外観です。
 
@@ -189,6 +189,42 @@ export class NavbarSample3Component {
 </div>
 <div class="divider--half"></div>
 
+#### カスタムのタイトルを追加する
+
+Navbar のタイトルにカスタム コンテンツを提供する場合は、 `igx-navbar-title` または `igxNavbarTitle` ディレクティブを使用ます。これらは、`title` 入力プロパティによって提供されるデフォルトの navbar のタイトルを置き換えます。以下のサンプルには、画像付きのリンクを含むカスタム タイトルがあります。
+
+```html
+<!--navbar.component.html-->
+
+<div class="sample-column">
+    <igx-navbar actionButtonIcon="menu" [isActionButtonVisible]="true">
+        <div igxNavbarTitle>
+            <a href="https://www.infragistics.com/products/ignite-ui-angular" target="_blank">
+                <img src="https://static.infragistics.com/marketing/Website/products/ignite-ui-landing/ignite-ui-logo.svg"
+                     width="120px" height="50px" alt="" style="margin-top: 7px;">
+            </a>
+        </div>
+
+        <igx-icon>search</igx-icon>
+        <igx-icon>favorite</igx-icon>
+        <igx-icon>more_vert</igx-icon>
+    </igx-navbar>
+</div>
+```
+
+> [!NOTE]
+> [`igx-navbar-title`]({environment:angularApiUrl}/classes/igxnavbartitledirective.html) または [`igxNavbarTitle`]({environment:angularApiUrl}/classes/igxnavbartitledirective.html) の場合、デフォルト [`title`]({environment:angularApiUrl}/classes/igxnavbarcomponent.html#title) が使用されません。 
+
+<div class="sample-container loading" style="height: 300px">
+    <iframe id="navbar-custom-title-iframe" frameborder="0" seamless width="100%" height="100%" 
+    data-src='{environment:demosBaseUrl}/menus/navbar-custom-title' class="lazyload"></iframe>
+</div>
+<div>
+    <button data-localize="stackblitz" disabled class="stackblitz-btn" data-iframe-id="navbar-custom-title-iframe" data-demos-base-url="{environment:demosBaseUrl}">Stackblitz で表示</button>
+<button data-localize="codesandbox" disabled class="codesandbox-btn" data-iframe-id="navbar-custom-title-iframe" data-demos-base-url="{environment:demosBaseUrl}">codesandbox で表示</button>
+</div>
+<div class="divider--half"></div>
+
 ### スタイル設定
 
 ページネータのスタイル設定を始めるには、すべてのテーマ関数とコンポーネントミックスインが存在する `index` ファイルをインポートする必要があります。
@@ -313,7 +349,8 @@ $cutom-navbar-theme: igx-navbar-theme(
 <div class="divider--half"></div>
 
 * [IgxNavbarComponent]({environment:angularApiUrl}/classes/igxnavbarcomponent.html)
-* [IgxActionIconDirective]({environment:angularApiUrl}/classes/igxactionicondirective.html)
+* [IgxNavbarActionDirective]({environment:angularApiUrl}/classes/igxnavbaractiondirective.html)
+* [IgxNavbarTitleDirective]({environment:angularApiUrl}/classes/igxnavbartitledirective.html)
 * [IgxNavbarComponent スタイル]({environment:sassApiUrl}/index.html#function-igx-navbar-theme)
 
 その他のコンポーネントおよびディレクティブ (またはそのいずれか) で使用した API: