nativescript-vue · rigor789 · May 4, 2019 · Jan 28, 2019 · Jan 29, 2019 · Jan 30, 2019
diff --git a/build/index.js b/build/index.js
@@ -42,6 +42,7 @@ Metalsmith(cwd)
       'en': 'English',
       'cn': '中文',
       'es': 'Español',
+      'ja': '日本語',
       'ko': '한국어',
       'pt-BR': 'Português do Brasil',
       'ru': 'Русский'
@@ -117,7 +118,7 @@ Metalsmith(cwd)
   })
   .use(locales({
     defaultLocale: 'en',
-    locales: ['en', 'cn', 'es', 'ko', 'pt-BR', 'ru']
+    locales: ['en', 'cn', 'es', 'ja', 'ko', 'pt-BR', 'ru']
   }))
   .use(versions({
     versions: [

diff --git a/content/docs/ja/elements/action-bar/action-bar.md b/content/docs/ja/elements/action-bar/action-bar.md
@@ -0,0 +1,59 @@
+---
+title: ActionBar
+apiRef: https://docs.nativescript.org/api-reference/classes/_ui_action_bar_.actionbar
+contributors: [Spice-Z]
+---
+
+`<ActionBar>`は画面上部にツールバーを提供するためのUIコンポーネントです。
+
+このコンポーネントはAndroidの[app bar](https://developer.android.com/training/appbar/)、iOSの[navigation bar](https://developer.apple.com/design/human-interface-guidelines/ios/bars/navigation-bars/)をNativeScriptが抽象化したものです。
+
+---
+
+#### タイトルを使う
+
+```html
+<ActionBar title="MyApp" />
+```
+
+#### タイトルの見た目をカスタマイズして使う
+
+```html
+<ActionBar>
+  <StackLayout orientation="horizontal">
+    <Image src="res://icon" width="40" height="40" verticalAlignment="center" />
+    <Label text="NativeScript" fontSize="24" verticalAlignment="center" />
+  </StackLayout>
+</ActionBar>
+```
+
+#### Android用にアプリのアイコンを設定する
+
+```html
+<ActionBar title="My App" android.icon="res://icon" android.iconVisibility="always" />
+```
+
+#### 枠線を無くす
+
+デフォルトでは、枠線が`<ActionBar>`の下に描かれています。 枠線に加えて、iOSデバイスでは透過フィルターが`<ActionBar>`に適用されています。
+
+このスタイリングを無くすには、 `flat`プロパティを`true`に設定します。
+
+```html
+<ActionBar title="My App" flat="true" />
+```
+
+## Props
+
+| 名前 | 型 | 説明 |
+|------|------|-------------|
+| `title` | `String` | バーに表示されるタイトルを設定します。
+| `android.icon` | `String` | Androidデバイス上で表示されるアイコンを設定します。
+| `android.iconVisibility` | `String` | Androidデバイス上でのアイコンの表示/非表示を設定します。
+| `flat` | `boolean` | Androidでは枠線を無くし、iOSでは透過フィルターを無くします。. デフォルトの値は`false`です。
+
+## Native component
+
+| Android | iOS |
+|---------|-----|
+| [`android.widget.Toolbar`](https://developer.android.com/reference/android/widget/Toolbar.html)	| [`UINavigationBar`](https://developer.apple.com/documentation/uikit/uinavigationbar)
diff --git a/content/docs/ja/elements/action-bar/action-item.md b/content/docs/ja/elements/action-bar/action-item.md
@@ -0,0 +1,64 @@
+---
+title: ActionItem
+apiRef: https://docs.nativescript.org/api-reference/classes/_ui_action_bar_.actionitem
+contributors: [Spice-Z]
+---
+
+`<ActionItem>`は、`<ActionBar>`コンポーネントにアクションボタンを追加するためのUIコンポーネントです。
+
+---
+
+#### 基本的な使い方
+
+```HTML
+<ActionBar title="My App">
+  <ActionItem @tap="onTapShare"
+    ios.systemIcon="9" ios.position="left"
+    android.systemIcon="ic_menu_share" android.position="actionBar" />
+  <ActionItem @tap="onTapDelete"
+    ios.systemIcon="16" ios.position="right"
+    text="delete" android.position="popup" />
+</ActionBar>
+```
+
+#### 状況に応じてアクションアイテムを表示する
+
+状況に応じて`<ActionItem>`コンポーネントを表示するために`v-show`ディレクティブが使用できます。
+
+```HTML
+<ActionBar title="My App">
+  <ActionItem @tap="onTapEdit"
+    v-show="!isEditing"
+    ios.systemIcon="2" ios.position="right"
+    android.systemIcon="ic_menu_edit" />
+  <ActionItem @tap="onTapSave"
+    v-show="isEditing"
+    ios.systemIcon="3" ios.position="right"
+    android.systemIcon="ic_menu_save" />
+  <ActionItem @tap="onTapCancel"
+    v-show="isEditing"
+    ios.systemIcon="1"
+    android.systemIcon="ic_menu_close_clear_cancel" />
+</ActionBar>
+```
+
+## Props
+
+| 名前 | 型 | 説明 |
+|------|------|-------------|
+| `ios.systemIcon` | `Number` | iOSで、`ActionItem`のアイコンを取得・設定します。値は[`UIBarButtonSystemItem` enumeration](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIBarButtonItem_Class/#//apple_ref/c/tdef/UIBarButtonSystemItem)で指定されている数字でなければいけません。
+| `android.systemIcon` | `String` | Androidで、`ActionItem`のアイコンを取得・設定します。値は [drawable resource](http://androiddrawables.com)で指定されている名前でなければいけません。
+| `ios.position` | `String` | iOSの`ActionBar`内で`ActionItem`の位置を取得・設定します。 <br/>使用できる値は: `left` が `right`です。<br/>デフォルトの値は`left`です。
+| `android.position` | `String` | Androidの`ActionBar`内で`ActionItem`の位置を取得・設定します。<br/>使用できる値:<br/>`actionBar` (アイテムをアクションバー内に設置して下さい)<br/>`popup` (アイテムをオプションメニューの中に設定して下さい、テキストとして描写されます。)<br/>`actionBarIfRoom` (十分なスペースがあるなら、`ActionBar`の中にアイテムを設置してください。そうでなければ、オプションメニューの中に設置してください。)<br/>デフォルトの値は`actionBar`です。
+
+## Events
+
+| 名前 | 説明 |
+|------|-------------|
+| `tap`| `ActionItem`がタップされたときに通達されます。
+
+## Native component
+
+| Android | iOS |
+|---------|-----|
+| [`android.widget.Toolbar`](https://developer.android.com/reference/android/widget/Toolbar.html) | [`UINavigationItem`](https://developer.apple.com/documentation/uikit/uinavigationitem)
diff --git a/content/docs/ja/elements/action-bar/navigation-button.md b/content/docs/ja/elements/action-bar/navigation-button.md
@@ -0,0 +1,36 @@
+---
+title: NavigationButton
+apiRef: https://docs.nativescript.org/api-reference/classes/_ui_action_bar_.navigationbutton
+contributors: [Spice-Z]
+---
+
+`<NavigationButton>`はAndroidのナビゲーションボタンとiOSのバックボタンを提供するUIコンポーネントです。
+
+詳しく [`<ActionItem>`](/en/docs/elements/action-bar/action-item).
+
+---
+
+```html
+<ActionBar title="My App">
+  <NavigationButton text="Go back" android.systemIcon="ic_menu_back" @tap="goBack" />
+</ActionBar>
+```
+
+## Props
+
+| 名前 | 型 | 説明 |
+|------|------|-------------|
+| `text` | `String` | (iOS-only) ボタンのテキストを設定する。
+| `android.systemIcon` | `String` | (Androidのみ) ボタン内で表示されるアイコン。`ic_`というプリフェクスで始まるシステムアイコンを指定できる。使用可能なアイコンのすべてのリストは [the `R.drawable` Android class](https://developer.android.com/reference/android/R.drawable.html)に書いてあります。
+
+## Events
+
+| 名前 | 説明 |
+|------|-------------|
+| `tap`| `<NavigationButton>`がタップされたときに発火します。
+
+## Native component
+
+| Android | iOS |
+|---------|-----|
+| [`android.widget.Toolbar`](https://developer.android.com/reference/android/widget/Toolbar.html) | [`UINavigationItem`](https://developer.apple.com/documentation/uikit/uinavigationitem)
diff --git a/content/docs/ja/elements/components/activity-indicator.md b/content/docs/ja/elements/components/activity-indicator.md
@@ -0,0 +1,33 @@
+---
+title: ActivityIndicator
+apiRef: https://docs.nativescript.org/api-reference/classes/_ui_activity_indicator_.activityindicator
+contributors: [Spice-Z]
+---
+
+`<ActivityIndicator>`はバックグランドで処理中であることをユーザーに示すUIコンポーネントです。
+
+---
+
+```html
+<ActivityIndicator busy="true" @busyChange="onBusyChanged" />
+```
+
+[> screenshots for=ActivityIndicator <]
+
+## Props
+
+| 名前 | 型 | 説明 |
+|------|------|-------------|
+| `busy` | `Boolean` | インディケーターがアクティブかどうかを取得・設定します。値が`true`のときにインディケーターがアクティブになります。
+
+## Events
+
+| 名前 | 説明 |
+|------|-------------|
+| `busyChange`| `busy`プロパティが変更されたときに通達されます。
+
+## Native component
+
+| Android | iOS |
+|---------|-----|
+| [`android.widget.ProgressBar` (indeterminate = true)](https://developer.android.com/reference/android/widget/ProgressBar.html)	| [`UIActivityIndicatorView`](https://developer.apple.com/documentation/uikit/uiactivityindicatorview)
diff --git a/content/docs/ja/elements/components/button.md b/content/docs/ja/elements/components/button.md
@@ -0,0 +1,36 @@
+---
+title: Button
+apiRef: https://docs.nativescript.org/api-reference/classes/_ui_button_.button
+contributors: [Spice-Z]
+---
+
+`<Button>`はユーザーの動きを反映するボタンを表示するためのUIコンポーネントです。
+
+使用できる動きについては[Gestures in the official NativeScript documentation](https://docs.nativescript.org/ui/gestures)を見てください。
+
+---
+
+```html
+<Button text="Button" @tap="onButtonTap" />
+```
+
+[> screenshots for=Button <]
+
+## Props
+
+| 名前 | 型 | 説明 |
+|------|------|-------------|
+| `text` | `String` | ボタンのラベルを取得・設定します。
+| `textWrap` | `Boolean` | ウィジェトがラベルのテキストを覆うかどうかについて取得・設定します。the text of the label. ラベルが長いときに有用です。デフォルトの値は`false`です。
+
+## Events
+
+| 名前 | 説明 |
+|------|-------------|
+| `tap` | ボタンがタップされたときに通達されます。
+
+## Native component
+
+| Android | iOS |
+|---------|-----|
+| [`android.widget.Button`](https://developer.android.com/reference/android/widget/Button.html) | [`UIButton`](https://developer.apple.com/documentation/uikit/uibutton)
diff --git a/content/docs/ja/elements/components/date-picker.md b/content/docs/ja/elements/components/date-picker.md
@@ -0,0 +1,46 @@
+---
+title: DatePicker
+apiRef: https://docs.nativescript.org/api-reference/classes/_ui_date_picker_.datepicker
+contributors: [Spice-Z]
+---
+
+`<DatePicker>`は、予め設定した範囲から日付を選択できるUIコンポーネントです。
+
+> こちらもご覧ください: [TimePicker](/en/docs/elements/components/time-picker).
+
+---
+
+```html
+<DatePicker :date="someDate" />
+```
+
+`<DatePicker>`は`v-model`による双方向バインディングを提供します。
+
+```html
+<DatePicker v-model="selectedDate" />
+```
+
+[> screenshots for=DatePicker <]
+
+## Props
+
+| 名前 | 型 | 説明 |
+|------|------|-------------|
+| `date` | `Date` | 日付を取得・設定する。
+| `minDate` | `Date` | 選択できる最短の日付を取得・設定する。
+| `maxDate` | `Date` | 選択できる最も遅いの日付を取得・設定する。
+| `day` | `Number` | 日を取得・設定する。
+| `month` | `Number` | 月を取得・設定する。
+| `year` | `Number` | 年を取得・設定する。
+
+## Events
+
+| 名前 | 説明 |
+|------|-------------|
+| `dateChange` | 選択されている日付が変更されたときに通達されます。
+
+## Native component
+
+| Android |	iOS |
+|---------|-----|
+| [`android.widget.DatePicker`](https://developer.android.com/reference/android/widget/DatePicker.html) | [`UIDatePicker`](https://developer.apple.com/documentation/uikit/uidatepicker)
diff --git a/content/docs/ja/elements/components/frame.md b/content/docs/ja/elements/components/frame.md
@@ -0,0 +1,69 @@
+---
+title: Frame
+apiRef: https://docs.nativescript.org/api-reference/classes/_ui_frame_.frame
+contributors: [Spice-Z]
+---
+
+`<Frame>`は[`<Page>`](/en/docs/elements/components/page)エレメントを表示するためのUIコンポーネントです。全てのアプリは少なくとも１つの`<Frame>`エレメントが必要で、通常であればルートエレメントとして設定されます。
+
+---
+
+#### 単一のルートフレーム
+
+もしnativescriptのバージョン3.xからアプリを統合してその挙動を保存したいなら、エントリーファイルに以下のスニペットを追加すれば、ルートのFrameを生成してデフォルトページを描写することができます。
+
+```js
+new Vue({
+  render: h => h('Frame', [ h(HomePageComponent) ])
+})
+```
+
+#### 複数のフレーム
+
+複数のフレームを生成する場合、レイアウトでラップすることで可能になります。例えば２つのフレームを隣同士で配置したい場合はこのようになります
+
+```html
+<GridLayout columns="*, *">
+  <Frame col="0"/>
+  <Frame col="1"/>
+</GridLayout>
+```
+
+#### デフォルトページをもったフレーム
+
+```html
+<Frame>
+  <Page>
+    <ActionBar title="Default Page Title" />
+    <GridLayout>
+      <Label text="Default Page Content" />
+    </GridLayout>
+  </Page>
+</Frame>
+```
+
+##### 他のファイルからのコンポーネントをデフォルトページに持つフレーム
+
+```html
+<Frame>
+  <Page>
+    <Home />
+  </Page>
+</Frame>
+```
+
+```js
+import Home from './Home'
+
+export default {
+  components: {
+    Home
+  }
+}
+```
+
+## Native component
+
+| Android | iOS |
+|---------|-----|
+| [`org.nativescript.widgets.ContentLayout`](https://github.com/NativeScript/tns-core-modules-widgets/blob/master/android/widgets/src/main/java/org/nativescript/widgets/ContentLayout.java) | [`UINavigationController`](https://developer.apple.com/documentation/uikit/uinavigationcontroller)