diff --git a/components/affix/demo/basic.md b/components/affix/demo/basic.md index 59c8605560..d989896900 100644 --- a/components/affix/demo/basic.md +++ b/components/affix/demo/basic.md @@ -13,7 +13,7 @@ title: The simplest usage. -````jsx +````__react import { Affix, Button } from 'antd'; ReactDOM.render( diff --git a/components/affix/demo/on-change.md b/components/affix/demo/on-change.md index 9d9a89c9d4..a0d1cdf65c 100644 --- a/components/affix/demo/on-change.md +++ b/components/affix/demo/on-change.md @@ -13,7 +13,7 @@ title: Callback with affixed state. -````jsx +````__react import { Affix, Button } from 'antd'; ReactDOM.render( diff --git a/components/affix/demo/target.md b/components/affix/demo/target.md index d78ab9100e..97dbc7f00d 100644 --- a/components/affix/demo/target.md +++ b/components/affix/demo/target.md @@ -13,7 +13,7 @@ title: Set a `target` for 'Affix', which is listen to scroll event of target element (default is `window`). -````jsx +````__react import { Affix, Button } from 'antd'; class Demo extends React.Component { diff --git a/components/alert/demo/banner.md b/components/alert/demo/banner.md index 35d3e7f20e..9bb7ce4898 100644 --- a/components/alert/demo/banner.md +++ b/components/alert/demo/banner.md @@ -13,7 +13,7 @@ title: When `Alert` is used as banner, it has particular style, Icon and `type`(warning) are specified by default. -````jsx +````__react import { Alert } from 'antd'; ReactDOM.render( diff --git a/components/alert/demo/basic.md b/components/alert/demo/basic.md index 02b0e57b58..2171fdfbe0 100644 --- a/components/alert/demo/basic.md +++ b/components/alert/demo/basic.md @@ -13,7 +13,7 @@ title: The simplest usage for short messages. -````jsx +````__react import { Alert } from 'antd'; ReactDOM.render( diff --git a/components/alert/demo/closable.md b/components/alert/demo/closable.md index d1f35acb71..f7fd395893 100644 --- a/components/alert/demo/closable.md +++ b/components/alert/demo/closable.md @@ -13,7 +13,7 @@ title: To show close button. -````jsx +````__react import { Alert } from 'antd'; const onClose = function (e) { diff --git a/components/alert/demo/close-text.md b/components/alert/demo/close-text.md index 4959b2034d..fab118e15c 100644 --- a/components/alert/demo/close-text.md +++ b/components/alert/demo/close-text.md @@ -13,7 +13,7 @@ title: Replace the default icon with customized text. -````jsx +````__react import { Alert } from 'antd'; ReactDOM.render( diff --git a/components/alert/demo/description.md b/components/alert/demo/description.md index 9d8c5fd189..acad94bc9b 100644 --- a/components/alert/demo/description.md +++ b/components/alert/demo/description.md @@ -13,7 +13,7 @@ title: Additional description for alert message. -````jsx +````__react import { Alert } from 'antd'; ReactDOM.render(
diff --git a/components/alert/demo/icon.md b/components/alert/demo/icon.md index 8b94e9b3b3..f0c672e4f4 100644 --- a/components/alert/demo/icon.md +++ b/components/alert/demo/icon.md @@ -13,7 +13,7 @@ title: Decent icon make information more clear and more friendly. -````jsx +````__react import { Alert } from 'antd'; ReactDOM.render(
diff --git a/components/alert/demo/style.md b/components/alert/demo/style.md index 7fae3b28b6..ac5966733f 100644 --- a/components/alert/demo/style.md +++ b/components/alert/demo/style.md @@ -13,7 +13,7 @@ title: There are 4 types of Alert: `success`, `info`, `warning`, `error`. -````jsx +````__react import { Alert } from 'antd'; ReactDOM.render(
diff --git a/components/anchor/demo/basic.md b/components/anchor/demo/basic.md index d193e0c818..ad45e4efae 100644 --- a/components/anchor/demo/basic.md +++ b/components/anchor/demo/basic.md @@ -13,7 +13,7 @@ title: The simplest usage. -```jsx +```__react import { Anchor } from 'antd'; const { Link } = Anchor; diff --git a/components/anchor/demo/fixed.md b/components/anchor/demo/fixed.md index 2e0fdbb8f9..5cfd758e1f 100644 --- a/components/anchor/demo/fixed.md +++ b/components/anchor/demo/fixed.md @@ -13,7 +13,7 @@ title: Do not change state when page is scrolling. -```jsx +```__react import { Anchor } from 'antd'; const { Link } = Anchor; diff --git a/components/auto-complete/demo/basic.md b/components/auto-complete/demo/basic.md index 2798226775..6c22674f45 100644 --- a/components/auto-complete/demo/basic.md +++ b/components/auto-complete/demo/basic.md @@ -13,7 +13,7 @@ title: Basic Usage, set datasource of autocomplete with `dataSource` property. -````jsx +````__react import { AutoComplete } from 'antd'; function onSelect(value) { diff --git a/components/auto-complete/demo/options.md b/components/auto-complete/demo/options.md index 77e3c8b102..6151568bfa 100644 --- a/components/auto-complete/demo/options.md +++ b/components/auto-complete/demo/options.md @@ -13,7 +13,7 @@ title: You could pass `AutoComplete.Option` as children of `AutoComplete`, instead of using `dataSource`。 -````jsx +````__react import { AutoComplete } from 'antd'; const Option = AutoComplete.Option; diff --git a/components/back-top/demo/basic.md b/components/back-top/demo/basic.md index 65d51cba26..3362288de5 100644 --- a/components/back-top/demo/basic.md +++ b/components/back-top/demo/basic.md @@ -13,7 +13,7 @@ title: The most basic usage. -````jsx +````__react import { BackTop } from 'antd'; ReactDOM.render( diff --git a/components/back-top/demo/custom.md b/components/back-top/demo/custom.md index 5091d26cb4..ed9b8c0e28 100644 --- a/components/back-top/demo/custom.md +++ b/components/back-top/demo/custom.md @@ -14,7 +14,7 @@ title: You can customize the style of the button, just note the size limit: no more than `40px * 40px`. -````jsx +````__react import { BackTop } from 'antd'; ReactDOM.render( diff --git a/components/badge/demo/basic.md b/components/badge/demo/basic.md index 903647b5cf..58062cb264 100644 --- a/components/badge/demo/basic.md +++ b/components/badge/demo/basic.md @@ -13,7 +13,7 @@ title: Simplest Usage. -````jsx +````__react import { Badge } from 'antd'; ReactDOM.render( diff --git a/components/badge/demo/change.md b/components/badge/demo/change.md index d383e98df6..4f11e843a8 100644 --- a/components/badge/demo/change.md +++ b/components/badge/demo/change.md @@ -13,7 +13,7 @@ title: The count will be animated as it changes. -````jsx +````__react import { Badge, Button, Icon, Switch } from 'antd'; const ButtonGroup = Button.Group; diff --git a/components/badge/demo/dot.md b/components/badge/demo/dot.md index 124d8e899f..1de72d6cf4 100644 --- a/components/badge/demo/dot.md +++ b/components/badge/demo/dot.md @@ -13,7 +13,7 @@ title: This will simply display a red badge, without a specific count. -````jsx +````__react import { Badge, Icon } from 'antd'; ReactDOM.render(
diff --git a/components/badge/demo/link.md b/components/badge/demo/link.md index 426b89061a..f4c928145b 100644 --- a/components/badge/demo/link.md +++ b/components/badge/demo/link.md @@ -13,7 +13,7 @@ title: The badge can be wrapped with `a` tag to make it linkable. -````jsx +````__react import { Badge } from 'antd'; ReactDOM.render( diff --git a/components/badge/demo/no-wrapper.md b/components/badge/demo/no-wrapper.md index 51d50bd5c7..55fc58ec82 100644 --- a/components/badge/demo/no-wrapper.md +++ b/components/badge/demo/no-wrapper.md @@ -15,7 +15,7 @@ title: Used in standalone when children is empty. -````jsx +````__react import { Badge } from 'antd'; ReactDOM.render(
diff --git a/components/badge/demo/overflow.md b/components/badge/demo/overflow.md index 6cce428040..22313dd247 100644 --- a/components/badge/demo/overflow.md +++ b/components/badge/demo/overflow.md @@ -13,7 +13,7 @@ title: `${overflowCount}+` is displayed when count is larger than `overflowCount`. The default value of `overflowCount` is `99`. -````jsx +````__react import { Badge } from 'antd'; ReactDOM.render(
diff --git a/components/badge/demo/status.md b/components/badge/demo/status.md index 29ccd868a2..faa0aa3152 100644 --- a/components/badge/demo/status.md +++ b/components/badge/demo/status.md @@ -13,7 +13,7 @@ title: Standalone badge with status. -````jsx +````__react import { Badge } from 'antd'; ReactDOM.render( diff --git a/components/breadcrumb/demo/basic.md b/components/breadcrumb/demo/basic.md index 1d5f8bb08e..e39f904876 100644 --- a/components/breadcrumb/demo/basic.md +++ b/components/breadcrumb/demo/basic.md @@ -13,7 +13,7 @@ title: The simplest use -````jsx +````__react import { Breadcrumb } from 'antd'; ReactDOM.render( diff --git a/components/breadcrumb/demo/router.md b/components/breadcrumb/demo/router.md index 9ab146a9fa..e0b3b95165 100644 --- a/components/breadcrumb/demo/router.md +++ b/components/breadcrumb/demo/router.md @@ -14,7 +14,7 @@ title: Used together with `react-router@2+`. -````jsx +````__react import { Router, Route, Link, hashHistory } from 'react-router'; import { Breadcrumb, Alert } from 'antd'; diff --git a/components/breadcrumb/demo/separator.md b/components/breadcrumb/demo/separator.md index 79b39ae20b..eab8499c53 100644 --- a/components/breadcrumb/demo/separator.md +++ b/components/breadcrumb/demo/separator.md @@ -13,7 +13,7 @@ title: The separator can be customized by setting the separator property: separator=">" -````jsx +````__react import { Breadcrumb } from 'antd'; ReactDOM.render( diff --git a/components/breadcrumb/demo/withIcon.md b/components/breadcrumb/demo/withIcon.md index 559f2195c0..619502e1a0 100644 --- a/components/breadcrumb/demo/withIcon.md +++ b/components/breadcrumb/demo/withIcon.md @@ -13,7 +13,7 @@ title: The icon should be placed in front of the text. -````jsx +````__react import { Breadcrumb, Icon } from 'antd'; ReactDOM.render( diff --git a/components/button/demo/basic.md b/components/button/demo/basic.md index e94f1bff84..3a7a9c1c31 100644 --- a/components/button/demo/basic.md +++ b/components/button/demo/basic.md @@ -21,7 +21,7 @@ There are primary button, default button, ghost button and dashed button in antd Primary button and default button can be used without other button, but ghost button must be used with primary button. -````jsx +````__react import { Button } from 'antd'; ReactDOM.render( diff --git a/components/button/demo/button-group.md b/components/button/demo/button-group.md index fbf7de3cd4..60a49b091e 100644 --- a/components/button/demo/button-group.md +++ b/components/button/demo/button-group.md @@ -17,7 +17,7 @@ Buttons can be grouped by placing multiple `Button` components into a `Button.Gr The `size` can be set to `large`, `small` or left unset resulting in a default size. -````jsx +````__react import { Button, Icon } from 'antd'; const ButtonGroup = Button.Group; diff --git a/components/button/demo/disabled.md b/components/button/demo/disabled.md index f91903e592..768b18dfba 100644 --- a/components/button/demo/disabled.md +++ b/components/button/demo/disabled.md @@ -13,7 +13,7 @@ title: To mark a button as disabled, add the `disabled` property to the `Button`. -````jsx +````__react import { Button } from 'antd'; ReactDOM.render( diff --git a/components/button/demo/icon.md b/components/button/demo/icon.md index fa3489d5e7..322068e4a8 100644 --- a/components/button/demo/icon.md +++ b/components/button/demo/icon.md @@ -17,7 +17,7 @@ title: If you want specific control over the positioning and placement of the `Icon`, then that should be done by placing the `Icon` component within the `Button` rather than using the `icon` property. -````jsx +````__react import { Button } from 'antd'; ReactDOM.render( diff --git a/components/button/demo/loading.md b/components/button/demo/loading.md index 1ecbb1cc96..cc512dbce5 100644 --- a/components/button/demo/loading.md +++ b/components/button/demo/loading.md @@ -13,7 +13,7 @@ title: A loading indicator can be added to a button by setting the `loading` property on the `Button`. -````jsx +````__react import { Button } from 'antd'; const App = React.createClass({ diff --git a/components/button/demo/multiple.md b/components/button/demo/multiple.md index c2d378a7d2..2cfe299373 100644 --- a/components/button/demo/multiple.md +++ b/components/button/demo/multiple.md @@ -14,7 +14,7 @@ title: If you need several buttons, we recommend that you use 1 primary button + n secondary buttons, and if there are more than three operations, you can group some of them into `Dropdown.Button`. -````jsx +````__react import { Button, Menu, Dropdown, Icon } from 'antd'; function handleMenuClick(e) { diff --git a/components/button/demo/size.md b/components/button/demo/size.md index e3b91a0613..5cbdc980e5 100644 --- a/components/button/demo/size.md +++ b/components/button/demo/size.md @@ -17,7 +17,7 @@ Ant Design supports a default button size as well as a large and small size. If a large or small button is desired, set the `size` property to either `large` or `small` respectively. Omit the `size` property for a button with the default size. -````jsx +````__react import { Button, Radio, Icon } from 'antd'; class ButtonSize extends React.Component { diff --git a/components/calendar/demo/basic.md b/components/calendar/demo/basic.md index 956bc2621c..cf229f119e 100644 --- a/components/calendar/demo/basic.md +++ b/components/calendar/demo/basic.md @@ -13,7 +13,7 @@ title: A basic calendar component with Year/Month switch. -````jsx +````__react import { Calendar } from 'antd'; function onPanelChange(value, mode) { diff --git a/components/calendar/demo/card.md b/components/calendar/demo/card.md index df9e2b39ce..f9643afab1 100644 --- a/components/calendar/demo/card.md +++ b/components/calendar/demo/card.md @@ -13,7 +13,7 @@ title: Nested inside a container element for rendering in limited space. -````jsx +````__react import { Calendar } from 'antd'; function onPanelChange(value, mode) { diff --git a/components/calendar/demo/locale.md b/components/calendar/demo/locale.md index 1bdb7a17d0..6a0df43038 100644 --- a/components/calendar/demo/locale.md +++ b/components/calendar/demo/locale.md @@ -13,7 +13,7 @@ title: To set the language. en_US, zh_CN are supported by default. -````jsx +````__react import { Calendar } from 'antd'; import enUS from 'antd/lib/calendar/locale/en_US'; import moment from 'moment'; diff --git a/components/calendar/demo/notice-calendar.md b/components/calendar/demo/notice-calendar.md index 831d74cd87..ae3d1fb809 100644 --- a/components/calendar/demo/notice-calendar.md +++ b/components/calendar/demo/notice-calendar.md @@ -13,7 +13,7 @@ title: This component can be rendered by using `dateCellRender` and `monthCellRender` with the data you need. -````jsx +````__react import { Calendar } from 'antd'; function getListData(value) { diff --git a/components/card/demo/basic.md b/components/card/demo/basic.md index e51f291432..cb52d92ab6 100644 --- a/components/card/demo/basic.md +++ b/components/card/demo/basic.md @@ -13,7 +13,7 @@ title: A basic card containing a title, content and an extra corner content. -````jsx +````__react import { Card } from 'antd'; ReactDOM.render( diff --git a/components/card/demo/border-less.md b/components/card/demo/border-less.md index c83805c1dc..fcada7fe3d 100644 --- a/components/card/demo/border-less.md +++ b/components/card/demo/border-less.md @@ -13,7 +13,7 @@ title: A borderless card on a gray background. -````jsx +````__react import { Card } from 'antd'; ReactDOM.render( diff --git a/components/card/demo/grid.md b/components/card/demo/grid.md index f087fd453c..c9989c6596 100644 --- a/components/card/demo/grid.md +++ b/components/card/demo/grid.md @@ -13,7 +13,7 @@ title: Cards usually cooperate with grid layout in overview page. -````jsx +````__react import { Card, Col, Row } from 'antd'; ReactDOM.render( diff --git a/components/card/demo/loading.md b/components/card/demo/loading.md index dff8fb3221..9bb81ebf38 100644 --- a/components/card/demo/loading.md +++ b/components/card/demo/loading.md @@ -13,7 +13,7 @@ title: Shows a loading indicator while the contents of the card is being fetched. -````jsx +````__react import { Card } from 'antd'; ReactDOM.render( diff --git a/components/card/demo/no-padding.md b/components/card/demo/no-padding.md index 177ff78c03..61aa247d13 100644 --- a/components/card/demo/no-padding.md +++ b/components/card/demo/no-padding.md @@ -14,7 +14,7 @@ title: Customizing default width and margin. -````jsx +````__react import { Card } from 'antd'; ReactDOM.render( diff --git a/components/card/demo/simple.md b/components/card/demo/simple.md index 054179848b..de506aea5b 100644 --- a/components/card/demo/simple.md +++ b/components/card/demo/simple.md @@ -13,7 +13,7 @@ title: A simple card only containing a content area. -````jsx +````__react import { Card } from 'antd'; ReactDOM.render( diff --git a/components/carousel/demo/autoplay.md b/components/carousel/demo/autoplay.md index 30e2888c79..b378cfc7e4 100644 --- a/components/carousel/demo/autoplay.md +++ b/components/carousel/demo/autoplay.md @@ -13,7 +13,7 @@ title: Timing of scrolling to the next card/picture. -````jsx +````__react import { Carousel } from 'antd'; ReactDOM.render( diff --git a/components/carousel/demo/basic.md b/components/carousel/demo/basic.md index 2412636802..995e037e7a 100644 --- a/components/carousel/demo/basic.md +++ b/components/carousel/demo/basic.md @@ -13,7 +13,7 @@ title: Basic usage. -````jsx +````__react import { Carousel } from 'antd'; function onChange(a, b, c) { diff --git a/components/carousel/demo/fade.md b/components/carousel/demo/fade.md index 4501743189..9fc60eb754 100644 --- a/components/carousel/demo/fade.md +++ b/components/carousel/demo/fade.md @@ -13,7 +13,7 @@ title: Slides use fade for transition. -````jsx +````__react import { Carousel } from 'antd'; ReactDOM.render( diff --git a/components/carousel/demo/vertical.md b/components/carousel/demo/vertical.md index d13fc60f15..a70e117a05 100644 --- a/components/carousel/demo/vertical.md +++ b/components/carousel/demo/vertical.md @@ -13,7 +13,7 @@ title: Vertical pagination. -````jsx +````__react import { Carousel } from 'antd'; ReactDOM.render( diff --git a/components/cascader/demo/basic.md b/components/cascader/demo/basic.md index d99ed25930..5808d31397 100644 --- a/components/cascader/demo/basic.md +++ b/components/cascader/demo/basic.md @@ -13,7 +13,7 @@ title: Cascade selection box for selecting province/city/district. -````jsx +````__react import { Cascader } from 'antd'; const options = [{ diff --git a/components/cascader/demo/change-on-select.md b/components/cascader/demo/change-on-select.md index 1a25b4f583..884f202b8d 100644 --- a/components/cascader/demo/change-on-select.md +++ b/components/cascader/demo/change-on-select.md @@ -13,7 +13,7 @@ title: Allow only select parent options. -````jsx +````__react import { Cascader } from 'antd'; const options = [{ diff --git a/components/cascader/demo/custom-render.md b/components/cascader/demo/custom-render.md index f187304906..89d5e093d9 100644 --- a/components/cascader/demo/custom-render.md +++ b/components/cascader/demo/custom-render.md @@ -13,7 +13,7 @@ title: For instance, add an external link after the selected value. -````jsx +````__react import { Cascader } from 'antd'; const options = [{ diff --git a/components/cascader/demo/custom-trigger.md b/components/cascader/demo/custom-trigger.md index a5ce654810..ad992e40ed 100644 --- a/components/cascader/demo/custom-trigger.md +++ b/components/cascader/demo/custom-trigger.md @@ -13,7 +13,7 @@ title: Separate trigger button and result. -````jsx +````__react import { Cascader } from 'antd'; const options = [{ diff --git a/components/cascader/demo/default-value.md b/components/cascader/demo/default-value.md index f77df5d1f2..26307d67e4 100644 --- a/components/cascader/demo/default-value.md +++ b/components/cascader/demo/default-value.md @@ -13,7 +13,7 @@ title: Specifies default value by an array. -````jsx +````__react import { Cascader } from 'antd'; const options = [{ diff --git a/components/cascader/demo/disabled-option.md b/components/cascader/demo/disabled-option.md index 7fd0664b06..e9b2431a6e 100644 --- a/components/cascader/demo/disabled-option.md +++ b/components/cascader/demo/disabled-option.md @@ -13,7 +13,7 @@ title: Disable option by specifying the `disabled` property in `options`. -````jsx +````__react import { Cascader } from 'antd'; const options = [{ diff --git a/components/cascader/demo/hover.md b/components/cascader/demo/hover.md index c86630c8d3..044e5d76ac 100644 --- a/components/cascader/demo/hover.md +++ b/components/cascader/demo/hover.md @@ -13,7 +13,7 @@ title: Hover to expand sub menu, click to select option. -````jsx +````__react import { Cascader } from 'antd'; const options = [{ diff --git a/components/cascader/demo/lazy.md b/components/cascader/demo/lazy.md index 2852cd0c5d..49f6d7c43f 100644 --- a/components/cascader/demo/lazy.md +++ b/components/cascader/demo/lazy.md @@ -17,7 +17,7 @@ Load options lazily with `loadData`. > Note: `loadData` cannot work with `showSearch`. -````jsx +````__react import { Cascader } from 'antd'; const options = [{ diff --git a/components/cascader/demo/search.md b/components/cascader/demo/search.md index a571d42e07..a68755d7df 100644 --- a/components/cascader/demo/search.md +++ b/components/cascader/demo/search.md @@ -13,7 +13,7 @@ title: Search and select options directly. -````jsx +````__react import { Cascader } from 'antd'; const options = [{ diff --git a/components/cascader/demo/size.md b/components/cascader/demo/size.md index daf3b640a8..2d020d3172 100644 --- a/components/cascader/demo/size.md +++ b/components/cascader/demo/size.md @@ -13,7 +13,7 @@ title: Cascade selection box of different sizes. -````jsx +````__react import { Cascader } from 'antd'; const options = [{ diff --git a/components/checkbox/demo/basic.md b/components/checkbox/demo/basic.md index 6db6141b01..523d58cd42 100644 --- a/components/checkbox/demo/basic.md +++ b/components/checkbox/demo/basic.md @@ -13,7 +13,7 @@ title: Basic usage of checkbox. -````jsx +````__react import { Checkbox } from 'antd'; function onChange(e) { diff --git a/components/checkbox/demo/check-all.md b/components/checkbox/demo/check-all.md index 214e3a5285..f20519c2bd 100644 --- a/components/checkbox/demo/check-all.md +++ b/components/checkbox/demo/check-all.md @@ -13,7 +13,7 @@ title: The `indeterminate` property can help you to achieve a 'check all' effect. -````jsx +````__react import { Checkbox } from 'antd'; const CheckboxGroup = Checkbox.Group; diff --git a/components/checkbox/demo/controller.md b/components/checkbox/demo/controller.md index 812a330757..33dcdd270f 100644 --- a/components/checkbox/demo/controller.md +++ b/components/checkbox/demo/controller.md @@ -13,7 +13,7 @@ title: Communicated with other components. -````jsx +````__react import { Checkbox, Button } from 'antd'; const App = React.createClass({ diff --git a/components/checkbox/demo/disabled.md b/components/checkbox/demo/disabled.md index ae52df4f92..1dac88d5d2 100644 --- a/components/checkbox/demo/disabled.md +++ b/components/checkbox/demo/disabled.md @@ -13,7 +13,7 @@ checkbox 不可用。 Disabled checkbox. -````jsx +````__react import { Checkbox } from 'antd'; ReactDOM.render(
diff --git a/components/checkbox/demo/group.md b/components/checkbox/demo/group.md index 3148a8b06e..ef45c42c0b 100644 --- a/components/checkbox/demo/group.md +++ b/components/checkbox/demo/group.md @@ -13,7 +13,7 @@ title: Generate a group of checkboxes from an array. -````jsx +````__react import { Checkbox } from 'antd'; const CheckboxGroup = Checkbox.Group; diff --git a/components/collapse/demo/accordion.md b/components/collapse/demo/accordion.md index 33a4143c4b..ecb06d49b7 100644 --- a/components/collapse/demo/accordion.md +++ b/components/collapse/demo/accordion.md @@ -13,7 +13,7 @@ title: Accordion mode, only one panel can be expanded at a time. The first panel will be expanded by default. -````jsx +````__react import { Collapse } from 'antd'; const Panel = Collapse.Panel; diff --git a/components/collapse/demo/basic.md b/components/collapse/demo/basic.md index 72eaab4ff2..d157215f4d 100644 --- a/components/collapse/demo/basic.md +++ b/components/collapse/demo/basic.md @@ -13,7 +13,7 @@ title: More than one panel can be expanded at a time, the first panel is initialized to be active in this case. -````jsx +````__react import { Collapse } from 'antd'; const Panel = Collapse.Panel; diff --git a/components/collapse/demo/borderless.md b/components/collapse/demo/borderless.md index c60f5a396c..a36d0aae71 100644 --- a/components/collapse/demo/borderless.md +++ b/components/collapse/demo/borderless.md @@ -13,7 +13,7 @@ title: A borderless style of Collapse. -````jsx +````__react import { Collapse } from 'antd'; const Panel = Collapse.Panel; diff --git a/components/collapse/demo/custom.md b/components/collapse/demo/custom.md index 8ffa0534be..f6bdf0581d 100644 --- a/components/collapse/demo/custom.md +++ b/components/collapse/demo/custom.md @@ -13,7 +13,7 @@ title: Customize the background, border and margin styles for each panel. -````jsx +````__react import { Collapse } from 'antd'; const Panel = Collapse.Panel; diff --git a/components/collapse/demo/mix.md b/components/collapse/demo/mix.md index b6124e715b..0e6b1fc85a 100644 --- a/components/collapse/demo/mix.md +++ b/components/collapse/demo/mix.md @@ -13,7 +13,7 @@ title: `Collapse` is nested inside the `Collapse`. -````jsx +````__react import { Collapse } from 'antd'; const Panel = Collapse.Panel; diff --git a/components/date-picker/demo/basic.md b/components/date-picker/demo/basic.md index 90d4dc8680..3f5f7da2f9 100644 --- a/components/date-picker/demo/basic.md +++ b/components/date-picker/demo/basic.md @@ -13,7 +13,7 @@ title: Basic use case. Users can select or input a date in panel. -````jsx +````__react import { DatePicker } from 'antd'; const { MonthPicker, RangePicker } = DatePicker; diff --git a/components/date-picker/demo/disabled-date.md b/components/date-picker/demo/disabled-date.md index b317eebb47..f864adb80d 100644 --- a/components/date-picker/demo/disabled-date.md +++ b/components/date-picker/demo/disabled-date.md @@ -13,7 +13,7 @@ title: Disabled part of dates and time by `disabledDate` and `disabledTime` respectively, and `disabledTime` only works with `showTime`. -````jsx +````__react import { DatePicker } from 'antd'; const RangePicker = DatePicker.RangePicker; diff --git a/components/date-picker/demo/disabled.md b/components/date-picker/demo/disabled.md index 7fbe5347cf..e953eb2456 100644 --- a/components/date-picker/demo/disabled.md +++ b/components/date-picker/demo/disabled.md @@ -13,7 +13,7 @@ title: A disabled state of the `DatePicker`. -````jsx +````__react import { DatePicker } from 'antd'; import moment from 'moment'; const { MonthPicker, RangePicker } = DatePicker; diff --git a/components/date-picker/demo/format.md b/components/date-picker/demo/format.md index 60cb0a5847..707e5afe33 100644 --- a/components/date-picker/demo/format.md +++ b/components/date-picker/demo/format.md @@ -13,7 +13,7 @@ title: We can set the date format by `format`. -````jsx +````__react import { DatePicker } from 'antd'; import moment from 'moment'; const { MonthPicker, RangePicker } = DatePicker; diff --git a/components/date-picker/demo/locale.md b/components/date-picker/demo/locale.md index a3357eedb6..f4ebd5f1ec 100644 --- a/components/date-picker/demo/locale.md +++ b/components/date-picker/demo/locale.md @@ -18,7 +18,7 @@ Use locale to set the language. `en_US`, `zh_CN` are supported by default. moment will use your time zone automatically. If you want to set other time zone, please set it by yourself. -````jsx +````__react import { DatePicker } from 'antd'; import enUS from 'antd/lib/date-picker/locale/en_US'; import moment from 'moment-timezone/moment-timezone'; diff --git a/components/date-picker/demo/presetted-ranges.md b/components/date-picker/demo/presetted-ranges.md index d10eeccdb4..49287d9b44 100644 --- a/components/date-picker/demo/presetted-ranges.md +++ b/components/date-picker/demo/presetted-ranges.md @@ -13,7 +13,7 @@ RangePicker 可以设置常用的 预设范围 提高用户体验。 We can set presetted ranges to RangePicker to improve user experience. -````jsx +````__react import { DatePicker } from 'antd'; import moment from 'moment'; const RangePicker = DatePicker.RangePicker; diff --git a/components/date-picker/demo/size.md b/components/date-picker/demo/size.md index cefbfb4070..7b22548cc4 100644 --- a/components/date-picker/demo/size.md +++ b/components/date-picker/demo/size.md @@ -14,7 +14,7 @@ title: The input box comes in three sizes. `default` will be used if `size` is omitted. -````jsx +````__react import { DatePicker, Radio } from 'antd'; const { MonthPicker, RangePicker } = DatePicker; diff --git a/components/date-picker/demo/start-end.md b/components/date-picker/demo/start-end.md index 453c51dcbc..c7dbfb8bf0 100644 --- a/components/date-picker/demo/start-end.md +++ b/components/date-picker/demo/start-end.md @@ -17,7 +17,7 @@ When `RangePicker` is not satisfied your requirements, try to implement similar > * Use the `disabledDate` property to limit the start and end dates. > * Imporve user experience with `open` `onOpenChange`. -````jsx +````__react import { DatePicker } from 'antd'; class DateRange extends React.Component { diff --git a/components/date-picker/demo/time.md b/components/date-picker/demo/time.md index 475f6f40eb..7e8f9280fd 100644 --- a/components/date-picker/demo/time.md +++ b/components/date-picker/demo/time.md @@ -13,7 +13,7 @@ title: This property provide an additional time selection. When `showTime` is an Object, its properties will be passed on to built-in `TimePicker`. -````jsx +````__react import { DatePicker } from 'antd'; const { RangePicker } = DatePicker; diff --git a/components/dropdown/demo/basic.md b/components/dropdown/demo/basic.md index c0d4b2f276..7dafba6a3d 100644 --- a/components/dropdown/demo/basic.md +++ b/components/dropdown/demo/basic.md @@ -13,7 +13,7 @@ title: The most basic dropdown menu. -````jsx +````__react import { Menu, Dropdown, Icon } from 'antd'; const menu = ( diff --git a/components/dropdown/demo/dropdown-button.md b/components/dropdown/demo/dropdown-button.md index 27f8ab2c4d..ba8177111c 100644 --- a/components/dropdown/demo/dropdown-button.md +++ b/components/dropdown/demo/dropdown-button.md @@ -13,7 +13,7 @@ title: A button is on the left, and a related functional menu is on the right. -````jsx +````__react import { Menu, Dropdown, Button, Icon, message } from 'antd'; function handleButtonClick(e) { diff --git a/components/dropdown/demo/event.md b/components/dropdown/demo/event.md index 7a8752728f..11909b6804 100644 --- a/components/dropdown/demo/event.md +++ b/components/dropdown/demo/event.md @@ -13,7 +13,7 @@ title: An event will be triggered when you click menu items, in which you can make different operations according to item's key. -````jsx +````__react import { Menu, Dropdown, Icon, message } from 'antd'; const onClick = function ({ key }) { message.info(`Click on item ${key}`); diff --git a/components/dropdown/demo/item.md b/components/dropdown/demo/item.md index 99311c3f15..648d9abb28 100644 --- a/components/dropdown/demo/item.md +++ b/components/dropdown/demo/item.md @@ -13,7 +13,7 @@ title: Divider and disabled menu item. -````jsx +````__react import { Menu, Dropdown, Icon } from 'antd'; const menu = ( diff --git a/components/dropdown/demo/overlay-visible.md b/components/dropdown/demo/overlay-visible.md index 9837e24012..0fc0b7f6c9 100644 --- a/components/dropdown/demo/overlay-visible.md +++ b/components/dropdown/demo/overlay-visible.md @@ -13,7 +13,7 @@ title: The default is to close the menu when you click on menu items, this feature can be turned off. -````jsx +````__react import { Menu, Dropdown, Icon } from 'antd'; const OverlayVisible = React.createClass({ diff --git a/components/dropdown/demo/sub-menu.md b/components/dropdown/demo/sub-menu.md index 1e4c2048a8..ee601e1c49 100644 --- a/components/dropdown/demo/sub-menu.md +++ b/components/dropdown/demo/sub-menu.md @@ -13,7 +13,7 @@ title: The menu has multiple levels. -````jsx +````__react import { Menu, Dropdown, Icon } from 'antd'; const SubMenu = Menu.SubMenu; diff --git a/components/dropdown/demo/trigger.md b/components/dropdown/demo/trigger.md index d1ab36f668..1bebe674a1 100644 --- a/components/dropdown/demo/trigger.md +++ b/components/dropdown/demo/trigger.md @@ -13,7 +13,7 @@ title: The default trigger mode is `hover`, you can change it to `click`. -````jsx +````__react import { Menu, Dropdown, Icon } from 'antd'; const menu = ( diff --git a/components/form/demo/advanced-search.md b/components/form/demo/advanced-search.md index ff1250021f..19dd4dbf99 100644 --- a/components/form/demo/advanced-search.md +++ b/components/form/demo/advanced-search.md @@ -18,7 +18,7 @@ Three columns layout is often used for advanced searching of data table. Because the width of label is not fixed, you may need to adjust it by customizing its style. -````jsx +````__react import { Form, Row, Col, Input, Button, Icon } from 'antd'; const FormItem = Form.Item; diff --git a/components/form/demo/coordinated.md b/components/form/demo/coordinated.md index a91d3ff754..af41dc0453 100644 --- a/components/form/demo/coordinated.md +++ b/components/form/demo/coordinated.md @@ -13,7 +13,7 @@ title: Use `setFieldsValue` to set other control's value programmaticly. -````jsx +````__react import { Form, Select, Input, Button } from 'antd'; const FormItem = Form.Item; const Option = Select.Option; diff --git a/components/form/demo/customized-form-controls.md b/components/form/demo/customized-form-controls.md index 723639848c..c243005435 100644 --- a/components/form/demo/customized-form-controls.md +++ b/components/form/demo/customized-form-controls.md @@ -18,7 +18,7 @@ Customized or third-party form controls can be used in Form, too. Controls must > * It has event `onChange` or an event which name is equal to the value of [`trigger`](http://ant.design/components/form/?locale=en-US#getFieldDecorator's-parameters). -````jsx +````__react import { Form, Input, Select, Button } from 'antd'; const FormItem = Form.Item; const Option = Select.Option; diff --git a/components/form/demo/dynamic-form-item.md b/components/form/demo/dynamic-form-item.md index bffcc6c263..0dde451147 100644 --- a/components/form/demo/dynamic-form-item.md +++ b/components/form/demo/dynamic-form-item.md @@ -13,7 +13,7 @@ title: Add or remove form items dynamically. -````jsx +````__react import { Form, Input, Icon, Button } from 'antd'; const FormItem = Form.Item; diff --git a/components/form/demo/form-in-modal.md b/components/form/demo/form-in-modal.md index bd8e36d6c5..c4097327e1 100644 --- a/components/form/demo/form-in-modal.md +++ b/components/form/demo/form-in-modal.md @@ -13,7 +13,7 @@ title: When user visit a page with a list of items, and want to create a new item. The page can popup a form in Modal, then let user fills in the form to create an item. -````jsx +````__react import { Button, Modal, Form, Input, Radio } from 'antd'; const FormItem = Form.Item; diff --git a/components/form/demo/global-state.md b/components/form/demo/global-state.md index 6b21852451..b5bb08e572 100644 --- a/components/form/demo/global-state.md +++ b/components/form/demo/global-state.md @@ -13,7 +13,7 @@ title: We can store form data into upper component or [Redux](https://github.com/reactjs/redux) or [dva](https://github.com/dvajs/dva) by using `onFieldsChange` and `mapPropsToFields`. -````jsx +````__react import { Form, Input } from 'antd'; const FormItem = Form.Item; diff --git a/components/form/demo/horizontal-login.md b/components/form/demo/horizontal-login.md index 82955cd9fe..518298d886 100644 --- a/components/form/demo/horizontal-login.md +++ b/components/form/demo/horizontal-login.md @@ -13,7 +13,7 @@ title: Horizontal login form is often used in navigation bar. -````jsx +````__react import { Form, Icon, Input, Button } from 'antd'; const FormItem = Form.Item; diff --git a/components/form/demo/layout.md b/components/form/demo/layout.md index 6c93b863a7..97ed953ef8 100644 --- a/components/form/demo/layout.md +++ b/components/form/demo/layout.md @@ -13,7 +13,7 @@ title: There are three layout for form: `horizontal`, `vertical`, `inline`. -````jsx +````__react import { Form, Input, Button, Radio } from 'antd'; const FormItem = Form.Item; diff --git a/components/form/demo/normal-login.md b/components/form/demo/normal-login.md index 1bd4765496..da0198049d 100644 --- a/components/form/demo/normal-login.md +++ b/components/form/demo/normal-login.md @@ -13,7 +13,7 @@ title: Normal login form which can contain more elements. -````jsx +````__react import { Form, Icon, Input, Button, Checkbox } from 'antd'; const FormItem = Form.Item; diff --git a/components/form/demo/register.md b/components/form/demo/register.md index 973c7ff1b4..419f140407 100644 --- a/components/form/demo/register.md +++ b/components/form/demo/register.md @@ -13,7 +13,7 @@ title: Fill in this form to create a new account for you. -````jsx +````__react import { Form, Input, Tooltip, Icon, Cascader, Select, Row, Col, Checkbox, Button } from 'antd'; const FormItem = Form.Item; const Option = Select.Option; diff --git a/components/form/demo/time-related-controls.md b/components/form/demo/time-related-controls.md index 0eb6b3f807..f103f7a275 100644 --- a/components/form/demo/time-related-controls.md +++ b/components/form/demo/time-related-controls.md @@ -13,7 +13,7 @@ title: After `antd@2.0`, the `value` of time-related components had been changed to `moment`. So, we need to pre-process those values. -````jsx +````__react import { Form, DatePicker, TimePicker, Button } from 'antd'; const FormItem = Form.Item; const MonthPicker = DatePicker.MonthPicker; diff --git a/components/form/demo/validate-other.md b/components/form/demo/validate-other.md index 6730e83489..cf758101fc 100644 --- a/components/form/demo/validate-other.md +++ b/components/form/demo/validate-other.md @@ -13,7 +13,7 @@ title: Demostration for validataion configuration for form controls which are not show in the above demos. -````jsx +````__react import { Form, Select, InputNumber, Switch, Radio, Slider, Button, Upload, Icon, diff --git a/components/form/demo/validate-static.md b/components/form/demo/validate-static.md index 540af4cb77..bc55cd241e 100644 --- a/components/form/demo/validate-static.md +++ b/components/form/demo/validate-static.md @@ -25,7 +25,7 @@ To set `hasFeedback` property to `true` enable to display feed icon of input con **PS**: Feed icon is just available for ``. -````jsx +````__react import { Form, Input, DatePicker, Col } from 'antd'; const FormItem = Form.Item; diff --git a/components/form/demo/without-form-create.md b/components/form/demo/without-form-create.md index 08fc7a0ec3..e67d9080ea 100644 --- a/components/form/demo/without-form-create.md +++ b/components/form/demo/without-form-create.md @@ -13,7 +13,7 @@ title: `Form.create` will collect and validate form data automatically. But if you don't need this feature or the default behaviour cannot satisfy you business, you can drop `Form.create` and handle form data manually. -````jsx +````__react import { Form, InputNumber } from 'antd'; const FormItem = Form.Item; diff --git a/components/grid/demo/basic.md b/components/grid/demo/basic.md index 9f23ce6bcc..b0e8055eb4 100644 --- a/components/grid/demo/basic.md +++ b/components/grid/demo/basic.md @@ -17,7 +17,7 @@ From the stack to the horizontal arrangement. You can create a basic grid system by using a single set of `Row` and` Col` grid assembly, all of the columns (Col) must be placed in `Row`. -````jsx +````__react import { Row, Col } from 'antd'; ReactDOM.render( diff --git a/components/grid/demo/flex-align.md b/components/grid/demo/flex-align.md index 483b3b5dee..9f19bffc2c 100644 --- a/components/grid/demo/flex-align.md +++ b/components/grid/demo/flex-align.md @@ -13,7 +13,7 @@ Flex 子元素垂直对齐。 Flex child elements vertically aligned. -````jsx +````__react import { Row, Col } from 'antd'; const DemoBox = props =>

{props.children}

; diff --git a/components/grid/demo/flex-order.md b/components/grid/demo/flex-order.md index fc375c9498..b220f1a5cb 100644 --- a/components/grid/demo/flex-order.md +++ b/components/grid/demo/flex-order.md @@ -13,7 +13,7 @@ title: To change the element sort by Flex layout order. -````jsx +````__react import { Row, Col } from 'antd'; ReactDOM.render( diff --git a/components/grid/demo/flex.md b/components/grid/demo/flex.md index 8f3b5330f5..6e3c92c606 100644 --- a/components/grid/demo/flex.md +++ b/components/grid/demo/flex.md @@ -15,7 +15,7 @@ Flex 布局基础。 Use `row-flex` define` flex` layout, its child elements depending on the value of the `start`,` center`, `end`,` space-between`, `space-around`, which are defined in its parent node layout mode. -````jsx +````__react import { Row, Col } from 'antd'; ReactDOM.render( diff --git a/components/grid/demo/gutter.md b/components/grid/demo/gutter.md index 4969fd2930..6345b5d4df 100644 --- a/components/grid/demo/gutter.md +++ b/components/grid/demo/gutter.md @@ -13,7 +13,7 @@ title: You can use the `gutter` property of `Row` as grid spacing, we recommend set it to `(16 + 8n) px`. -````jsx +````__react import { Row, Col } from 'antd'; ReactDOM.render( diff --git a/components/grid/demo/offset.md b/components/grid/demo/offset.md index f746608835..9bc00fa417 100644 --- a/components/grid/demo/offset.md +++ b/components/grid/demo/offset.md @@ -15,7 +15,7 @@ title: `Offset` can set the column to the right side. For example, using `offset = {4}` can set the element shifted to the right four columns width. -````jsx +````__react import { Row, Col } from 'antd'; ReactDOM.render( diff --git a/components/grid/demo/playground.md b/components/grid/demo/playground.md index d6a3dd7786..84f28044ca 100644 --- a/components/grid/demo/playground.md +++ b/components/grid/demo/playground.md @@ -13,7 +13,7 @@ title: A simple playground for column count and gutter. -````jsx +````__react import { Row, Col, Slider } from 'antd'; class App extends React.Component { diff --git a/components/grid/demo/reponsive-more.md b/components/grid/demo/reponsive-more.md index 4907c75c20..f5a80c1944 100644 --- a/components/grid/demo/reponsive-more.md +++ b/components/grid/demo/reponsive-more.md @@ -16,7 +16,7 @@ title: `Span` `pull` `push` `offset` `order` property can be embedded into `xs` `sm` `md` `lg` properties to use, where `xs = {6}` is equivalent to `xs = {{span: 6}}`. -````jsx +````__react import { Row, Col } from 'antd'; ReactDOM.render( diff --git a/components/grid/demo/reponsive.md b/components/grid/demo/reponsive.md index 2b008e54d8..e578d43753 100644 --- a/components/grid/demo/reponsive.md +++ b/components/grid/demo/reponsive.md @@ -13,7 +13,7 @@ title: Referring to the Bootstrap [responsive design] (http://getbootstrap.com/css/#grid-media-queries), here preset four dimensions: `xs` `sm` `md` `lg`. -````jsx +````__react import { Row, Col } from 'antd'; ReactDOM.render( diff --git a/components/grid/demo/sort.md b/components/grid/demo/sort.md index 8352bb2c8d..8ce2d168a6 100644 --- a/components/grid/demo/sort.md +++ b/components/grid/demo/sort.md @@ -15,7 +15,7 @@ title: By using `push` and` pull` class you can easily change column order. -````jsx +````__react import { Row, Col } from 'antd'; ReactDOM.render( diff --git a/components/icon/index.en-US.md b/components/icon/index.en-US.md index ae95b6252a..8d2ba5c79e 100644 --- a/components/icon/index.en-US.md +++ b/components/icon/index.en-US.md @@ -47,12 +47,14 @@ ReactDOM.render(, mountNode); ### Suggested Icons ```__react +import IconSet from 'site/theme/template/IconSet'; ReactDOM.render(, mountNode); ``` ### Other Icons ```__react +import IconSet from 'site/theme/template/IconSet'; ReactDOM.render(, mountNode); ``` diff --git a/components/icon/index.zh-CN.md b/components/icon/index.zh-CN.md index e72ee42677..535c1fb532 100644 --- a/components/icon/index.zh-CN.md +++ b/components/icon/index.zh-CN.md @@ -48,12 +48,14 @@ ReactDOM.render(, mountNode); ### 提示建议性图标 ```__react +import IconSet from 'site/theme/template/IconSet'; ReactDOM.render(, mountNode); ``` ### 网站通用图标 ```__react +import IconSet from 'site/theme/template/IconSet'; ReactDOM.render(, mountNode); ``` diff --git a/components/input-number/demo/basic.md b/components/input-number/demo/basic.md index bafc92bcd1..25687d828c 100644 --- a/components/input-number/demo/basic.md +++ b/components/input-number/demo/basic.md @@ -13,7 +13,7 @@ title: Numeric-only input box. -````jsx +````__react import { InputNumber } from 'antd'; function onChange(value) { diff --git a/components/input-number/demo/digit.md b/components/input-number/demo/digit.md index fd2ea32eb0..6339023b0a 100644 --- a/components/input-number/demo/digit.md +++ b/components/input-number/demo/digit.md @@ -13,7 +13,7 @@ title: A numeric-only input box whose values can be increased or decreased using a decimal step. The number of decimals (also known as precision) is determined by the step prop. -````jsx +````__react import { InputNumber } from 'antd'; function onChange(value) { diff --git a/components/input-number/demo/disabled.md b/components/input-number/demo/disabled.md index b1012df468..b8a564a214 100644 --- a/components/input-number/demo/disabled.md +++ b/components/input-number/demo/disabled.md @@ -13,7 +13,7 @@ title: Click the button to toggle between available and disabled states. -````jsx +````__react import { InputNumber, Button } from 'antd'; const Test = React.createClass({ diff --git a/components/input-number/demo/size.md b/components/input-number/demo/size.md index 0b2f5c3504..8c43e91acf 100644 --- a/components/input-number/demo/size.md +++ b/components/input-number/demo/size.md @@ -13,7 +13,7 @@ title: There are three sizes available to a numeric input box. By default, the size is `28px`. The two additional sizes are `large` and `small` which means `32px` and `22px`, respectively. -````jsx +````__react import { InputNumber } from 'antd'; function onChange(value) { diff --git a/components/input/demo/addon.md b/components/input/demo/addon.md index c1ce8b5082..f8de6344b6 100644 --- a/components/input/demo/addon.md +++ b/components/input/demo/addon.md @@ -13,7 +13,7 @@ title: Using pre & post tabs example. -````jsx +````__react import { Input, Select, Icon } from 'antd'; const Option = Select.Option; diff --git a/components/input/demo/autosize-textarea.md b/components/input/demo/autosize-textarea.md index fb04ab8066..5d03aa7592 100644 --- a/components/input/demo/autosize-textarea.md +++ b/components/input/demo/autosize-textarea.md @@ -15,7 +15,7 @@ title: An options object can be provided to `autosize` to specify the minimum and maximum number of lines the textarea will automatically adjust. -````jsx +````__react import { Input } from 'antd'; ReactDOM.render( diff --git a/components/input/demo/basic.md b/components/input/demo/basic.md index 14f5cb8782..cc08dd260e 100644 --- a/components/input/demo/basic.md +++ b/components/input/demo/basic.md @@ -13,7 +13,7 @@ title: Basic usage example -````jsx +````__react import { Input } from 'antd'; ReactDOM.render(, mountNode); diff --git a/components/input/demo/group.md b/components/input/demo/group.md index c420411bd0..07d104fb9a 100644 --- a/components/input/demo/group.md +++ b/components/input/demo/group.md @@ -17,7 +17,7 @@ Input.Group example Note: You don't need `Col` to control the width in the `compact` mode. -````jsx +````__react import { Input, Col, Select, InputNumber, DatePicker } from 'antd'; const InputGroup = Input.Group; const Option = Select.Option; diff --git a/components/input/demo/presuffix.md b/components/input/demo/presuffix.md index 2b9b5dc05e..6f32f392f3 100644 --- a/components/input/demo/presuffix.md +++ b/components/input/demo/presuffix.md @@ -13,7 +13,7 @@ title: Add prefix or suffix icons inside input. -````jsx +````__react import { Input, Icon } from 'antd'; class App extends React.Component { diff --git a/components/input/demo/search-input.md b/components/input/demo/search-input.md index e59e99d3c4..6198d3fa0c 100644 --- a/components/input/demo/search-input.md +++ b/components/input/demo/search-input.md @@ -13,7 +13,7 @@ title: Example of creating a search box by grouping a standard input with a search button, added in `2.5.0`. -````jsx +````__react import { Input } from 'antd'; const Search = Input.Search; diff --git a/components/input/demo/size.md b/components/input/demo/size.md index 7781a1aaaa..451a197d59 100644 --- a/components/input/demo/size.md +++ b/components/input/demo/size.md @@ -17,7 +17,7 @@ There are three sizes of an Input box: `large` (32px)、`default` (28px) and `sm Note: Inside of forms, only the large size is used. -````jsx +````__react import { Input } from 'antd'; ReactDOM.render( diff --git a/components/input/demo/textarea.md b/components/input/demo/textarea.md index 6b8aa5bf3d..6c66882d38 100644 --- a/components/input/demo/textarea.md +++ b/components/input/demo/textarea.md @@ -13,7 +13,7 @@ title: For multi-line user input cases, an input whose `type` prop has the value of `"textarea"` can be used. -````jsx +````__react import { Input } from 'antd'; ReactDOM.render(, mountNode); diff --git a/components/input/demo/tooltip.md b/components/input/demo/tooltip.md index 3c65c61af3..00e2cfdc66 100644 --- a/components/input/demo/tooltip.md +++ b/components/input/demo/tooltip.md @@ -13,7 +13,7 @@ title: You can use the Input in conjunction with [Tooltip](/components/tooltip) component to create a Numeric Input, which can provide a good experience for extra-long content display. -````jsx +````__react import { Input, Tooltip } from 'antd'; function formatNumber(value) { diff --git a/components/layout/demo/basic.md b/components/layout/demo/basic.md index 3915f225f7..d51a100123 100644 --- a/components/layout/demo/basic.md +++ b/components/layout/demo/basic.md @@ -13,7 +13,7 @@ title: Classic page layouts. -````jsx +````__react import { Layout } from 'antd'; const { Header, Footer, Sider, Content } = Layout; diff --git a/components/layout/demo/custom-trigger.md b/components/layout/demo/custom-trigger.md index f30a6b3a49..28403cf2b7 100644 --- a/components/layout/demo/custom-trigger.md +++ b/components/layout/demo/custom-trigger.md @@ -13,7 +13,7 @@ title: If you want to use a customized trigger, you can hide the default one by setting `trigger={null}`. -````jsx +````__react import { Layout, Menu, Icon } from 'antd'; const { Header, Sider, Content } = Layout; diff --git a/components/layout/demo/side.md b/components/layout/demo/side.md index f5415ca8a4..e524a4882c 100644 --- a/components/layout/demo/side.md +++ b/components/layout/demo/side.md @@ -13,7 +13,7 @@ title: Be used in the two-columns layout. -````jsx +````__react import { Layout, Menu, Breadcrumb, Icon } from 'antd'; const { Header, Content, Footer, Sider } = Layout; diff --git a/components/layout/demo/top-side.md b/components/layout/demo/top-side.md index a9196c5fd2..d36293d2c8 100644 --- a/components/layout/demo/top-side.md +++ b/components/layout/demo/top-side.md @@ -13,7 +13,7 @@ title: Be used in the page which has both the top navigation and the sidebar. -````jsx +````__react import { Layout, Menu, Breadcrumb, Icon } from 'antd'; const { SubMenu } = Menu; const { Header, Content, Footer, Sider } = Layout; diff --git a/components/layout/demo/top.md b/components/layout/demo/top.md index 0e6d3eb388..06eba6dcef 100644 --- a/components/layout/demo/top.md +++ b/components/layout/demo/top.md @@ -13,7 +13,7 @@ title: The most basic "header-content-footer" layout. -````jsx +````__react import { Layout, Menu, Breadcrumb } from 'antd'; const { Header, Content, Footer } = Layout; diff --git a/components/locale-provider/demo/all.md b/components/locale-provider/demo/all.md index 844668f288..107d1e888d 100644 --- a/components/locale-provider/demo/all.md +++ b/components/locale-provider/demo/all.md @@ -13,7 +13,7 @@ title: Components which need localization support are listed here, you can toggle the language in the demo. -````jsx +````__react import { LocaleProvider, Pagination, DatePicker, TimePicker, Calendar, Popconfirm, Table, Modal, Button, Select, Transfer, Radio } from 'antd'; import enUS from 'antd/lib/locale-provider/en_US'; diff --git a/components/locale-provider/demo/basic.md b/components/locale-provider/demo/basic.md index 9367669c64..07526cb79c 100644 --- a/components/locale-provider/demo/basic.md +++ b/components/locale-provider/demo/basic.md @@ -13,7 +13,7 @@ title: Wrap your app with `LocaleProvider`, and apply the corresponding language package. -````jsx +````__react import { Pagination, LocaleProvider } from 'antd'; import enUS from 'antd/lib/locale-provider/en_US'; diff --git a/components/mention/demo/async.md b/components/mention/demo/async.md index dc0dc465e5..4e1f11cbd1 100644 --- a/components/mention/demo/async.md +++ b/components/mention/demo/async.md @@ -13,7 +13,7 @@ title: async -````jsx +````__react import { Mention } from 'antd'; const users = ['afc163', 'benjycui', 'yiminghe', 'jljsj33', 'dqaria', 'RaoHai']; diff --git a/components/mention/demo/avatar.md b/components/mention/demo/avatar.md index b9d2978a63..0760738d88 100644 --- a/components/mention/demo/avatar.md +++ b/components/mention/demo/avatar.md @@ -15,7 +15,7 @@ title: Customize suggestions -````jsx +````__react import { Mention } from 'antd'; const Nav = Mention.Nav; diff --git a/components/mention/demo/basic.md b/components/mention/demo/basic.md index 0fc1d17a89..c6284b968c 100644 --- a/components/mention/demo/basic.md +++ b/components/mention/demo/basic.md @@ -13,7 +13,7 @@ title: Basic usage. -````jsx +````__react import { Mention } from 'antd'; const { toString, toEditorState } = Mention; diff --git a/components/mention/demo/controllder-simple.md b/components/mention/demo/controllder-simple.md index 721b04eaa9..5f0b585ee0 100644 --- a/components/mention/demo/controllder-simple.md +++ b/components/mention/demo/controllder-simple.md @@ -13,7 +13,7 @@ title: Controlled mode. -````jsx +````__react import { Mention } from 'antd'; const { toEditorState } = Mention; diff --git a/components/mention/demo/controlled.md b/components/mention/demo/controlled.md index dbd914cce1..084fa5fd30 100644 --- a/components/mention/demo/controlled.md +++ b/components/mention/demo/controlled.md @@ -13,7 +13,7 @@ title: Controlled mode, for example, to work with `Form` . -````jsx +````__react import { Mention, Form, Button } from 'antd'; const { toEditorState, getMentions } = Mention; const FormItem = Form.Item; diff --git a/components/mention/demo/custom-tag.md b/components/mention/demo/custom-tag.md index b80f3148dc..8ddaef27f2 100644 --- a/components/mention/demo/custom-tag.md +++ b/components/mention/demo/custom-tag.md @@ -15,7 +15,7 @@ title: Customize suggestions. -````jsx +````__react import { Mention } from 'antd'; const Nav = Mention.Nav; diff --git a/components/mention/demo/multilines.md b/components/mention/demo/multilines.md index 81342ec9cd..f773f0e615 100644 --- a/components/mention/demo/multilines.md +++ b/components/mention/demo/multilines.md @@ -13,7 +13,7 @@ title: Multi lines mode. -````jsx +````__react import { Mention } from 'antd'; const { toString } = Mention; diff --git a/components/mention/demo/popupContainer.md b/components/mention/demo/popupContainer.md index b69fe9e531..fd0fe21934 100644 --- a/components/mention/demo/popupContainer.md +++ b/components/mention/demo/popupContainer.md @@ -13,7 +13,7 @@ title: To set the container of the suggestion. -````jsx +````__react import { Mention, Popover, Button } from 'antd'; const { toString, toEditorState } = Mention; diff --git a/components/menu/demo/horizontal.md b/components/menu/demo/horizontal.md index b1d5c76853..eb861fdef9 100755 --- a/components/menu/demo/horizontal.md +++ b/components/menu/demo/horizontal.md @@ -13,7 +13,7 @@ title: Horizontal top navigation menu. -````jsx +````__react import { Menu, Icon } from 'antd'; const SubMenu = Menu.SubMenu; const MenuItemGroup = Menu.ItemGroup; diff --git a/components/menu/demo/sider-current.md b/components/menu/demo/sider-current.md index dc676add39..761b59eada 100755 --- a/components/menu/demo/sider-current.md +++ b/components/menu/demo/sider-current.md @@ -17,7 +17,7 @@ Click the menu and you will see that all the other menus gets collapsed to keep > This demo is for antd@2.0+. -````jsx +````__react import { Menu, Icon } from 'antd'; const SubMenu = Menu.SubMenu; diff --git a/components/menu/demo/sider.md b/components/menu/demo/sider.md index 963d8fe0c8..414f15c99e 100755 --- a/components/menu/demo/sider.md +++ b/components/menu/demo/sider.md @@ -13,7 +13,7 @@ title: Vertical menu with inline submenus. -````jsx +````__react import { Menu, Icon } from 'antd'; const SubMenu = Menu.SubMenu; const MenuItemGroup = Menu.ItemGroup; diff --git a/components/menu/demo/switch-mode.md b/components/menu/demo/switch-mode.md index 815e023fff..2f1661531b 100755 --- a/components/menu/demo/switch-mode.md +++ b/components/menu/demo/switch-mode.md @@ -13,7 +13,7 @@ title: Show the dynamic switching mode (between 'inline' and 'vertical'). -````jsx +````__react import { Menu, Icon, Switch } from 'antd'; const SubMenu = Menu.SubMenu; const MenuItemGroup = Menu.ItemGroup; diff --git a/components/menu/demo/theme.md b/components/menu/demo/theme.md index 54dfb1877d..ccaf7b6abd 100755 --- a/components/menu/demo/theme.md +++ b/components/menu/demo/theme.md @@ -13,7 +13,7 @@ title: There are two built-in themes: 'light' and 'dark'. The default value is 'light'. -````jsx +````__react import { Menu, Icon, Switch } from 'antd'; const SubMenu = Menu.SubMenu; diff --git a/components/menu/demo/vertical.md b/components/menu/demo/vertical.md index 59990ee30b..e3f7372799 100755 --- a/components/menu/demo/vertical.md +++ b/components/menu/demo/vertical.md @@ -13,7 +13,7 @@ title: Submenus open as pop-ups. -````jsx +````__react import { Menu, Icon } from 'antd'; const SubMenu = Menu.SubMenu; const MenuItemGroup = Menu.ItemGroup; diff --git a/components/message/demo/duration.md b/components/message/demo/duration.md index af1b565207..93014ed238 100644 --- a/components/message/demo/duration.md +++ b/components/message/demo/duration.md @@ -13,7 +13,7 @@ title: Customize message display duration from default `1.5s` to `10s`. -````jsx +````__react import { message, Button } from 'antd'; const success = function () { diff --git a/components/message/demo/info.md b/components/message/demo/info.md index 918436284d..371ec17da2 100644 --- a/components/message/demo/info.md +++ b/components/message/demo/info.md @@ -13,7 +13,7 @@ title: Normal messages as feedbacks. -````jsx +````__react import { message, Button } from 'antd'; const info = function () { diff --git a/components/message/demo/loading.md b/components/message/demo/loading.md index e9ec40518c..b0df928568 100644 --- a/components/message/demo/loading.md +++ b/components/message/demo/loading.md @@ -13,7 +13,7 @@ title: Display a global loading indicator, which is dismissed by itself asynchronously. -````jsx +````__react import { message, Button } from 'antd'; const success = () => { diff --git a/components/message/demo/other.md b/components/message/demo/other.md index c5e07f9251..788687a9ca 100644 --- a/components/message/demo/other.md +++ b/components/message/demo/other.md @@ -13,7 +13,7 @@ title: Messages of success, error and warning types. -````jsx +````__react import { message, Button } from 'antd'; const success = function () { diff --git a/components/modal/demo/async.md b/components/modal/demo/async.md index 8532b1f18a..1e3739a483 100644 --- a/components/modal/demo/async.md +++ b/components/modal/demo/async.md @@ -14,7 +14,7 @@ title: Asynchronously close a modal dialog when a user clicked OK button, for example, you can use this pattern when you submit a form. -````jsx +````__react import { Modal, Button } from 'antd'; const Test = React.createClass({ diff --git a/components/modal/demo/basic.md b/components/modal/demo/basic.md index c8d44155f0..3f047d36a0 100644 --- a/components/modal/demo/basic.md +++ b/components/modal/demo/basic.md @@ -13,7 +13,7 @@ title: Basic modal dialog. -````jsx +````__react import { Modal, Button } from 'antd'; const App = React.createClass({ diff --git a/components/modal/demo/confirm-promise.md b/components/modal/demo/confirm-promise.md index e923790af7..d828447ecf 100644 --- a/components/modal/demo/confirm-promise.md +++ b/components/modal/demo/confirm-promise.md @@ -14,7 +14,7 @@ title: To use `confirm()` to popup confirmation modal dialog. Let onCancel/onOk function return a promise object to delay closing the dialog. -````jsx +````__react import { Modal, Button } from 'antd'; const confirm = Modal.confirm; diff --git a/components/modal/demo/confirm.md b/components/modal/demo/confirm.md index da0f45bac6..3b009f5da4 100644 --- a/components/modal/demo/confirm.md +++ b/components/modal/demo/confirm.md @@ -13,7 +13,7 @@ title: To use `confirm()` to popup a confirmation modal dialog. -````jsx +````__react import { Modal, Button } from 'antd'; const confirm = Modal.confirm; diff --git a/components/modal/demo/footer.md b/components/modal/demo/footer.md index 4e2944a17c..03b8a23281 100644 --- a/components/modal/demo/footer.md +++ b/components/modal/demo/footer.md @@ -15,7 +15,7 @@ A more complex example, as illustrated in this example, we define a customized f the dialog will change to loading state after clicking submit button , when the loading is over, the modal dialog will be closed. -````jsx +````__react import { Modal, Button } from 'antd'; const Test = React.createClass({ diff --git a/components/modal/demo/info.md b/components/modal/demo/info.md index 6b6719ffa1..a91d4eb823 100644 --- a/components/modal/demo/info.md +++ b/components/modal/demo/info.md @@ -13,7 +13,7 @@ title: In the various types of information modal dialog, only one button to close dialog is provided. -````jsx +````__react import { Modal, Button } from 'antd'; function info() { diff --git a/components/modal/demo/locale.md b/components/modal/demo/locale.md index 2c4b5ae4d9..80331b2343 100644 --- a/components/modal/demo/locale.md +++ b/components/modal/demo/locale.md @@ -13,7 +13,7 @@ title: To customize the text of the buttons, you need to set `okText` and `cancelText` props. -````jsx +````__react import { Modal, Button } from 'antd'; const LocalizedModal = React.createClass({ diff --git a/components/modal/demo/manual.md b/components/modal/demo/manual.md index 3f09e47861..0b9201415a 100644 --- a/components/modal/demo/manual.md +++ b/components/modal/demo/manual.md @@ -14,7 +14,7 @@ title: Manually destroying a modal. -````jsx +````__react import { Modal, Button } from 'antd'; function success() { diff --git a/components/modal/demo/position.md b/components/modal/demo/position.md index d27ab08539..80f5421945 100644 --- a/components/modal/demo/position.md +++ b/components/modal/demo/position.md @@ -14,7 +14,7 @@ title: After release `1.0`, Modal's `align` prop was removed. You can use `style.top` or other styles to set position of modal dialog. -````jsx +````__react import { Modal, Button } from 'antd'; const App = React.createClass({ diff --git a/components/notification/demo/basic.md b/components/notification/demo/basic.md index a631cffcc6..eaa42613af 100644 --- a/components/notification/demo/basic.md +++ b/components/notification/demo/basic.md @@ -13,7 +13,7 @@ title: The simplest usage that close the notification box after 4.5s. -````jsx +````__react import { Button, notification } from 'antd'; const openNotification = () => { diff --git a/components/notification/demo/custom-icon.md b/components/notification/demo/custom-icon.md index 6faf1526d2..5a882c6cc2 100644 --- a/components/notification/demo/custom-icon.md +++ b/components/notification/demo/custom-icon.md @@ -13,7 +13,7 @@ title: The icon can be customized to any react node. -````jsx +````__react import { Button, notification, Icon } from 'antd'; const openNotification = () => { diff --git a/components/notification/demo/duration.md b/components/notification/demo/duration.md index 41f9c878fa..a90000efff 100644 --- a/components/notification/demo/duration.md +++ b/components/notification/demo/duration.md @@ -15,7 +15,7 @@ title: the notification closes automatically. If not specified, default value is 4.5 seconds. If you set the value to 0, the notification box will never close automatically. -````jsx +````__react import { Button, notification } from 'antd'; const openNotification = () => { diff --git a/components/notification/demo/with-btn.md b/components/notification/demo/with-btn.md index 2fe1ba73f5..b12b9199e1 100644 --- a/components/notification/demo/with-btn.md +++ b/components/notification/demo/with-btn.md @@ -13,7 +13,7 @@ title: To customize the style or font of the close button. -````jsx +````__react import { Button, notification } from 'antd'; const close = () => { diff --git a/components/notification/demo/with-icon.md b/components/notification/demo/with-icon.md index 9a7d7d0468..caae68c7d7 100644 --- a/components/notification/demo/with-icon.md +++ b/components/notification/demo/with-icon.md @@ -13,7 +13,7 @@ title: A notification box with a icon at the left side. -````jsx +````__react import { Button, notification } from 'antd'; const openNotificationWithIcon = (type) => { diff --git a/components/pagination/demo/basic.md b/components/pagination/demo/basic.md index f79eb3c9df..5e92f08c0e 100644 --- a/components/pagination/demo/basic.md +++ b/components/pagination/demo/basic.md @@ -13,7 +13,7 @@ title: Basic pagination. -````jsx +````__react import { Pagination } from 'antd'; ReactDOM.render(, mountNode); diff --git a/components/pagination/demo/changer.md b/components/pagination/demo/changer.md index 5662ef4028..4d03cc8c5d 100644 --- a/components/pagination/demo/changer.md +++ b/components/pagination/demo/changer.md @@ -13,7 +13,7 @@ title: Change `pageSize`. -````jsx +````__react import { Pagination } from 'antd'; function onShowSizeChange(current, pageSize) { diff --git a/components/pagination/demo/controlled.md b/components/pagination/demo/controlled.md index 4cb378b68e..6684e9df54 100644 --- a/components/pagination/demo/controlled.md +++ b/components/pagination/demo/controlled.md @@ -13,7 +13,7 @@ title: Controlled page number. -````jsx +````__react import { Pagination } from 'antd'; const Container = React.createClass({ diff --git a/components/pagination/demo/jump.md b/components/pagination/demo/jump.md index 83042d3090..0ce16c1e87 100644 --- a/components/pagination/demo/jump.md +++ b/components/pagination/demo/jump.md @@ -13,7 +13,7 @@ title: Jump to a page directly. -````jsx +````__react import { Pagination } from 'antd'; function onChange(pageNumber) { diff --git a/components/pagination/demo/mini.md b/components/pagination/demo/mini.md index 1bd2344fab..34557b5fc4 100644 --- a/components/pagination/demo/mini.md +++ b/components/pagination/demo/mini.md @@ -13,7 +13,7 @@ title: Mini size pagination. -````jsx +````__react import { Pagination } from 'antd'; function showTotal(total) { diff --git a/components/pagination/demo/more.md b/components/pagination/demo/more.md index 5d4d38a301..ceea2c6b2c 100644 --- a/components/pagination/demo/more.md +++ b/components/pagination/demo/more.md @@ -13,7 +13,7 @@ title: More pages. -````jsx +````__react import { Pagination } from 'antd'; ReactDOM.render( diff --git a/components/pagination/demo/simple.md b/components/pagination/demo/simple.md index 290fd7efb3..27d2e0d86a 100644 --- a/components/pagination/demo/simple.md +++ b/components/pagination/demo/simple.md @@ -13,7 +13,7 @@ title: Simple mode. -````jsx +````__react import { Pagination } from 'antd'; ReactDOM.render( diff --git a/components/pagination/demo/total.md b/components/pagination/demo/total.md index 3cce6e3dd4..8eb5868fb6 100644 --- a/components/pagination/demo/total.md +++ b/components/pagination/demo/total.md @@ -13,7 +13,7 @@ title: You can show the total number of data by setting `showTotal`. -````jsx +````__react import { Pagination } from 'antd'; ReactDOM.render( diff --git a/components/popconfirm/demo/basic.md b/components/popconfirm/demo/basic.md index c4f90d1cd0..060de982b9 100755 --- a/components/popconfirm/demo/basic.md +++ b/components/popconfirm/demo/basic.md @@ -13,7 +13,7 @@ title: The basic example. -````jsx +````__react import { Popconfirm, message } from 'antd'; function confirm() { diff --git a/components/popconfirm/demo/dynamic-trigger.md b/components/popconfirm/demo/dynamic-trigger.md index 0b93476dfc..90b3ce4c27 100755 --- a/components/popconfirm/demo/dynamic-trigger.md +++ b/components/popconfirm/demo/dynamic-trigger.md @@ -13,7 +13,7 @@ title: Make it pop up under some conditions. -````jsx +````__react import { Popconfirm, Switch, message } from 'antd'; const App = React.createClass({ diff --git a/components/popconfirm/demo/locale.md b/components/popconfirm/demo/locale.md index afab4c358a..9137dbff2d 100755 --- a/components/popconfirm/demo/locale.md +++ b/components/popconfirm/demo/locale.md @@ -13,7 +13,7 @@ title: Set `okText` and `cancelText` props to customise the button's labels. -````jsx +````__react import { Popconfirm } from 'antd'; ReactDOM.render( diff --git a/components/popconfirm/demo/placement.md b/components/popconfirm/demo/placement.md index 1f796fde08..f897c2bbda 100755 --- a/components/popconfirm/demo/placement.md +++ b/components/popconfirm/demo/placement.md @@ -13,7 +13,7 @@ title: There are 12 `placement` options available. Use `arrowPointAtCenter` if you want arrow point at the center of target. -````jsx +````__react import { Popconfirm, message, Button } from 'antd'; const text = 'Are you sure delete this task?'; diff --git a/components/popover/demo/arrow-point-at-center.md b/components/popover/demo/arrow-point-at-center.md index 80df7d2c4e..16f941284e 100644 --- a/components/popover/demo/arrow-point-at-center.md +++ b/components/popover/demo/arrow-point-at-center.md @@ -13,7 +13,7 @@ title: The arrow points to the center of the target element, which set `arrowPointAtCenter`. -````jsx +````__react import { Popover, Button } from 'antd'; const text = Title; diff --git a/components/popover/demo/basic.md b/components/popover/demo/basic.md index 4b76e29bec..35ad9db899 100755 --- a/components/popover/demo/basic.md +++ b/components/popover/demo/basic.md @@ -13,7 +13,7 @@ title: The most basic example. The size of the floating layer depends on the contents region. -````jsx +````__react import { Popover, Button } from 'antd'; const content = ( diff --git a/components/popover/demo/control.md b/components/popover/demo/control.md index 64f6429828..08dedd7260 100755 --- a/components/popover/demo/control.md +++ b/components/popover/demo/control.md @@ -13,7 +13,7 @@ title: Use `visible` prop to control the display of the card. -````jsx +````__react import { Popover, Button } from 'antd'; const App = React.createClass({ diff --git a/components/popover/demo/placement.md b/components/popover/demo/placement.md index b7b810b81a..a123bddd3a 100755 --- a/components/popover/demo/placement.md +++ b/components/popover/demo/placement.md @@ -13,7 +13,7 @@ title: There are 12 `placement` options available. -````jsx +````__react import { Popover, Button } from 'antd'; const text = Title; diff --git a/components/popover/demo/triggerType.md b/components/popover/demo/triggerType.md index 0c07f86478..71b59da77b 100755 --- a/components/popover/demo/triggerType.md +++ b/components/popover/demo/triggerType.md @@ -13,7 +13,7 @@ title: Mouse to click, focus and move in. -````jsx +````__react import { Popover, Button } from 'antd'; const content = ( diff --git a/components/progress/demo/circle-dynamic.md b/components/progress/demo/circle-dynamic.md index 497db063a2..c627f2dbba 100644 --- a/components/progress/demo/circle-dynamic.md +++ b/components/progress/demo/circle-dynamic.md @@ -13,7 +13,7 @@ title: A dynamic progress bar is better. -````jsx +````__react import { Progress, Button } from 'antd'; const ButtonGroup = Button.Group; diff --git a/components/progress/demo/circle-mini.md b/components/progress/demo/circle-mini.md index 7350fd7346..7b95cae5f4 100644 --- a/components/progress/demo/circle-mini.md +++ b/components/progress/demo/circle-mini.md @@ -13,7 +13,7 @@ title: A smaller circular progress bar. -````jsx +````__react import { Progress } from 'antd'; ReactDOM.render( diff --git a/components/progress/demo/circle.md b/components/progress/demo/circle.md index 7df3b88053..67312ed380 100644 --- a/components/progress/demo/circle.md +++ b/components/progress/demo/circle.md @@ -13,7 +13,7 @@ title: A circular progress bar. -````jsx +````__react import { Progress } from 'antd'; ReactDOM.render( diff --git a/components/progress/demo/dynamic.md b/components/progress/demo/dynamic.md index 5aa3996d73..dce6fba981 100644 --- a/components/progress/demo/dynamic.md +++ b/components/progress/demo/dynamic.md @@ -13,7 +13,7 @@ title: A dynamic progress bar is better. -````jsx +````__react import { Progress, Button } from 'antd'; const ButtonGroup = Button.Group; diff --git a/components/progress/demo/format.md b/components/progress/demo/format.md index 5d92a56e72..6a6c702f7e 100644 --- a/components/progress/demo/format.md +++ b/components/progress/demo/format.md @@ -13,7 +13,7 @@ title: You can custom text format by setting `format`. -````jsx +````__react import { Progress } from 'antd'; ReactDOM.render( diff --git a/components/progress/demo/line-mini.md b/components/progress/demo/line-mini.md index 3f929a71a1..d9c64a0cf3 100644 --- a/components/progress/demo/line-mini.md +++ b/components/progress/demo/line-mini.md @@ -13,7 +13,7 @@ title: Appropriate for a narrow area. -````jsx +````__react import { Progress } from 'antd'; ReactDOM.render( diff --git a/components/progress/demo/line.md b/components/progress/demo/line.md index 1a64468433..dc54e0250f 100644 --- a/components/progress/demo/line.md +++ b/components/progress/demo/line.md @@ -13,7 +13,7 @@ title: A standard progress bar. -````jsx +````__react import { Progress } from 'antd'; ReactDOM.render( diff --git a/components/radio/demo/basic.md b/components/radio/demo/basic.md index ac6753cc1d..92f92bd2b8 100644 --- a/components/radio/demo/basic.md +++ b/components/radio/demo/basic.md @@ -13,7 +13,7 @@ title: The simplest use. -```jsx +```__react import { Radio } from 'antd'; ReactDOM.render(Radio, mountNode); diff --git a/components/radio/demo/disable.md b/components/radio/demo/disable.md index 990f341588..5aff58fb56 100644 --- a/components/radio/demo/disable.md +++ b/components/radio/demo/disable.md @@ -13,7 +13,7 @@ Radio 不可用。 Radio unavailable. -```jsx +```__react import { Radio, Button } from 'antd'; const App = React.createClass({ diff --git a/components/radio/demo/radiobutton.md b/components/radio/demo/radiobutton.md index ee33372666..bd4ebcbc9a 100644 --- a/components/radio/demo/radiobutton.md +++ b/components/radio/demo/radiobutton.md @@ -13,7 +13,7 @@ title: The combination of radio button style. -```jsx +```__react import { Radio } from 'antd'; const RadioButton = Radio.Button; const RadioGroup = Radio.Group; diff --git a/components/radio/demo/radiogroup-more.md b/components/radio/demo/radiogroup-more.md index befcac97b4..44441a225b 100644 --- a/components/radio/demo/radiogroup-more.md +++ b/components/radio/demo/radiogroup-more.md @@ -13,7 +13,7 @@ title: Vertical RadioGroup, with more radios. -```jsx +```__react import { Radio, Input } from 'antd'; const RadioGroup = Radio.Group; diff --git a/components/radio/demo/radiogroup.md b/components/radio/demo/radiogroup.md index 5b8a7457ab..251fc70ac3 100644 --- a/components/radio/demo/radiogroup.md +++ b/components/radio/demo/radiogroup.md @@ -13,7 +13,7 @@ title: A set of mutually exclusive Radio with the use of -```jsx +```__react import { Radio } from 'antd'; const RadioGroup = Radio.Group; diff --git a/components/radio/demo/size.md b/components/radio/demo/size.md index 860c72d68b..94f780f551 100644 --- a/components/radio/demo/size.md +++ b/components/radio/demo/size.md @@ -13,7 +13,7 @@ title: There are three sizes available: large, medium, and small. It can coordinate with input box. -```jsx +```__react import { Radio } from 'antd'; const RadioButton = Radio.Button; const RadioGroup = Radio.Group; diff --git a/components/rate/demo/basic.md b/components/rate/demo/basic.md index 7b41ee340d..73f415dd45 100644 --- a/components/rate/demo/basic.md +++ b/components/rate/demo/basic.md @@ -13,7 +13,7 @@ title: The simplest usage. -````jsx +````__react import { Rate } from 'antd'; ReactDOM.render(, mountNode); diff --git a/components/rate/demo/disabled.md b/components/rate/demo/disabled.md index bc060d0cf8..936cc17dc2 100644 --- a/components/rate/demo/disabled.md +++ b/components/rate/demo/disabled.md @@ -13,7 +13,7 @@ title: Read only, can't use mouse to interact. -````jsx +````__react import { Rate } from 'antd'; ReactDOM.render(, mountNode); diff --git a/components/rate/demo/half.md b/components/rate/demo/half.md index b3b1ea528a..c3eaffbb90 100644 --- a/components/rate/demo/half.md +++ b/components/rate/demo/half.md @@ -13,7 +13,7 @@ title: Support select half star. -````jsx +````__react import { Rate } from 'antd'; ReactDOM.render(, mountNode); diff --git a/components/rate/demo/text.md b/components/rate/demo/text.md index 2fab4d13b3..c7318ced03 100644 --- a/components/rate/demo/text.md +++ b/components/rate/demo/text.md @@ -13,7 +13,7 @@ title: Add copywriting in rate components. -````jsx +````__react import { Rate } from 'antd'; const Rater = React.createClass({ diff --git a/components/select/demo/automatic-tokenization.md b/components/select/demo/automatic-tokenization.md index a9d6e80dd3..081eefe376 100644 --- a/components/select/demo/automatic-tokenization.md +++ b/components/select/demo/automatic-tokenization.md @@ -13,7 +13,7 @@ title: Try to copy `Lucy,Jack` to the input. Only available in tags and multiple mode. -````jsx +````__react import { Select } from 'antd'; const Option = Select.Option; diff --git a/components/select/demo/basic.md b/components/select/demo/basic.md index cae886a1f5..0abf97b8dc 100644 --- a/components/select/demo/basic.md +++ b/components/select/demo/basic.md @@ -13,7 +13,7 @@ title: Basic Usage. -````jsx +````__react import { Select } from 'antd'; const Option = Select.Option; diff --git a/components/select/demo/combobox.md b/components/select/demo/combobox.md index 9573faf4e4..31bca0bd82 100644 --- a/components/select/demo/combobox.md +++ b/components/select/demo/combobox.md @@ -18,7 +18,7 @@ Automatic completion of select input. Using the [AutoComplete](/components/auto-complete/) component is strongly recommended instead as it is more flexible and capable. -````jsx +````__react import { Select } from 'antd'; const Option = Select.Option; diff --git a/components/select/demo/coordinate.md b/components/select/demo/coordinate.md index 4285426eb3..73fd040072 100644 --- a/components/select/demo/coordinate.md +++ b/components/select/demo/coordinate.md @@ -18,7 +18,7 @@ Coordinating the selection of provinces and cities is a common use case and demo Using the [Cascader](/components/cascader) component is strongly recommended instead as it is more flexible and capable. -````jsx +````__react import { Select } from 'antd'; const Option = Select.Option; diff --git a/components/select/demo/label-in-value.md b/components/select/demo/label-in-value.md index 8abd9ef540..3bab11e183 100644 --- a/components/select/demo/label-in-value.md +++ b/components/select/demo/label-in-value.md @@ -17,7 +17,7 @@ As a default behavior, the onChange callback can only get the value of the selec The label of the selected item will be packed as an object for passing to the onChange callback. -````jsx +````__react import { Select } from 'antd'; const Option = Select.Option; diff --git a/components/select/demo/multiple.md b/components/select/demo/multiple.md index 2536430e5b..4e3a73d378 100644 --- a/components/select/demo/multiple.md +++ b/components/select/demo/multiple.md @@ -13,7 +13,7 @@ title: Multiple selection, selecting from existing items (scroll the menu). -````jsx +````__react import { Select } from 'antd'; const Option = Select.Option; diff --git a/components/select/demo/optgroup.md b/components/select/demo/optgroup.md index 5f3d1b6823..6a47a78cf5 100644 --- a/components/select/demo/optgroup.md +++ b/components/select/demo/optgroup.md @@ -13,7 +13,7 @@ title: Using `OptGroup` to group the options. -````jsx +````__react import { Select } from 'antd'; const Option = Select.Option; const OptGroup = Select.OptGroup; diff --git a/components/select/demo/search-box.md b/components/select/demo/search-box.md index da9b4fac4a..fe52955dbf 100644 --- a/components/select/demo/search-box.md +++ b/components/select/demo/search-box.md @@ -13,7 +13,7 @@ title: Autocomplete with remote ajax data. -````jsx +````__react import { Select } from 'antd'; import jsonp from 'fetch-jsonp'; import querystring from 'querystring'; diff --git a/components/select/demo/search.md b/components/select/demo/search.md index c9c4ad5030..1972cb2ff5 100644 --- a/components/select/demo/search.md +++ b/components/select/demo/search.md @@ -13,7 +13,7 @@ title: Search the options while expanded. -````jsx +````__react import { Select } from 'antd'; const Option = Select.Option; diff --git a/components/select/demo/size.md b/components/select/demo/size.md index 0697786efc..dedc53d1ff 100644 --- a/components/select/demo/size.md +++ b/components/select/demo/size.md @@ -13,7 +13,7 @@ title: The height of the inpub field for the select defaults to 28px. If size is set to large, the height will be 32px, and if set to small, 22px. -````jsx +````__react import { Select } from 'antd'; const Option = Select.Option; diff --git a/components/select/demo/tags.md b/components/select/demo/tags.md index a1e2ee8da2..5bfbe6a657 100644 --- a/components/select/demo/tags.md +++ b/components/select/demo/tags.md @@ -13,7 +13,7 @@ tags select，随意输入的内容（scroll the menu） Select with tags, transform input to tag (scroll the menu) -````jsx +````__react import { Select } from 'antd'; const Option = Select.Option; diff --git a/components/slider/demo/basic.md b/components/slider/demo/basic.md index e0aaeda6ce..68626139c6 100644 --- a/components/slider/demo/basic.md +++ b/components/slider/demo/basic.md @@ -13,7 +13,7 @@ title: Basic slider. When `range` is `true`, display as dual thumb mode. When `disable` is `true`, the slider will not be interactable. -````jsx +````__react import { Slider, Switch } from 'antd'; class Demo extends React.Component { diff --git a/components/slider/demo/event.md b/components/slider/demo/event.md index d8104cb8d0..14b5827f43 100644 --- a/components/slider/demo/event.md +++ b/components/slider/demo/event.md @@ -14,7 +14,7 @@ title: The `onChange` callback function will fire when the user changes the slider's value. The `onAfterChange` callback function will fire when `onmouseup` fired. -````jsx +````__react import { Slider } from 'antd'; function onChange(value) { diff --git a/components/slider/demo/icon-slider.md b/components/slider/demo/icon-slider.md index aed803d06e..061ed01fb1 100644 --- a/components/slider/demo/icon-slider.md +++ b/components/slider/demo/icon-slider.md @@ -13,7 +13,7 @@ title: You can add an icon beside the slider to make it meaningful. -````jsx +````__react import { Slider, Icon } from 'antd'; const IconSlider = React.createClass({ diff --git a/components/slider/demo/input-number.md b/components/slider/demo/input-number.md index 76e5adc21a..4c35217247 100644 --- a/components/slider/demo/input-number.md +++ b/components/slider/demo/input-number.md @@ -13,7 +13,7 @@ title: Synchronize with [InptNumber](/components/input-number/) component. -````jsx +````__react import { Slider, InputNumber, Row, Col } from 'antd'; const IntegerStep = React.createClass({ diff --git a/components/slider/demo/mark.md b/components/slider/demo/mark.md index bbccc59355..59262355f0 100644 --- a/components/slider/demo/mark.md +++ b/components/slider/demo/mark.md @@ -16,7 +16,7 @@ When `included` is false, means that different thumbs are coordinative. when `step` is null, users can only slide the thumbs onto marks. -````jsx +````__react import { Slider } from 'antd'; const marks = { diff --git a/components/slider/demo/tip-formatter.md b/components/slider/demo/tip-formatter.md index 9d729db132..cef838cefc 100644 --- a/components/slider/demo/tip-formatter.md +++ b/components/slider/demo/tip-formatter.md @@ -13,7 +13,7 @@ title: Use `tipFormatter` to format content of `Toolip`. If `tipFormatter` is null, hide it. -````jsx +````__react import { Slider } from 'antd'; function formatter(value) { diff --git a/components/spin/demo/basic.md b/components/spin/demo/basic.md index 1307aa00e2..91b3ac11c4 100644 --- a/components/spin/demo/basic.md +++ b/components/spin/demo/basic.md @@ -13,7 +13,7 @@ title: A simple loading status. -````jsx +````__react import { Spin } from 'antd'; ReactDOM.render(, mountNode); diff --git a/components/spin/demo/delayAndDebounce.md b/components/spin/demo/delayAndDebounce.md index 4972e2131b..497b9ca233 100644 --- a/components/spin/demo/delayAndDebounce.md +++ b/components/spin/demo/delayAndDebounce.md @@ -13,7 +13,7 @@ title: Specifies a delay for loading state. If `spinning` ends during delay, loading status won't appear. -````jsx +````__react import { Spin, Alert, Switch } from 'antd'; const Card = React.createClass({ diff --git a/components/spin/demo/inside.md b/components/spin/demo/inside.md index 1472777702..d7e3a513f2 100644 --- a/components/spin/demo/inside.md +++ b/components/spin/demo/inside.md @@ -13,7 +13,7 @@ title: Spin in a container. -````jsx +````__react import { Spin } from 'antd'; ReactDOM.render( diff --git a/components/spin/demo/nested.md b/components/spin/demo/nested.md index bbdfd14a23..5c19ba0b4c 100644 --- a/components/spin/demo/nested.md +++ b/components/spin/demo/nested.md @@ -13,7 +13,7 @@ title: Embedding content into `Spin` will alter it into loading state. -````jsx +````__react import { Spin, Switch, Alert } from 'antd'; const Card = React.createClass({ diff --git a/components/spin/demo/size.md b/components/spin/demo/size.md index b59dda1f62..9f438f3572 100644 --- a/components/spin/demo/size.md +++ b/components/spin/demo/size.md @@ -13,7 +13,7 @@ title: A small `Spin` use in loading text, default `Spin` use in loading card-level block, and large `Spin` use in loading **page**. -````jsx +````__react import { Spin } from 'antd'; ReactDOM.render( diff --git a/components/spin/demo/tip.md b/components/spin/demo/tip.md index 517b58603e..cce7e0c9b7 100644 --- a/components/spin/demo/tip.md +++ b/components/spin/demo/tip.md @@ -13,7 +13,7 @@ title: Customized description content. -````jsx +````__react import { Spin, Alert } from 'antd'; ReactDOM.render( diff --git a/components/steps/demo/error.md b/components/steps/demo/error.md index eb75d968a1..12d079fec3 100644 --- a/components/steps/demo/error.md +++ b/components/steps/demo/error.md @@ -13,7 +13,7 @@ title: By using `status` of `Steps`, you can specify the state for current step. -````jsx +````__react import { Steps } from 'antd'; const Step = Steps.Step; diff --git a/components/steps/demo/icon.md b/components/steps/demo/icon.md index 616744367e..b6882c8b1c 100644 --- a/components/steps/demo/icon.md +++ b/components/steps/demo/icon.md @@ -13,7 +13,7 @@ title: You can use your own custom icons by setting the property `icon` for `Steps.Step`. -````jsx +````__react import { Steps, Icon } from 'antd'; const Step = Steps.Step; diff --git a/components/steps/demo/simple.md b/components/steps/demo/simple.md index eddab28929..f243dd00bd 100644 --- a/components/steps/demo/simple.md +++ b/components/steps/demo/simple.md @@ -13,7 +13,7 @@ title: The most basic step bar. -````jsx +````__react import { Steps } from 'antd'; const Step = Steps.Step; diff --git a/components/steps/demo/small-size.md b/components/steps/demo/small-size.md index abecad0e19..a9e17d378b 100644 --- a/components/steps/demo/small-size.md +++ b/components/steps/demo/small-size.md @@ -13,7 +13,7 @@ title: By setting like this: ``, you can get a mini version. -````jsx +````__react import { Steps } from 'antd'; const Step = Steps.Step; diff --git a/components/steps/demo/step-next.md b/components/steps/demo/step-next.md index b628f962ce..6668c3a5b4 100644 --- a/components/steps/demo/step-next.md +++ b/components/steps/demo/step-next.md @@ -13,7 +13,7 @@ title: Cooperate with the content and buttons, to represent the progress of a process. -````jsx +````__react import { Steps, Button, message } from 'antd'; const Step = Steps.Step; diff --git a/components/steps/demo/vertical-small.md b/components/steps/demo/vertical-small.md index 8446d52dd7..eb4b15159e 100644 --- a/components/steps/demo/vertical-small.md +++ b/components/steps/demo/vertical-small.md @@ -13,7 +13,7 @@ title: A simple mini version step bar in the vertical direction. -````jsx +````__react import { Steps } from 'antd'; const Step = Steps.Step; diff --git a/components/steps/demo/vertical.md b/components/steps/demo/vertical.md index 36f85f7354..bbe6c1544d 100644 --- a/components/steps/demo/vertical.md +++ b/components/steps/demo/vertical.md @@ -13,7 +13,7 @@ title: A simple step bar in the vertical direction. -````jsx +````__react import { Steps } from 'antd'; const Step = Steps.Step; diff --git a/components/switch/demo/basic.md b/components/switch/demo/basic.md index 37d01d02f4..58fdc2bd26 100644 --- a/components/switch/demo/basic.md +++ b/components/switch/demo/basic.md @@ -13,7 +13,7 @@ title: The most basic usage. -````jsx +````__react import { Switch } from 'antd'; function onChange(checked) { diff --git a/components/switch/demo/disabled.md b/components/switch/demo/disabled.md index c7ce2543ea..221f71b2d8 100644 --- a/components/switch/demo/disabled.md +++ b/components/switch/demo/disabled.md @@ -13,7 +13,7 @@ Switch 失效状态。 Disabled state of `Switch`. -````jsx +````__react import { Switch, Button } from 'antd'; const Test = React.createClass({ diff --git a/components/switch/demo/size.md b/components/switch/demo/size.md index d1ef8ff8d9..40289345a7 100644 --- a/components/switch/demo/size.md +++ b/components/switch/demo/size.md @@ -13,7 +13,7 @@ title: `size="small"` represents a small sized switch. -````jsx +````__react import { Switch } from 'antd'; ReactDOM.render( diff --git a/components/switch/demo/text.md b/components/switch/demo/text.md index e10efcd267..6ec67c948c 100644 --- a/components/switch/demo/text.md +++ b/components/switch/demo/text.md @@ -13,7 +13,7 @@ title: With text and icon. -````jsx +````__react import { Switch, Icon } from 'antd'; ReactDOM.render(
diff --git a/components/table/demo/ajax.md b/components/table/demo/ajax.md index 47542eea8e..9ba77efe83 100644 --- a/components/table/demo/ajax.md +++ b/components/table/demo/ajax.md @@ -19,7 +19,7 @@ This example shows how to fetch and present data from remote server, and how to **Note, this example use [Mock API](https://randomuser.me) that you can look up in Network Console.** -````jsx +````__react import { Table } from 'antd'; import reqwest from 'reqwest'; diff --git a/components/table/demo/basic.md b/components/table/demo/basic.md index 3d1e47f83e..17d15e28b0 100644 --- a/components/table/demo/basic.md +++ b/components/table/demo/basic.md @@ -13,7 +13,7 @@ title: Simple table with actions. -````jsx +````__react import { Table, Icon } from 'antd'; const columns = [{ diff --git a/components/table/demo/bordered.md b/components/table/demo/bordered.md index f62973ee56..e4022dc1d0 100644 --- a/components/table/demo/bordered.md +++ b/components/table/demo/bordered.md @@ -13,7 +13,7 @@ title: Add border, title and footer for table. -````jsx +````__react import { Table } from 'antd'; const columns = [{ diff --git a/components/table/demo/colspan-rowspan.md b/components/table/demo/colspan-rowspan.md index 8d1d81826a..dc6d78462b 100644 --- a/components/table/demo/colspan-rowspan.md +++ b/components/table/demo/colspan-rowspan.md @@ -17,7 +17,7 @@ Table column title supports `colSpan` that set in `column`. Table cell supports `colSpan` and `rowSpan` that set in render return object. When each of them is set to `0`, the cell will not be rendered. -````jsx +````__react import { Table } from 'antd'; // In the fifth row, other columns are merged into first column diff --git a/components/table/demo/custom-filter-panel.md b/components/table/demo/custom-filter-panel.md index c9d1bb8106..be17768b2f 100644 --- a/components/table/demo/custom-filter-panel.md +++ b/components/table/demo/custom-filter-panel.md @@ -13,7 +13,7 @@ title: Implement a customized column search example via `filterDropdown`, `filterDropdownVisible` and `filterDropdownVisibleChange`. -````jsx +````__react import { Table, Input, Button } from 'antd'; const data = [{ diff --git a/components/table/demo/dynamic-settings.md b/components/table/demo/dynamic-settings.md index e2e2ac2d03..654200f632 100644 --- a/components/table/demo/dynamic-settings.md +++ b/components/table/demo/dynamic-settings.md @@ -13,7 +13,7 @@ title: Select different settings to see the result. -````jsx +````__react import { Table, Icon, Switch, Radio, Form } from 'antd'; const FormItem = Form.Item; diff --git a/components/table/demo/edit-cell.md b/components/table/demo/edit-cell.md index efac7499ea..629bd88821 100644 --- a/components/table/demo/edit-cell.md +++ b/components/table/demo/edit-cell.md @@ -13,7 +13,7 @@ title: Table with editable cells. -````jsx +````__react import { Table, Input, Icon, Button, Popconfirm } from 'antd'; class EditableCell extends React.Component { diff --git a/components/table/demo/edit-row.md b/components/table/demo/edit-row.md index 684d9ccf37..17c84d0f50 100644 --- a/components/table/demo/edit-row.md +++ b/components/table/demo/edit-row.md @@ -13,7 +13,7 @@ title: Table with editable rows. -````jsx +````__react import { Table, Input, Popconfirm } from 'antd'; class EditableCell extends React.Component { diff --git a/components/table/demo/expand-children.md b/components/table/demo/expand-children.md index 49ece808c1..e3bf255be0 100644 --- a/components/table/demo/expand-children.md +++ b/components/table/demo/expand-children.md @@ -17,7 +17,7 @@ Display tree structure data in Table, control the indent width by setting `inden > Note, no support for recursive selection of tree structure data table yet. -````jsx +````__react import { Table } from 'antd'; const columns = [{ diff --git a/components/table/demo/expand.md b/components/table/demo/expand.md index 3049c34abe..eace02fc1b 100644 --- a/components/table/demo/expand.md +++ b/components/table/demo/expand.md @@ -13,7 +13,7 @@ title: When there's too much information to show and the table can't display all at once. -````jsx +````__react import { Table } from 'antd'; const columns = [ diff --git a/components/table/demo/fixed-columns-header.md b/components/table/demo/fixed-columns-header.md index 3d99ef7244..1176397b11 100644 --- a/components/table/demo/fixed-columns-header.md +++ b/components/table/demo/fixed-columns-header.md @@ -21,7 +21,7 @@ Suitable for large amounts of data with long columns. > A fixed width for `scroll.x` is recommended. The sum of unfixed columns should not greater than `scroll.x`. -````jsx +````__react import { Table } from 'antd'; const columns = [ diff --git a/components/table/demo/fixed-columns.md b/components/table/demo/fixed-columns.md index 1f8b3ed854..40a093b9a1 100644 --- a/components/table/demo/fixed-columns.md +++ b/components/table/demo/fixed-columns.md @@ -21,7 +21,7 @@ Fix some columns and scroll in other columns. You must set `scoll.x` meanwhile. > A fixed width for `scroll.x` is recommended. -````jsx +````__react import { Table } from 'antd'; const columns = [ diff --git a/components/table/demo/fixed-header.md b/components/table/demo/fixed-header.md index 5b02f7c617..d5b7d272b5 100644 --- a/components/table/demo/fixed-header.md +++ b/components/table/demo/fixed-header.md @@ -17,7 +17,7 @@ Display large amounts of data in scrollable view. > Specify the width of each column if header and cell do not align properly. -````jsx +````__react import { Table } from 'antd'; const columns = [{ diff --git a/components/table/demo/grouping-columns.md b/components/table/demo/grouping-columns.md index e0e033f6bf..bccfc8d911 100644 --- a/components/table/demo/grouping-columns.md +++ b/components/table/demo/grouping-columns.md @@ -13,7 +13,7 @@ title: Group table head with `columns[n].children`. -```jsx +```__react import { Table } from 'antd'; const columns = [{ diff --git a/components/table/demo/head.md b/components/table/demo/head.md index 00d76afb02..4bda41d327 100644 --- a/components/table/demo/head.md +++ b/components/table/demo/head.md @@ -17,7 +17,7 @@ Use `filters` to generate filter menu in columns, `onFilter` to determine filter Use `sorter` to make a column sortable. `sorter` can be a function `function(a, b) { ... }` for sorting data locally. -````jsx +````__react import { Table } from 'antd'; const columns = [{ diff --git a/components/table/demo/jsx.md b/components/table/demo/jsx.md index 5e4d748478..9d458b72be 100644 --- a/components/table/demo/jsx.md +++ b/components/table/demo/jsx.md @@ -17,7 +17,7 @@ Using JSX style API (introduced in 2.5.0) > Since this is just a syntax sugar for the prop `columns`, so that you can't compose `Column` and `ColumnGroup` with other Components. -````jsx +````__react import { Table, Icon } from 'antd'; const { Column, ColumnGroup } = Table; diff --git a/components/table/demo/paging.md b/components/table/demo/paging.md index 1d25d68df4..02b4e96a52 100644 --- a/components/table/demo/paging.md +++ b/components/table/demo/paging.md @@ -13,7 +13,7 @@ title: The pagination in table could be configured with an object, and you can use `pagination={false}` to turn off pagination. -````jsx +````__react import { Table } from 'antd'; const columns = [{ diff --git a/components/table/demo/reset-filter.md b/components/table/demo/reset-filter.md index 69f61287a8..331e8f76ac 100644 --- a/components/table/demo/reset-filter.md +++ b/components/table/demo/reset-filter.md @@ -21,7 +21,7 @@ Control filters and sorters by `filteredValue` and `sortOrder`. > 2. Make sure `sortOrder` is assigned for only one column. > 3. `column.key` is required. -````jsx +````__react import { Table, Button } from 'antd'; const data = [{ diff --git a/components/table/demo/row-selection-and-operation.md b/components/table/demo/row-selection-and-operation.md index 9bb40d93c1..20b3cedef2 100644 --- a/components/table/demo/row-selection-and-operation.md +++ b/components/table/demo/row-selection-and-operation.md @@ -14,7 +14,7 @@ title: To perform operations and clear selections after selecting some rows, use `rowSelection.selectedRowKeys` to control selected rows. -````jsx +````__react import { Table, Button } from 'antd'; const columns = [{ diff --git a/components/table/demo/row-selection.md b/components/table/demo/row-selection.md index ec20cb0a1c..bcf72e9cf8 100644 --- a/components/table/demo/row-selection.md +++ b/components/table/demo/row-selection.md @@ -13,7 +13,7 @@ title: Rows can be selectable by making first column as a selectable column. -````jsx +````__react import { Table } from 'antd'; const columns = [{ diff --git a/components/table/demo/size.md b/components/table/demo/size.md index 44bd495347..6fddcaf49a 100644 --- a/components/table/demo/size.md +++ b/components/table/demo/size.md @@ -13,7 +13,7 @@ title: Two compacted table size: `middle` and `small`, `small` size is used in Modal only. -````jsx +````__react import { Table } from 'antd'; const columns = [{ diff --git a/components/tabs/demo/basic.md b/components/tabs/demo/basic.md index 63b673b23a..562cb11d2c 100644 --- a/components/tabs/demo/basic.md +++ b/components/tabs/demo/basic.md @@ -13,7 +13,7 @@ title: Default activate first tab. -````jsx +````__react import { Tabs } from 'antd'; const TabPane = Tabs.TabPane; diff --git a/components/tabs/demo/card-top.md b/components/tabs/demo/card-top.md index b1c9220b5e..ff3e7a040b 100644 --- a/components/tabs/demo/card-top.md +++ b/components/tabs/demo/card-top.md @@ -13,7 +13,7 @@ title: Should be used at the top of container, needs to override styles. -````jsx +````__react import { Tabs } from 'antd'; const TabPane = Tabs.TabPane; diff --git a/components/tabs/demo/card.md b/components/tabs/demo/card.md index aa8e3e9098..9b6b689673 100644 --- a/components/tabs/demo/card.md +++ b/components/tabs/demo/card.md @@ -14,7 +14,7 @@ title: Another type Tabs, which doesn't support vertical mode. -````jsx +````__react import { Tabs } from 'antd'; const TabPane = Tabs.TabPane; diff --git a/components/tabs/demo/custom-add-trigger.md b/components/tabs/demo/custom-add-trigger.md index 93f608c3a7..5e436ffb5f 100644 --- a/components/tabs/demo/custom-add-trigger.md +++ b/components/tabs/demo/custom-add-trigger.md @@ -13,7 +13,7 @@ title: Hide default plus icon, and bind event for customized trigger. -````jsx +````__react import { Tabs, Button } from 'antd'; const TabPane = Tabs.TabPane; diff --git a/components/tabs/demo/disabled.md b/components/tabs/demo/disabled.md index 5e06d2c283..9b35220deb 100644 --- a/components/tabs/demo/disabled.md +++ b/components/tabs/demo/disabled.md @@ -13,7 +13,7 @@ title: Disabled a tab. -````jsx +````__react import { Tabs } from 'antd'; const TabPane = Tabs.TabPane; diff --git a/components/tabs/demo/editable-card.md b/components/tabs/demo/editable-card.md index d57ed47559..293559d4a0 100644 --- a/components/tabs/demo/editable-card.md +++ b/components/tabs/demo/editable-card.md @@ -13,7 +13,7 @@ title: Only card type Tabs support adding & closeable. -````jsx +````__react import { Tabs } from 'antd'; const TabPane = Tabs.TabPane; diff --git a/components/tabs/demo/extra.md b/components/tabs/demo/extra.md index 038c4b21b4..6cdb3dbc58 100644 --- a/components/tabs/demo/extra.md +++ b/components/tabs/demo/extra.md @@ -14,7 +14,7 @@ title: You can add extra actions to the right of Tabs. -````jsx +````__react import { Tabs, Button } from 'antd'; const TabPane = Tabs.TabPane; diff --git a/components/tabs/demo/icon.md b/components/tabs/demo/icon.md index 55d464731f..4b17ecf677 100644 --- a/components/tabs/demo/icon.md +++ b/components/tabs/demo/icon.md @@ -14,7 +14,7 @@ title: The Tab with Icon. -````jsx +````__react import { Tabs, Icon } from 'antd'; const TabPane = Tabs.TabPane; diff --git a/components/tabs/demo/position.md b/components/tabs/demo/position.md index f7c31bbf36..d90b96b398 100644 --- a/components/tabs/demo/position.md +++ b/components/tabs/demo/position.md @@ -13,7 +13,7 @@ title: Tab's position: left, right, top or bottom. -````jsx +````__react import { Tabs, Select } from 'antd'; const TabPane = Tabs.TabPane; const Option = Select.Option; diff --git a/components/tabs/demo/size.md b/components/tabs/demo/size.md index acddace437..4ca3891ae5 100644 --- a/components/tabs/demo/size.md +++ b/components/tabs/demo/size.md @@ -13,7 +13,7 @@ title: Small size can be used in Modal. -````jsx +````__react import { Tabs } from 'antd'; const TabPane = Tabs.TabPane; diff --git a/components/tabs/demo/slide.md b/components/tabs/demo/slide.md index f3bc06e656..81f40d6eb8 100644 --- a/components/tabs/demo/slide.md +++ b/components/tabs/demo/slide.md @@ -13,7 +13,7 @@ title: Tab can be slide to left or right, which is used for a lot of tabs. -````jsx +````__react import { Tabs } from 'antd'; const TabPane = Tabs.TabPane; diff --git a/components/tag/demo/basic.md b/components/tag/demo/basic.md index dca1f72274..86d8e606de 100644 --- a/components/tag/demo/basic.md +++ b/components/tag/demo/basic.md @@ -13,7 +13,7 @@ title: Usage of basic Tag, and it could be closable by set `closable` property. Closable Tag supports `onClose` `afterClose` events. -````jsx +````__react import { Tag } from 'antd'; function log(e) { diff --git a/components/tag/demo/checkable.md b/components/tag/demo/checkable.md index fd04012b3a..1b3f23a5eb 100644 --- a/components/tag/demo/checkable.md +++ b/components/tag/demo/checkable.md @@ -13,7 +13,7 @@ title: Tag.CheckableTag works like Checkbox, and it is an absolute controlled component and has no uncontrolled mode. -````jsx +````__react import { Tag } from 'antd'; const CheckableTag = Tag.CheckableTag; diff --git a/components/tag/demo/colorful.md b/components/tag/demo/colorful.md index 7183651203..f3b27e14b7 100644 --- a/components/tag/demo/colorful.md +++ b/components/tag/demo/colorful.md @@ -13,7 +13,7 @@ title: We can set the background color of basic Tag by `color`, and it's helpful to tell different Tags. -````jsx +````__react import { Tag } from 'antd'; ReactDOM.render( diff --git a/components/tag/demo/control.md b/components/tag/demo/control.md index 262e149051..b227ad81a3 100644 --- a/components/tag/demo/control.md +++ b/components/tag/demo/control.md @@ -14,7 +14,7 @@ title: Generating a set of Tags by array, you can add and remove dynamically. It's based on `afterClose` event, which will be triggered while the close animation end. -````jsx +````__react import { Tag, Input, Tooltip, Button } from 'antd'; class EditableTagGroup extends React.Component { diff --git a/components/tag/demo/hot-tags.md b/components/tag/demo/hot-tags.md index 1e1d26fb23..5358805cb0 100644 --- a/components/tag/demo/hot-tags.md +++ b/components/tag/demo/hot-tags.md @@ -13,7 +13,7 @@ title: Select your favourite topics. -````jsx +````__react import { Tag } from 'antd'; const CheckableTag = Tag.CheckableTag; diff --git a/components/time-picker/demo/addon.md b/components/time-picker/demo/addon.md index 40c53512c3..66514c7e56 100644 --- a/components/time-picker/demo/addon.md +++ b/components/time-picker/demo/addon.md @@ -13,7 +13,7 @@ title: Render addon contents to timepicker panel's bottom. -````jsx +````__react import { TimePicker, Button } from 'antd'; ReactDOM.render( diff --git a/components/time-picker/demo/basic.md b/components/time-picker/demo/basic.md index 118df8f67e..a9ff14a27c 100644 --- a/components/time-picker/demo/basic.md +++ b/components/time-picker/demo/basic.md @@ -13,7 +13,7 @@ title: Click `TimePicker`, and then we could select or input a time in panel. -````jsx +````__react import { TimePicker } from 'antd'; function onChange(time, timeString) { diff --git a/components/time-picker/demo/disable-options.md b/components/time-picker/demo/disable-options.md index e130a9c46c..5bb2c0b0f7 100644 --- a/components/time-picker/demo/disable-options.md +++ b/components/time-picker/demo/disable-options.md @@ -12,7 +12,7 @@ title: Make part of time unselectable by `disabledHours` `disabledMinutes` `disabledSeconds`, and we even can hide those unselectable options by `hideDisabledOptions`. -````jsx +````__react import { TimePicker } from 'antd'; function range(start, end) { diff --git a/components/time-picker/demo/disabled.md b/components/time-picker/demo/disabled.md index 9da9857bfc..0c5f2d2d11 100644 --- a/components/time-picker/demo/disabled.md +++ b/components/time-picker/demo/disabled.md @@ -14,7 +14,7 @@ title: A disabled state of the `TimePicker`. -````jsx +````__react import { TimePicker } from 'antd'; import moment from 'moment'; diff --git a/components/time-picker/demo/hide-column.md b/components/time-picker/demo/hide-column.md index 69595e0cfe..5089d75448 100644 --- a/components/time-picker/demo/hide-column.md +++ b/components/time-picker/demo/hide-column.md @@ -13,7 +13,7 @@ TimePicker 浮层中的列会随着 `format` 变化，当略去 `format` 中的 While part of `format` is omitted, the corresponding column in panel will disappear, too. -````jsx +````__react import { TimePicker } from 'antd'; import moment from 'moment'; diff --git a/components/time-picker/demo/size.md b/components/time-picker/demo/size.md index 39e1e14a31..7900acdd26 100644 --- a/components/time-picker/demo/size.md +++ b/components/time-picker/demo/size.md @@ -13,7 +13,7 @@ title: The input box comes in three sizes. large is used in the form, while the medium size is the default. -````jsx +````__react import { TimePicker } from 'antd'; import moment from 'moment'; diff --git a/components/time-picker/demo/value.md b/components/time-picker/demo/value.md index eaf13f83c3..8862d7417b 100644 --- a/components/time-picker/demo/value.md +++ b/components/time-picker/demo/value.md @@ -13,7 +13,7 @@ value 和 onChange 需要配合使用。 `value` and `onChange` should be used together, -````jsx +````__react import { TimePicker } from 'antd'; class Demo extends React.Component { diff --git a/components/timeline/demo/basic.md b/components/timeline/demo/basic.md index 365a080a8a..ad889e26be 100644 --- a/components/timeline/demo/basic.md +++ b/components/timeline/demo/basic.md @@ -13,7 +13,7 @@ title: Basic timeline. -````jsx +````__react import { Timeline } from 'antd'; ReactDOM.render( diff --git a/components/timeline/demo/color.md b/components/timeline/demo/color.md index dd8d2d14f5..4e86bb8bed 100644 --- a/components/timeline/demo/color.md +++ b/components/timeline/demo/color.md @@ -13,7 +13,7 @@ title: Set the color of circles. `green` means completed or success status, `red` means warning or error, and `blue` means ongoing or other default status. -````jsx +````__react import { Timeline } from 'antd'; ReactDOM.render( diff --git a/components/timeline/demo/custom.md b/components/timeline/demo/custom.md index 39b73d9cdb..dae06b0f08 100644 --- a/components/timeline/demo/custom.md +++ b/components/timeline/demo/custom.md @@ -13,7 +13,7 @@ title: Set a node as an icon or other custom element. -````jsx +````__react import { Timeline, Icon } from 'antd'; ReactDOM.render( diff --git a/components/timeline/demo/pending.md b/components/timeline/demo/pending.md index 2f7c2b6b23..5c3085805f 100644 --- a/components/timeline/demo/pending.md +++ b/components/timeline/demo/pending.md @@ -13,7 +13,7 @@ title: When the timeline is incomplete and ongoing, put a ghost node at last. set `pending={true}` or `pending={a React Element}`。 -````jsx +````__react import { Timeline } from 'antd'; ReactDOM.render( diff --git a/components/tooltip/demo/arrow-point-at-center.md b/components/tooltip/demo/arrow-point-at-center.md index c0fea126b0..ec9e5e35f3 100644 --- a/components/tooltip/demo/arrow-point-at-center.md +++ b/components/tooltip/demo/arrow-point-at-center.md @@ -13,7 +13,7 @@ title: By specifying `arrowPointAtCenter` prop, the arrow will point to the center of the target element. -````jsx +````__react import { Tooltip, Button } from 'antd'; ReactDOM.render( diff --git a/components/tooltip/demo/basic.md b/components/tooltip/demo/basic.md index 356223f58e..bb48870244 100644 --- a/components/tooltip/demo/basic.md +++ b/components/tooltip/demo/basic.md @@ -13,7 +13,7 @@ title: The simplest usage. -````jsx +````__react import { Tooltip } from 'antd'; ReactDOM.render( diff --git a/components/tooltip/demo/placement.md b/components/tooltip/demo/placement.md index 8d7b9d0904..27ed92abd2 100644 --- a/components/tooltip/demo/placement.md +++ b/components/tooltip/demo/placement.md @@ -13,7 +13,7 @@ title: The ToolTip has 12 placements choice. -````jsx +````__react import { Tooltip } from 'antd'; const text = prompt text; diff --git a/components/transfer/demo/advanced.md b/components/transfer/demo/advanced.md index 836a791dc1..1941a835b5 100644 --- a/components/transfer/demo/advanced.md +++ b/components/transfer/demo/advanced.md @@ -15,7 +15,7 @@ Advanced Usage of Transfer. You can customize the labels of the transfer buttons, the width and height of the columns, and what should be displayed in the footer. -````jsx +````__react import { Transfer, Button } from 'antd'; const App = React.createClass({ diff --git a/components/transfer/demo/basic.md b/components/transfer/demo/basic.md index ff4ae5facc..9455b66a6b 100644 --- a/components/transfer/demo/basic.md +++ b/components/transfer/demo/basic.md @@ -13,7 +13,7 @@ title: The most basic usage of `Transfer` involves providing the source data and target keys arrays, plus the rendering and change callback functions. -````jsx +````__react import { Transfer } from 'antd'; const mockData = []; diff --git a/components/transfer/demo/custom-item.md b/components/transfer/demo/custom-item.md index dc0ce24c01..5b6970d8d5 100644 --- a/components/transfer/demo/custom-item.md +++ b/components/transfer/demo/custom-item.md @@ -13,7 +13,7 @@ title: Custom each Transfer Item, and in this way you can render a complex datasource. -````jsx +````__react import { Transfer } from 'antd'; const App = React.createClass({ diff --git a/components/transfer/demo/large-data.md b/components/transfer/demo/large-data.md index 090eba2266..ed29d2b22e 100644 --- a/components/transfer/demo/large-data.md +++ b/components/transfer/demo/large-data.md @@ -14,7 +14,7 @@ title: 2000 items. -````jsx +````__react import { Transfer } from 'antd'; const App = React.createClass({ diff --git a/components/transfer/demo/search.md b/components/transfer/demo/search.md index a9a02df8cd..a6a65625ec 100644 --- a/components/transfer/demo/search.md +++ b/components/transfer/demo/search.md @@ -13,7 +13,7 @@ title: Transfer with a search box. -````jsx +````__react import { Transfer } from 'antd'; const App = React.createClass({ diff --git a/components/tree-select/demo/basic.md b/components/tree-select/demo/basic.md index 913c1d6a75..af80022e41 100644 --- a/components/tree-select/demo/basic.md +++ b/components/tree-select/demo/basic.md @@ -13,7 +13,7 @@ title: The most basic usage. -````jsx +````__react import { TreeSelect } from 'antd'; const TreeNode = TreeSelect.TreeNode; diff --git a/components/tree-select/demo/checkable.md b/components/tree-select/demo/checkable.md index 81d86140eb..a82a960e6f 100644 --- a/components/tree-select/demo/checkable.md +++ b/components/tree-select/demo/checkable.md @@ -13,7 +13,7 @@ title: Multiple and checkable. -````jsx +````__react import { TreeSelect } from 'antd'; const SHOW_PARENT = TreeSelect.SHOW_PARENT; diff --git a/components/tree-select/demo/treeData.md b/components/tree-select/demo/treeData.md index 327a0a28b2..827b4d0ae5 100644 --- a/components/tree-select/demo/treeData.md +++ b/components/tree-select/demo/treeData.md @@ -14,7 +14,7 @@ title: The tree structure can be populated using `treeData` property. This is a quick and easy way to provide the tree content. -````jsx +````__react import { TreeSelect } from 'antd'; const treeData = [{ diff --git a/components/tree/demo/basic-controlled.md b/components/tree/demo/basic-controlled.md index 16c3851ff0..d85a2df7be 100644 --- a/components/tree/demo/basic-controlled.md +++ b/components/tree/demo/basic-controlled.md @@ -13,7 +13,7 @@ title: basic controlled example -````jsx +````__react import { Tree } from 'antd'; const TreeNode = Tree.TreeNode; diff --git a/components/tree/demo/basic.md b/components/tree/demo/basic.md index aef36c976b..b1d42fda81 100644 --- a/components/tree/demo/basic.md +++ b/components/tree/demo/basic.md @@ -13,7 +13,7 @@ title: The most basic usage, tell you how to use checkable, selectable, disabled, defaultExpandKeys, and etc. -````jsx +````__react import { Tree } from 'antd'; const TreeNode = Tree.TreeNode; diff --git a/components/tree/demo/draggable.md b/components/tree/demo/draggable.md index 8a1649f1db..8919682e98 100644 --- a/components/tree/demo/draggable.md +++ b/components/tree/demo/draggable.md @@ -13,7 +13,7 @@ title: Drag treeNode to insert after the other treeNode or insert into the other parent TreeNode. -````jsx +````__react import { Tree } from 'antd'; const TreeNode = Tree.TreeNode; diff --git a/components/tree/demo/dynamic.md b/components/tree/demo/dynamic.md index 6ac0623505..18dd400b5a 100644 --- a/components/tree/demo/dynamic.md +++ b/components/tree/demo/dynamic.md @@ -13,7 +13,7 @@ title: To load data asynchronously when click to expand a treeNode. -````jsx +````__react import { Tree } from 'antd'; const TreeNode = Tree.TreeNode; diff --git a/components/tree/demo/search.md b/components/tree/demo/search.md index 60460d137d..6ceda0b667 100644 --- a/components/tree/demo/search.md +++ b/components/tree/demo/search.md @@ -13,7 +13,7 @@ title: Searchable Tree. -````jsx +````__react import { Tree, Input } from 'antd'; const TreeNode = Tree.TreeNode; diff --git a/components/upload/demo/avatar.md b/components/upload/demo/avatar.md index 9d00208e60..40bd072da4 100644 --- a/components/upload/demo/avatar.md +++ b/components/upload/demo/avatar.md @@ -17,7 +17,7 @@ Click to upload user's avatar, and validate size and format of picture with `bef > The return value of function `beforeUpload` can be a Promise to check asynchronously. [demo](http://react-component.github.io/upload/examples/beforeUpload.html) -````jsx +````__react import { Upload, Icon, message } from 'antd'; function getBase64(img, callback) { diff --git a/components/upload/demo/basic.md b/components/upload/demo/basic.md index 9e040594ae..baee7c34a8 100644 --- a/components/upload/demo/basic.md +++ b/components/upload/demo/basic.md @@ -13,7 +13,7 @@ title: Classic mode. File selection dialog pops up when upload button is clicked -````jsx +````__react import { Upload, message, Button, Icon } from 'antd'; const props = { diff --git a/components/upload/demo/defaultFileList.md b/components/upload/demo/defaultFileList.md index f4ab453047..a5e48a8046 100644 --- a/components/upload/demo/defaultFileList.md +++ b/components/upload/demo/defaultFileList.md @@ -14,7 +14,7 @@ title: Edit uploaded files -````jsx +````__react import { Upload, Button, Icon } from 'antd'; const props = { diff --git a/components/upload/demo/drag.md b/components/upload/demo/drag.md index 4a21db9e7e..175e6e0efa 100644 --- a/components/upload/demo/drag.md +++ b/components/upload/demo/drag.md @@ -17,7 +17,7 @@ You can drag files to a specific area, to upload. Alternatively, you can also up We can upload serveral files at once in modern browsers by giving the input the `multiple` attribute. -````jsx +````__react import { Upload, Icon, message } from 'antd'; const Dragger = Upload.Dragger; diff --git a/components/upload/demo/fileList.md b/components/upload/demo/fileList.md index 4f1ee00d16..09cc027707 100644 --- a/components/upload/demo/fileList.md +++ b/components/upload/demo/fileList.md @@ -25,7 +25,7 @@ You can gain full control over filelist by configuring `fileList`. You can accom 3) filter successfully uploaded files according to response from server. -````jsx +````__react import { Upload, Button, Icon } from 'antd'; const MyUpload = React.createClass({ diff --git a/components/upload/demo/picture-card.md b/components/upload/demo/picture-card.md index 080d255035..1ba0a67abc 100644 --- a/components/upload/demo/picture-card.md +++ b/components/upload/demo/picture-card.md @@ -13,7 +13,7 @@ title: After users upload picture, the thumbnail will be shown in list. The upload button will disappear when count meets limitation. -````jsx +````__react import { Upload, Icon, Modal } from 'antd'; class PicturesWall extends React.Component { diff --git a/components/upload/demo/picture-style.md b/components/upload/demo/picture-style.md index b830a6fdd5..367e63eb7c 100644 --- a/components/upload/demo/picture-style.md +++ b/components/upload/demo/picture-style.md @@ -14,7 +14,7 @@ title: If uploade file is picture, a thumbnail can be shown. `IE8/9` do not support local thumbnail show. Please use `thumbUrl` instead. -````jsx +````__react import { Upload, Button, Icon } from 'antd'; const props = { diff --git a/docs/spec/layout/demo/aside-collapse.md b/docs/spec/layout/demo/aside-collapse.md index aaad584f34..e9236f47b9 100644 --- a/docs/spec/layout/demo/aside-collapse.md +++ b/docs/spec/layout/demo/aside-collapse.md @@ -5,7 +5,7 @@ title: 可收起展开的侧边导航 页面横向空间有限时使用。侧边导航默认收起，点击底部按钮时展开。 -````jsx +````__react import { Menu, Breadcrumb, Icon } from 'antd'; import BrowserDemo from 'site/theme/template/BrowserDemo'; const SubMenu = Menu.SubMenu; diff --git a/docs/spec/layout/demo/aside.md b/docs/spec/layout/demo/aside.md index 5ae2b0a3f6..bfecacf1ca 100644 --- a/docs/spec/layout/demo/aside.md +++ b/docs/spec/layout/demo/aside.md @@ -7,7 +7,7 @@ title: 侧边导航 侧边导航在页面布局上采用的是左右的结构，一般主导航放置于页面的左侧固定位置，辅助菜单放置于工作区顶部。内容根据浏览器终端进行自适应，能提高横向空间的使用率，但是整个页面排版不稳定。侧边导航的模式层级扩展性强，一、二、三级导航项目可以更为顺畅且具关联性的被展示，同时侧边导航可以固定，使得用户在操作和浏览中可以快速的定位和切换当前位置，有很高的操作效率。但这类导航横向页面内容的空间会被牺牲一部份。 -````jsx +````__react import { Menu, Breadcrumb, Icon } from 'antd'; import BrowserDemo from 'site/theme/template/BrowserDemo'; const SubMenu = Menu.SubMenu; diff --git a/docs/spec/layout/demo/ceiling.md b/docs/spec/layout/demo/ceiling.md index 381ec2375d..dfb9d00015 100644 --- a/docs/spec/layout/demo/ceiling.md +++ b/docs/spec/layout/demo/ceiling.md @@ -7,7 +7,7 @@ title: 吊顶规范 吊顶背景深色，高度 `30px`，和浅色调的主导航配合使用。 -````jsx +````__react import { Menu, Breadcrumb } from 'antd'; import BrowserDemo from 'site/theme/template/BrowserDemo'; diff --git a/docs/spec/layout/demo/top-aside.md b/docs/spec/layout/demo/top-aside.md index 2ea446976b..ffb2a96c2f 100644 --- a/docs/spec/layout/demo/top-aside.md +++ b/docs/spec/layout/demo/top-aside.md @@ -5,7 +5,7 @@ title: 顶部导航 + 侧边栏 顶级导航在头部，次级导航在侧边栏。 -````jsx +````__react import { Menu, Breadcrumb, Icon } from 'antd'; import BrowserDemo from 'site/theme/template/BrowserDemo'; const SubMenu = Menu.SubMenu; diff --git a/docs/spec/layout/demo/top.md b/docs/spec/layout/demo/top.md index 9636404c74..5354bcaae1 100644 --- a/docs/spec/layout/demo/top.md +++ b/docs/spec/layout/demo/top.md @@ -9,7 +9,7 @@ title: 顶部导航 > `` 做演示用，无须复制。 -````jsx +````__react import { Menu, Breadcrumb } from 'antd'; import BrowserDemo from 'site/theme/template/BrowserDemo'; diff --git a/package.json b/package.json index d033004783..f5cec8a230 100644 --- a/package.json +++ b/package.json @@ -86,13 +86,12 @@ "babel-preset-es2015": "^6.18.0", "babel-preset-react": "^6.16.0", "babel-preset-stage-0": "^6.16.0", - "bisheng": "^0.18.0", - "bisheng-plugin-antd": "~0.7.0", + "bisheng": "^0.19.0", + "bisheng-plugin-antd": "^0.8.0", "bisheng-plugin-description": "^0.1.1", - "bisheng-plugin-react": "^0.3.0", + "bisheng-plugin-react": "^0.4.0", "bisheng-plugin-toc": "^0.4.0", "coveralls": "^2.11.15", - "css-split-webpack-plugin": "^0.2.1", "dekko": "^0.2.0", "dora-plugin-upload": "^0.3.1", "enquire.js": "^2.1.1", diff --git a/site/bisheng.config.js b/site/bisheng.config.js index 17dbf1ef16..4a1919009e 100644 --- a/site/bisheng.config.js +++ b/site/bisheng.config.js @@ -1,5 +1,4 @@ const path = require('path'); -const CSSSplitWebpackPlugin = require('css-split-webpack-plugin').default; function pickerGenerator(module) { const tester = new RegExp(`^docs/${module}`); @@ -56,8 +55,8 @@ module.exports = { plugins: [ 'bisheng-plugin-description', 'bisheng-plugin-toc?maxDepth=2&keepElem', - 'bisheng-plugin-react?lang=__react', 'bisheng-plugin-antd', + 'bisheng-plugin-react?lang=__react', ], filePathMapper(filePath) { if (filePath === '/index.html') { @@ -82,7 +81,6 @@ module.exports = { site: path.join(process.cwd(), 'site'), 'react-router': 'react-router/umd/ReactRouter', }; - config.plugins.push(new CSSSplitWebpackPlugin({ preserve: true })); config.babel.plugins.push([ require.resolve('babel-plugin-transform-runtime'), diff --git a/site/theme/static/template.html b/site/theme/static/template.html index bce7a288ad..77340a3bf8 100644 --- a/site/theme/static/template.html +++ b/site/theme/static/template.html @@ -10,8 +10,7 @@ Ant Design - A UI Design Language - - +