Add Chinese Documents (nativescript-vue#199)

teha-at · Oct 6, 2018 · 5c16807 · 5c16807
1 parent 9815dcc
commit 5c16807
Show file tree

Hide file tree

Showing 49 changed files with 3,631 additions and 1 deletion.
diff --git a/build/index.js b/build/index.js
@@ -40,6 +40,7 @@ Metalsmith(cwd)
     moment,
     localeMap: {
       'en': 'English',
+      'cn': '中文',
       'es': 'Español',
       'ko': '한국어',
       'pt-BR': 'Português do Brasil',
@@ -116,7 +117,7 @@ Metalsmith(cwd)
   })
   .use(locales({
     defaultLocale: 'en',
-    locales: ['en', 'es', 'ko', 'pt-BR', 'ru']
+    locales: ['en', 'cn', 'es', 'ko', 'pt-BR', 'ru']
   }))
   .use(versions({
     versions: [

diff --git a/content/docs/cn/elements/action-bar/action-bar.md b/content/docs/cn/elements/action-bar/action-bar.md
@@ -0,0 +1,48 @@
+---
+title: ActionBar
+apiRef: https://docs.nativescript.org/api-reference/classes/_ui_action_bar_.actionbar
+contributors: [nuochong]
+---
+
+ActionBar组件是Android ActionBar和iOS NavigationBar的NativeScript抽象。
+
+---
+
+#### 使用标题
+
+```html
+<ActionBar title="MyApp" />
+```
+
+#### 使用自定义标题视图
+
+```html
+<ActionBar>
+  <StackLayout orientation="horizontal">
+    <Image src="res://icon" width="40" height="40" verticalAlignment="center" />
+    <Label text="ativeScript" fontSize="24" verticalAlignment="center" />
+  </StackLayout>
+</ActionBar>
+```
+
+#### 为Android设置应用程序图标
+
+```html
+<ActionBar title="My App" android.icon="res://icon" android.iconVisibility="always" />
+```
+
+#### 删除边框
+在iOS和Android上，在ActionBar的底部绘制了一个小边框。此外，iOS上ActionBar的背景颜色与您指定的略有不同，因为iOS应用了过滤器。要删除此过滤器和边框，请设置 `flat` 为 `true`。
+
+```html
+<ActionBar title="My App" flat="true" />
+```
+
+## 道具
+
+| 名称 | 类型 | 描述 |
+|------|------|-------------|
+| `title` | `String` | 要在ActionBar中显示的标题。
+| `android.icon` | `String` | Android上显示的图标。
+| `android.iconVisibility` | `String` | 设置图标可见时的设置。
+| `flat` | `boolean` | 删除边框和iOS颜色过滤器。默认 `false`。
diff --git a/content/docs/cn/elements/action-bar/action-item.md b/content/docs/cn/elements/action-bar/action-item.md
@@ -0,0 +1,56 @@
+---
+title: ActionItem
+apiRef: https://docs.nativescript.org/api-reference/classes/_ui_action_bar_.actionitem
+contributors: [nuochong]
+---
+
+ActionItem组件用于向ActionBar添加其他操作按钮。
+
+---
+
+```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>
+```
+
+#### 有条件地显示行动项目
+
+ActionItems可以根据条件使用 `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>
+```
+
+## 道具
+
+| 名称 | 类型 | 描述 |
+|------|------|-------------|
+| `ios.systemIcon` | `String` | 设置iOS的图标。
+| `android.systemIcon` | `String` | 设置Android的图标。
+| `ios.position` | `String` | 设置iOS的位置。<br>可能的值：<br>- `left` （默认值）：将项目放在ActionBar的左侧。<br>- `right`：将项目放在ActionBar的右侧。
+| `android.position` | `String` | 设置Android的位置。<br>可能的值：<br>- `actionBar` （默认值）：将项目放在ActionBar中。<br>- `popup`：将项目放在选项菜单中。项目将呈现为文本。<br>- `actionBarIfRoom`：如果有足够的空间，将项目放在ActionBar中。否则，将其放在选项菜单中。
+
+## 活动
+
+| 名称 | 描述 |
+|------|-------------|
+| `tap`| 已触发ActionItem时发出。
diff --git a/content/docs/cn/elements/action-bar/navigation-button.md b/content/docs/cn/elements/action-bar/navigation-button.md
@@ -0,0 +1,30 @@
+---
+title: NavigationButton
+apiRef: https://docs.nativescript.org/api-reference/classes/_ui_action_bar_.navigationbutton
+contributors: [nuochong]
+---
+
+NavigationButton组件是Android导航按钮和iOS后退按钮的NativeScript抽象。
+
+---
+
+```html
+<ActionBar title="My App">
+  <NavigationButton text="Go back" android.systemIcon="ic_menu_back" @tap="goBack" />
+</ActionBar>
+```
+
+## 道具
+
+| 名称 | 类型 | 描述 |
+|------|------|-------------|
+| `text` | `String` | 设置要在iOS上显示的文本。
+| `android.systemIcon` | `String` | Android上显示的图标。
+
+*Android的图标列表可以在 <https://developer.android.com/reference/android/R.drawable.html>找到，图标是以 `ic_` 前缀开头的图标。*
+
+## 活动
+
+| 名称 | 描述 |
+|------|-------------|
+| `tap`| 轻触NavigationButton时发出。
diff --git a/content/docs/cn/elements/components/activity-indicator.md b/content/docs/cn/elements/components/activity-indicator.md
@@ -0,0 +1,33 @@
+---
+title: ActivityIndicator
+apiRef: https://docs.nativescript.org/api-reference/classes/_ui_activity_indicator_.activityindicator
+contributors: [nuochong]
+---
+
+`<ActivityIndicator>` 是一个UI组件，显示进度指示器向用户发出在后台运行的操作的信号。
+
+---
+
+```html
+<ActivityIndicator busy="true" @busyChange="onBusyChanged" />
+```
+
+[> screenshots for=ActivityIndicator <]
+
+## 道具
+
+| 名称 | 类型 | 描述 |
+|------|------|-------------|
+| `busy` | `Boolean` | 获取或设置指标是否处于活动状态。何时 `true`，指标处于活动状态。
+
+## 活动
+
+| 名称 | 描述 |
+|------|-------------|
+| `busyChange`| 当发射的 `busy` 属性更改。
+
+## 原生组件
+
+| 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/cn/elements/components/button.md b/content/docs/cn/elements/components/button.md
@@ -0,0 +1,36 @@
+---
+title: Button
+apiRef: https://docs.nativescript.org/api-reference/classes/_ui_button_.button
+contributors: [nuochong]
+---
+
+`<Button>` 是一个UI组件，显示一个对用户手势作出反应的按钮。
+
+有关可用手势的更多信息，请参阅 [Gestures in the official NativeScript documentation](https://docs.nativescript.org/ui/gestures)。
+
+---
+
+```html
+<Button text="Button" @tap="onButtonTap" />
+```
+
+[> screenshots for=Button <]
+
+## 道具
+
+| 名称 | 类型 | 描述 |
+|------|------|-------------|
+| `text` | `String` | 设置按钮的标签。
+| `textWrap` | `Boolean` | 获取或设置窗口小部件是否包装标签的文本。适用于较长的标签。默认值是 `false`。
+
+## 活动
+
+| 名称 | 描述 |
+|------|-------------|
+| `tap` | 点击按钮时发出。
+
+## 原生组件
+
+| 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/cn/elements/components/date-picker.md b/content/docs/cn/elements/components/date-picker.md
@@ -0,0 +1,46 @@
+---
+title: DatePicker
+apiRef: https://docs.nativescript.org/api-reference/classes/_ui_date_picker_.datepicker
+contributors: [nuochong]
+---
+
+`<DatePicker>` 是一个UI组件，允许用户从预先配置的范围中选择日期。
+
+> 另请参见： [TimePicker](/en/docs/elements/components/time-picker).
+
+---
+
+```html
+<DatePicker :date="someDate" />
+```
+
+`<DatePicker>` 使用提供双向数据绑定 `v-model`。
+
+```html
+<DatePicker v-model="selectedDate" />
+```
+
+[> screenshots for=DatePicker <]
+
+## 道具
+
+| 名称 | 类型 | 描述 |
+|------|------|-------------|
+| `date` | `Date` | 获取或设置完整日期。
+| `minDate` | `Date` | 获取或设置要选择的最早可能日期。
+| `maxDate` | `Date` | 获取或设置要选择的最新可能日期。
+| `day` | `Number` | 获取或设置日期。
+| `month` | `Number` | 获取或设置月份。
+| `year` | `Number` | 获取或设置年份。
+
+## 活动
+
+| 名称 | 描述 |
+|------|-------------|
+| `dateChange` | 选定日期更改时发出。
+
+## 原生组件
+
+| 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/cn/elements/components/frame.md b/content/docs/cn/elements/components/frame.md
@@ -0,0 +1,50 @@
+---
+title: Frame
+apiRef: https://docs.nativescript.org/api-reference/classes/_ui_frame_.frame
+contributors: [nuochong]
+---
+
+`<Frame>` 是用于显示 [`<Page>`](/en/docs/elements/components/page) 元素的UI组件。每个应用程序至少需要一个 `<Frame>`  元素，通常设置为根元素。
+
+---
+
+#### 单一的根框架
+
+如果要从nativescript 3.x进行迁移并希望保留旧行为，则条目文件中的以下代码段将创建根框架并呈现您的默认页面。
+
+```js
+new Vue({
+  render: h => h('Frame', [ h(HomePageComponent) ])
+})
+```
+
+#### 多个框架
+
+如果您需要创建多个框架，可以通过将它们包装在布局中来实现，例如，如果您想要并排放置2个框架
+
+```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>
+```
+
+
+## 原生组件
+
+| 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)
diff --git a/content/docs/cn/elements/components/html-view.md b/content/docs/cn/elements/components/html-view.md
@@ -0,0 +1,29 @@
+---
+title: HtmlView
+apiRef: https://docs.nativescript.org/api-reference/classes/_ui_html_view_.htmlview
+contributors: [nuochong]
+---
+
+`<HtmlView>` 是一个UI组件，可让您显示静态HTML内容。
+
+另请参见：[WebView](/en/docs/elements/components/web-view)。
+
+---
+
+```html
+<HtmlView html="<div><h1>HtmlView</h1></div>" />
+```
+
+[> screenshots for=HtmlView <]
+
+## 道具
+
+| 名称 | 类型 | 描述 |
+|------|------|-------------|
+| `html` | `String` | 要显示的HTML内容。
+
+## 原生组件
+
+| Android | iOS |
+|---------|-----|
+| [`android.widget.TextView`](https://developer.android.com/reference/android/widget/TextView.html) | [`UITextView`](https://developer.apple.com/documentation/uikit/uitextview)