From 7b78d326d628a8ca3203559a26da5d0e1888327e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B5=B5=E4=B8=BD?= Date: Fri, 9 Mar 2018 13:26:34 +0800 Subject: [PATCH] add page file --- components/badge/index.zh-CN.md | 1 + components/breadcrumb/demo/basic.md | 33 +++++++++ components/breadcrumb/demo/index.vue | 62 +++++++++++------ components/breadcrumb/demo/separator.md | 33 +++++++++ components/breadcrumb/demo/withIcon.md | 39 +++++++++++ components/breadcrumb/index.en-US.md | 35 ++++++++++ components/breadcrumb/index.zh-CN.md | 17 +---- components/card/demo/basic.md | 20 ++++++ components/card/demo/colRowCard.md | 33 +++++++++ components/card/demo/concise.md | 19 ++++++ components/card/demo/grid.md | 37 ++++++++++ components/card/demo/index.vue | 89 +++++++++++++------------ components/card/demo/inline.md | 27 ++++++++ components/card/demo/loading.md | 18 +++++ components/card/demo/moreConfigs.md | 47 +++++++++++++ components/card/demo/noBorder.md | 30 +++++++++ components/card/demo/tabsCard.md | 83 +++++++++++++++++++++++ components/card/index.en-US.md | 37 ++++++++++ components/card/index.zh-CN.md | 38 +++++++++++ components/checkbox/demo/basic.md | 30 +++++++++ components/checkbox/demo/check-all.md | 60 +++++++++++++++++ components/checkbox/demo/controller.md | 74 ++++++++++++++++++++ components/checkbox/demo/disabled.md | 27 ++++++++ components/checkbox/demo/group.md | 56 ++++++++++++++++ components/checkbox/demo/index.vue | 77 ++++++++++++--------- components/checkbox/demo/layout.md | 39 +++++++++++ components/checkbox/index.en-US.md | 30 +++++++++ components/checkbox/index.zh-CN.md | 29 ++++++++ 28 files changed, 1012 insertions(+), 108 deletions(-) create mode 100644 components/breadcrumb/demo/basic.md create mode 100644 components/breadcrumb/demo/separator.md create mode 100644 components/breadcrumb/demo/withIcon.md create mode 100644 components/breadcrumb/index.en-US.md create mode 100644 components/card/demo/basic.md create mode 100644 components/card/demo/colRowCard.md create mode 100644 components/card/demo/concise.md create mode 100644 components/card/demo/grid.md create mode 100644 components/card/demo/inline.md create mode 100644 components/card/demo/loading.md create mode 100644 components/card/demo/moreConfigs.md create mode 100644 components/card/demo/noBorder.md create mode 100644 components/card/demo/tabsCard.md create mode 100644 components/card/index.en-US.md create mode 100644 components/card/index.zh-CN.md create mode 100644 components/checkbox/demo/basic.md create mode 100644 components/checkbox/demo/check-all.md create mode 100644 components/checkbox/demo/controller.md create mode 100644 components/checkbox/demo/disabled.md create mode 100644 components/checkbox/demo/group.md create mode 100644 components/checkbox/demo/layout.md create mode 100644 components/checkbox/index.en-US.md create mode 100644 components/checkbox/index.zh-CN.md diff --git a/components/badge/index.zh-CN.md b/components/badge/index.zh-CN.md index d4a7f971d..05b9c3ef3 100644 --- a/components/badge/index.zh-CN.md +++ b/components/badge/index.zh-CN.md @@ -1,5 +1,6 @@ ## API + ```vue diff --git a/components/breadcrumb/demo/basic.md b/components/breadcrumb/demo/basic.md new file mode 100644 index 000000000..62adb984c --- /dev/null +++ b/components/breadcrumb/demo/basic.md @@ -0,0 +1,33 @@ + + #### 基本 + 最简单的用法 + + + + #### Basic usage + The simplest use + + +```html + + + + +``` diff --git a/components/breadcrumb/demo/index.vue b/components/breadcrumb/demo/index.vue index d1efc5566..3b285427d 100644 --- a/components/breadcrumb/demo/index.vue +++ b/components/breadcrumb/demo/index.vue @@ -1,21 +1,45 @@ - diff --git a/components/breadcrumb/demo/separator.md b/components/breadcrumb/demo/separator.md new file mode 100644 index 000000000..f4a8cbba9 --- /dev/null +++ b/components/breadcrumb/demo/separator.md @@ -0,0 +1,33 @@ + + #### 分隔符 + 使用` separator=">" `可以自定义分隔符 + + + + #### Configuring the Separator + The separator can be customized by setting the separator preperty: separator=">" + + +```html + + + + +``` diff --git a/components/breadcrumb/demo/withIcon.md b/components/breadcrumb/demo/withIcon.md new file mode 100644 index 000000000..a24888ed1 --- /dev/null +++ b/components/breadcrumb/demo/withIcon.md @@ -0,0 +1,39 @@ + + #### 带有图标的 + 图标放在文字前面 + + + + #### With an Icon + The icon should be placed in front of the text + + +```html + + + + +``` diff --git a/components/breadcrumb/index.en-US.md b/components/breadcrumb/index.en-US.md new file mode 100644 index 000000000..0ed0297fa --- /dev/null +++ b/components/breadcrumb/index.en-US.md @@ -0,0 +1,35 @@ +## API + +| Property | Description | Type | Optional | Default | +| -------- | ----------- | ---- | -------- | ------- | +| itemRender | Custom item renderer | (route, params, routes, paths) => ReactNode | | - | +| params | Routing parameters | object | | - | +| routes | The routing stack information of router | object\[] | | - | +| separator | Custom separator | string\|ReactNode | | `/` | + +> `linkRender` and `nameRender` were removed after `antd@2.0`, please use `itemRender` instead. + +### Use with browserHistory + +The link of Breadcrumb item targets `#` by default, you can use `itemRender` to make a `browserHistory` Link. + +```vue +import { Link } from 'react-router'; + +const routes = [{ + path: 'index', +  breadcrumbName: 'home' +}, { + path: 'first', + breadcrumbName: 'first' +}, { + path: 'second', + breadcrumbName: 'second' +}]; +function itemRender(route, params, routes, paths) { + const last = routes.indexOf(route) === routes.length - 1; + return last ? {route.breadcrumbName} : {route.breadcrumbName}; +} + +return ; +``` diff --git a/components/breadcrumb/index.zh-CN.md b/components/breadcrumb/index.zh-CN.md index cc1380b83..259b4aaef 100644 --- a/components/breadcrumb/index.zh-CN.md +++ b/components/breadcrumb/index.zh-CN.md @@ -1,18 +1,3 @@ ---- -category: Components -subtitle: 面包屑 -type: Navigation -title: Breadcrumb ---- - -显示当前页面在系统层级结构中的位置，并能向上返回。 - -## 何时使用 - -- 当系统拥有超过两级以上的层级结构时； -- 当需要告知用户『你在哪里』时； -- 当需要向上导航的功能时。 - ## API | 参数 | 说明 | 类型 | 可选值 | 默认值 | @@ -26,7 +11,7 @@ title: Breadcrumb ### 和 browserHistory 配合 -和 react-router 一起使用时，默认生成的 url 路径是带有 `#` 的，如果和 browserHistory 一起使用的话，你可以使用 `itemRender` 属性定义面包屑链接。 +和 vue-router 一起使用时，默认生成的 url 路径是带有 `#` 的，如果和 browserHistory 一起使用的话，你可以使用 `itemRender` 属性定义面包屑链接。 ```vue import { Link } from 'react-router'; diff --git a/components/card/demo/basic.md b/components/card/demo/basic.md new file mode 100644 index 000000000..714f72388 --- /dev/null +++ b/components/card/demo/basic.md @@ -0,0 +1,20 @@ + +#### 典型卡片 +包含标题、内容、操作区域。 + + + +#### Basic card +A basic card containing a title, content and an extra corner content. + + +```html + +``` diff --git a/components/card/demo/colRowCard.md b/components/card/demo/colRowCard.md new file mode 100644 index 000000000..5dfcf082c --- /dev/null +++ b/components/card/demo/colRowCard.md @@ -0,0 +1,33 @@ + + #### 栅格卡片 + 在系统概览页面常常和栅格进行配合。 + + + + #### Card in column + Cards usually cooperate with grid column layout in overview page. + + +```html + +``` diff --git a/components/card/demo/concise.md b/components/card/demo/concise.md new file mode 100644 index 000000000..0ee3c79d7 --- /dev/null +++ b/components/card/demo/concise.md @@ -0,0 +1,19 @@ + + #### 简洁卡片 + 只包含内容区域 + + + + #### Simple card + A simple card only containing a content area. + + +```html + +``` diff --git a/components/card/demo/grid.md b/components/card/demo/grid.md new file mode 100644 index 000000000..8a7c6c82c --- /dev/null +++ b/components/card/demo/grid.md @@ -0,0 +1,37 @@ +[>_<]: + 这个卡片没起作用还报错！一堆的那种！！！ + + +#### 网格型内嵌卡片 +一种常见的卡片内容区隔模式。 + + + +#### Grid card +Grid style card content. + + +```html + + + +``` diff --git a/components/card/demo/index.vue b/components/card/demo/index.vue index 313281dd6..c34007f8a 100644 --- a/components/card/demo/index.vue +++ b/components/card/demo/index.vue @@ -1,46 +1,53 @@ - diff --git a/components/card/demo/inline.md b/components/card/demo/inline.md new file mode 100644 index 000000000..c2f005800 --- /dev/null +++ b/components/card/demo/inline.md @@ -0,0 +1,27 @@ + + #### 内部卡片 + 可以放在普通卡片内部，展示多层级结构的信息 + + + + #### Inner card + It can be placed inside the ordinary card to display the information of the multilevel structure + + +```html + + +``` diff --git a/components/card/demo/loading.md b/components/card/demo/loading.md new file mode 100644 index 000000000..67a061aad --- /dev/null +++ b/components/card/demo/loading.md @@ -0,0 +1,18 @@ + + #### 预加载的卡片 + 数据读入前会有文本块样式 + + + #### Loading card + Shows a loading indirector while the contents of the card is being featched + + +```html + +``` + + diff --git a/components/card/demo/moreConfigs.md b/components/card/demo/moreConfigs.md new file mode 100644 index 000000000..5e04c05be --- /dev/null +++ b/components/card/demo/moreConfigs.md @@ -0,0 +1,47 @@ + + #### 更灵活的内容展示 + 可以利用 `Card.Meta` 支持更灵活的内容 + + + + #### Customized content + You can use `Card.Meta` to support more flexible content. + + +```html + + + +``` diff --git a/components/card/demo/noBorder.md b/components/card/demo/noBorder.md new file mode 100644 index 000000000..6ca04fe46 --- /dev/null +++ b/components/card/demo/noBorder.md @@ -0,0 +1,30 @@ + + #### 无边框 + 在灰色背景上使用无边框的卡片 + + + #### No border + A borderless card on a gray background. + + +```html + + + +``` diff --git a/components/card/demo/tabsCard.md b/components/card/demo/tabsCard.md new file mode 100644 index 000000000..49dce21b5 --- /dev/null +++ b/components/card/demo/tabsCard.md @@ -0,0 +1,83 @@ + + #### 带页签的卡片 + 可承载更多内容 + + + + #### With tabs + More content can be hosted + + +```html + + + + +``` diff --git a/components/card/index.en-US.md b/components/card/index.en-US.md new file mode 100644 index 000000000..1868ff91a --- /dev/null +++ b/components/card/index.en-US.md @@ -0,0 +1,37 @@ +[^_^]: + this is a ReactVersion for card. waiting to be transformed + +## API + +### Card + +| Property | Description | Type | Default | +| -------- | ----------- | ---- | ------- | +| actions | The action list, shows at the bottom of the Card. | Array | - | +| bodyStyle | Inline style to apply to the card content | object | - | +| bordered | Toggles rendering of the border around the card | boolean | `true` | +| cover | Card cover | ReactNode | - | +| extra | Content to render in the top-right corner of the card | string\|ReactNode | - | +| hoverable | Lift up when hovering card | boolean | false | +| loading | Shows a loading indicator while the contents of the card are being fetched | boolean | false | +| tabList | List of TabPane's head. | Array<{key: string, tab: ReactNode}> | - | +| title | Card title | string\|ReactNode | - | +| type | Card style type, can be set to `inner` or not set | string | - | +| onTabChange | Callback when tab is switched | (key) => void | - | + +### Card.Grid + +| Property | Description | Type | Default | +| -------- | ----------- | ---- | ------- | +| className | className of container | string | - | +| style | style object of container | object | - | + +### Card.Meta + +| Property | Description | Type | Default | +| -------- | ----------- | ---- | ------- | +| avatar | avatar or icon | ReactNode | - | +| className | className of container | string | - | +| description | description content | ReactNode | - | +| style | style object of container | object | - | +| title | title content | ReactNode | - | diff --git a/components/card/index.zh-CN.md b/components/card/index.zh-CN.md new file mode 100644 index 000000000..55d671fe9 --- /dev/null +++ b/components/card/index.zh-CN.md @@ -0,0 +1,38 @@ +[^_^]: + this is a ReactVersion for card. waiting to be transformed + + +## API + +### Card + +| 参数 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| actions | 卡片操作组，位置在卡片底部 | Array