Skip to content

Commit 287195a

Browse files
Yugo Ogurarigor789
Yugo Ogura
authored and
rigor789
committed
Add Japanese translation for NativeScript-Vue docs (nativescript-vue#268)
* add japanese document index * add japanese documents's introduction` * add japanese docs of actionBar * add japanese docs of quick start * update japanese translate * add japanse translate 7-vue-plugins.md * add japanse translate navigaton-button.md * add japanse translate components of butto,activeindicator * fix title * fix japanese * add japanese translate * update translate list-view to japanese * update translate document to japanese * update translate document to japanese * update translate document to japanese * update translate slider.md to japanese * update translate switch.md to japanese * update translate web-view.md to japanese * update: improve japanese documents * add dialogs section to japanese documents * add absolute-layout doc to japanese document. * update japanse documents * update japanse documents * add japanese translation of grid-layout.md * add japanese translation of flexbox-layout.md * add japanese translation of 2-playground-tutorial.md
1 parent bcc7e3e commit 287195a

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+3392
-1
lines changed

‎build/index.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ Metalsmith(cwd)
4242
'en': 'English',
4343
'cn': '中文',
4444
'es': 'Español',
45+
'ja': '日本語',
4546
'ko': '한국어',
4647
'pt-BR': 'Português do Brasil',
4748
'ru': 'Русский'
@@ -117,7 +118,7 @@ Metalsmith(cwd)
117118
})
118119
.use(locales({
119120
defaultLocale: 'en',
120-
locales: ['en', 'cn', 'es', 'ko', 'pt-BR', 'ru']
121+
locales: ['en', 'cn', 'es', 'ja', 'ko', 'pt-BR', 'ru']
121122
}))
122123
.use(versions({
123124
versions: [

‎content/docs/ja/elements/action-bar/action-bar.md

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
---
2+
title: ActionBar
3+
apiRef: https://docs.nativescript.org/api-reference/classes/_ui_action_bar_.actionbar
4+
contributors: [Spice-Z]
5+
---
6+
7+
`<ActionBar>`は画面上部にツールバーを提供するためのUIコンポーネントです。
8+
9+
このコンポーネントは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が抽象化したものです。
10+
11+
---
12+
13+
#### タイトルを使う
14+
15+
```html
16+
<ActionBar title="MyApp" />
17+
```
18+
19+
#### タイトルの見た目をカスタマイズして使う
20+
21+
```html
22+
<ActionBar>
23+
<StackLayout orientation="horizontal">
24+
<Image src="res://icon" width="40" height="40" verticalAlignment="center" />
25+
<Label text="NativeScript" fontSize="24" verticalAlignment="center" />
26+
</StackLayout>
27+
</ActionBar>
28+
```
29+
30+
#### Android用にアプリのアイコンを設定する
31+
32+
```html
33+
<ActionBar title="My App" android.icon="res://icon" android.iconVisibility="always" />
34+
```
35+
36+
#### 枠線を無くす
37+
38+
デフォルトでは、枠線が`<ActionBar>`の下に描かれています。 枠線に加えて、iOSデバイスでは透過フィルターが`<ActionBar>`に適用されています。
39+
40+
このスタイリングを無くすには、 `flat`プロパティを`true`に設定します。
41+
42+
```html
43+
<ActionBar title="My App" flat="true" />
44+
```
45+
46+
## Props
47+
48+
| 名前 | 型 | 説明 |
49+
|------|------|-------------|
50+
| `title` | `String` | バーに表示されるタイトルを設定します。
51+
| `android.icon` | `String` | Androidデバイス上で表示されるアイコンを設定します。
52+
| `android.iconVisibility` | `String` | Androidデバイス上でのアイコンの表示/非表示を設定します。
53+
| `flat` | `boolean` | Androidでは枠線を無くし、iOSでは透過フィルターを無くします。. デフォルトの値は`false`です。
54+
55+
## Native component
56+
57+
| Android | iOS |
58+
|---------|-----|
59+
| [`android.widget.Toolbar`](https://developer.android.com/reference/android/widget/Toolbar.html) | [`UINavigationBar`](https://developer.apple.com/documentation/uikit/uinavigationbar)

‎content/docs/ja/elements/action-bar/action-item.md

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
---
2+
title: ActionItem
3+
apiRef: https://docs.nativescript.org/api-reference/classes/_ui_action_bar_.actionitem
4+
contributors: [Spice-Z]
5+
---
6+
7+
`<ActionItem>`は、`<ActionBar>`コンポーネントにアクションボタンを追加するためのUIコンポーネントです。
8+
9+
---
10+
11+
#### 基本的な使い方
12+
13+
```HTML
14+
<ActionBar title="My App">
15+
<ActionItem @tap="onTapShare"
16+
ios.systemIcon="9" ios.position="left"
17+
android.systemIcon="ic_menu_share" android.position="actionBar" />
18+
<ActionItem @tap="onTapDelete"
19+
ios.systemIcon="16" ios.position="right"
20+
text="delete" android.position="popup" />
21+
</ActionBar>
22+
```
23+
24+
#### 状況に応じてアクションアイテムを表示する
25+
26+
状況に応じて`<ActionItem>`コンポーネントを表示するために`v-show`ディレクティブが使用できます。
27+
28+
```HTML
29+
<ActionBar title="My App">
30+
<ActionItem @tap="onTapEdit"
31+
v-show="!isEditing"
32+
ios.systemIcon="2" ios.position="right"
33+
android.systemIcon="ic_menu_edit" />
34+
<ActionItem @tap="onTapSave"
35+
v-show="isEditing"
36+
ios.systemIcon="3" ios.position="right"
37+
android.systemIcon="ic_menu_save" />
38+
<ActionItem @tap="onTapCancel"
39+
v-show="isEditing"
40+
ios.systemIcon="1"
41+
android.systemIcon="ic_menu_close_clear_cancel" />
42+
</ActionBar>
43+
```
44+
45+
## Props
46+
47+
| 名前 | 型 | 説明 |
48+
|------|------|-------------|
49+
| `ios.systemIcon` | `Number` | iOSで、`ActionItem`のアイコンを取得・設定します。値は[`UIBarButtonSystemItem` enumeration](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIBarButtonItem_Class/#//apple_ref/c/tdef/UIBarButtonSystemItem)で指定されている数字でなければいけません。
50+
| `android.systemIcon` | `String` | Androidで、`ActionItem`のアイコンを取得・設定します。値は [drawable resource](http://androiddrawables.com)で指定されている名前でなければいけません。
51+
| `ios.position` | `String` | iOSの`ActionBar`内で`ActionItem`の位置を取得・設定します。 <br/>使用できる値は: `left` が `right`です。<br/>デフォルトの値は`left`です。
52+
| `android.position` | `String` | Androidの`ActionBar`内で`ActionItem`の位置を取得・設定します。<br/>使用できる値:<br/>`actionBar` (アイテムをアクションバー内に設置して下さい)<br/>`popup` (アイテムをオプションメニューの中に設定して下さい、テキストとして描写されます。)<br/>`actionBarIfRoom` (十分なスペースがあるなら、`ActionBar`の中にアイテムを設置してください。そうでなければ、オプションメニューの中に設置してください。)<br/>デフォルトの値は`actionBar`です。
53+
54+
## Events
55+
56+
| 名前 | 説明 |
57+
|------|-------------|
58+
| `tap`| `ActionItem`がタップされたときに通達されます。
59+
60+
## Native component
61+
62+
| Android | iOS |
63+
|---------|-----|
64+
| [`android.widget.Toolbar`](https://developer.android.com/reference/android/widget/Toolbar.html) | [`UINavigationItem`](https://developer.apple.com/documentation/uikit/uinavigationitem)

‎content/docs/ja/elements/action-bar/navigation-button.md

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
---
2+
title: NavigationButton
3+
apiRef: https://docs.nativescript.org/api-reference/classes/_ui_action_bar_.navigationbutton
4+
contributors: [Spice-Z]
5+
---
6+
7+
`<NavigationButton>`はAndroidのナビゲーションボタンとiOSのバックボタンを提供するUIコンポーネントです。
8+
9+
詳しく [`<ActionItem>`](/en/docs/elements/action-bar/action-item).
10+
11+
---
12+
13+
```html
14+
<ActionBar title="My App">
15+
<NavigationButton text="Go back" android.systemIcon="ic_menu_back" @tap="goBack" />
16+
</ActionBar>
17+
```
18+
19+
## Props
20+
21+
| 名前 | 型 | 説明 |
22+
|------|------|-------------|
23+
| `text` | `String` | (iOS-only) ボタンのテキストを設定する。
24+
| `android.systemIcon` | `String` | (Androidのみ) ボタン内で表示されるアイコン。`ic_`というプリフェクスで始まるシステムアイコンを指定できる。使用可能なアイコンのすべてのリストは [the `R.drawable` Android class](https://developer.android.com/reference/android/R.drawable.html)に書いてあります。
25+
26+
## Events
27+
28+
| 名前 | 説明 |
29+
|------|-------------|
30+
| `tap`| `<NavigationButton>`がタップされたときに発火します。
31+
32+
## Native component
33+
34+
| Android | iOS |
35+
|---------|-----|
36+
| [`android.widget.Toolbar`](https://developer.android.com/reference/android/widget/Toolbar.html) | [`UINavigationItem`](https://developer.apple.com/documentation/uikit/uinavigationitem)

‎content/docs/ja/elements/components/activity-indicator.md

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
---
2+
title: ActivityIndicator
3+
apiRef: https://docs.nativescript.org/api-reference/classes/_ui_activity_indicator_.activityindicator
4+
contributors: [Spice-Z]
5+
---
6+
7+
`<ActivityIndicator>`はバックグランドで処理中であることをユーザーに示すUIコンポーネントです。
8+
9+
---
10+
11+
```html
12+
<ActivityIndicator busy="true" @busyChange="onBusyChanged" />
13+
```
14+
15+
[> screenshots for=ActivityIndicator <]
16+
17+
## Props
18+
19+
| 名前 | 型 | 説明 |
20+
|------|------|-------------|
21+
| `busy` | `Boolean` | インディケーターがアクティブかどうかを取得・設定します。値が`true`のときにインディケーターがアクティブになります。
22+
23+
## Events
24+
25+
| 名前 | 説明 |
26+
|------|-------------|
27+
| `busyChange`| `busy`プロパティが変更されたときに通達されます。
28+
29+
## Native component
30+
31+
| Android | iOS |
32+
|---------|-----|
33+
| [`android.widget.ProgressBar` (indeterminate = true)](https://developer.android.com/reference/android/widget/ProgressBar.html) | [`UIActivityIndicatorView`](https://developer.apple.com/documentation/uikit/uiactivityindicatorview)

‎content/docs/ja/elements/components/button.md

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
---
2+
title: Button
3+
apiRef: https://docs.nativescript.org/api-reference/classes/_ui_button_.button
4+
contributors: [Spice-Z]
5+
---
6+
7+
`<Button>`はユーザーの動きを反映するボタンを表示するためのUIコンポーネントです。
8+
9+
使用できる動きについては[Gestures in the official NativeScript documentation](https://docs.nativescript.org/ui/gestures)を見てください。
10+
11+
---
12+
13+
```html
14+
<Button text="Button" @tap="onButtonTap" />
15+
```
16+
17+
[> screenshots for=Button <]
18+
19+
## Props
20+
21+
| 名前 | 型 | 説明 |
22+
|------|------|-------------|
23+
| `text` | `String` | ボタンのラベルを取得・設定します。
24+
| `textWrap` | `Boolean` | ウィジェトがラベルのテキストを覆うかどうかについて取得・設定します。the text of the label. ラベルが長いときに有用です。デフォルトの値は`false`です。
25+
26+
## Events
27+
28+
| 名前 | 説明 |
29+
|------|-------------|
30+
| `tap` | ボタンがタップされたときに通達されます。
31+
32+
## Native component
33+
34+
| Android | iOS |
35+
|---------|-----|
36+
| [`android.widget.Button`](https://developer.android.com/reference/android/widget/Button.html) | [`UIButton`](https://developer.apple.com/documentation/uikit/uibutton)

‎content/docs/ja/elements/components/date-picker.md

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
---
2+
title: DatePicker
3+
apiRef: https://docs.nativescript.org/api-reference/classes/_ui_date_picker_.datepicker
4+
contributors: [Spice-Z]
5+
---
6+
7+
`<DatePicker>`は、予め設定した範囲から日付を選択できるUIコンポーネントです。
8+
9+
> こちらもご覧ください: [TimePicker](/en/docs/elements/components/time-picker).
10+
11+
---
12+
13+
```html
14+
<DatePicker :date="someDate" />
15+
```
16+
17+
`<DatePicker>`は`v-model`による双方向バインディングを提供します。
18+
19+
```html
20+
<DatePicker v-model="selectedDate" />
21+
```
22+
23+
[> screenshots for=DatePicker <]
24+
25+
## Props
26+
27+
| 名前 | 型 | 説明 |
28+
|------|------|-------------|
29+
| `date` | `Date` | 日付を取得・設定する。
30+
| `minDate` | `Date` | 選択できる最短の日付を取得・設定する。
31+
| `maxDate` | `Date` | 選択できる最も遅いの日付を取得・設定する。
32+
| `day` | `Number` | 日を取得・設定する。
33+
| `month` | `Number` | 月を取得・設定する。
34+
| `year` | `Number` | 年を取得・設定する。
35+
36+
## Events
37+
38+
| 名前 | 説明 |
39+
|------|-------------|
40+
| `dateChange` | 選択されている日付が変更されたときに通達されます。
41+
42+
## Native component
43+
44+
| Android | iOS |
45+
|---------|-----|
46+
| [`android.widget.DatePicker`](https://developer.android.com/reference/android/widget/DatePicker.html) | [`UIDatePicker`](https://developer.apple.com/documentation/uikit/uidatepicker)

‎content/docs/ja/elements/components/frame.md

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
---
2+
title: Frame
3+
apiRef: https://docs.nativescript.org/api-reference/classes/_ui_frame_.frame
4+
contributors: [Spice-Z]
5+
---
6+
7+
`<Frame>`は[`<Page>`](/en/docs/elements/components/page)エレメントを表示するためのUIコンポーネントです。全てのアプリは少なくとも１つの`<Frame>`エレメントが必要で、通常であればルートエレメントとして設定されます。
8+
9+
---
10+
11+
#### 単一のルートフレーム
12+
13+
もしnativescriptのバージョン3.xからアプリを統合してその挙動を保存したいなら、エントリーファイルに以下のスニペットを追加すれば、ルートのFrameを生成してデフォルトページを描写することができます。
14+
15+
```js
16+
new Vue({
17+
render: h => h('Frame', [ h(HomePageComponent) ])
18+
})
19+
```
20+
21+
#### 複数のフレーム
22+
23+
複数のフレームを生成する場合、レイアウトでラップすることで可能になります。例えば２つのフレームを隣同士で配置したい場合はこのようになります
24+
25+
```html
26+
<GridLayout columns="*, *">
27+
<Frame col="0"/>
28+
<Frame col="1"/>
29+
</GridLayout>
30+
```
31+
32+
#### デフォルトページをもったフレーム
33+
34+
```html
35+
<Frame>
36+
<Page>
37+
<ActionBar title="Default Page Title" />
38+
<GridLayout>
39+
<Label text="Default Page Content" />
40+
</GridLayout>
41+
</Page>
42+
</Frame>
43+
```
44+
45+
##### 他のファイルからのコンポーネントをデフォルトページに持つフレーム
46+
47+
```html
48+
<Frame>
49+
<Page>
50+
<Home />
51+
</Page>
52+
</Frame>
53+
```
54+
55+
```js
56+
import Home from './Home'
57+
58+
export default {
59+
components: {
60+
Home
61+
}
62+
}
63+
```
64+
65+
## Native component
66+
67+
| Android | iOS |
68+
|---------|-----|
69+
| [`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)

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy