diff --git a/package.json b/package.json index bcb8c923..2b3f37ff 100644 --- a/package.json +++ b/package.json @@ -53,6 +53,7 @@ "react-dev-utils": "^10.2.1", "react-dom": "^16.13.1", "react-hook-form": "^6.8.6", + "react-live": "^2.2.3", "resolve": "1.16.1", "resolve-url-loader": "3.1.1", "sass-loader": "8.0.2", diff --git a/src/components/src/Icons.js b/src/components/src/Icons.js index 5c16dabe..110cd016 100755 --- a/src/components/src/Icons.js +++ b/src/components/src/Icons.js @@ -421,3 +421,14 @@ export const IconFilter = React.forwardRef((props, ref) => { ; }); +export const IconEdit = React.forwardRef((props, ref) => { + const [clsName, otherProps] = useIcon(props); + return + + + ; +}); + + diff --git a/src/components/src/index.js b/src/components/src/index.js index 3e669124..841f0b59 100755 --- a/src/components/src/index.js +++ b/src/components/src/index.js @@ -81,6 +81,7 @@ export { IconQuestion, IconAccount, IconLock, + IconEdit } from './Icons'; export { diff --git a/src/docs/DocHome.js b/src/docs/DocHome.js index 88c2a93d..a73702a1 100755 --- a/src/docs/DocHome.js +++ b/src/docs/DocHome.js @@ -1,11 +1,17 @@ -import React, {useState} from 'react'; -import {HashRouter as Router, Route, Switch} from 'react-router-dom'; -import {RouteLoader, initStore, StoreContext} from 'react-windy-ui'; +import React, {useCallback, useEffect, useState} from 'react'; +import {Route, Switch} from 'react-router-dom'; +import {initStore, RouteLoader, StoreContext} from 'react-windy-ui'; +import intl from 'react-intl-universal'; + +// locale data +const locales = { + 'zh_CN': require('./common/doc_zh_CN.json'), + 'en_US': require('./common/doc_en_US.json'), +}; //Async modules to import const Home = React.lazy(() => import(`./home/Home`)); const DocCenter = React.lazy(() => import('./main/DocCenter')); -const Loading = () => null;//no need this feature const progressStyle = { top: '0', height: '3px', zIndex: '1000', @@ -15,16 +21,44 @@ const barStyle = { background: '#27AE60', }; +const Loading = () => { + return 'Loading the page...'; +}; + export default function DocHome() { - const [language, setLanguage] = useState('zh_CN'); + const [lang, setLang] = useState({initDone: false, currentLocale: 'zh_CN'}); const [store] = useState(() => initStore('init'), ); + const switchLocale = useCallback((lc) => { + return intl.init({ + locales, + currentLocale: lc, + }); + }, []); + + useEffect(() => { + // init method will load CLDR locale data according to currentLocale + // react-intl-universal is singleton, so you should init it only once in your app + switchLocale(lang.currentLocale); + }, [lang.currentLocale, switchLocale]); + + const changeLocale = useCallback((nextLang) => { + switchLocale(nextLang). + then(() => setLang(pre => ({...pre, currentLocale: nextLang}))); + }, [switchLocale]); + return <> }> - + } progressStyle={progressStyle} barStyle={barStyle}> -
404, 页面不存在~~
}> diff --git a/src/docs/common/doc.js b/src/docs/common/doc.js new file mode 100644 index 00000000..0e0dcd23 --- /dev/null +++ b/src/docs/common/doc.js @@ -0,0 +1,3 @@ +{ + +} \ No newline at end of file diff --git a/src/docs/common/doc_en_US.json b/src/docs/common/doc_en_US.json new file mode 100644 index 00000000..b0832d54 --- /dev/null +++ b/src/docs/common/doc_en_US.json @@ -0,0 +1,15 @@ +{ + "locale.zh_CN": "中文简体", + "locale.en_US": "English", + "global.home.title": "Windy UI", + "global.home.link.documentation": "Documentation", + "global.home.link.template": "Template", + "global.home.link.contribute": "Contribute", + "global.home.link.language": "Language", + "global.home.content": "A responsive design system built with React, Wui.", + "global.home.button.start": "Get Started", + "global.home.button.github": "Github", + "global.home.current.release": "Current release", + "global.home.current.release.version": "0.3.2", + "global.home.desc1": "Design for more user-friendly websites, compatible with various of devices" +} \ No newline at end of file diff --git a/src/docs/common/doc_zh_CN.json b/src/docs/common/doc_zh_CN.json new file mode 100644 index 00000000..6c65d881 --- /dev/null +++ b/src/docs/common/doc_zh_CN.json @@ -0,0 +1,16 @@ +{ + "locale.zh_CN": "中文简体", + "locale.en_US": "English", + "global.home.title": "Windy UI", + "global.home.link.documentation": "文 档", + "global.home.link.template": "模 板", + "global.home.link.contribute": "贡献力量", + "global.home.link.language": "语 言", + "global.home.content": "基于React, Wui并支持响应式布局的UI框架", + "global.home.button.start": "快速开始", + "global.home.button.github": "Github", + "global.home.current.release": "当前版本", + "global.home.current.release.version": "0.3.2", + + "global.home.desc1": "设计更友好的站点，兼容各类显示设备" +} \ No newline at end of file diff --git a/src/docs/home/HomeContent.js b/src/docs/home/HomeContent.js index 432b38cc..f26aaa8c 100755 --- a/src/docs/home/HomeContent.js +++ b/src/docs/home/HomeContent.js @@ -51,17 +51,21 @@ export default function HomeContent() {
- A responsive design system built with React, Wui. + {intl.get("global.home.content")}
- - + +
- Current release + {intl.get("global.home.current.release")} - v0.5.0 + {intl.get("global.home.current.release.version")}
 
diff --git a/src/docs/home/HomeHeader.js b/src/docs/home/HomeHeader.js index 90fa1e8f..92a93da4 100755 --- a/src/docs/home/HomeHeader.js +++ b/src/docs/home/HomeHeader.js @@ -1,9 +1,16 @@ -import React, {useState} from 'react'; -import {Affix, Button, Dropdown, IconList, Navbar} from 'react-windy-ui'; +import React, {useCallback, useContext, useState} from 'react'; +import {Affix, Dropdown, IconList, Navbar, Popover} from 'react-windy-ui'; import {Link} from 'react-router-dom'; +import {StoreContext} from '../../components/src'; +import intl from 'react-intl-universal'; export default function HomeHeader({transparent = false}) { const [barExtraCls, setBarExtraCls] = useState(null); + const {supportLocals, locale, changeLocale} = useContext(StoreContext); + + const setLocale = useCallback((id) => { + id !== locale && changeLocale(id); + }, [changeLocale, locale]); return <> { @@ -21,23 +28,36 @@ export default function HomeHeader({transparent = false}) { fontSize: '1rem', marginRight: '1rem', }}/>*/} - Windy UI + {intl.get('global.home.title')} - Documentation + {intl.get( + 'global.home.link.documentation')} - Templates + {intl.get('global.home.link.template')} - - Contribute + + + {intl.get('global.home.link.contribute')} + - Language}> + {intl.get( + 'global.home.link.language')}} + onSelect={setLocale}> - English - 中文简体 + { + supportLocals.map( + sl => + {intl.get(`locale.${sl}`)} + ) + } diff --git a/src/docs/home/MobileContent.js b/src/docs/home/MobileContent.js index 93066292..dd441b0a 100755 --- a/src/docs/home/MobileContent.js +++ b/src/docs/home/MobileContent.js @@ -1,6 +1,7 @@ import React from 'react'; import DeviceImage from '../images/home-device.png'; import {Col, Row} from 'react-windy-ui'; +import intl from 'react-intl-universal'; export default function MobileContent() { @@ -14,7 +15,7 @@ export default function MobileContent() { justifyContent: 'center', flexDirection: 'column', }}> -

设计更友好的站点，兼容各类显示设备

+

{intl.get('global.home.desc1')}

false}/> diff --git a/src/docs/main/DocCenter.js b/src/docs/main/DocCenter.js index 0a9b4871..cc5bf85c 100755 --- a/src/docs/main/DocCenter.js +++ b/src/docs/main/DocCenter.js @@ -8,7 +8,7 @@ import { RouteLoader, Row, Affix, - StoreContext, + initStore, useMediaQuery, } from 'react-windy-ui'; import DocMenu from './DocMenu'; @@ -47,8 +47,9 @@ import DatePickerIndex from '../pages/datepicker/DatePickerIndex'; import PcIndex from '../pages/popconfirm/PcIndex'; import FormIndex from '../pages/form/FormIndex'; import HooksIndex from '../pages/hooks/HooksIndex'; -import NavMenu from './NavMenu'; import AffixIndex from '../pages/affix/AffixIndex'; +import QuickManu from './QuickManu'; +import {QuickManuContext} from '../utils/DocUtils'; function DocCenter(props) { // The `path` lets us build paths that are @@ -79,11 +80,15 @@ function DocCenter(props) { containerStyle = {padding: '16px 2%'}; } + const [store] = useState(() => + initStore({list: []}), /**{list: [{id: xx, text: xxx}]} **/ + ); + const [activeDrawer, setActive] = useState(false); const menu = setActive(false)}/>; - return <> + return
{ @@ -102,7 +107,7 @@ function DocCenter(props) { isMinLg && - {menu} + {menu} } @@ -226,12 +231,12 @@ function DocCenter(props) { {isMinXg && - + }
- ; + ; } diff --git a/src/docs/main/NavMenu.js b/src/docs/main/NavMenu.js deleted file mode 100644 index aec73012..00000000 --- a/src/docs/main/NavMenu.js +++ /dev/null @@ -1,55 +0,0 @@ -import React, {useCallback, useContext, useEffect, useState} from 'react'; -import {Affix, Menu, StoreContext} from 'react-windy-ui'; -import scrollToElement from 'scroll-to-element'; -// import {useHistory} from 'react-router-dom'; - -export default function NavMenu() { - // const history = useHistory(); - const [items, setItems] = useState([]); - - const ctx = useContext(StoreContext); - const {store} = ctx; - - const findlinks = useCallback(() => { - setTimeout(() => { - const h3List = document.querySelectorAll('h3'); - let pureList = []; - if (h3List && h3List.length !== 0) { - //StaticNodeList doesn't support map function - pureList = [...h3List].map( - elem => ({id: elem.id, text: elem.innerText})). - filter(elem => elem.id !== null); - - } - setItems(pureList); - }, 1000); - }, [setItems]); - - useEffect(() => { - const listener = (value) => { - findlinks(); - }; - store.attach(listener); - - return () => store.detach(listener); - - //listen on the history changes - /*history.listen((v) => { - } - });*/ - }, [ctx, findlinks, setItems, store]); - - return <> - { - const elem = document.getElementById(`${ids[0]}`); - if (elem) { - scrollToElement(elem, {offset: -100}); - } - }}> - { - items.map(item => {item.text}) - } - - ; -} \ No newline at end of file diff --git a/src/docs/main/QuickManu.js b/src/docs/main/QuickManu.js new file mode 100644 index 00000000..c10f5ae9 --- /dev/null +++ b/src/docs/main/QuickManu.js @@ -0,0 +1,36 @@ +import React, {useContext, useEffect, useState} from 'react'; +import {Menu} from 'react-windy-ui'; +import scrollToElement from 'scroll-to-element'; +import {QuickManuContext} from '../utils/DocUtils'; +// import {useHistory} from 'react-router-dom'; + +export default function QuickManu() { + // const history = useHistory(); + const [items, setItems] = useState([]); + + const ctx = useContext(QuickManuContext); + const {quickManuStore} = ctx; + + useEffect(() => { + const listener = ({list}) => { + setItems(list); + }; + quickManuStore.attach(listener); + + return () => quickManuStore.detach(listener); + }, [ctx, setItems, quickManuStore]); + + return <> + { + const elem = document.getElementById(`${ids[0]}`); + if (elem) { + scrollToElement(elem, {offset: -100}); + } + }}> + { + items.map(item => {item.text}) + } + + ; +} \ No newline at end of file diff --git a/src/docs/pages/alert/AlertIndex.js b/src/docs/pages/alert/AlertIndex.js index 56e61a08..c57a6926 100755 --- a/src/docs/pages/alert/AlertIndex.js +++ b/src/docs/pages/alert/AlertIndex.js @@ -1,27 +1,14 @@ import React from 'react'; -import DocPage from '../../utils/DocPage'; -import Alert1 from './samples/Alert1'; -import Alert2 from './samples/Alert2'; -import Alert3 from './samples/Alert3'; -import Alert4 from './samples/Alert4'; -import Alert5 from './samples/Alert5'; -import Alert6 from './samples/Alert6'; +import DocPage2 from '../../utils/DocPage2'; -/** - * It maps the text blocks in Markdown file - */ -const componentMapping = { - Alert1: , - Alert2: , - Alert3: , - Alert4: , - Alert5: , - Alert6: , -}; +// const requireRaw2 = require.context('./samples', true, /.js$/); +const requireMd = require.context('!raw-loader!./md', false, /.md$/); +const requireCode = require.context('!raw-loader!./samples', false, /.js$/); +const requireJs = require.context('./samples', false, /.js$/); -export default function AlertIndex(props) { - return import('./doc.md')} - componentMapping={componentMapping} - />; +export default function AlertIndex() { + return ; } \ No newline at end of file diff --git a/src/docs/pages/alert/doc.md b/src/docs/pages/alert/doc.md deleted file mode 100755 index c5450e19..00000000 --- a/src/docs/pages/alert/doc.md +++ /dev/null @@ -1,282 +0,0 @@ ------------ Title ------------ -[TITLE_BEGIN_zh_CN] -## 告警提示 Alert -Alert组件常用来进行错误或操作结果提示，也可以用来进行风险提示。 - -- 提供了多种类型的Alert -- Alert框体支持手动关闭或延时关闭 -[TITLE_END_zh_CN] - - -[TITLE_BEGIN_en_US] -[TITLE_END_en_US] - -------------- Footer --------------------- -[FOOTER_BEGIN_zh_CN] -## API -Alert的属性如下所示： - -| 属性 | 名称 | 类型 | 默认值 | 描述 | -| --- | --- | --- | --- | --- | -| ref | Input Dom对象的引用 | function \| ref | - | 当需要获取dom对象时可设置此属性 | -| className | 样式名称 | string | alert | | -| extraClassName | 额外添加的样式名称 | string | - | | -| type | 类型 | string | info | 值可以是：info, ok, warning, error, mini, simple | -| active | 激活显示 | boolean | - | 如果不需要自行控制Alert的显示和关闭，可以不用设置，默认情况下加载后就显示 | -| duration | Alert持续显示的时间 | number | - | 单位毫秒 | -| onClose | 关闭Alert的回调 | function | - | 当点击关闭图标，或者设置了延时关闭时会触发调用。如果设置了active属性，请务必提供此方法 | -| title | Alert标题 | react node | - | | -| body | Alert内容 | react node | - | | -| autoClose | 是否自动关闭 | boolean | - | 是否自动关闭。如果为false，则表示无法延时关闭，必须手动触发或由其他组件控制关闭。 | -| hasCloseIcon | 是否显示关闭图标 | boolean | true | | -| icon | 左侧对应Alert类型的图标 | react node | - | 不同的类型默认提供不同的图标 | -| hasIcon | 是否显示Alert类型图标 | boolean | true | 不同的类型默认提供不同的图标 | -| style | Alert的样式 | object | - | | -| iconStyle | Alert类型的图标样式 | object | - | | -| closeStyle | 关闭图标的样式 | object | - | | - -[FOOTER_END_zh_CN] - -[FOOTER_BEGIN_en_US] -[FOOTER_END_en_US] - -------------- Samples --------------------- -[Alert1_BEGIN_zh_CN] -### 示例1: 简单示例 - - 有五种类型的Alert可供使用，对应的type可以设置为： info、ok、warning、error、mini、simple。 - - -```jsx -import React from 'react'; -import {Alert} from 'react-windy-ui'; - -export default function Alert1() { - return <> - - - - - - - ; -} - -``` -[Alert1_END_zh_CN] - -[Alert1_BEGIN_en_US] -[Alert1_END_en_US] ----------------------------------- - -[Alert2_BEGIN_zh_CN] -### 示例2: title和body -
- 提示 -
- 可以给Alert添加title和body, 相应地设置title和body属性。 -
-
- -```jsx -import React from 'react'; -import {Alert, IconHome} from 'react-windy-ui'; - -export default function Alert2() { - return <> - - - - - }/> - ; -} -``` -[Alert2_END_zh_CN] - -[Alert2_BEGIN_en_US] -[Alert2_END_en_US] ----------------------------------- - -[Alert3_BEGIN_zh_CN] -### 示例3: 自定义Alert -
- 提示 -
- 您可通过指定icon属性来自定义icon图标，也可以给Alert设置style样式。如果需要修改左侧图标或关闭图标的的样式，则相应地设置 - iconStyle, closeStyle属性。 -
-
- -```jsx -import React from 'react'; -import {Alert, IconHome} from 'react-windy-ui'; - -export default function Alert3() { - return <> - }/> - }/> - }/> - }/> - ; -} -``` -[Alert3_END_zh_CN] - -[Alert3_BEGIN_en_US] -[Alert3_END_en_US] ----------------------------------- -[Alert4_BEGIN_zh_CN] -### 示例4: 图标的显示和关闭 -
- 提示 -
- 如果不需要左侧图标或关闭的图标，则可以将hasIcon、hasCloseIcon设置成false。 -
-
- -```jsx -import React, {useState} from 'react'; -import {Alert, Toggle} from 'react-windy-ui'; - -export default function Alert4() { - const [closeIcon, setCloseIcon] = useState(true); - const [showIcon, setShowIcon] = useState(true); - return <> -
- setCloseIcon(val)} - content={{on: 'Close Icon', off: 'Close Icon'}}/> -
-
- setShowIcon(val)} - content={{on: 'Icon', off: 'Icon'}}/> -
- - ; -} -``` -[Alert4_END_zh_CN] - -[Alert4_BEGIN_en_US] -[Alert4_END_en_US] ----------------------------------- - -[Alert5_BEGIN_zh_CN] -### 示例5: 延时关闭 -
- 提示 -
- 当autoClose设置为true后，默认情况下Alert会在5秒后关闭。设置不同的duration值，可以控制延时关闭的时间。 -
-
- -```jsx -import React, {useState} from 'react'; -import {Alert, Checkbox, Tooltip} from 'react-windy-ui'; - -export default function Alert5() { - const [autoClose, setAutoClose] = useState(false); - return <> -
- - setAutoClose(true)}/> - -
- - ; -} -``` -[Alert5_END_zh_CN] - -[Alert5_BEGIN_en_US] -[Alert5_END_en_US] ----------------------------------- - -[Alert6_BEGIN_zh_CN] -### 示例6: Alert的显示和关闭 -
- 提示 -
- 当设置active属性后，Alert将不会自动关闭，此时会触发onClose调用，您需要在onClose中切换显示状态。 - 这里，active与onClose方法需要同时提供，以便一起完成状态的切换过程。当前只有当点击关闭图标，或者设置了延时关闭时才会 - 调用onClose。 -
-
- -```jsx -import React, {useState} from 'react'; -import {Alert, Checkbox} from 'react-windy-ui'; - -export default function Alert6() { - const [active, setActive] = useState(true); - const [activeAuto, setActiveAuto] = useState(true); - return <> -
- { - setActive(enable); - setActiveAuto(enable); - }}/> -
- setActive(false)}/> - - setActiveAuto(false)}/> - - ; -} -``` -[Alert6_END_zh_CN] - -[Alert6_BEGIN_en_US] -[Alert6_END_en_US] ----------------------------------- \ No newline at end of file diff --git a/src/docs/pages/alert/md/alert1.md b/src/docs/pages/alert/md/alert1.md new file mode 100644 index 00000000..ec307bc6 --- /dev/null +++ b/src/docs/pages/alert/md/alert1.md @@ -0,0 +1,18 @@ +--- +order: 1 +type: sample +title: 简单示例 +zh_CN: 简单示例 +en_US: Sample +editUrl: $BASE/docs/pages/alert/md/alert1.md +--- + ++++ zh_CN +有五种类型的Alert可供使用，对应的type可以设置为： info、ok、warning、error、mini、simple。 + + ++++ en_US +Alert + ++++ SampleCode +fileName: Alert1 diff --git a/src/docs/pages/alert/md/alert2.md b/src/docs/pages/alert/md/alert2.md new file mode 100644 index 00000000..f66eb077 --- /dev/null +++ b/src/docs/pages/alert/md/alert2.md @@ -0,0 +1,16 @@ +--- +order: 2 +type: sample +zh_CN: Title和body +en_US: Title and body +editUrl: $BASE/docs/pages/alert/md/alert2.md +--- + ++++ zh_CN +可以给Alert添加title和body, 相应地设置title和body属性。 + ++++ en_US +Alert + ++++ SampleCode +fileName: Alert2 diff --git a/src/docs/pages/alert/md/alert3.md b/src/docs/pages/alert/md/alert3.md new file mode 100644 index 00000000..31093ba0 --- /dev/null +++ b/src/docs/pages/alert/md/alert3.md @@ -0,0 +1,17 @@ +--- +order: 3 +type: sample +zh_CN: 自定义Alert +en_US: Customized Alert +editUrl: $BASE/docs/pages/alert/md/alert3.md +--- + ++++ zh_CN +您可通过指定icon属性来自定义icon图标，也可以给Alert设置style样式。如果需要修改左侧图标或关闭图标的的样式，则相应地设置 + iconStyle, closeStyle属性。 + ++++ en_US +Alert + ++++ SampleCode +fileName: Alert3 diff --git a/src/docs/pages/alert/md/alert4.md b/src/docs/pages/alert/md/alert4.md new file mode 100644 index 00000000..f7782f26 --- /dev/null +++ b/src/docs/pages/alert/md/alert4.md @@ -0,0 +1,17 @@ +--- +order: 4 +type: sample +zh_CN: 显示或隐藏图标 +en_US: Display or hide the icon +editUrl: $BASE/docs/pages/alert/md/alert4.md +--- + ++++ zh_CN + 如果不需要左侧图标或关闭的图标，则可以将hasIcon、hasCloseIcon设置成false。 + + ++++ en_US +Alert + ++++ SampleCode +fileName: Alert4 diff --git a/src/docs/pages/alert/md/alert5.md b/src/docs/pages/alert/md/alert5.md new file mode 100644 index 00000000..71892d2e --- /dev/null +++ b/src/docs/pages/alert/md/alert5.md @@ -0,0 +1,17 @@ +--- +order: 5 +type: sample +zh_CN: 延时关闭 +en_US: Delay +editUrl: $BASE/docs/pages/alert/md/alert5.md +--- + ++++ zh_CN +当autoClose设置为true后，默认情况下Alert会在5秒后关闭。设置不同的duration值，可以控制延时关闭的时间。 + + ++++ en_US +Alert + ++++ SampleCode +fileName: Alert5 diff --git a/src/docs/pages/alert/md/alert6.md b/src/docs/pages/alert/md/alert6.md new file mode 100644 index 00000000..a499c970 --- /dev/null +++ b/src/docs/pages/alert/md/alert6.md @@ -0,0 +1,18 @@ +--- +order: 6 +type: sample +zh_CN: Alert的显示和关闭 +en_US: Dispaly and close +editUrl: $BASE/docs/pages/alert/md/alert6.md +--- + ++++ zh_CN + 当设置active属性后，Alert将不会自动关闭，此时会触发onClose调用，您需要在onClose中切换显示状态。 + 这里，active与onClose方法需要同时提供，以便一起完成状态的切换过程。当前只有当点击关闭图标，或者设置了延时关闭时才会 + 调用onClose。 + ++++ en_US +Alert + ++++ SampleCode +fileName: Alert6 diff --git a/src/docs/pages/alert/md/api.md b/src/docs/pages/alert/md/api.md new file mode 100644 index 00000000..76cfc656 --- /dev/null +++ b/src/docs/pages/alert/md/api.md @@ -0,0 +1,35 @@ +--- + order: 100 + type: text + zh_CN: API + en_US: API + editUrl: $BASE/docs/pages/alert/md/api.md +--- + ++++ zh_CN +## API +Alert的属性如下所示： + +| 属性 | 名称 | 类型 | 默认值 | 描述 | +| --- | --- | --- | --- | --- | +| ref | Input Dom对象的引用 | function \| ref | - | 当需要获取dom对象时可设置此属性 | +| className | 样式名称 | string | alert | | +| extraClassName | 额外添加的样式名称 | string | - | | +| type | 类型 | string | info | 值可以是：info, ok, warning, error, mini, simple | +| active | 激活显示 | boolean | - | 如果不需要自行控制Alert的显示和关闭，可以不用设置，默认情况下加载后就显示 | +| duration | Alert持续显示的时间 | number | - | 单位毫秒 | +| onClose | 关闭Alert的回调 | function | - | 当点击关闭图标，或者设置了延时关闭时会触发调用。如果设置了active属性，请务必提供此方法 | +| title | Alert标题 | react node | - | | +| body | Alert内容 | react node | - | | +| autoClose | 是否自动关闭 | boolean | - | 是否自动关闭。如果为false，则表示无法延时关闭，必须手动触发或由其他组件控制关闭。 | +| hasCloseIcon | 是否显示关闭图标 | boolean | true | | +| icon | 左侧对应Alert类型的图标 | react node | - | 不同的类型默认提供不同的图标 | +| hasIcon | 是否显示Alert类型图标 | boolean | true | 不同的类型默认提供不同的图标 | +| style | Alert的样式 | object | - | | +| iconStyle | Alert类型的图标样式 | object | - | | +| closeStyle | 关闭图标的样式 | object | - | | + ++++ en_US + +## API +api diff --git a/src/docs/pages/alert/md/title.md b/src/docs/pages/alert/md/title.md new file mode 100644 index 00000000..41573a4a --- /dev/null +++ b/src/docs/pages/alert/md/title.md @@ -0,0 +1,19 @@ +--- +order: 0 +type: text +zh_CN: 告警提示 Alert +en_US: Alert +editUrl: $BASE/docs/pages/alert/md/title.md +--- + ++++ zh_CN +## 告警提示 Alert [editUrl] +Alert组件常用来进行错误或操作结果提示，也可以用来进行风险提示。 + +- 提供了多种类型的Alert +- Alert框体支持手动关闭或延时关闭 + + ++++ en_US +## Alert [editUrl] +Aelrt Description. \ No newline at end of file diff --git a/src/docs/pages/badge/BadgeIndex.js b/src/docs/pages/badge/BadgeIndex.js index 437281f7..1d715677 100755 --- a/src/docs/pages/badge/BadgeIndex.js +++ b/src/docs/pages/badge/BadgeIndex.js @@ -1,29 +1,14 @@ import React from 'react'; -import DocPage from '../../utils/DocPage'; -import Badge1 from './Badge1'; -import Badge2 from './Badge2'; -import Badge3 from './Badge3'; -import Badge4 from './Badge4'; -import Badge5 from './Badge5'; -import Badge6 from './Badge6'; -import Badge7 from './Badge7'; -import Badge8 from './Badge8'; +import DocPage2 from '../../utils/DocPage2'; +// const requireRaw2 = require.context('./samples', true, /.js$/); +const requireMd = require.context('!raw-loader!./md', false, /.md$/); +const requireCode = require.context('!raw-loader!./samples', false, /.js$/); +const requireJs = require.context('./samples', false, /.js$/); -const componentMapping = { - Badge1: , - Badge2: , - Badge3: , - Badge4: , - Badge5: , - Badge6: , - Badge7: , - Badge8: , -}; - -export default function BadgeIndex(props) { - return import('./doc.md')} - componentMapping={componentMapping} - />; +export default function BadgeIndex() { + return ; } \ No newline at end of file diff --git a/src/docs/pages/badge/md/api.md b/src/docs/pages/badge/md/api.md new file mode 100644 index 00000000..2fa78251 --- /dev/null +++ b/src/docs/pages/badge/md/api.md @@ -0,0 +1,28 @@ +--- + order: 100 + type: text + zh_CN: API + en_US: API + editUrl: $BASE/docs/pages/badge/md/api.md +--- + ++++ zh_CN +## API +Input的属性如下所示： + +| 属性 | 名称 | 类型 | 默认值 | 描述 | +| --- | --- | --- | --- | --- | +| ref | Input Dom对象的引用 | function \| ref | - | 当需要获取到按钮的dom对象时可设置此属性 | +| className | 样式名称 | string | badge | | +| extraClassName | 额外添加的样式名称 | string | - | | +| type | Badge类型 | string | normal | 值可以是：normal, dot, tag | +| body | 标记的内容 | react node | - | | +| color | 颜色 | string | error | 值可以是: info、ok、gray、warning、error、dark,也可以设置颜色对应的值如#334433, red，blue等 | +| active | 激活显示该Badge | boolean | true | | +| shake | 是否定时显示抖动效果 | boolean | false | | +| shakeDuration | 抖动持续事件(ms) | number | 1000 | | + ++++ en_US + +## API +api diff --git a/src/docs/pages/badge/md/badge1.md b/src/docs/pages/badge/md/badge1.md new file mode 100644 index 00000000..0869299f --- /dev/null +++ b/src/docs/pages/badge/md/badge1.md @@ -0,0 +1,17 @@ +--- +order: 1 +type: sample +zh_CN: 简单示例 +en_US: Simple Sample +editUrl: $BASE/docs/pages/badge/md/badge1.md +--- + ++++ zh_CN +一个简单的Badge的示例，在body中设置需要显示的标记。 + + ++++ en_US + + ++++ SampleCode +fileName: Badge1 diff --git a/src/docs/pages/badge/md/badge2.md b/src/docs/pages/badge/md/badge2.md new file mode 100644 index 00000000..a007ccbb --- /dev/null +++ b/src/docs/pages/badge/md/badge2.md @@ -0,0 +1,17 @@ +--- +order: 2 +type: sample +zh_CN: 不同颜色的Badge +en_US: Color +editUrl: $BASE/docs/pages/badge/md/badge2.md +--- + ++++ zh_CN + 默认有6中背景色的Badge可供使用，可设置color属性为： info, ok, gray, warning, error, dark其中的一种。 + + ++++ en_US +badge2 + ++++ SampleCode +fileName: Badge2 diff --git a/src/docs/pages/badge/md/badge3.md b/src/docs/pages/badge/md/badge3.md new file mode 100644 index 00000000..6687a748 --- /dev/null +++ b/src/docs/pages/badge/md/badge3.md @@ -0,0 +1,17 @@ +--- +order: 3 +type: sample +zh_CN: 自定义背景色 +en_US: background +editUrl: $BASE/docs/pages/badge/md/badge3.md +--- + ++++ zh_CN +如果默认的背景色无法满足需要，您还可以直接将color设置为其他颜色值，Badge将会应用这个颜色。 + + ++++ en_US +badge3 + ++++ SampleCode +fileName: Badge3 diff --git a/src/docs/pages/badge/md/badge4.md b/src/docs/pages/badge/md/badge4.md new file mode 100644 index 00000000..d05d9380 --- /dev/null +++ b/src/docs/pages/badge/md/badge4.md @@ -0,0 +1,17 @@ +--- +order: 4 +type: sample +zh_CN: 显示文字类的标记 +en_US: Display text +editUrl: $BASE/docs/pages/badge/md/badge4.md +--- + ++++ zh_CN +设置body属性，以便在Badge中显示文字类的标记。 + + ++++ en_US +badge4 + ++++ SampleCode +fileName: Badge4 diff --git a/src/docs/pages/badge/md/badge5.md b/src/docs/pages/badge/md/badge5.md new file mode 100644 index 00000000..0a8eab9c --- /dev/null +++ b/src/docs/pages/badge/md/badge5.md @@ -0,0 +1,17 @@ +--- +order: 5 +type: sample +zh_CN: 显示标记 +en_US: Display text +editUrl: $BASE/docs/pages/badge/md/badge5.md +--- + ++++ zh_CN +当type为dot时，标记显示为一个小圆点。 + + ++++ en_US +badge6 + ++++ SampleCode +fileName: Badge5 diff --git a/src/docs/pages/badge/md/badge6.md b/src/docs/pages/badge/md/badge6.md new file mode 100644 index 00000000..7dcbef2c --- /dev/null +++ b/src/docs/pages/badge/md/badge6.md @@ -0,0 +1,17 @@ +--- +order: 6 +type: sample +zh_CN: Tag标记 +en_US: Tag +editUrl: $BASE/docs/pages/badge/md/badge6.md +--- + ++++ zh_CN +当type设置为tag值时, Badge将作为单独的Tag使用。 + + ++++ en_US +badge6 + ++++ SampleCode +fileName: Badge6 diff --git a/src/docs/pages/badge/md/badge7.md b/src/docs/pages/badge/md/badge7.md new file mode 100644 index 00000000..d33147d7 --- /dev/null +++ b/src/docs/pages/badge/md/badge7.md @@ -0,0 +1,17 @@ +--- +order: 7 +type: sample +zh_CN: 激活Tag +en_US: Active +editUrl: $BASE/docs/pages/badge/md/badge7.md +--- + ++++ zh_CN + + + ++++ en_US +badge7 + ++++ SampleCode +fileName: Badge7 diff --git a/src/docs/pages/badge/md/badge8.md b/src/docs/pages/badge/md/badge8.md new file mode 100644 index 00000000..ce16fff8 --- /dev/null +++ b/src/docs/pages/badge/md/badge8.md @@ -0,0 +1,17 @@ +--- +order: 8 +type: sample +zh_CN: 抖动效果 +en_US: Shake +editUrl: $BASE/docs/pages/badge/md/badge8.md +--- + ++++ zh_CN + + + ++++ en_US +badge8 + ++++ SampleCode +fileName: Badge8 diff --git a/src/docs/pages/badge/md/title.md b/src/docs/pages/badge/md/title.md new file mode 100644 index 00000000..90945daf --- /dev/null +++ b/src/docs/pages/badge/md/title.md @@ -0,0 +1,20 @@ +--- +order: 0 +type: text +zh_CN: 标记 Badge +en_US: Badge +editUrl: $BASE/docs/pages/badge/md/title.md +--- + ++++ zh_CN +## 标记 Badge [editUrl] +Badge一般在组件的右上角提示一段简短标记，可以是数字或状态类的标记 + +Badge组件主要提供以下功能： +- 在右上角显示小圆点或内部有提示的标记 +- 作为单独的Tag使用时，而非在右上角显示 + + ++++ en_US +## Badge [editUrl] + Description. \ No newline at end of file diff --git a/src/docs/pages/badge/Badge1.js b/src/docs/pages/badge/samples/Badge1.js similarity index 100% rename from src/docs/pages/badge/Badge1.js rename to src/docs/pages/badge/samples/Badge1.js diff --git a/src/docs/pages/badge/Badge2.js b/src/docs/pages/badge/samples/Badge2.js similarity index 100% rename from src/docs/pages/badge/Badge2.js rename to src/docs/pages/badge/samples/Badge2.js diff --git a/src/docs/pages/badge/Badge3.js b/src/docs/pages/badge/samples/Badge3.js similarity index 100% rename from src/docs/pages/badge/Badge3.js rename to src/docs/pages/badge/samples/Badge3.js diff --git a/src/docs/pages/badge/Badge4.js b/src/docs/pages/badge/samples/Badge4.js similarity index 100% rename from src/docs/pages/badge/Badge4.js rename to src/docs/pages/badge/samples/Badge4.js diff --git a/src/docs/pages/badge/Badge5.js b/src/docs/pages/badge/samples/Badge5.js similarity index 100% rename from src/docs/pages/badge/Badge5.js rename to src/docs/pages/badge/samples/Badge5.js diff --git a/src/docs/pages/badge/Badge6.js b/src/docs/pages/badge/samples/Badge6.js similarity index 100% rename from src/docs/pages/badge/Badge6.js rename to src/docs/pages/badge/samples/Badge6.js diff --git a/src/docs/pages/badge/Badge7.js b/src/docs/pages/badge/samples/Badge7.js similarity index 100% rename from src/docs/pages/badge/Badge7.js rename to src/docs/pages/badge/samples/Badge7.js diff --git a/src/docs/pages/badge/Badge8.js b/src/docs/pages/badge/samples/Badge8.js similarity index 100% rename from src/docs/pages/badge/Badge8.js rename to src/docs/pages/badge/samples/Badge8.js diff --git a/src/docs/pages/blockquote/BqIndex.js b/src/docs/pages/blockquote/BqIndex.js index fa8145f1..41935cc6 100755 --- a/src/docs/pages/blockquote/BqIndex.js +++ b/src/docs/pages/blockquote/BqIndex.js @@ -1,24 +1,14 @@ import React from 'react'; -import DocPage from '../../utils/DocPage'; -import Bq1 from './samples/Bq1'; -import Bq2 from './samples/Bq2'; -import Bq4 from './samples/Bq4'; -import Bq3 from './samples/Bq3'; -import Bq5 from './samples/Bq5'; +import DocPage2 from '../../utils/DocPage2'; -const componentMapping = { - Bq1: , - Bq2: , - Bq3: , - Bq4: , - Bq5: , -}; +// const requireRaw2 = require.context('./samples', true, /.js$/); +const requireMd = require.context('!raw-loader!./md', false, /.md$/); +const requireCode = require.context('!raw-loader!./samples', false, /.js$/); +const requireJs = require.context('./samples', false, /.js$/); -export default function BqIndex(props) { - return <> - import('./doc.md')} - componentMapping={componentMapping} - /> - ; +export default function BqIndex() { + return ; } \ No newline at end of file diff --git a/src/docs/pages/blockquote/doc.md b/src/docs/pages/blockquote/doc.md deleted file mode 100755 index b343c1d5..00000000 --- a/src/docs/pages/blockquote/doc.md +++ /dev/null @@ -1,335 +0,0 @@ ------------ Title ------------ -[TITLE_BEGIN_zh_CN] -## 引用 Blockquote -Blockquote常用来标记一段文字的引用出处，可以一段说明性的文字或摘录自某处的名人名言。 - -* 提供了三种类型的Blockquote -* 可设置是否有边框、背景色、阴影 - -[TITLE_END_zh_CN] - - -[TITLE_BEGIN_en_US] -[TITLE_END_en_US] - -------------- Footer --------------------- -[FOOTER_BEGIN_zh_CN] -## API - -* Blockquote的属性如下所示: - -| 属性 | 名称 | 类型 | 默认值 | 描述 | -| --- | --- | --- | --- | --- | -| ref | Input Dom对象的引用 | function \| ref | - | 当需要获取dom对象时可设置此属性 | -| className | 样式名称 | string | blockquote | | -| extraClassName | 额外添加的样式名称 | string | - | | -| type | 类型 | string | normal | 值可以是：normal、primary、 secondary | -| hasBox | 是否显示阴影 | bool | false | | -| hasBorder | 是否有边框 | bool | false | | -| hasBackground | 是否有背景色 | bool | false | | - -* Header的属性如下所示: - -| 属性 | 名称 | 类型 | 默认值 | 描述 | -| --- | --- | --- | --- | --- | -| ref | Input Dom对象的引用 | function \| ref | - | 当需要获取dom对象时可设置此属性 | -| className | 样式名称 | string | blockquote | | -| extraClassName | 额外添加的样式名称 | string | - | | - -* Footer的属性如下所示: - -| 属性 | 名称 | 类型 | 默认值 | 描述 | -| --- | --- | --- | --- | --- | -| ref | Input Dom对象的引用 | function \| ref | - | 当需要获取dom对象时可设置此属性 | -| className | 样式名称 | string | blockquote | | -| extraClassName | 额外添加的样式名称 | string | - | | -| justify | 额外添加的样式名称 | string | - | | -[FOOTER_END_zh_CN] - -[FOOTER_BEGIN_en_US] -[FOOTER_END_en_US] - -------------- Samples --------------------- -[Bq1_BEGIN_zh_CN] -### 示例1 简单示例 - - 有三种类型的Blockquote可供选用，可以将type设置为 - 空值、primary、secondary。 - - -```jsx -import React from 'react'; -import {Blockquote} from 'react-windy-ui'; - -export default function Bq1() { - return <> -
- The HTML Element (or HTML Block Quotation Element) - indicates that the enclosed text is an extended quotation. - Usually, this is rendered visually by indentation - (see Notes for how to change it). A URL for the source of - the quotation may be given using the cite attribute, - while a text representation of the source can be given using - the <cite> element. -
- -
- The HTML Element (or HTML Block Quotation Element) - indicates that the enclosed text is an extended quotation. - Usually, this is rendered visually by indentation - (see Notes for how to change it). A URL for the source of - the quotation may be given using the cite attribute, - while a text representation of the source can be given using - the <cite> element. -
- -
- The HTML Element (or HTML Block Quotation Element) - indicates that the enclosed text is an extended quotation. - Usually, this is rendered visually by indentation - (see Notes for how to change it). A URL for the source of - the quotation may be given using the cite attribute, - while a text representation of the source can be given using - the <cite> element. -
- ; -} -``` -[Bq1_END_zh_CN] - -[Bq1_BEGIN_en_US] -[Bq1_END_en_US] ----------------------------------- -[Bq2_BEGIN_zh_CN] -### 示例2 背景和边框 - - - 将hasBorder属性设置为true后，将显示边框；hasBackground - 设置为true后，将会提供一个默认的背景色。 - - -```jsx -import React from 'react'; -import {Blockquote} from 'react-windy-ui'; - -export default function Bq2() { - return <> -
- The HTML Element (or HTML Block Quotation Element) - indicates that the enclosed text is an extended quotation. - Usually, this is rendered visually by indentation - (see Notes for how to change it). A URL for the source of - the quotation may be given using the cite attribute, - while a text representation of the source can be given using - the <cite> element. -
- -
- The HTML Element (or HTML Block Quotation Element) - indicates that the enclosed text is an extended quotation. - Usually, this is rendered visually by indentation - (see Notes for how to change it). A URL for the source of - the quotation may be given using the cite attribute, - while a text representation of the source can be given using - the <cite> element. -
- -
- The HTML Element (or HTML Block Quotation Element) - indicates that the enclosed text is an extended quotation. - Usually, this is rendered visually by indentation - (see Notes for how to change it). A URL for the source of - the quotation may be given using the cite attribute, - while a text representation of the source can be given using - the <cite> element. -
- ; -} -``` -[Bq2_END_zh_CN] - -[Bq2_BEGIN_en_US] -[Bq2_END_en_US] ----------------------------------- -[Bq3_BEGIN_zh_CN] -### 示例3 阴影 - - - 将hasBox属性设置为true后，将显示边缘阴影； - - -```jsx -import React from 'react'; -import {Blockquote} from 'react-windy-ui'; - -export default function Bq3() { - return <> -
- The HTML Element (or HTML Block Quotation Element) - indicates that the enclosed text is an extended quotation. - Usually, this is rendered visually by indentation - (see Notes for how to change it). A URL for the source of - the quotation may be given using the cite attribute, - while a text representation of the source can be given using - the <cite> element. -
- -
- The HTML Element (or HTML Block Quotation Element) - indicates that the enclosed text is an extended quotation. - Usually, this is rendered visually by indentation - (see Notes for how to change it). A URL for the source of - the quotation may be given using the cite attribute, - while a text representation of the source can be given using - the <cite> element. -
- -
- The HTML Element (or HTML Block Quotation Element) - indicates that the enclosed text is an extended quotation. - Usually, this is rendered visually by indentation - (see Notes for how to change it). A URL for the source of - the quotation may be given using the cite attribute, - while a text representation of the source can be given using - the <cite> element. -
- ; -} -``` -[Bq3_END_zh_CN] - -[Bq3_BEGIN_en_US] -[Bq3_END_en_US] ----------------------------------- -[Bq4_BEGIN_zh_CN] -### 示例4 显示头部和尾部内容 - - - 可以在Blockquote组件中添加<Blockquote.Header/>和<Blockquote.Footer/>, - 这样就会显示头部和尾部的内容区域。对于Footer你可以设置justify属性，指定水平方向上的分布规则。 - 居左时的值为start, 居中时的值为center, 居右时的值是right。其他更多的参数值请参阅API。 - - -```jsx -import React from 'react'; -import {Blockquote} from 'react-windy-ui'; - -export default function Bq4() { - return <> -
- Blockquote Header -
- The HTML Element (or HTML Block Quotation Element) - indicates that the enclosed text is an extended quotation. - Usually, this is rendered visually by indentation - (see Notes for how to change it). A URL for the source of - the quotation may be given using the cite attribute, - while a text representation of the source can be given using - the <cite> element. -
- -Blockquote Footer -
- -
- Blockquote Header -
- The HTML Element (or HTML Block Quotation Element) - indicates that the enclosed text is an extended quotation. - Usually, this is rendered visually by indentation - (see Notes for how to change it). A URL for the source of - the quotation may be given using the cite attribute, - while a text representation of the source can be given using - the <cite> element. -
- -Blockquote Footer -
- -
- Blockquote Header -
- The HTML Element (or HTML Block Quotation Element) - indicates that the enclosed text is an extended quotation. - Usually, this is rendered visually by indentation - (see Notes for how to change it). A URL for the source of - the quotation may be given using the cite attribute, - while a text representation of the source can be given using - the <cite> element. -
- -Blockquote Footer -
- ; -} -``` -[Bq4_END_zh_CN] - -[Bq4_BEGIN_en_US] -[Bq4_END_en_US] ----------------------------------- -[Bq5_BEGIN_zh_CN] -### 示例5 自定义文字即背景色 - - - 通过extraClassName属性，您可以给Blockquote添加额外的样式去覆盖文字颜色及背景色。 - - -```jsx -import React from 'react'; -import {Blockquote} from 'react-windy-ui'; - -export default function Bq5() { - return <> -
- Blockquote Header -
- The HTML Element (or HTML Block Quotation Element) - indicates that the enclosed text is an extended quotation. - Usually, this is rendered visually by indentation - (see Notes for how to change it). A URL for the source of - the quotation may be given using the cite attribute, - while a text representation of the source can be given using - the <cite> element. -
- -Blockquote Footer -
- -
- Blockquote - Header -
- The HTML Element (or HTML Block Quotation Element) - indicates that the enclosed text is an extended quotation. - Usually, this is rendered visually by indentation - (see Notes for how to change it). A URL for the source of - the quotation may be given using the cite attribute, - while a text representation of the source can be given using - the <cite> element. -
- -Blockquote - Footer -
- -
- Blockquote - Header -
- The HTML Element (or HTML Block Quotation Element) - indicates that the enclosed text is an extended quotation. - Usually, this is rendered visually by indentation - (see Notes for how to change it). A URL for the source of - the quotation may be given using the cite attribute, - while a text representation of the source can be given using - the <cite> element. -
- -Blockquote - Footer -
- ; -} -``` -[Bq5_END_zh_CN] - -[Bq5_BEGIN_en_US] -[Bq5_END_en_US] ----------------------------------- \ No newline at end of file diff --git a/src/docs/pages/blockquote/md/api.md b/src/docs/pages/blockquote/md/api.md new file mode 100644 index 00000000..77e2373e --- /dev/null +++ b/src/docs/pages/blockquote/md/api.md @@ -0,0 +1,44 @@ +--- + order: 100 + type: text + zh_CN: API + en_US: API + editUrl: $BASE/docs/pages/blockquote/md/api.md +--- + ++++ zh_CN +## API + +* Blockquote的属性如下所示: + +| 属性 | 名称 | 类型 | 默认值 | 描述 | +| --- | --- | --- | --- | --- | +| ref | Input Dom对象的引用 | function \| ref | - | 当需要获取dom对象时可设置此属性 | +| className | 样式名称 | string | blockquote | | +| extraClassName | 额外添加的样式名称 | string | - | | +| type | 类型 | string | normal | 值可以是：normal、primary、 secondary | +| hasBox | 是否显示阴影 | bool | false | | +| hasBorder | 是否有边框 | bool | false | | +| hasBackground | 是否有背景色 | bool | false | | + +* Header的属性如下所示: + +| 属性 | 名称 | 类型 | 默认值 | 描述 | +| --- | --- | --- | --- | --- | +| ref | Input Dom对象的引用 | function \| ref | - | 当需要获取dom对象时可设置此属性 | +| className | 样式名称 | string | blockquote | | +| extraClassName | 额外添加的样式名称 | string | - | | + +* Footer的属性如下所示: + +| 属性 | 名称 | 类型 | 默认值 | 描述 | +| --- | --- | --- | --- | --- | +| ref | Input Dom对象的引用 | function \| ref | - | 当需要获取dom对象时可设置此属性 | +| className | 样式名称 | string | blockquote | | +| extraClassName | 额外添加的样式名称 | string | - | | +| justify | 额外添加的样式名称 | string | - | | + ++++ en_US + +## API +api diff --git a/src/docs/pages/blockquote/md/bq1.md b/src/docs/pages/blockquote/md/bq1.md new file mode 100644 index 00000000..d03eea03 --- /dev/null +++ b/src/docs/pages/blockquote/md/bq1.md @@ -0,0 +1,18 @@ +--- +order: 1 +type: sample +zh_CN: 简单示例 +en_US: Simple Sample +editUrl: $BASE/docs/pages/blockquote/md/bq1.md +--- + ++++ zh_CN +有三种类型的Blockquote可供选用，可以将type设置为 +空值、primary、secondary。 + + ++++ en_US +Bq1 + ++++ SampleCode +fileName: Bq1 diff --git a/src/docs/pages/blockquote/md/bq2.md b/src/docs/pages/blockquote/md/bq2.md new file mode 100644 index 00000000..b0417316 --- /dev/null +++ b/src/docs/pages/blockquote/md/bq2.md @@ -0,0 +1,18 @@ +--- +order: 2 +type: sample +zh_CN: 背景和边框 +en_US: Background and border +editUrl: $BASE/docs/pages/blockquote/md/bq2.md +--- + ++++ zh_CN + 将hasBorder属性设置为true后，将显示边框；hasBackground + 设置为true后，将会提供一个默认的背景色。 + + ++++ en_US +Bq2 + ++++ SampleCode +fileName: Bq2 diff --git a/src/docs/pages/blockquote/md/bq3.md b/src/docs/pages/blockquote/md/bq3.md new file mode 100644 index 00000000..40f3f1ba --- /dev/null +++ b/src/docs/pages/blockquote/md/bq3.md @@ -0,0 +1,17 @@ +--- +order: 3 +type: sample +zh_CN: 阴影 +en_US: Box Shadow +editUrl: $BASE/docs/pages/blockquote/md/bq3.md +--- + ++++ zh_CN +将hasBox属性设置为true后，将显示边缘阴影； + + ++++ en_US +Bq3 + ++++ SampleCode +fileName: Bq3 diff --git a/src/docs/pages/blockquote/md/bq4.md b/src/docs/pages/blockquote/md/bq4.md new file mode 100644 index 00000000..48fee286 --- /dev/null +++ b/src/docs/pages/blockquote/md/bq4.md @@ -0,0 +1,19 @@ +--- +order: 4 +type: sample +zh_CN: 显示头部和尾部内容 +en_US: Header and footer +editUrl: $BASE/docs/pages/blockquote/md/bq4.md +--- + ++++ zh_CN +可以在Blockquote组件中添加<Blockquote.Header/>和<Blockquote.Footer/>, +这样就会显示头部和尾部的内容区域。对于Footer你可以设置justify属性，指定水平方向上的分布规则。 +居左时的值为start, 居中时的值为center, 居右时的值是right。其他更多的参数值请参阅API。 + + ++++ en_US +Bq3 + ++++ SampleCode +fileName: Bq4 diff --git a/src/docs/pages/blockquote/md/bq5.md b/src/docs/pages/blockquote/md/bq5.md new file mode 100644 index 00000000..ec0db26c --- /dev/null +++ b/src/docs/pages/blockquote/md/bq5.md @@ -0,0 +1,16 @@ +--- +order: 5 +type: sample +zh_CN: 自定义文字即背景色 +en_US: Header and tail +editUrl: $BASE/docs/pages/blockquote/md/bq5.md +--- + ++++ zh_CN +通过extraClassName属性，您可以给Blockquote添加额外的样式去覆盖文字颜色及背景色。 + ++++ en_US +Bq5 + ++++ SampleCode +fileName: Bq5 diff --git a/src/docs/pages/blockquote/md/title.md b/src/docs/pages/blockquote/md/title.md new file mode 100644 index 00000000..f4ae77ec --- /dev/null +++ b/src/docs/pages/blockquote/md/title.md @@ -0,0 +1,23 @@ +--- +order: 0 +type: text +zh_CN: 引用 Blockquote +en_US: Blockquote +editUrl: $BASE/docs/pages/blockquote/md/title.md +--- + ++++ zh_CN +## 引用 Blockquote [editUrl] +Blockquote常用来标记一段文字的引用出处，可以一段说明性的文字或摘录自某处的名人名言。 + +* 提供了三种类型的Blockquote +* 可设置是否有边框、背景色、阴影 + +Badge组件主要提供以下功能： +- 在右上角显示小圆点或内部有提示的标记 +- 作为单独的Tag使用时，而非在右上角显示 + + ++++ en_US +## Blockquote [editUrl] + Description. \ No newline at end of file diff --git a/src/docs/pages/breadcumb/BcIndex.js b/src/docs/pages/breadcumb/BcIndex.js index 3bd3824f..d2dc38e6 100755 --- a/src/docs/pages/breadcumb/BcIndex.js +++ b/src/docs/pages/breadcumb/BcIndex.js @@ -1,22 +1,13 @@ import React from 'react'; -import DocPage from '../../utils/DocPage'; -import Bc1 from './samples/Bc1'; -import Bc2 from './samples/Bc2'; -import Bc3 from './samples/Bc3'; -import Bc4 from './samples/Bc4'; +import DocPage2 from '../../utils/DocPage2'; -const componentMapping = { - Bc1: , - Bc2: , - Bc3: , - Bc4: -}; +const requireMd = require.context('!raw-loader!./md', false, /.md$/); +const requireCode = require.context('!raw-loader!./samples', false, /.js$/); +const requireJs = require.context('./samples', false, /.js$/); -export default function BcIndex(props) { - return <> - import('./doc.md')} - componentMapping={componentMapping} - /> - ; +export default function BcIndex() { + return ; } \ No newline at end of file diff --git a/src/docs/pages/breadcumb/md/api.md b/src/docs/pages/breadcumb/md/api.md new file mode 100644 index 00000000..3a06d5c7 --- /dev/null +++ b/src/docs/pages/breadcumb/md/api.md @@ -0,0 +1,34 @@ +--- + order: 100 + type: text + zh_CN: API + en_US: API + editUrl: $BASE/docs/pages/breadcumb/md/api.md +--- + ++++ zh_CN +## API [editUrl] + +- Breadcrumb的属性如下所示： + +| 属性 | 名称 | 类型 | 默认值 | 描述 | +| --- | --- | --- | --- | --- | +| ref | Dom对象的引用 | function \| ref | - | | +| className | 样式名称 | string | breadcrumb | | +| extraClassName | 额外添加的样式名称 | string | - | | +| hasBackground | 是否有背景 | boolean | false | | +| separator | 分隔符 | react node | - | | + +- Item的属性如下所示： + +| 属性 | 名称 | 类型 | 默认值 | 描述 | +| --- | --- | --- | --- | --- | +| ref | Dom对象的引用 | function \| ref | - | | +| className | 样式名称 | string | breadcrumb | | +| extraClassName | 额外添加的样式名称 | string | - | | +| active | 是否显示激活状态 | boolean | false | | + ++++ en_US + +## API [editUrl] +api diff --git a/src/docs/pages/breadcumb/md/bc1.md b/src/docs/pages/breadcumb/md/bc1.md new file mode 100644 index 00000000..800ee5ce --- /dev/null +++ b/src/docs/pages/breadcumb/md/bc1.md @@ -0,0 +1,18 @@ +--- +order: 1 +type: sample +zh_CN: 简单示例 +en_US: Simple Sample +editUrl: $BASE/docs/pages/breadcumb/md/bc1.md +--- + ++++ zh_CN +面包屑组件由Breadcrumb与Breadcrumb.Item两部分组成， + 通常将最后一个Item的active属性设置为true后，显示选中后的状态。 + + ++++ en_US +Bc1 + ++++ SampleCode +fileName: Bc1 diff --git a/src/docs/pages/breadcumb/md/bc2.md b/src/docs/pages/breadcumb/md/bc2.md new file mode 100644 index 00000000..edafea71 --- /dev/null +++ b/src/docs/pages/breadcumb/md/bc2.md @@ -0,0 +1,16 @@ +--- +order: 2 +type: sample +zh_CN: 背景色 +en_US: Background +editUrl: $BASE/docs/pages/breadcumb/md/bc2.md +--- + ++++ zh_CN + 将hasBackground设置为true后，会显示一个灰色背景。 + ++++ en_US +Bc2 + ++++ SampleCode +fileName: Bc2 diff --git a/src/docs/pages/breadcumb/md/bc3.md b/src/docs/pages/breadcumb/md/bc3.md new file mode 100644 index 00000000..7bc9f2ab --- /dev/null +++ b/src/docs/pages/breadcumb/md/bc3.md @@ -0,0 +1,16 @@ +--- +order: 3 +type: sample +zh_CN: 使用不同的分隔符 +en_US: Separator +editUrl: $BASE/docs/pages/breadcumb/md/bc3.md +--- + ++++ zh_CN +如果需要使用不同的分隔符，可以设置将separator属性。 + ++++ en_US +Bc3 + ++++ SampleCode +fileName: Bc3 diff --git a/src/docs/pages/breadcumb/md/bc4.md b/src/docs/pages/breadcumb/md/bc4.md new file mode 100644 index 00000000..df4fa1ef --- /dev/null +++ b/src/docs/pages/breadcumb/md/bc4.md @@ -0,0 +1,17 @@ +--- +order: 4 +type: sample +zh_CN: 结合其他组件使用 +en_US: Integrate with other components +editUrl: $BASE/docs/pages/breadcumb/md/bc4.md +--- + ++++ zh_CN +Breadcrumb的Item可以与其他组件一起搭配使用，比如这里的例子就在Item中结合使用了 + Tooltip和Dropdown组件。 + ++++ en_US +Bc4 + ++++ SampleCode +fileName: Bc4 diff --git a/src/docs/pages/breadcumb/md/title.md b/src/docs/pages/breadcumb/md/title.md new file mode 100644 index 00000000..99054c04 --- /dev/null +++ b/src/docs/pages/breadcumb/md/title.md @@ -0,0 +1,16 @@ +--- +order: 0 +type: text +zh_CN: 面包屑Breadcrumb +en_US: Breadcrumb +editUrl: $BASE/docs/pages/breadcumb/md/title.md +--- + ++++ zh_CN +## 面包屑Breadcrumb [editUrl] +Breadcrumb组件常用来显示当前页面所处的层级位置，允许用户切换导航地址。 + + ++++ en_US +## Breadcrumb [editUrl] + 面包屑Breadcrumb. \ No newline at end of file diff --git a/src/docs/pages/button/ButtonIndex.js b/src/docs/pages/button/ButtonIndex.js index fe8d4c84..4df04c68 100755 --- a/src/docs/pages/button/ButtonIndex.js +++ b/src/docs/pages/button/ButtonIndex.js @@ -1,73 +1,14 @@ import React from 'react'; -import SampleBtn1 from './samples/SampleBtn1'; -import SampleBtn2 from './samples/SampleBtn2'; -import SampleBtn3 from './samples/SampleBtn3'; -import SampleBtn4 from './samples/SampleBtn4'; -import SampleBtn5 from './samples/SampleBtn5'; -import SampleBtn6 from './samples/SampleBtn6'; -import SampleBtn7 from './samples/SampleBtn7'; -import SampleBtn8 from './samples/SampleBtn8'; -import SampleBtn9 from './samples/SampleBtn9'; -import SampleBtn10 from './samples/SampleBtn10'; -import SampleBtn11 from './samples/SampleBtn11'; -import SampleBtn12 from './samples/SampleBtn12'; -import SampleBtn13 from './samples/SampleBtn13'; -import DocPage from '../../utils/DocPage'; -import SampleBtn14 from './samples/SampleBtn14'; -import SampleBtn15 from './samples/SampleBtn15'; -import SampleBtn16 from './samples/SampleBtn16'; -import SampleBtn17 from './samples/SampleBtn17'; -import SampleBtn18 from './samples/SampleBtn18'; +import DocPage2 from '../../utils/DocPage2'; -const componentMapping = { - SampleBtn1: , - SampleBtn2: , - SampleBtn3: , - SampleBtn4: , - SampleBtn5: , - SampleBtn6: , - SampleBtn7: , - SampleBtn8: , - SampleBtn9: , - SampleBtn10: , - SampleBtn11: , - SampleBtn12: , - SampleBtn13: , - SampleBtn14: , - SampleBtn15: , - SampleBtn16: , - SampleBtn17: , - SampleBtn18: , -}; - -//todo: map all js and md files -const requireRaw = require.context('!raw-loader!./', false, /doc.md$/); - -const requireRaw2 = require.context('./samples', true, /.js$/); +// const requireRaw2 = require.context('./samples', true, /.js$/); +const requireMd = require.context('!raw-loader!./md', false, /.md$/); +const requireCode = require.context('!raw-loader!./samples', false, /.js$/); +const requireJs = require.context('./samples', false, /.js$/); export default function ButtonIndex() { - - /* requireRaw.keys().forEach((filename) => { -console.log(requireRaw(filename)); - });*/ - - let stop=false; - let Comp; - requireRaw2.keys().forEach((filename) => { - console.log((filename)); - if(stop){ - return; - } - Comp = requireRaw2(filename).default; - // console.log(requireRaw2(filename)); - stop=true; - }); - - return <> - {/*{}*/} - import('./doc.md')} - componentMapping={componentMapping} - /> - ; + return ; } \ No newline at end of file diff --git a/src/docs/pages/button/TestMd.js b/src/docs/pages/button/TestMd.js deleted file mode 100755 index 19529442..00000000 --- a/src/docs/pages/button/TestMd.js +++ /dev/null @@ -1,26 +0,0 @@ -import React, {useEffect} from 'react'; -import md from './button.md'; -import {compiler} from 'markdown-to-jsx'; -import {Button} from 'react-windy-ui'; -import {PrismLight as SyntaxHighlighter} from 'react-syntax-highlighter'; -import {okaidia as sty} from 'react-syntax-highlighter/dist/esm/styles/prism'; -import SampleBtn1 from './samples/SampleBtn1'; -import {jsx} from 'react-syntax-highlighter/dist/cjs/languages/prism'; -import {Badge} from '../../../components/src'; - -export default function TestMd() { - useEffect(() => { - SyntaxHighlighter.registerLanguage('jsx', jsx); - // SyntaxHighlighter.registerLanguage('javascript', javascript); - // SyntaxHighlighter.registerLanguage('sass', sass); - // SyntaxHighlighter.registerLanguage('scss', scss); - }, []); - - return compiler(md, { - overrides: { - Button: Button, - SampleBtn1: SampleBtn1, - Badge, - }, - }); -} \ No newline at end of file diff --git a/src/docs/pages/button/doc.md b/src/docs/pages/button/doc.md deleted file mode 100755 index f2048f0b..00000000 --- a/src/docs/pages/button/doc.md +++ /dev/null @@ -1,609 +0,0 @@ - ------------ Title ------------ -[TITLE_BEGIN_zh_CN] -## 按钮 Button - -按钮，作为网页上最常使用的控件，Windy UI提供了如下几种按钮 - -- 默认的灰色按钮 -- 主色调的按钮 -- 次色调的按钮 -- 只显示边框的按钮 - -从色调上区分，提供了如下几种 -- Primary -- Secondary -- Info -- Warning -- Error -- Red/Blue/Green......等各类颜色 - -另外提供了大、中、小三种尺寸以供使用。 -[TITLE_END_zh_CN] - - -[TITLE_BEGIN_en_US] -## Button -Button as the most common used widget in web, Windy UI currently provides the following kinds of buttons - -- 默认的灰色按钮 -- 主色调的按钮 -- 次色调的按钮 -- 只显示边框的按钮 - -从色调上区分，提供了如下几种 -- Primary -- Secondary -- Info -- Warning -- Error -- Red/Blue/Green......等各类颜色 - -另外提供了大、中、小三种尺寸以供使用。 -[TITLE_END_en_US] - -------------- Footer --------------------- -[FOOTER_BEGIN_zh_CN] -## API -按钮的属性如下所示： - -| 属性 | 名称 | 类型 | 默认值 | 描述 | -| --- | --- | --- | --- | --- | -| ref | 按钮Dom对象的引用 | function \| ref | - | 当需要获取到按钮的dom对象时可设置此属性 | -| className | 样式名称 | string | button | | -| extraClassName | 额外添加的样式名称 | string | - | 比如设置为’aClass bClass', 按钮的实际样式是'aClass bClass button' | -| type | 按钮的类型 | string | - | 值可以是：ok, primary, secondary, info, success, warning, error，danger | -| nativeType | 原生的按钮类型 | string | button | 值可以是： button, reset, submit, a | -| active | 激活并选中此按钮 | boolean | - | | -| size | 按钮的尺寸 | string | medium | 值可以是: large, medium, small或者不设置 | -| outline | 是否显示成空心按钮 | boolean | false | | -| circle | 是否显示成圆形按钮 | boolean | false | | -| hasMinWidth | 是否设置最小宽度 | boolean | false | | -| disabled | 是否禁用此按钮 | boolean | false | | -| onClick | 点击按钮触发的回调 | function | - | | -| block | 将按钮宽度设置为100%的行宽 | boolean | `false` | | -| color | 按钮颜色 | boolean | `false` | color和type只需要选择其一即可。值可以是: black, blue,brown, cyan, dark, green, gray, gray-darker, light, light-gray, orange, pink, purple, red, yellow, teal, violet, white | - - -[FOOTER_END_zh_CN] - -[FOOTER_BEGIN_en_US] -[FOOTER_END_en_US] ----------------------------------- - -------------- Samples --------------------- -[SampleBtn1_BEGIN_zh_CN] -### 示例1: 普通按钮 - -
- 提示 -
- 常规使用的话，除了默认按钮以外，还提供了"primary"、"secondary"两种类型的按钮。 -
-
- -```jsx -import React from 'react'; -import {Button} from 'react-windy-ui'; - -const SampleBtn1 = () => { - return <> - - - - ; -}; -``` -[SampleBtn1_END_zh_CN] - -[SampleBtn1_BEGIN_en_US] -[SampleBtn1_END_en_US] ----------------------------------- -[SampleBtn2_BEGIN_zh_CN] -### 示例2: 对应不同Error级别的按钮 - -
- 提示 -
- 同样，这里可以设置type属性，呈现不同Error级别的按钮。 -
-
- -```jsx -import React from 'react'; -import {Button} from 'react-windy-ui'; - -const SampleBtn2 = () => { - return <> - - - - ; -}; - -export default SampleBtn2; -``` -[SampleBtn2_END_zh_CN] - - -[SampleBtn2_BEGIN_en_US] -[SampleBtn2_END_en_US] ----------------------------------- -[SampleBtn3_BEGIN_zh_CN] -### 示例3: 不同类型的按钮 - -
- 提示 -
- 如果按钮是一个链接，或者是对应的reset、submit按钮时，可以设置nativeType属性，这样就可以在页面上展示出你所期望的按钮。 -
-
- -```jsx -import React from 'react'; -import {Button} from 'react-windy-ui'; - -const SampleBtn3 = () => { - return <> - - - - ; -}; - -export default SampleBtn3; -``` -[SampleBtn3_END_zh_CN] - - -[SampleBtn3_BEGIN_en_US] -[SampleBtn3_END_en_US] ----------------------------------- -[SampleBtn4_BEGIN_zh_CN] -### 示例4: 设置最小宽度 - -
- 提示 -
- 当设置了'hasMinWindth'属性后，按钮的宽度将会默认添加一个最小值为'5rem'的限制。 -
-
- -```jsx -import React from 'react'; -import {Button} from 'react-windy-ui'; - -const SampleBtn4 = () => { - return <> - - - - - ; -}; - -export default SampleBtn4; -``` -[SampleBtn4_END_zh_CN] - - -[SampleBtn4_BEGIN_en_US] -[SampleBtn4_END_en_US] ----------------------------------- - -[SampleBtn5_BEGIN_zh_CN] -### 示例5: 按钮大小 - -
- 提示 -
- 默认提供了三种大小的按钮， 大（large）、中（medium）、小（small）。如果需要自定义定义高度和宽度的话，可以设置'lineHeight'、'padding'属性。 -
-
- -```jsx -import React from 'react'; -import {Button} from 'react-windy-ui'; - -const SampleBtn5 = () => { - return <> - - -
- - - - - ; -}; - -export default SampleBtn5; -``` -[SampleBtn5_END_zh_CN] - - -[SampleBtn5_BEGIN_en_US] -[SampleBtn5_END_en_US] ----------------------------------- -[SampleBtn6_BEGIN_zh_CN] -### 示例6: 圆形按钮 - -
- 提示 -
- 将circle属性设置为true后，将展示成圆形按钮。 -
-
- -```jsx -import React from 'react'; -import {Button} from 'react-windy-ui'; - -const SampleBtn6 = () => { - return <> - - - - - - - ; -}; - -export default SampleBtn6; -``` -[SampleBtn6_END_zh_CN] - - -[SampleBtn6_BEGIN_en_US] -[SampleBtn6_END_en_US] ----------------------------------- -[SampleBtn7_BEGIN_zh_CN] -### 示例7: 不同色彩 - -
- 提示 -
- 设置'color'属性，可以获得色彩不同的按钮。想了解更多可设置的参数值，请参阅API文档。 -
-
- -```jsx -import React from 'react'; -import {Button} from 'react-windy-ui'; - -const SampleBtn7 = () => { - return <> - - - - - - - -
- - - - - - - - ; -}; - -export default SampleBtn7; -``` -[SampleBtn7_END_zh_CN] - - -[SampleBtn7_BEGIN_en_US] -[SampleBtn7_END_en_US] ----------------------------------- -[SampleBtn8_BEGIN_zh_CN] -### 示例8: 默认只显示边框的按钮 - -
- 提示 -
- 将outline属性设置为true后，将展示成默认只显示边框的按钮。 -
-
- -```jsx -import React from 'react'; -import {Button} from 'react-windy-ui'; - -const SampleBtn8 = () => { - return <> - - - - - - - -
- - - - - - - - ; -}; - -export default SampleBtn8; -``` -[SampleBtn8_END_zh_CN] - - -[SampleBtn8_BEGIN_en_US] -[SampleBtn8_END_en_US] ----------------------------------- -[SampleBtn9_BEGIN_zh_CN] -### 示例9: 占据整行显示 - -
- 提示 -
- 将block属性设置为true后，按钮的宽度将变成100%并占据整行。 -
-
- -```jsx -import React from 'react'; -import {Button} from 'react-windy-ui'; - -const SampleBtn9 = () => { - return <> - - - - - - ; -}; - -export default SampleBtn9; -``` -[SampleBtn9_END_zh_CN] - - -[SampleBtn9_BEGIN_en_US] -[SampleBtn9_END_en_US] ----------------------------------- -[SampleBtn10_BEGIN_zh_CN] -### 示例10: 禁用按钮 -
- 提示 -
- 将disabled设置为true后，将禁用对应的Button。 -
-
- - -```jsx -import React, {useState} from 'react'; -import {Button, Toggle, Loader} from 'react-windy-ui'; - -const SampleBtn10 = () => { - const [disabled, setDisabled] = useState(false); - return <> - setDisabled(value)}/> -
- - - - - ; -}; - -export default SampleBtn10; -``` -[SampleBtn10_END_zh_CN] - - -[SampleBtn10_BEGIN_en_US] -[SampleBtn10_END_en_US] ----------------------------------- -[SampleBtn11_BEGIN_zh_CN] -### 示例11: 按钮组 - -
- 提示 -
- 按钮组是由一系列按钮组合而成的一个整体，一般可用于导航切换。按钮组可以通过设置'block'属性值，使内部的按钮按比例占据整行进行显示。 -
-
- -```jsx -import React from 'react'; -import {Button, ButtonGroup} from 'react-windy-ui'; - -const SampleBtn11 = () => { - return <> - - - - - - -

- - - - - - ; -}; - -export default SampleBtn11; -``` -[SampleBtn11_END_zh_CN] - - -[SampleBtn11_BEGIN_en_US] -[SampleBtn11_END_en_US] ----------------------------------- -[SampleBtn12_BEGIN_zh_CN] -### 示例12: 显示图标 - -
- 提示 -
- 你可以按需在按钮中放置图标，这里使用了'fontawesome'的图标库进行示例。当然你也可以使用其他第三方图标库。而且即便不想引入图标库的话， - 也可以嵌入对应的svg代码，但记得给其添加对应的样式'svg icon'，否则你就得自行设定字体、间距、颜色等css属性了。 -
-
- -```jsx -import React from 'react'; -import {Button, IconList} from 'react-windy-ui'; - -const SampleBtn12 = () => { - return <> - - - - ; -}; - -export default SampleBtn12; -``` -[SampleBtn12_END_zh_CN] - - -[SampleBtn12_BEGIN_en_US] -[SampleBtn12_END_en_US] ----------------------------------- -[SampleBtn13_BEGIN_zh_CN] -### 示例13: Inverted按钮 - -
- 提示 -
- 普通的按钮会有背景色和边框，如果将inverted属性设置为true, - 则一开始按钮不会显示边框和背景色。只有当获取鼠标光标或点击后才会有对应的变化。 -
-
- -```jsx -import React from 'react'; -import { - Button, - IconArrowLeft, - IconArrowRight, - IconCalendar, - IconList, - Navbar, -} from 'react-windy-ui'; - -const SampleBtn13 = () => { - return <> -
- -   - -
- - - - My Site - - - - - - - - - - - - - - - - - ; -}; - -export default SampleBtn13; -``` -[SampleBtn13_END_zh_CN] - -[SampleBtn13_BEGIN_en_US] -[SampleBtn13_END_en_US] - ----------------------------------- -[SampleBtn14_BEGIN_zh_CN] -### 示例14: 按钮Focus - -
- 提示 -
- 给按钮设置一个Ref对象后，便可触发按钮的focus事件。你可以在class的componentDidMount方法中调用focus方法，或者在react hook中 - 的useEffect()方法中触发focus。 -
-
- -```jsx -import React, {useEffect, useRef} from 'react'; -import {Button} from 'react-windy-ui'; - -const SampleBtn14 = () => { - const ctrlRef = useRef(null); - useEffect(() => { - //focus on the button while it is mounted - ctrlRef.current.focus(); - }, []); - - const click = () => ctrlRef.current.focus(); - return <> - - - ; -}; - -export default SampleBtn14; -``` -[SampleBtn14_END_zh_CN] - -[SampleBtn14_BEGIN_en_US] -[SampleBtn14_END_en_US] - ----------------------------------- - diff --git a/src/docs/pages/button/md/api.md b/src/docs/pages/button/md/api.md new file mode 100644 index 00000000..b04052b0 --- /dev/null +++ b/src/docs/pages/button/md/api.md @@ -0,0 +1,53 @@ +--- + order: 100 + type: text + zh_CN: API + en_US: API + editUrl: $BASE/docs/pages/button/md/api.md +--- + ++++ zh_CN + +## API +按钮的属性如下所示： + +| 属性 | 名称 | 类型 | 默认值 | 描述 | +| --- | --- | --- | --- | --- | +| ref | 按钮Dom对象的引用 | function \| ref | - | 当需要获取到按钮的dom对象时可设置此属性 | +| className | 样式名称 | string | button | | +| extraClassName | 额外添加的样式名称 | string | - | 比如设置为’aClass bClass', 按钮的实际样式是'aClass bClass button' | +| type | 按钮的类型 | string | - | 值可以是：ok, primary, secondary, info, success, warning, error，danger | +| nativeType | 原生的按钮类型 | string | button | 值可以是： button, reset, submit, a | +| active | 激活并选中此按钮 | boolean | - | | +| size | 按钮的尺寸 | string | medium | 值可以是: large, medium, small或者不设置 | +| outline | 是否显示成空心按钮 | boolean | false | | +| circle | 是否显示成圆形按钮 | boolean | false | | +| hasMinWidth | 是否设置最小宽度 | boolean | false | | +| disabled | 是否禁用此按钮 | boolean | false | | +| onClick | 点击按钮触发的回调 | function | - | | +| block | 将按钮宽度设置为100%的行宽 | boolean | `false` | | +| color | 按钮颜色 | boolean | `false` | color和type只需要选择其一即可。值可以是: black, blue,brown, cyan, dark, green, gray, gray-darker, light, light-gray, orange, pink, purple, red, yellow, teal, violet, white | + ++++ en_US + +## API +按钮的属性如下所示： + +| Property | Name | Type | Default | Description | +| --- | --- | --- | --- | --- | +| ref | 按钮Dom对象的引用 | function \| ref | - | 当需要获取到按钮的dom对象时可设置此属性 | +| className | 样式名称 | string | button | | +| extraClassName | 额外添加的样式名称 | string | - | 比如设置为’aClass bClass', 按钮的实际样式是'aClass bClass button' | +| type | 按钮的类型 | string | - | 值可以是：ok, primary, secondary, info, success, warning, error，danger | +| nativeType | 原生的按钮类型 | string | button | 值可以是： button, reset, submit, a | +| active | 激活并选中此按钮 | boolean | - | | +| size | 按钮的尺寸 | string | medium | 值可以是: large, medium, small或者不设置 | +| outline | 是否显示成空心按钮 | boolean | false | | +| circle | 是否显示成圆形按钮 | boolean | false | | +| hasMinWidth | 是否设置最小宽度 | boolean | false | | +| disabled | 是否禁用此按钮 | boolean | false | | +| onClick | 点击按钮触发的回调 | function | - | | +| block | 将按钮宽度设置为100%的行宽 | boolean | `false` | | +| color | 按钮颜色 | boolean | `false` | color和type只需要选择其一即可。值可以是: black, blue,brown, cyan, dark, green, gray, gray-darker, light, light-gray, orange, pink, purple, red, yellow, teal, violet, white | + + diff --git a/src/docs/pages/button/md/basic_button.md b/src/docs/pages/button/md/basic_button.md new file mode 100644 index 00000000..05f0d66c --- /dev/null +++ b/src/docs/pages/button/md/basic_button.md @@ -0,0 +1,17 @@ +--- +order: 1 +type: sample +title: 基本按钮 +zh_CN: 基本按钮 +en_US: Basic Buttons +editUrl: $BASE/docs/pages/button/md/basic_button.md +--- + ++++ zh_CN +常规使用的话，除了默认按钮以外，还提供了"primary"、"secondary"两种类型的按钮。 + ++++ en_US +Default, primary, secondary buttons are provided for common use. + ++++ SampleCode +fileName: Basic_button diff --git a/src/docs/pages/button/md/black_inverted_outline_button.md b/src/docs/pages/button/md/black_inverted_outline_button.md new file mode 100644 index 00000000..7281b6f1 --- /dev/null +++ b/src/docs/pages/button/md/black_inverted_outline_button.md @@ -0,0 +1,16 @@ +--- +order: 18 +type: sample +zh_CN: 黑色Inverted Outline按钮 +en_US: Black Inverted Outline Button +editUrl: $BASE/docs/pages/button/md/black_inverted_outline_button.md +--- + ++++ zh_CN +black_inverted_outline_button + ++++ en_US +black_inverted_outline_button + ++++ SampleCode +fileName: SampleBtn18 diff --git a/src/docs/pages/button/md/block_button.md b/src/docs/pages/button/md/block_button.md new file mode 100644 index 00000000..bec0d5ff --- /dev/null +++ b/src/docs/pages/button/md/block_button.md @@ -0,0 +1,17 @@ +--- +order: 9 +type: sample +zh_CN: 行级按钮 +en_US: Block Button +editUrl: $BASE/docs/pages/button/md/block_button.md +--- + + ++++ zh_CN +将block属性设置为true后，按钮的宽度将变成100%并占据整行。 + ++++ en_US +Block Button + ++++ SampleCode +fileName: SampleBtn9 \ No newline at end of file diff --git a/src/docs/pages/button/md/button_color.md b/src/docs/pages/button/md/button_color.md new file mode 100644 index 00000000..91f89339 --- /dev/null +++ b/src/docs/pages/button/md/button_color.md @@ -0,0 +1,17 @@ +--- +order: 7 +type: sample +zh_CN: 按钮颜色 +en_US: Button Color +editUrl: $BASE/docs/pages/button/md/button_color.md +--- + + ++++ zh_CN +设置color属性，可以获得色彩不同的按钮。想了解更多可设置的参数值，请参阅API。 + ++++ en_US + + ++++ SampleCode +fileName: SampleBtn7 \ No newline at end of file diff --git a/src/docs/pages/button/md/button_focus.md b/src/docs/pages/button/md/button_focus.md new file mode 100644 index 00000000..7de27272 --- /dev/null +++ b/src/docs/pages/button/md/button_focus.md @@ -0,0 +1,17 @@ +--- +order: 14 +type: sample +zh_CN: 按钮光标 +en_US: Focus +editUrl: $BASE/docs/pages/button/md/button_focus.md +--- + ++++ zh_CN + 给按钮设置一个Ref对象后，便可触发按钮的focus事件。你可以在class的componentDidMount方法中调用focus方法，或者在react hook中 + 的useEffect()方法中触发focus。 + ++++ en_US +Focus + ++++ SampleCode +fileName: SampleBtn14 diff --git a/src/docs/pages/button/md/button_group.md b/src/docs/pages/button/md/button_group.md new file mode 100644 index 00000000..4ffecea0 --- /dev/null +++ b/src/docs/pages/button/md/button_group.md @@ -0,0 +1,16 @@ +--- +order: 11 +type: sample +zh_CN: 按钮组 +en_US: Button Group +editUrl: $BASE/docs/pages/button/md/button_group.md +--- + ++++ zh_CN +按钮组是由一系列按钮组合而成的一个整体，一般可用于导航切换。按钮组可以通过设置block属性值，使内部的按钮按比例占据整行进行显示。 + ++++ en_US +Button Group + ++++ SampleCode +fileName: SampleBtn11 diff --git a/src/docs/pages/button/md/button_icon.md b/src/docs/pages/button/md/button_icon.md new file mode 100644 index 00000000..0ec73745 --- /dev/null +++ b/src/docs/pages/button/md/button_icon.md @@ -0,0 +1,17 @@ +--- +order: 13 +type: sample +zh_CN: Inverted按钮 +en_US: Inverted Button +editUrl: $BASE/docs/pages/button/md/inverted_button.md +--- + ++++ zh_CN +普通的按钮会有背景色和边框，如果将inverted属性设置为true, +则一开始按钮不会显示边框和背景色。只有当获取鼠标光标或点击后才会有对应的变化。 + ++++ en_US +Button Group + ++++ SampleCode +fileName: SampleBtn13 diff --git a/src/docs/pages/button/md/button_size.md b/src/docs/pages/button/md/button_size.md new file mode 100644 index 00000000..c02e402b --- /dev/null +++ b/src/docs/pages/button/md/button_size.md @@ -0,0 +1,19 @@ +--- +order: 5 +type: sample +zh_CN: 按钮的尺寸 +en_US: Button Size +editUrl: $BASE/docs/pages/button/md/button_size.md +--- + + ++++ zh_CN +默认提供了三种大小的按钮， 大、中、小。如果需要自定义定义高度和宽度的话，可以设置 +lineHeight、padding属性。 + ++++ en_US +By default, there are three sizes of button provided: large, medinum, small. +You can also set the lineHeight and padding properties to customize the button for your need. + ++++ SampleCode +fileName: SampleBtn5 \ No newline at end of file diff --git a/src/docs/pages/button/md/circle_button.md b/src/docs/pages/button/md/circle_button.md new file mode 100644 index 00000000..ce259acb --- /dev/null +++ b/src/docs/pages/button/md/circle_button.md @@ -0,0 +1,17 @@ +--- +order: 6 +type: sample +zh_CN: 圆形按钮 +en_US: Circle Button +editUrl: $BASE/docs/pages/button/md/circle_button.md +--- + + ++++ zh_CN +将circle属性设置为true后，将展示成圆形按钮。 + ++++ en_US +Circle button + ++++ SampleCode +fileName: SampleBtn6 \ No newline at end of file diff --git a/src/docs/pages/button/md/diable_button.md b/src/docs/pages/button/md/diable_button.md new file mode 100644 index 00000000..2f11896f --- /dev/null +++ b/src/docs/pages/button/md/diable_button.md @@ -0,0 +1,17 @@ +--- +order: 10 +type: sample +zh_CN: 禁用状态 +en_US: Disabled Button +editUrl: $BASE/docs/pages/button/md/disable_button.md +--- + + ++++ zh_CN +将disabled设置为true后，将禁用对应的Button。 + ++++ en_US +Disable Button + ++++ SampleCode +fileName: SampleBtn10 \ No newline at end of file diff --git a/src/docs/pages/button/md/error_type_button.md b/src/docs/pages/button/md/error_type_button.md new file mode 100644 index 00000000..e242ea5c --- /dev/null +++ b/src/docs/pages/button/md/error_type_button.md @@ -0,0 +1,17 @@ +--- +order: 2 +type: sample +zh_CN: Error类型 +en_US: Error Style +editUrl: $BASE/docs/pages/button/md/error_type_button.md +--- + + ++++ zh_CN +设置type属性，呈现不同Error级别的按钮。 + ++++ en_US +Specify the type to present the buttons for different error type. + ++++ SampleCode +fileName: SampleBtn2 \ No newline at end of file diff --git a/src/docs/pages/button/md/init_outline_color.md b/src/docs/pages/button/md/init_outline_color.md new file mode 100644 index 00000000..d249978a --- /dev/null +++ b/src/docs/pages/button/md/init_outline_color.md @@ -0,0 +1,16 @@ +--- +order: 15 +type: sample +zh_CN: Outline按钮的初始显示颜色 +en_US: Initial color of outline button +editUrl: $BASE/docs/pages/button/md/init_outline_color.md +--- + ++++ zh_CN + + ++++ en_US +Focus + ++++ SampleCode +fileName: SampleBtn15 diff --git a/src/docs/pages/button/md/inverted_button.md b/src/docs/pages/button/md/inverted_button.md new file mode 100644 index 00000000..ac47dee9 --- /dev/null +++ b/src/docs/pages/button/md/inverted_button.md @@ -0,0 +1,16 @@ +--- +order: 12 +type: sample +zh_CN: 按钮图标 +en_US: Button Icon +editUrl: $BASE/docs/pages/button/md/button_icon.md +--- + ++++ zh_CN +按钮组是由一系列按钮组合而成的一个整体，一般可用于导航切换。按钮组可以通过设置block属性值，使内部的按钮按比例占据整行进行显示。 + ++++ en_US +Button Group + ++++ SampleCode +fileName: SampleBtn12 diff --git a/src/docs/pages/button/md/inverted_outline_button.md b/src/docs/pages/button/md/inverted_outline_button.md new file mode 100644 index 00000000..ba64896e --- /dev/null +++ b/src/docs/pages/button/md/inverted_outline_button.md @@ -0,0 +1,16 @@ +--- +order: 17 +type: sample +zh_CN: Inverted Outline按钮 +en_US: Inverted Outline Button +editUrl: $BASE/docs/pages/button/md/inverted_outline_button.md +--- + ++++ zh_CN +invertedOutline + ++++ en_US +invertedOutline + ++++ SampleCode +fileName: SampleBtn17 diff --git a/src/docs/pages/button/md/min_width.md b/src/docs/pages/button/md/min_width.md new file mode 100644 index 00000000..62fb1289 --- /dev/null +++ b/src/docs/pages/button/md/min_width.md @@ -0,0 +1,17 @@ +--- +order: 4 +type: sample +zh_CN: 最低宽度 +en_US: Min width +editUrl: $BASE/docs/pages/button/md/min_width.md +--- + + ++++ zh_CN +当设置了'hasMinWindth'属性后，按钮的宽度将会默认添加一个最小值为'5rem'的限制。 + ++++ en_US +When the hasMinWindth property is specified, the min width of this button will be 5rem. + ++++ SampleCode +fileName: SampleBtn4 \ No newline at end of file diff --git a/src/docs/pages/button/md/native_type.md b/src/docs/pages/button/md/native_type.md new file mode 100644 index 00000000..ac5dbdce --- /dev/null +++ b/src/docs/pages/button/md/native_type.md @@ -0,0 +1,19 @@ +--- +order: 3 +type: sample +title: 原生HTML类型 +zh_CN: Native type +en_US: Basic Buttons +editUrl: $BASE/docs/pages/button/md/native_type.md +--- + + ++++ zh_CN +如果按钮是一个<a/>链接，或者是对应的reset、submit按钮时，可以设置nativeType属性，这样就可以在页面上展示出你所期望的按钮。 + ++++ en_US +In case the button is actually a <a/>, reset, submit button, you can specify the nativeType property. +Then you would got what you want. + ++++ SampleCode +fileName: SampleBtn3 diff --git a/src/docs/pages/button/md/outline_background.md b/src/docs/pages/button/md/outline_background.md new file mode 100644 index 00000000..6756d85d --- /dev/null +++ b/src/docs/pages/button/md/outline_background.md @@ -0,0 +1,16 @@ +--- +order: 16 +type: sample +zh_CN: 显示Outline按钮背景颜色 +en_US: Initial background of outline button +editUrl: $BASE/docs/pages/button/md/outline_background.md +--- + ++++ zh_CN +hasOutlineBackground + ++++ en_US +hasOutlineBackground + ++++ SampleCode +fileName: SampleBtn16 diff --git a/src/docs/pages/button/md/outline_button.md b/src/docs/pages/button/md/outline_button.md new file mode 100644 index 00000000..df860f64 --- /dev/null +++ b/src/docs/pages/button/md/outline_button.md @@ -0,0 +1,17 @@ +--- +order: 8 +type: sample +zh_CN: 边框按钮 +en_US: Outline Button +editUrl: $BASE/docs/pages/button/md/outline_button.md +--- + + ++++ zh_CN +将outline属性设置为true后，将展示成默认只显示边框的按钮。 + ++++ en_US +Outline Button + ++++ SampleCode +fileName: SampleBtn8 \ No newline at end of file diff --git a/src/docs/pages/button/md/title.md b/src/docs/pages/button/md/title.md new file mode 100644 index 00000000..bc2d559f --- /dev/null +++ b/src/docs/pages/button/md/title.md @@ -0,0 +1,47 @@ +--- +order: 0 +type: text +zh_CN: 按钮 Button +en_US: Button +editUrl: $BASE/docs/pages/button/md/title.md +--- + ++++ zh_CN +## 按钮 Button [editUrl] +按钮，作为网页上最常使用的控件，Windy UI提供了如下几种按钮 + +- 默认的灰色按钮 +- 主色调的按钮 +- 次色调的按钮 +- 只显示边框的按钮 + +从色调上区分，提供了如下几种 +- Primary +- Secondary +- Info +- Warning +- Error +- Red/Blue/Green......等各类颜色 + +另外提供了大、中、小三种尺寸以供使用。 + + ++++ en_US +## Button [editUrl] + +Windy UI provides the fllowing buttons for common use: + +- Default gray button +- Primary Button +- Secondary Button +- Outline Button + +从色调上区分，提供了如下几种 +- Primary +- Secondary +- Info +- Warning +- Error +- Red/Blue/Green...... + +In addition, there're sizes(large, medium, small) for selection \ No newline at end of file diff --git a/src/docs/pages/button/samples/SampleBtn1.js b/src/docs/pages/button/samples/Basic_button.js old mode 100755 new mode 100644 similarity index 78% rename from src/docs/pages/button/samples/SampleBtn1.js rename to src/docs/pages/button/samples/Basic_button.js index 4165ecf0..3cf977be --- a/src/docs/pages/button/samples/SampleBtn1.js +++ b/src/docs/pages/button/samples/Basic_button.js @@ -1,7 +1,7 @@ import React from 'react'; import {Button} from 'react-windy-ui'; -const SampleBtn1 = () => { +const Basic_button = () => { return <> @@ -9,4 +9,4 @@ const SampleBtn1 = () => { ; }; -export default SampleBtn1; \ No newline at end of file +export default Basic_button; \ No newline at end of file diff --git a/src/docs/pages/card/CardIndex.js b/src/docs/pages/card/CardIndex.js index 058d8b4f..f058f2b7 100755 --- a/src/docs/pages/card/CardIndex.js +++ b/src/docs/pages/card/CardIndex.js @@ -1,38 +1,13 @@ import React from 'react'; -import DocPage from '../../utils/DocPage'; -import Card1 from './samples/Card1'; -import Card2 from './samples/Card2'; -import Card3 from './samples/Card3'; -import Card4 from './samples/Card4'; -import Card5 from './samples/Card5'; -import Card6 from './samples/Card6'; -import Card7 from './samples/Card7'; -import Card8 from './samples/Card8'; -import Card9 from './samples/Card9'; -import Card10 from './samples/Card10'; -import Card11 from './samples/Card11'; -import Card12 from './samples/Card12'; -import Card13 from './samples/Card13'; +import DocPage2 from '../../utils/DocPage2'; -const componentMapping = { - Card1: , - Card2: , - Card3: , - Card4: , - Card5: , - Card6: , - Card7: , - Card8: , - Card9: , - Card10: , - Card11: , - Card12: , - Card13: , -}; +const requireMd = require.context('!raw-loader!./md', false, /.md$/); +const requireCode = require.context('!raw-loader!./samples', false, /.js$/); +const requireJs = require.context('./samples', false, /.js$/); -export default function CardIndex(props) { - return import('./doc.md')} - componentMapping={componentMapping} - />; +export default function CardIndex() { + return ; } \ No newline at end of file diff --git a/src/docs/pages/card/doc.md b/src/docs/pages/card/doc.md deleted file mode 100755 index d8588520..00000000 --- a/src/docs/pages/card/doc.md +++ /dev/null @@ -1,721 +0,0 @@ ------------ Title ------------ -[TITLE_BEGIN_zh_CN] -## 卡片 Card -通常可在Card中放置文字、图片等内容，是应用最广泛的容器类组件之一。 - -- Card由Header, Body, Row, Footer四个组件组成，可按需组合 -- 可利用Card去布局，将页面大段的内容归到Card中展示 -- 可制作图片墙、名片等组件 - -[TITLE_END_zh_CN] - - -[TITLE_BEGIN_en_US] -[TITLE_END_en_US] - -------------- Footer --------------------- -[FOOTER_BEGIN_zh_CN] -## API - -- 下列对象存在相同的属性定义： - Header, Body, Row, Footer, OverlayTitle, - CardImage。 - - - -| 属性 | 名称 | 类型 | 默认值 | 描述 | -| --- | --- | --- | --- | --- | -| ref | Input Dom对象的引用 | function \| ref | - | 当需要获取dom对象时可设置此属性 | -| className | 样式名称 | string | | | -| extraClassName | 额外添加的样式名称 | string | - | | -| justify | 指定列在水平方向的排列方式 | string | start | 值可以是: start、center、end、around、between、evenly | -| align | 指定列在垂直方向的排列方式 | string | start | 值可以是: start、center、end | - - -- Image的属性定义： - Image对应于html中的对象，所有可配置的属性都可应用在Image对象中 - -| 属性 | 名称 | 类型 | 默认值 | 描述 | -| --- | --- | --- | --- | --- | -| ref | Input Dom对象的引用 | function \| ref | - | 当需要获取dom对象时可设置此属性 | -| className | 样式名称 | string | img | | -| extraClassName | 额外添加的样式名称 | string | - | | - -- Card的属性定义： - -| 属性 | 名称 | 类型 | 默认值 | 描述 | -| --- | --- | --- | --- | --- | -| ref | Input Dom对象的引用 | function \| ref | - | 当需要获取dom对象时可设置此属性 | -| className | 样式名称 | string | img | | -| extraClassName | 额外添加的样式名称 | string | - | | -| block | | boolean | false | | -| autoScale | 是否可以自动缩放 | boolean | false | | -| hasBorder | 是否有边框 | boolean | false | | -| hasBox | 是否显示阴影 | boolean | true | | - - - -[FOOTER_END_zh_CN] - -[FOOTER_BEGIN_en_US] -[FOOTER_END_en_US] - -------------- Samples --------------------- -[Card1_BEGIN_zh_CN] -### 示例1 背景和边框 - - - 将hasBorder属性设置为true后，将显示边框；hasBox - 设置为true后，将会提供一个灰色投影。 - - -```jsx -import React, {useState} from 'react'; -import {Card, Toggle} from 'react-windy-ui'; - -export default function Card1() { - const [hasBorder, enableBorder] = useState(false); - const [hasBox, enableBox] = useState(true); - - return <> -
- enableBorder(val)} - content={{on: 'Border', off: 'Border'}}/> -
-
- enableBox(val)} - content={{on: 'Box shadow', off: 'Box shadow'}}/> -
- - - - Header - - - Body - - - Row - - - Footer - - - ; -} -``` -[Card1_END_zh_CN] - -[Card1_BEGIN_en_US] -[Card1_END_en_US] ----------------------------------- -[Card2_BEGIN_zh_CN] -### 示例2 Header的背景色 - - - 将Header的hasBackground属性设置为true后, 将会显示灰色 - 的背景。 - - -```jsx -import React from 'react'; -import {Card} from 'react-windy-ui'; - - export default function Card2() { - return <> - - - Header - - - Body - - - Row - - - Footer - - - ; - } -``` -[Card2_END_zh_CN] - -[Card2_BEGIN_en_US] -[Card2_END_en_US] ----------------------------------- -[Card3_BEGIN_zh_CN] -### 示例3 分隔条 - - - 各个内容区域之间如果需要添加分隔条，则可以在中间放置Divider组件，这样会展示一个水平横条。 - - -```jsx -import React from 'react'; -import {Card, Divider} from 'react-windy-ui'; - -export default function Card3() { - return <> - - - Header - - - - Body - - - - Row - - - - Footer - - - ; -} -``` -[Card3_END_zh_CN] - -[Card3_BEGIN_en_US] -[Card3_END_en_US] ----------------------------------- -[Card4_BEGIN_zh_CN] -### 示例4 卡片 - - - 一个卡片的示例，通常你可以使用Header, Body, Footer三个组件即可。 - - -```jsx -import React from 'react'; -import {Button, ButtonGroup, Card} from 'react-windy-ui'; -import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'; -import { - faMailBulk, - faPhone, - faUmbrella, -} from '@fortawesome/free-solid-svg-icons'; - -export default function Card4() { - return <> - - -

- - Tomato -

-
This article is about the plant and the - fruit.
- - - The tomato is the edible, often red, berry of the plant Solanum - lycopersicum, commonly known as a tomato plant. - - - - - - - - - ; -} -``` -[Card4_END_zh_CN] - -[Card4_BEGIN_en_US] -[Card4_END_en_US] ----------------------------------- -[Card5_BEGIN_zh_CN] -### 示例5 在卡片Footer中放置其他组件 - - - 一个卡片的示例，您还可以在Footer放置其他组件。 - - -```jsx -import React from 'react'; -import {Button, Card, Dropdown} from 'react-windy-ui'; -import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'; -import {faUmbrella} from '@fortawesome/free-solid-svg-icons'; - -export default function Card5() { - return <> - - -

- - Tomato -

-
This article is about the plant and the - fruit.
- - - The tomato is the edible, often red, berry of the plant Solanum - lycopersicum, commonly known as a tomato plant. - - - - Phone - }> - - Menu Item1 - Menu Item2 - Menu Item3 - Menu Item4 - - - - - - - - ; -} -``` -[Card5_END_zh_CN] - -[Card5_BEGIN_en_US] -[Card5_END_en_US] ----------------------------------- -[Card6_BEGIN_zh_CN] -### 示例6 图片卡片 - - - 在卡片中可以只放置一个图片，添加一个Card.Image并指定src为某个图片即可。 - - -```jsx -import React from 'react'; -import {Card, Tooltip} from 'react-windy-ui'; -import pic from './girl1.jpg'; - -export default function Card6() { - return <> - - - - - - - - ; -} -``` -[Card6_END_zh_CN] - -[Card6_BEGIN_en_US] -[Card6_END_en_US] ----------------------------------- -[Card7_BEGIN_zh_CN] -### 示例7 图片卡片 - - - 通常还需要给图片添加一段标题和文字描述，此时可以添加一个Card.OverlayTitle。 - - -```jsx -import React from 'react'; -import {Card} from 'react-windy-ui'; -import pic from './girl1.jpg'; - -export default function Card7() { - return <> - - - - - -

A Picture

-
The description for this picture
- - - - ; -} -``` -[Card7_END_zh_CN] - -[Card7_BEGIN_en_US] -[Card7_END_en_US] ----------------------------------- -[Card8_BEGIN_zh_CN] -### 示例8 图片卡片 - - - 您还可以将Header, CardImage, OverlayTitle结合起来使用。另外您还可以将Row, Col引入 - 用于布局，在这个例子中Header就使用了这两个组件去布局。 - - -```jsx -import React from 'react'; -import {Button, Card, Col, Dropdown, Row} from 'react-windy-ui'; -import pic from './girl1.jpg'; -import {faListUl} from '@fortawesome/free-solid-svg-icons'; -import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'; - -export default function Card8() { - return <> - - - -

Star

- - - - }> - - Menu Item1 - Menu Item2 - Menu Item3 - Menu Item4 - - - - - - - - - - -

A Picture

-
The description for this picture
- - - -

Picture from pixabay.com

-
- Need more information...... -
- - - ; -} -``` -[Card8_END_zh_CN] - -[Card8_BEGIN_en_US] -[Card8_END_en_US] ----------------------------------- -[Card9_BEGIN_zh_CN] -### 示例9 卡片背景色 - - - 您可以使用提供的背景色样式去设置Card的背景，只需要给Card设置extraClassName属性即可。当然也可以通过 - Card的style去设置背景色。 - - - -```jsx -import React, {useState} from 'react'; -import {Button, Card, Col, Dropdown, Row, Select} from 'react-windy-ui'; -import pic from './girl1.jpg'; -import {faListUl} from '@fortawesome/free-solid-svg-icons'; -import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'; - -export default function Card9() { - const [bg, setBg] = useState('bg-color-pink'); - return <> -
- -
- - - - -

Star

- - - - }> - - Menu Item1 - Menu Item2 - Menu Item3 - Menu Item4 - - - - - - - - - - -

A Picture

-
The description for this picture
- - - - - - - - ; -} -``` -[Card9_END_zh_CN] - -[Card9_BEGIN_en_US] -[Card9_END_en_US] ----------------------------------- -[Card10_BEGIN_zh_CN] -### 示例10 使用Grid布局 - - - 您可以使用Grid中的组件去布局，Row和Col非常适用于有左右之分的布局场景。 - - -```jsx -import React from 'react'; -import {Button, Card, Col, Divider, Row} from 'react-windy-ui'; -import pic from './m.jpeg'; -import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'; -import { - faBusAlt, - faMailBulk, - faPhone, - faPlane, - faWineGlassAlt, -} from '@fortawesome/free-solid-svg-icons'; - -export default function Card10() { - return <> - - - - - -

A Star

-
The description for this picture
- - - - - - - - - -
Who's she?
-
The description ........
- - - - - - - -
How to get to there?
-
The description ........
- - - - - - - - - - - - - - - - - - - - - ; -} -``` -[Card10_END_zh_CN] - -[Card10_BEGIN_en_US] -[Card10_END_en_US] ----------------------------------- -[Card11_BEGIN_zh_CN] -### 示例11 图片墙 - - - 您可以使用Grid将一组Card放置在一起排列，达成图片墙的效果。这里每个Col都尝试平均分配空间，当窗口宽度发生变化，例如宽度变小并达到xs列宽度 - 时每个Card就会占据整行显示。 - - -```jsx -import React from 'react'; -import {Card, Col, Row} from 'react-windy-ui'; -import pic from './girl1.jpg'; - -const ColStyle = { - minWidth: '10rem', - maxWidth: '10rem', - margin: ' .5rem', -}; - -const MyCard = function() { - return <> - - - - - -

A Picture

-
The description for this picture
- - - - ; -}; - -export default function Card11() { - return <> - - - - - - - - - - - ; -} -``` -[Card11_END_zh_CN] - -[Card11_BEGIN_en_US] -[Card11_END_en_US] ----------------------------------- -[Card12_BEGIN_zh_CN] -### 示例11 缩放效果 - - - 对于Card、CardImage，其都有autoScale属性。 - 将该属性设置为true后，当捕捉到鼠标移入、移出时，展现缩放效果。 - - -```jsx -import React from 'react'; -import {Card} from 'react-windy-ui'; -import pic from './girl1.jpg'; - -export default function Card12() { - return <> - - - - - -

A Picture

-
The description for this picture
- - - - ; -} -``` -[Card12_END_zh_CN] - -[Card12_BEGIN_en_US] -[Card12_END_en_US] ----------------------------------- -[Card13_BEGIN_zh_CN] -### 示例13 显示加载状态 - - - 当Card的中的内容需要异步加载并在加载完成之前显示等待状态时，可以使用一个Loader将该Card包裹起来。 - - -```jsx -import React, {useState} from 'react'; -import {Card, Loader, Toggle} from 'react-windy-ui'; -import pic from './girl1.jpg'; - -export default function Card13() { - const [showMask, enableMask] = useState(true); - const [active, setActive] = useState(true); - return <> -
- setActive(val)} - content={{on: 'Active', off: 'Active'}}/> -
-
- enableMask(val)} - content={{on: 'Dark Mask', off: 'Dark Mask'}}/> -
-
- - - - - - -

A Picture

-
The description for this picture
-
The description for this picture
- - - - -
- ; -} -``` -[Card13_END_zh_CN] - -[Card13_BEGIN_en_US] -[Card13_END_en_US] ----------------------------------- \ No newline at end of file diff --git a/src/docs/pages/card/md/api.md b/src/docs/pages/card/md/api.md new file mode 100644 index 00000000..ab0a0a41 --- /dev/null +++ b/src/docs/pages/card/md/api.md @@ -0,0 +1,48 @@ +--- + order: 100 + type: text + zh_CN: API + en_US: API + editUrl: $BASE/docs/pages/card/md/api.md +--- + ++++ zh_CN +## API + +- 下列对象存在相同的属性定义： + Header, Body, Row, Footer, OverlayTitle, + CardImage。 + +| 属性 | 名称 | 类型 | 默认值 | 描述 | +| --- | --- | --- | --- | --- | +| ref | Input Dom对象的引用 | function \| ref | - | 当需要获取dom对象时可设置此属性 | +| className | 样式名称 | string | | | +| extraClassName | 额外添加的样式名称 | string | - | | +| justify | 指定列在水平方向的排列方式 | string | start | 值可以是: start、center、end、around、between、evenly | +| align | 指定列在垂直方向的排列方式 | string | start | 值可以是: start、center、end | + + +- Image的属性定义： + Image对应于html中的对象，所有可配置的属性都可应用在Image对象中 + +| 属性 | 名称 | 类型 | 默认值 | 描述 | +| --- | --- | --- | --- | --- | +| ref | Input Dom对象的引用 | function \| ref | - | 当需要获取dom对象时可设置此属性 | +| className | 样式名称 | string | img | | +| extraClassName | 额外添加的样式名称 | string | - | | + +- Card的属性定义： + +| 属性 | 名称 | 类型 | 默认值 | 描述 | +| --- | --- | --- | --- | --- | +| ref | Input Dom对象的引用 | function \| ref | - | 当需要获取dom对象时可设置此属性 | +| className | 样式名称 | string | img | | +| extraClassName | 额外添加的样式名称 | string | - | | +| block | | boolean | false | | +| autoScale | 是否可以自动缩放 | boolean | false | | +| hasBorder | 是否有边框 | boolean | false | | +| hasBox | 是否显示阴影 | boolean | true | | + ++++ en_US +## API + diff --git a/src/docs/pages/card/md/card1.md b/src/docs/pages/card/md/card1.md new file mode 100644 index 00000000..56071b6f --- /dev/null +++ b/src/docs/pages/card/md/card1.md @@ -0,0 +1,18 @@ +--- +order: 1 +type: sample +zh_CN: 背景和边框 +en_US: Background and border +editUrl: $BASE/docs/pages/card/md/card1.md +--- + ++++ zh_CN +将hasBorder属性设置为true后，将显示边框；hasBox + 设置为true后，将会提供一个灰色投影。 + + ++++ en_US +Bc1 + ++++ SampleCode +fileName: Card1 diff --git a/src/docs/pages/card/md/card10.md b/src/docs/pages/card/md/card10.md new file mode 100644 index 00000000..33b321a0 --- /dev/null +++ b/src/docs/pages/card/md/card10.md @@ -0,0 +1,16 @@ +--- +order: 10 +type: sample +zh_CN: 使用Grid布局 +en_US: Grid layout +editUrl: $BASE/docs/pages/card/md/card10.md +--- + ++++ zh_CN +您可以使用Grid中的组件去布局，Row和Col非常适用于有左右之分的布局场景。 + ++++ en_US +card10 + ++++ SampleCode +fileName: Card10 diff --git a/src/docs/pages/card/md/card11.md b/src/docs/pages/card/md/card11.md new file mode 100644 index 00000000..5c1cbc7e --- /dev/null +++ b/src/docs/pages/card/md/card11.md @@ -0,0 +1,18 @@ +--- +order: 11 +type: sample +zh_CN: 图片墙 +en_US: Wall +editUrl: $BASE/docs/pages/card/md/card11.md +--- + ++++ zh_CN +您可以使用Grid将一组Card放置在一起排列，达成图片墙的效果。这里每个Col都尝试平均分配空间，当窗口宽度发生变化，例如宽度变小并达到xs列宽度 + 时每个Card就会占据整行显示。 + + ++++ en_US +card10 + ++++ SampleCode +fileName: Card11 diff --git a/src/docs/pages/card/md/card12.md b/src/docs/pages/card/md/card12.md new file mode 100644 index 00000000..333a246b --- /dev/null +++ b/src/docs/pages/card/md/card12.md @@ -0,0 +1,18 @@ +--- +order: 12 +type: sample +zh_CN: 缩放效果 +en_US: Scale +editUrl: $BASE/docs/pages/card/md/card12.md +--- + ++++ zh_CN +对于Card、CardImage，其都有autoScale属性。 + 将该属性设置为true后，当捕捉到鼠标移入、移出时，展现缩放效果。 + + ++++ en_US +card12 + ++++ SampleCode +fileName: Card12 diff --git a/src/docs/pages/card/md/card13.md b/src/docs/pages/card/md/card13.md new file mode 100644 index 00000000..4ed34b76 --- /dev/null +++ b/src/docs/pages/card/md/card13.md @@ -0,0 +1,17 @@ +--- +order: 13 +type: sample +zh_CN: 显示加载状态 +en_US: Loading +editUrl: $BASE/docs/pages/card/md/card13.md +--- + ++++ zh_CN + 当Card的中的内容需要异步加载并在加载完成之前显示等待状态时，可以使用一个Loader将该Card包裹起来。 + + ++++ en_US +card13 + ++++ SampleCode +fileName: Card13 diff --git a/src/docs/pages/card/md/card2.md b/src/docs/pages/card/md/card2.md new file mode 100644 index 00000000..0f168761 --- /dev/null +++ b/src/docs/pages/card/md/card2.md @@ -0,0 +1,17 @@ +--- +order: 2 +type: sample +zh_CN: Header的背景色 +en_US: Header background +editUrl: $BASE/docs/pages/card/md/card2.md +--- + ++++ zh_CN +将Header的hasBackground属性设置为true后, 将会显示灰色 + 的背景。 + ++++ en_US +card2 + ++++ SampleCode +fileName: Card2 diff --git a/src/docs/pages/card/md/card3.md b/src/docs/pages/card/md/card3.md new file mode 100644 index 00000000..52fb9aeb --- /dev/null +++ b/src/docs/pages/card/md/card3.md @@ -0,0 +1,16 @@ +--- +order: 3 +type: sample +zh_CN: 分隔条 +en_US: Divider +editUrl: $BASE/docs/pages/card/md/card3.md +--- + ++++ zh_CN +各个内容区域之间如果需要添加分隔条，则可以在中间放置Divider组件，这样会展示一个水平横条。 + ++++ en_US +card3 + ++++ SampleCode +fileName: Card3 diff --git a/src/docs/pages/card/md/card4.md b/src/docs/pages/card/md/card4.md new file mode 100644 index 00000000..1b3fdd62 --- /dev/null +++ b/src/docs/pages/card/md/card4.md @@ -0,0 +1,17 @@ +--- +order: 4 +type: sample +zh_CN: 卡片 +en_US: Card +editUrl: $BASE/docs/pages/card/md/card4.md +--- + ++++ zh_CN +一个卡片的示例，通常你可以使用Header, Body, Footer三个组件即可。 + + ++++ en_US +card4 + ++++ SampleCode +fileName: Card4 diff --git a/src/docs/pages/card/md/card5.md b/src/docs/pages/card/md/card5.md new file mode 100644 index 00000000..b1b70367 --- /dev/null +++ b/src/docs/pages/card/md/card5.md @@ -0,0 +1,16 @@ +--- +order: 5 +type: sample +zh_CN: 在卡片Footer中放置其他组件 +en_US: Card5 +editUrl: $BASE/docs/pages/card/md/card5.md +--- + ++++ zh_CN +一个卡片的示例，您还可以在Footer放置其他组件。 + ++++ en_US +card5 + ++++ SampleCode +fileName: Card5 diff --git a/src/docs/pages/card/md/card6.md b/src/docs/pages/card/md/card6.md new file mode 100644 index 00000000..c5477a2b --- /dev/null +++ b/src/docs/pages/card/md/card6.md @@ -0,0 +1,16 @@ +--- +order: 6 +type: sample +zh_CN: 图片卡片 +en_US: Picture +editUrl: $BASE/docs/pages/card/md/card6.md +--- + ++++ zh_CN +在卡片中可以只放置一个图片，添加一个Card.Image并指定src为某个图片即可。 + ++++ en_US +card56 + ++++ SampleCode +fileName: Card6 diff --git a/src/docs/pages/card/md/card7.md b/src/docs/pages/card/md/card7.md new file mode 100644 index 00000000..717760ce --- /dev/null +++ b/src/docs/pages/card/md/card7.md @@ -0,0 +1,16 @@ +--- +order: 7 +type: sample +zh_CN: 图片卡片2 +en_US: Picture +editUrl: $BASE/docs/pages/card/md/card7.md +--- + ++++ zh_CN +通常还需要给图片添加一段标题和文字描述，此时可以添加一个Card.OverlayTitle。 + ++++ en_US +card7 + ++++ SampleCode +fileName: Card7 diff --git a/src/docs/pages/card/md/card8.md b/src/docs/pages/card/md/card8.md new file mode 100644 index 00000000..780f5005 --- /dev/null +++ b/src/docs/pages/card/md/card8.md @@ -0,0 +1,17 @@ +--- +order: 8 +type: sample +zh_CN: 图片卡片2 +en_US: Picture +editUrl: $BASE/docs/pages/card/md/card8.md +--- + ++++ zh_CN +您还可以将Header, CardImage, OverlayTitle结合起来使用。另外您还可以将Row, Col引入 + 用于布局，在这个例子中Header就使用了这两个组件去布局。 + ++++ en_US +card8 + ++++ SampleCode +fileName: Card8 diff --git a/src/docs/pages/card/md/card9.md b/src/docs/pages/card/md/card9.md new file mode 100644 index 00000000..ece4172c --- /dev/null +++ b/src/docs/pages/card/md/card9.md @@ -0,0 +1,17 @@ +--- +order: 9 +type: sample +zh_CN: 卡片背景色 +en_US: Background +editUrl: $BASE/docs/pages/card/md/card9.md +--- + ++++ zh_CN +您可以使用提供的背景色样式去设置Card的背景，只需要给Card设置extraClassName属性即可。当然也可以通过 + Card的style去设置背景色。 + ++++ en_US +card9 + ++++ SampleCode +fileName: Card9 diff --git a/src/docs/pages/card/md/title.md b/src/docs/pages/card/md/title.md new file mode 100644 index 00000000..a1abdc8a --- /dev/null +++ b/src/docs/pages/card/md/title.md @@ -0,0 +1,19 @@ +--- +order: 0 +type: text +zh_CN: 卡片 Card +en_US: Card +editUrl: $BASE/docs/pages/card/md/title.md +--- + ++++ zh_CN +## 卡片 Card [editUrl] +通常可在Card中放置文字、图片等内容，是应用最广泛的容器类组件之一。 + +- Card由Header, Body, Row, Footer四个组件组成，可按需组合 +- 可利用Card去布局，将页面大段的内容归到Card中展示 +- 可制作图片墙、名片等组件 + + ++++ en_US +## Card [editUrl] diff --git a/src/docs/pages/checkbox/CheckboxIndex.js b/src/docs/pages/checkbox/CheckboxIndex.js index fc586a44..65fc470d 100755 --- a/src/docs/pages/checkbox/CheckboxIndex.js +++ b/src/docs/pages/checkbox/CheckboxIndex.js @@ -1,24 +1,13 @@ import React from 'react'; -import DocPage from '../../utils/DocPage'; -import Checkbox1 from './samples/Checkbox1'; -import Checkbox2 from './samples/Checkbox2'; -import Checkbox3 from './samples/Checkbox3'; -import Checkbox4 from './samples/Checkbox4'; -import Checkbox5 from './samples/Checkbox5'; -import Checkbox6 from './samples/Checkbox6'; +import DocPage2 from '../../utils/DocPage2'; -const componentMapping = { - Checkbox1: , - Checkbox2: , - Checkbox3: , - Checkbox4: , - Checkbox5: , - Checkbox6: , -}; +const requireMd = require.context('!raw-loader!./md', false, /.md$/); +const requireCode = require.context('!raw-loader!./samples', false, /.js$/); +const requireJs = require.context('./samples', false, /.js$/); -export default function CheckboxIndex(props) { - return import('./checkbox.md')} - componentMapping={componentMapping} - />; +export default function CheckboxIndex() { + return ; } \ No newline at end of file diff --git a/src/docs/pages/checkbox/md/api.md b/src/docs/pages/checkbox/md/api.md new file mode 100644 index 00000000..ec64eeed --- /dev/null +++ b/src/docs/pages/checkbox/md/api.md @@ -0,0 +1,34 @@ +--- + order: 100 + type: text + zh_CN: API + en_US: API + editUrl: $BASE/docs/pages/checkbox/md/api.md +--- + ++++ zh_CN +## API [editUrl] +Checkbox的属性如下所示 + +| 属性 | 名称 | 类型 | 默认值 | 描述 | +| --- | --- | --- | --- | --- | +| ref | 根节点Dom对象的引用 | function \| ref | - | 当需要获取到根节点的dom对象时可设置此属性 | +| className | 样式名称 | string | checkbox | | +| extraClassName | 额外添加的样式名称 | string | - | | +| disabled | 是否禁用 | boolean | false | | +| checked | 是否勾选状态 | boolean | false | | +| defaultChecked | 初始勾选状态 | boolean | false | | +| onChange | 状态变化触发的回调 | function | - | | +| label | 显示的提示信息 | string | - | | +| children | 子节点对象 | react node | - | | +| checkedColor | 对应选中时的颜色 | string | - | 可选的颜色参见颜色列表定义 | +| uncheckedColor | 对应去选中时的颜色 | string | - | 可选的颜色参见颜色列表定义 | +| checkedIcon | 对应去选中时的图标 | string | - | | +| uncheckedIcon | 对应去选中时的图标 | string | - | | +| showIndeterminateState | 是否显示成中间状态 | boolean | - | | +| iconIndeterminate | 中间状态时显示的图标 | node | - | | +| iconIndeterminateStyle | 中间状态时添加的样式 | object | - | | + ++++ en_US +## API [editUrl] + diff --git a/src/docs/pages/checkbox/md/checkbox1.md b/src/docs/pages/checkbox/md/checkbox1.md new file mode 100644 index 00000000..27cb8cb1 --- /dev/null +++ b/src/docs/pages/checkbox/md/checkbox1.md @@ -0,0 +1,16 @@ +--- +order: 1 +type: sample +zh_CN: 简单示例 +en_US: Sample +editUrl: $BASE/docs/pages/checkbox/md/checkbox1.md +--- + ++++ zh_CN + Checkbox中要在右侧显示提示文字，可以设置label属性值或添加children子节点。 + ++++ en_US +ck1 + ++++ SampleCode +fileName: Checkbox1 diff --git a/src/docs/pages/checkbox/md/checkbox2.md b/src/docs/pages/checkbox/md/checkbox2.md new file mode 100644 index 00000000..269787ba --- /dev/null +++ b/src/docs/pages/checkbox/md/checkbox2.md @@ -0,0 +1,18 @@ +--- +order: 2 +type: sample +zh_CN: 默认选中 +en_US: Checked by default +editUrl: $BASE/docs/pages/checkbox/md/checkbox2.md +--- + ++++ zh_CN +设置defaultChecked属性值为true后，控件初始状态下显示选中状态。但不影响后续的勾选、去勾选。defaultChecked + 属性设置的是初始状态，可以后续被改变。但active属性与之则不同，当设置active属性后，控件将不能被自动勾选、去勾选， + 此时会触发onChange调用，您需要在onChange中决定是否切换选中状态。另外，checked与onChange方法需要同时提供，以便一起完成状态的切换过程。 + ++++ en_US +ck1 + ++++ SampleCode +fileName: Checkbox2 diff --git a/src/docs/pages/checkbox/md/checkbox3.md b/src/docs/pages/checkbox/md/checkbox3.md new file mode 100644 index 00000000..378bfc06 --- /dev/null +++ b/src/docs/pages/checkbox/md/checkbox3.md @@ -0,0 +1,18 @@ +--- +order: 3 +type: sample +zh_CN: 设置不同的颜色 +en_US: Color +editUrl: $BASE/docs/pages/checkbox/md/checkbox3.md +--- + ++++ zh_CN +需要更改勾选状态下的颜色时，可以设置checkedColor属性；需要更改去勾选状态下的颜色时，可以设置uncheckedColor属性。 + 另外，如果需要更改对应的图标时，可以相应地设置checkedIcon和uncheckedIcon属性。具体checkedColor和uncheckedColor的属性可配置哪些属性值， + 请参阅API文档部分。 + ++++ en_US +ck1 + ++++ SampleCode +fileName: Checkbox3 diff --git a/src/docs/pages/checkbox/md/checkbox4.md b/src/docs/pages/checkbox/md/checkbox4.md new file mode 100644 index 00000000..55592348 --- /dev/null +++ b/src/docs/pages/checkbox/md/checkbox4.md @@ -0,0 +1,16 @@ +--- +order: 4 +type: sample +zh_CN: 禁用Checkbox +en_US: Disabled Checkbox +editUrl: $BASE/docs/pages/checkbox/md/checkbox4.md +--- + ++++ zh_CN +将disabled设置为true后，将禁用对应的Checkbox. + ++++ en_US +ck4 + ++++ SampleCode +fileName: Checkbox4 diff --git a/src/docs/pages/checkbox/md/checkbox5.md b/src/docs/pages/checkbox/md/checkbox5.md new file mode 100644 index 00000000..df77f994 --- /dev/null +++ b/src/docs/pages/checkbox/md/checkbox5.md @@ -0,0 +1,20 @@ +--- +order: 5 +type: sample +zh_CN: Checkbox的中间状态 +en_US: Indeterminate state +editUrl: $BASE/docs/pages/checkbox/md/checkbox5.md +--- + ++++ zh_CN +Checkbox除了勾选、去勾选两种状态外，还有一种状态称为中间状态。设置showIndeterminateState属性后，即可将控件转换成此状态。 + 同时通过设置iconIndeterminateStyle样式，进行颜色的更改。 + 需要注意的是，当控件处于这种状态时，不会自动切换其他状态。如果需要从中间状态切换成其他状态时，需要将showIndeterminateState + 设置成false，同时结合checked和onChange方法更改状态。 + 比如在Tree控件中，如果子节点未全部勾选，则父节点会使用这个中间状态进行显示。 + ++++ en_US +ck5 + ++++ SampleCode +fileName: Checkbox5 diff --git a/src/docs/pages/checkbox/md/checkbox6.md b/src/docs/pages/checkbox/md/checkbox6.md new file mode 100644 index 00000000..bc67a19e --- /dev/null +++ b/src/docs/pages/checkbox/md/checkbox6.md @@ -0,0 +1,16 @@ +--- +order: 6 +type: sample +zh_CN: 设置label所在的位置 +en_US: Label's Position +editUrl: $BASE/docs/pages/checkbox/md/checkbox6.md +--- + ++++ zh_CN +设置alignLabel属性，可以将Label放置在上下左右四个方位。 + ++++ en_US +ck5 + ++++ SampleCode +fileName: Checkbox6 diff --git a/src/docs/pages/checkbox/md/title.md b/src/docs/pages/checkbox/md/title.md new file mode 100644 index 00000000..e6bb8273 --- /dev/null +++ b/src/docs/pages/checkbox/md/title.md @@ -0,0 +1,22 @@ +--- +order: 0 +type: text +zh_CN: 多选框 Checkbox +en_US: Checkbox +editUrl: $BASE/docs/pages/checkbox/md/title.md +--- + ++++ zh_CN +## 多选框 Checkbox [editUrl] +Checkbo组件常用来勾选多个选项， 如果只需要单选则可使用Radio组件。 +
+ +Checkbox组件主要提供以下功能： + +- 显示一个可供选择的组件，并且可以添加文字进行标示 +- 可以组合使用预定义的颜色样式， 修改Checkbox的颜色，进行定制显示 +- 可使用键盘的Tab键进行切换，并可相应键盘Enter键事件，选中该组件 + + ++++ en_US +## Checkbox [editUrl] diff --git a/src/docs/pages/collapse/CollapseIndex.js b/src/docs/pages/collapse/CollapseIndex.js index 7156dc2e..dda66fdb 100755 --- a/src/docs/pages/collapse/CollapseIndex.js +++ b/src/docs/pages/collapse/CollapseIndex.js @@ -1,27 +1,13 @@ import React from 'react'; -import DocPage from '../../utils/DocPage'; -import Collapse1 from './samples/Collapse1'; -import Collapse2 from './samples/Collapse2'; -import Collapse3 from './samples/Collapse3'; -import Collapse4 from './samples/Collapse4'; -import Collapse5 from './samples/Collapse5'; -import Collapse6 from './samples/Collapse6'; -import Collapse7 from './samples/Collapse7'; +import DocPage2 from '../../utils/DocPage2'; +const requireMd = require.context('!raw-loader!./md', false, /.md$/); +const requireCode = require.context('!raw-loader!./samples', false, /.js$/); +const requireJs = require.context('./samples', false, /.js$/); -const componentMapping = { - Collapse1: , - Collapse2: , - Collapse3: , - Collapse4: , - Collapse5: , - Collapse6: , - Collapse7: , -}; - -export default function CollapseIndex(props) { - return import('./doc.md')} - componentMapping={componentMapping} - />; +export default function CollapseIndex() { + return ; } \ No newline at end of file diff --git a/src/docs/pages/collapse/doc.md b/src/docs/pages/collapse/doc.md deleted file mode 100755 index 132c3bed..00000000 --- a/src/docs/pages/collapse/doc.md +++ /dev/null @@ -1,477 +0,0 @@ ------------ Title ------------ -[TITLE_BEGIN_zh_CN] -## 折叠框 Collapse -Collapse组件可用来折叠隐藏或显示一段内容。 - -Collapse组件主要提供以下功能： - -- 折叠框 -- 手风琴类型的折叠框，只允许一个面板展开 -- 可以通过Panel对象自定义实现折叠框控件 - -[TITLE_END_zh_CN] - - -[TITLE_BEGIN_en_US] -[TITLE_END_en_US] - -------------- Footer --------------------- -[FOOTER_BEGIN_zh_CN] -## API - -Collapse的属性如下所示 - -| 属性 | 名称 | 类型 | 默认值 | 描述 | -| --- | --- | --- | --- | --- | -| ref | 根节点Dom对象的引用 | function \| ref | - | 当需要获取到根节点的dom对象时可设置此属性 | -| className | 样式名称 | string | checkbox | | -| extraClassName | 额外添加的样式名称 | string | - | | -| defaultActive | 初始展开的面板所对应的值数组 | string[] \| number[] | - | | -| active | 展开的面板所对应的值数组 | string[] \| number[] | - | | -| onChange | 面板折叠状态切换触发的回调 | function | - | | -| accordion | 显示手风琴类型的折叠框 | boolean | false | | -| hasBorder | 是否有边框 | boolean | false | | -| hasBox | 是否有边框阴影 | boolean | true | | -| hasCollapseIcon | 是否显折叠图标 | boolean | true | | -| collapseIcon | 折叠图标 | react node | - | | -| children | 子节点对象 | react node | - | | -| iconPosition | 折叠图标显示的位置 | string | left | 可以设置成'left'或'right' | - - -Panel的属性如下所示 - -| 属性 | 名称 | 类型 | 默认值 | 描述 | -| --- | --- | --- | --- | --- | -| ref | 根节点Dom对象的引用 | function \| ref | - | 当需要获取到根节点的dom对象时可设置此属性 | -| className | 样式名称 | string | collapse-panel | | -| extraClassName | 额外添加的样式名称 | string | - | | -| collapse | 是否折叠状态 | boolean | - | | -| children | 子节点对象 | react node | - | | -| style | 根节点的样式对象 | object | - | | -| innerStyle | 根节点的子节点样式对象 | object | - | | -| height | 高度的像素值 | number | - | | -| autoScaleHeight | 是否自动调整高度 | boolean | - | | -| heightIncrement | 在原高度像基础上需要额外增加的高度值 | number | - | | - -Item的属性如下所示 - -| 属性 | 名称 | 类型 | 默认值 | 描述 | -| --- | --- | --- | --- | --- | -| ref | 根节点Dom对象的引用 | function \| ref | - | 当需要获取到根节点的dom对象时可设置此属性 | -| children | 子节点对象 | react node | - | | -| header | Item对应的Header节点 | react node | - | | -| value | Panel对应的值 | string \| number | - | | -| disabled | 是否禁用该Item | boolean \| number | - | | -| hasBackground | 是否有背景 | boolean \| number | - | | -| moreItems | 在右侧显示的组件数组 | react node[] | - | | - - -[FOOTER_END_zh_CN] - -[FOOTER_BEGIN_en_US] -[FOOTER_END_en_US] - -------------- Samples --------------------- -[Collapse1_BEGIN_zh_CN] -### 示例1: 可折叠的Panel -
- 提示 -
- Collapse组件以Collapse Panel为基石，进行内容的隐藏和展示。Panel对象可以单独使用，而且你可以用它自定义 - 实现折叠。 -
-
- -```jsx -import React, {useState} from 'react'; -import {Button, Collapse, Card} from 'react-windy-ui'; - -export default function Collapse1() { - const [collapse, setCollapse] = useState(false); - return <> - - - - - Card Body... - Card Body... - Card Body... - Card Body... - Card Body... - Card Body... - Card Body... - Card Body... - Card Body... - Card Body... - Card Body... - - - - ; -} -``` -[Collapse1_END_zh_CN] - -[Collapse1_BEGIN_en_US] -[Collapse1_END_en_US] ----------------------------------- - -[Collapse2_BEGIN_zh_CN] -### 示例2: 普通Collapse -
- 提示 -
- 默认情况下Collapse全部显示折叠中状态，设置defaultActive可以指定首次展开的面板。这里初始展开第一个面板。 -
-
- -```jsx -import React from 'react'; -import {Collapse} from 'react-windy-ui'; - -export default function Collapse2() { - const comp = <> - - -
- This is a panel....
- This is a panel....
-
- - -
- This is a panel....
- This is a panel....
-
- - -
- This is a panel....
- This is a panel....
-
- - - ; - return comp; -} -``` -[Collapse2_END_zh_CN] - -[Collapse2_BEGIN_en_US] -[Collapse2_END_en_US] ----------------------------------- -[Collapse3_BEGIN_zh_CN] -### 示例3: 手风琴 -
- 提示 -
- 设置accordion属性可以设置成手风琴效果的折叠框, 即只允许一个面板展开。 -
-
- -```jsx -import React from 'react'; -import {Collapse} from 'react-windy-ui'; - -export default function Collapse3() { - return <> - - -
- This is a panel....
- This is a panel....
-
- - -
- This is a panel....
- This is a panel....
-
- - -
- This is a panel....
- This is a panel....
-
- - - ; -} -``` -[Collapse3_END_zh_CN] - -[Collapse3_BEGIN_en_US] -[Collapse3_END_en_US] - - ----------------------------------- - -[Collapse4_BEGIN_zh_CN] -### 示例4: 设置更多属性 -
- 提示 -
- 您可以设置更多属性，这里示例了将accordion、hasBox、hasBorder、iconPosition几个属性组合使用的效果。 -
-
- -```jsx -import React, {useState} from 'react'; -import {Collapse, Toggle} from 'react-windy-ui'; - -export default function Collapse4() { - const [accordion, setAccordion] = useState(true); - const [bg, setBg] = useState(true); - const [box, setBox] = useState(false); - const [border, setBorder] = useState(false); - const [leftIcon, setLeftIcon] = useState('left'); - - const comp = <> -
- setAccordion(active)} - content={{on: 'Accordion', off: 'Accordion'}}/> -
-
- setBg(active)} - content={{on: 'Background', off: 'Background'}}/> -
-
- setBox(active)} - content={{on: 'Box Shadow', off: 'Box Shadow'}}/> -
-
- setBorder(active)} - content={{on: 'Border', off: 'Border'}}/> -
-
- setLeftIcon(active ? 'right' : 'left')} - content={{on: 'Right Icon', off: 'Left Icon'}}/> -
- - - -
- This is a panel....
- This is a panel....
-
- - -
- This is a panel....
- This is a panel....
-
- - -
- This is a panel....
- This is a panel....
-
- - - ; - return comp; -} - -``` -[Collapse4_END_zh_CN] - -[Collapse4_BEGIN_en_US] -[Collapse4_END_en_US] - ----------------------------------- - -[Collapse5_BEGIN_zh_CN] -### 示例5: 在左侧或右侧显示Icon -
- 提示 -
- Collapse中的Icon可以左侧、右侧显示，相应地需要将iconPosition设置成'left'或'right'。 -
-
- -```jsx -import React, {useState} from 'react'; -import {Collapse, Divider, Toggle} from 'react-windy-ui'; - -export default function Collapse5() { - const [leftIcon, setLeftIcon] = useState('left'); - - return <> -
- setLeftIcon(active ? 'right' : 'left')} - content={{on: 'Right Icon', off: 'Left Icon'}}/> -
- - - - -
- This is a panel....
- This is a panel....
-
- - - -
- This is a panel....
- This is a panel....
-
- - - -
- This is a panel....
- This is a panel....
-
- - - - ; -} -``` -[Collapse5_END_zh_CN] - -[Collapse5_BEGIN_en_US] -[Collapse5_END_en_US] - ----------------------------------- - -[Collapse6_BEGIN_zh_CN] -### 示例6: 在右侧显示自定义的内容 -
- 提示 -
- Collapse头部的右侧不仅可以显示Icon，还可以显示自定义添加组件。这里展示了可以在右侧添加文字、图标、按钮等内容。 - 在moreItems中添加你所需要的组件，对于按钮这类控件，如果希望在点击后不触发自动折叠， - 记得添加e.stopPropagation代码 - 阻止事件冒泡。 -
-
- -```jsx -import React from 'react'; -import {Button, Collapse, IconList, IconSearch} from 'react-windy-ui'; - -export default function Collapse6() { - - return <> - - , - ]}> -
- This is a panel....
- This is a panel....
-
- - { - alert('Add'); - e.stopPropagation(); - }}>Add, - Update]}> -
- This is a panel....
- This is a panel....
-
- - Add, - , - ]}> -
- This is a panel....
- This is a panel....
-
- - - ; -} -``` -[Collapse6_END_zh_CN] - -[Collapse6_BEGIN_en_US] -[Collapse6_END_en_US] ----------------------------------- - - -[Collapse7_BEGIN_zh_CN] -### 示例7: 禁用Collapse -
- 提示 -
- 在每个Collapse.Item上设置disabled属性以便禁用整个Collapse。 -
-
- -```jsx -import React, {useState} from 'react'; -import {Collapse, Button, Toggle, IconSearch, IconList} from 'react-windy-ui'; - -export default function Collapse7() { - const [disabled, setDisabled] = useState(false); - return <> -
- setDisabled(val)} - content={{on: 'Disabled', off: 'Enabled'}}/> -
- - , - ]}> -
- This is a panel....
- This is a panel....
-
- - Add, - Update]}> -
- This is a panel....
- This is a panel....
-
- - Add, - , - ]}> -
- This is a panel....
- This is a panel....
-
- - - ; -} -``` -[Collapse7_END_zh_CN] - -[Collapse7_BEGIN_en_US] -[Collapse7_END_en_US] - ----------------------------------- - - - - ----------------------------------- \ No newline at end of file diff --git a/src/docs/pages/collapse/md/api.md b/src/docs/pages/collapse/md/api.md new file mode 100644 index 00000000..83b71eec --- /dev/null +++ b/src/docs/pages/collapse/md/api.md @@ -0,0 +1,61 @@ +--- + order: 100 + type: text + zh_CN: API + en_US: API + editUrl: $BASE/docs/pages/collapse/md/api.md +--- + ++++ zh_CN +## API [editUrl] + +Collapse的属性如下所示 + +| 属性 | 名称 | 类型 | 默认值 | 描述 | +| --- | --- | --- | --- | --- | +| ref | 根节点Dom对象的引用 | function \| ref | - | 当需要获取到根节点的dom对象时可设置此属性 | +| className | 样式名称 | string | checkbox | | +| extraClassName | 额外添加的样式名称 | string | - | | +| defaultActive | 初始展开的面板所对应的值数组 | string[] \| number[] | - | | +| active | 展开的面板所对应的值数组 | string[] \| number[] | - | | +| onChange | 面板折叠状态切换触发的回调 | function | - | | +| accordion | 显示手风琴类型的折叠框 | boolean | false | | +| hasBorder | 是否有边框 | boolean | false | | +| hasBox | 是否有边框阴影 | boolean | true | | +| hasCollapseIcon | 是否显折叠图标 | boolean | true | | +| collapseIcon | 折叠图标 | react node | - | | +| children | 子节点对象 | react node | - | | +| iconPosition | 折叠图标显示的位置 | string | left | 可以设置成'left'或'right' | + + +Panel的属性如下所示 + +| 属性 | 名称 | 类型 | 默认值 | 描述 | +| --- | --- | --- | --- | --- | +| ref | 根节点Dom对象的引用 | function \| ref | - | 当需要获取到根节点的dom对象时可设置此属性 | +| className | 样式名称 | string | collapse-panel | | +| extraClassName | 额外添加的样式名称 | string | - | | +| collapse | 是否折叠状态 | boolean | - | | +| children | 子节点对象 | react node | - | | +| style | 根节点的样式对象 | object | - | | +| innerStyle | 根节点的子节点样式对象 | object | - | | +| height | 高度的像素值 | number | - | | +| autoScaleHeight | 是否自动调整高度 | boolean | - | | +| heightIncrement | 在原高度像基础上需要额外增加的高度值 | number | - | | + +Item的属性如下所示 + +| 属性 | 名称 | 类型 | 默认值 | 描述 | +| --- | --- | --- | --- | --- | +| ref | 根节点Dom对象的引用 | function \| ref | - | 当需要获取到根节点的dom对象时可设置此属性 | +| children | 子节点对象 | react node | - | | +| header | Item对应的Header节点 | react node | - | | +| value | Panel对应的值 | string \| number | - | | +| disabled | 是否禁用该Item | boolean \| number | - | | +| hasBackground | 是否有背景 | boolean \| number | - | | +| moreItems | 在右侧显示的组件数组 | react node[] | - | | + + ++++ en_US +## API [editUrl] + diff --git a/src/docs/pages/collapse/md/collapse1.md b/src/docs/pages/collapse/md/collapse1.md new file mode 100644 index 00000000..05da3a8a --- /dev/null +++ b/src/docs/pages/collapse/md/collapse1.md @@ -0,0 +1,17 @@ +--- +order: 1 +type: sample +zh_CN: 可折叠的Panel +en_US: Collapse Panel +editUrl: $BASE/docs/pages/collapse/md/collapse1.md +--- + ++++ zh_CN + Collapse组件以Collapse Panel为基石，进行内容的隐藏和展示。Panel对象可以单独使用，而且你可以用它自定义 +实现折叠。 + ++++ en_US +c1 + ++++ SampleCode +fileName: Collapse1 diff --git a/src/docs/pages/collapse/md/collapse2.md b/src/docs/pages/collapse/md/collapse2.md new file mode 100644 index 00000000..43954abc --- /dev/null +++ b/src/docs/pages/collapse/md/collapse2.md @@ -0,0 +1,17 @@ +--- +order: 2 +type: sample +zh_CN: 普通Collapse +en_US: Simple Collapse +editUrl: $BASE/docs/pages/collapse/md/collapse2.md +--- + ++++ zh_CN +默认情况下Collapse全部显示折叠中状态，设置defaultActive可以指定首次展开的面板。这里初始展开第一个面板。 + + ++++ en_US +c2 + ++++ SampleCode +fileName: Collapse2 diff --git a/src/docs/pages/collapse/md/collapse3.md b/src/docs/pages/collapse/md/collapse3.md new file mode 100644 index 00000000..1a0b2840 --- /dev/null +++ b/src/docs/pages/collapse/md/collapse3.md @@ -0,0 +1,16 @@ +--- +order: 3 +type: sample +zh_CN: 手风琴 +en_US: Accordion +editUrl: $BASE/docs/pages/collapse/md/collapse3.md +--- + ++++ zh_CN +设置accordion属性可以设置成手风琴效果的折叠框, 即只允许一个面板展开。 + ++++ en_US +Collapse3 + ++++ SampleCode +fileName: Collapse3 diff --git a/src/docs/pages/collapse/md/collapse4.md b/src/docs/pages/collapse/md/collapse4.md new file mode 100644 index 00000000..319509fa --- /dev/null +++ b/src/docs/pages/collapse/md/collapse4.md @@ -0,0 +1,17 @@ +--- +order: 4 +type: sample +zh_CN: 设置更多属性 +en_US: More properties +editUrl: $BASE/docs/pages/collapse/md/collapse4.md +--- + ++++ zh_CN +您可以设置更多属性，这里示例了将accordion、hasBox、hasBorder、iconPosition几个属性组合使用的效果。 + + ++++ en_US +Collapse4 + ++++ SampleCode +fileName: Collapse4 diff --git a/src/docs/pages/collapse/md/collapse5.md b/src/docs/pages/collapse/md/collapse5.md new file mode 100644 index 00000000..adc37784 --- /dev/null +++ b/src/docs/pages/collapse/md/collapse5.md @@ -0,0 +1,16 @@ +--- +order: 5 +type: sample +zh_CN: 在左侧或右侧显示Icon +en_US: Icon +editUrl: $BASE/docs/pages/collapse/md/collapse5.md +--- + ++++ zh_CN +Collapse中的Icon可以左侧、右侧显示，相应地需要将iconPosition设置成'left'或'right'。 + ++++ en_US +Collapse5 + ++++ SampleCode +fileName: Collapse5 diff --git a/src/docs/pages/collapse/md/collapse6.md b/src/docs/pages/collapse/md/collapse6.md new file mode 100644 index 00000000..4da7fde9 --- /dev/null +++ b/src/docs/pages/collapse/md/collapse6.md @@ -0,0 +1,19 @@ +--- +order: 6 +type: sample +zh_CN: 在右侧显示自定义的内容 +en_US: Customized content +editUrl: $BASE/docs/pages/collapse/md/collapse6.md +--- + ++++ zh_CN +Collapse头部的右侧不仅可以显示Icon，还可以显示自定义添加组件。这里展示了可以在右侧添加文字、图标、按钮等内容。 + 在moreItems中添加你所需要的组件，对于按钮这类控件，如果希望在点击后不触发自动折叠， + 记得添加e.stopPropagation代码 + 阻止事件冒泡。 + ++++ en_US +Collapse6 + ++++ SampleCode +fileName: Collapse6 diff --git a/src/docs/pages/collapse/md/collapse7.md b/src/docs/pages/collapse/md/collapse7.md new file mode 100644 index 00000000..643a93e9 --- /dev/null +++ b/src/docs/pages/collapse/md/collapse7.md @@ -0,0 +1,16 @@ +--- +order: 7 +type: sample +zh_CN: 禁用Collapse +en_US: Disable Collapse +editUrl: $BASE/docs/pages/collapse/md/collapse7.md +--- + ++++ zh_CN + 在每个Collapse.Item上设置disabled属性以便禁用整个Collapse。 + ++++ en_US +Collapse7 + ++++ SampleCode +fileName: Collapse7 diff --git a/src/docs/pages/collapse/md/title.md b/src/docs/pages/collapse/md/title.md new file mode 100644 index 00000000..379084f2 --- /dev/null +++ b/src/docs/pages/collapse/md/title.md @@ -0,0 +1,22 @@ +--- +order: 0 +type: text +zh_CN: 折叠框 Collapse +en_US: Collapse +editUrl: $BASE/docs/pages/collapse/md/title.md +--- + ++++ zh_CN +## 折叠框 Collapse [editUrl] +Collapse组件可用来折叠隐藏或显示一段内容。 + +Collapse组件主要提供以下功能： + +- 折叠框 +- 手风琴类型的折叠框，只允许一个面板展开 +- 可以通过Panel对象自定义实现折叠框控件 + + + ++++ en_US +## 折叠框 Collapse [editUrl] diff --git a/src/docs/pages/drawer/DrawerIndex.js b/src/docs/pages/drawer/DrawerIndex.js index d03a4309..65a09e80 100755 --- a/src/docs/pages/drawer/DrawerIndex.js +++ b/src/docs/pages/drawer/DrawerIndex.js @@ -1,21 +1,13 @@ import React from 'react'; -import DocPage from '../../utils/DocPage'; -import Drawer1 from './Drawer1'; -import Drawer2 from './Drawer2'; -import Drawer3 from './Drawer3'; -import Drawer4 from './Drawer4'; +import DocPage2 from '../../utils/DocPage2'; +const requireMd = require.context('!raw-loader!./md', false, /.md$/); +const requireCode = require.context('!raw-loader!./samples', false, /.js$/); +const requireJs = require.context('./samples', false, /.js$/); -const componentMapping = { - Drawer1: , - Drawer2: , - Drawer3: , - Drawer4: , -}; - -export default function DrawerIndex(props) { - return import('./doc.md')} - componentMapping={componentMapping} - />; +export default function DrawerIndex() { + return ; } \ No newline at end of file diff --git a/src/docs/pages/drawer/md/api.md b/src/docs/pages/drawer/md/api.md new file mode 100644 index 00000000..34d459ba --- /dev/null +++ b/src/docs/pages/drawer/md/api.md @@ -0,0 +1,31 @@ +--- + order: 100 + type: text + zh_CN: API + en_US: API + editUrl: $BASE/docs/pages/drawer/md/api.md +--- + ++++ zh_CN +## API [editUrl] + +Drawer的属性如下所示 + +| 属性 | 名称 | 类型 | 默认值 | 描述 | +| --- | --- | --- | --- | --- | +| ref | 根节点Dom对象的引用 | function \| ref | - | 当需要获取到根节点的dom对象时可设置此属性 | +| className | 样式名称 | string | drawer | | +| extraClassName | 额外添加的样式名称 | string | - | | +| active | 显示Drawer | boolean | - | | +| onChange | Drawer显示或关闭触发的回调 | function | - | | +| hasMask | 是否显示黑色背景 | boolean | true | | +| hasAnchor | 是否显示打开Drawer的快捷图标 | boolean | false | | +| autoClose | 点击背景是否触发自动关闭 | boolean | true | | +| position | 显示的位置 | string | left | 可以设置为: left、top、right、bottom | +| header | header节点 | react node | - | | +| footer | footer节点 | react node | - | | +| style | 样式 | object | - | 可在其中指定Drawer的高度和宽度 | + ++++ en_US +## API [editUrl] + diff --git a/src/docs/pages/drawer/md/drawer1.md b/src/docs/pages/drawer/md/drawer1.md new file mode 100644 index 00000000..91aa4559 --- /dev/null +++ b/src/docs/pages/drawer/md/drawer1.md @@ -0,0 +1,17 @@ +--- +order: 1 +type: sample +zh_CN: 两种风格的Drawer +en_US: Two types of Drawer +editUrl: $BASE/docs/pages/drawer/md/drawer1.md +--- + ++++ zh_CN +默认的Drawer组件会有一个黑色的背景, 点击黑色背景时会关闭窗体。当hasMask设置为false时，Drawer则不会有黑色背景， + 但不影响点击背景以关闭弹出窗体。另外要显示或关闭Drawer时，可以设置active属性值为true或false。 + ++++ en_US +Drawer1 + ++++ SampleCode +fileName: Drawer1 diff --git a/src/docs/pages/drawer/md/drawer2.md b/src/docs/pages/drawer/md/drawer2.md new file mode 100644 index 00000000..e8f1a394 --- /dev/null +++ b/src/docs/pages/drawer/md/drawer2.md @@ -0,0 +1,18 @@ +--- +order: 2 +type: sample +zh_CN: 显示位置 +en_US: Drawer Position +editUrl: $BASE/docs/pages/drawer/md/drawer2.md +--- + ++++ zh_CN +Drawer可以在上下左右四个方位显示，您需要将position属性相应地设置为top、bottom、left、right。另外您还需要给Drawer设置一个style属性， + 以便更改Drawer的宽度或高度。 + 如果position是在上下方位时，需要在style中设定一个高度height。如果如果position是在左右方位时，需要在style中设定一个宽度width。 + ++++ en_US +Drawer2 + ++++ SampleCode +fileName: Drawer2 diff --git a/src/docs/pages/drawer/md/drawer3.md b/src/docs/pages/drawer/md/drawer3.md new file mode 100644 index 00000000..8122f6f8 --- /dev/null +++ b/src/docs/pages/drawer/md/drawer3.md @@ -0,0 +1,17 @@ +--- +order: 3 +type: sample +zh_CN: 显示Drawer的快捷图标 +en_US: Drawer3 +editUrl: $BASE/docs/pages/drawer/md/drawer3.md +--- + ++++ zh_CN +当Drawer关闭时，可以在界面上显示一个Drawer的快捷图标。可以通过点击这个快捷图标，打开Drawer。要显示一个快捷图标，只需要将hasAnchor属性 + 设置为true即可。 + ++++ en_US +Drawer3 + ++++ SampleCode +fileName: Drawer3 diff --git a/src/docs/pages/drawer/md/drawer4.md b/src/docs/pages/drawer/md/drawer4.md new file mode 100644 index 00000000..37a90a97 --- /dev/null +++ b/src/docs/pages/drawer/md/drawer4.md @@ -0,0 +1,17 @@ +--- +order: 4 +type: sample +zh_CN: 显示Header和Footer +en_US: Header and footer +editUrl: $BASE/docs/pages/drawer/md/drawer4.md +--- + ++++ zh_CN +您可以给Drawer添加header和footer, 通常在一些使用到表单的场景下用到，相应地设置一个header和footer属性即可。 + + ++++ en_US +Drawer4 + ++++ SampleCode +fileName: Drawer4 diff --git a/src/docs/pages/drawer/md/title.md b/src/docs/pages/drawer/md/title.md new file mode 100644 index 00000000..13120319 --- /dev/null +++ b/src/docs/pages/drawer/md/title.md @@ -0,0 +1,19 @@ +--- +order: 0 +type: text +zh_CN: 抽屉 Drawer +en_US: Drawer +editUrl: $BASE/docs/pages/drawer/md/title.md +--- + ++++ zh_CN +## 抽屉 Drawer [editUrl] +Drawer组件，从屏幕边缘向中间滑出的弹出窗体，可常用来在操作时额外展示一部分内容。 + +- 可用来额外展示协议内容、条款确认等内容 +- 点击窗台背景即可关闭 + + + ++++ en_US +## Drawer [editUrl] diff --git a/src/docs/pages/drawer/Drawer1.js b/src/docs/pages/drawer/samples/Drawer1.js similarity index 100% rename from src/docs/pages/drawer/Drawer1.js rename to src/docs/pages/drawer/samples/Drawer1.js diff --git a/src/docs/pages/drawer/Drawer2.js b/src/docs/pages/drawer/samples/Drawer2.js similarity index 100% rename from src/docs/pages/drawer/Drawer2.js rename to src/docs/pages/drawer/samples/Drawer2.js diff --git a/src/docs/pages/drawer/Drawer3.js b/src/docs/pages/drawer/samples/Drawer3.js similarity index 100% rename from src/docs/pages/drawer/Drawer3.js rename to src/docs/pages/drawer/samples/Drawer3.js diff --git a/src/docs/pages/drawer/Drawer4.js b/src/docs/pages/drawer/samples/Drawer4.js similarity index 100% rename from src/docs/pages/drawer/Drawer4.js rename to src/docs/pages/drawer/samples/Drawer4.js diff --git a/src/docs/pages/dropdown/DpIndex.js b/src/docs/pages/dropdown/DpIndex.js index 065a76f2..9592712b 100755 --- a/src/docs/pages/dropdown/DpIndex.js +++ b/src/docs/pages/dropdown/DpIndex.js @@ -1,24 +1,13 @@ import React from 'react'; -import DocPage from '../../utils/DocPage'; -import Dp1 from './Dp1'; -import Dp2 from './Dp2'; -import Dp3 from './Dp3'; -import Dp4 from './Dp4'; -import Dp5 from './Dp5'; -import TransitionTest from './TransitionTest'; +import DocPage2 from '../../utils/DocPage2'; -const componentMapping = { - Dp1: , - Dp2: , - Dp3: , - Dp4: , - Dp5: , - TransitionTest: -}; +const requireMd = require.context('!raw-loader!./md', false, /.md$/); +const requireCode = require.context('!raw-loader!./samples', false, /.js$/); +const requireJs = require.context('./samples', false, /.js$/); -export default function DpIndex(props) { - return import('./doc.md')} - componentMapping={componentMapping} - />; +export default function DpIndex() { + return ; } \ No newline at end of file diff --git a/src/docs/pages/dropdown/TransitionTest.js b/src/docs/pages/dropdown/TransitionTest.js deleted file mode 100755 index 9ae408c2..00000000 --- a/src/docs/pages/dropdown/TransitionTest.js +++ /dev/null @@ -1,30 +0,0 @@ -import React, {useState} from 'react'; -import {useTransition, animated} from 'react-spring'; -import {faLaptop} from '@fortawesome/free-solid-svg-icons'; -import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'; -import {Button} from 'react-windy-ui'; - -export default function TransitionTest() { - const [show, set] = useState(false); - - //useChain: 多个特效串起来顺序执行 - //mount/unmount - const transition = useTransition(show, null, { - from: {opacity: 0}, - enter: {opacity: 1}, - leave: {opacity: 0}, - }); - - - return <> - - { - transition.map(({item, key, props}) => { - return item && - - ; - }) - } - ; - -} \ No newline at end of file diff --git a/src/docs/pages/dropdown/md/api.md b/src/docs/pages/dropdown/md/api.md new file mode 100644 index 00000000..cb777732 --- /dev/null +++ b/src/docs/pages/dropdown/md/api.md @@ -0,0 +1,15 @@ +--- + order: 100 + type: text + zh_CN: API + en_US: API + editUrl: $BASE/docs/pages/dropdown/md/api.md +--- + ++++ zh_CN +## API [editUrl] + + ++++ en_US +## API [editUrl] + diff --git a/src/docs/pages/dropdown/md/dp1.md b/src/docs/pages/dropdown/md/dp1.md new file mode 100644 index 00000000..9aede57b --- /dev/null +++ b/src/docs/pages/dropdown/md/dp1.md @@ -0,0 +1,16 @@ +--- +order: 1 +type: sample +zh_CN: 简单示例 +en_US: Simple Sample +editUrl: $BASE/docs/pages/dropdown/md/dp1.md +--- + ++++ zh_CN +一个简单的示例，点击文本、Button后弹出菜单。 + ++++ en_US +Dp1 + ++++ SampleCode +fileName: Dp1 diff --git a/src/docs/pages/dropdown/md/dp2.md b/src/docs/pages/dropdown/md/dp2.md new file mode 100644 index 00000000..6209f626 --- /dev/null +++ b/src/docs/pages/dropdown/md/dp2.md @@ -0,0 +1,17 @@ +--- +order: 2 +type: sample +zh_CN: 激活弹出菜单 +en_US: Pop-up menu +editUrl: $BASE/docs/pages/dropdown/md/dp2.md +--- + ++++ zh_CN +设置activeBy属性可以选择Dropdown的菜单弹出的方式，activeBy可以设置成'hover'或'click'。这里示例了当鼠标 + 悬停在Button上时，激活弹出菜单。 + ++++ en_US +Dp1 + ++++ SampleCode +fileName: Dp2 diff --git a/src/docs/pages/dropdown/md/dp3.md b/src/docs/pages/dropdown/md/dp3.md new file mode 100644 index 00000000..b74a7401 --- /dev/null +++ b/src/docs/pages/dropdown/md/dp3.md @@ -0,0 +1,16 @@ +--- +order: 3 +type: sample +zh_CN: 结合ButtonGroup +en_US: Integrate with button group +editUrl: $BASE/docs/pages/dropdown/md/dp3.md +--- + ++++ zh_CN +Dropdown可以与ButtonGroup一起组合使用。 + ++++ en_US +Dp3 + ++++ SampleCode +fileName: Dp3 diff --git a/src/docs/pages/dropdown/md/dp4.md b/src/docs/pages/dropdown/md/dp4.md new file mode 100644 index 00000000..eaca46c7 --- /dev/null +++ b/src/docs/pages/dropdown/md/dp4.md @@ -0,0 +1,26 @@ +--- +order: 4 +type: sample +zh_CN: 处理点击事件 +en_US: Handle click event +editUrl: $BASE/docs/pages/dropdown/md/dp4.md +--- + ++++ zh_CN + Dropdown有两种方式处理弹出菜单的点击事件。 +
    +
  • 第一种方式也是最直接的方式，在各个Item上设置onClick属性，当点击对应的Item + 时触发。 +
    • +
  • 第二种方式，首先需要在各个Item上设置一个id, 然后在Menu上提供一个onSelect方法，一旦点击了某个Item，将通过onSelect + 方法回调 +
    • +
  • 如果需要在点击Item不关闭弹出菜单时，可以使用第一种方式，在onClick方法中添加'e.stopPropagation()'去阻止事件冒泡。
    • +
+
+ ++++ en_US +Dp4 + ++++ SampleCode +fileName: Dp4 diff --git a/src/docs/pages/dropdown/md/dp5.md b/src/docs/pages/dropdown/md/dp5.md new file mode 100644 index 00000000..bb03b91b --- /dev/null +++ b/src/docs/pages/dropdown/md/dp5.md @@ -0,0 +1,20 @@ +--- +order: 5 +type: sample +zh_CN: 菜单的显示位置 +en_US: Menu Position +editUrl: $BASE/docs/pages/dropdown/md/dp5.md +--- + ++++ zh_CN +Dropdown可在十二个方位显示，可相应地设置position属性为以下值： + Top方位： 'topLeft'、'top'、'topRight'； + Bottom方位: 'bottomLeft'、'bottom'、'bottomRight'； + Left方位: 'leftTop'、'left'、'leftBottom'； + Right方位: 'rightTop'、'right'、'rightBottom'。 + ++++ en_US +Dp5 + ++++ SampleCode +fileName: Dp5 diff --git a/src/docs/pages/dropdown/md/title.md b/src/docs/pages/dropdown/md/title.md new file mode 100644 index 00000000..7f4fe382 --- /dev/null +++ b/src/docs/pages/dropdown/md/title.md @@ -0,0 +1,21 @@ +--- +order: 0 +type: text +zh_CN: 下拉菜单 Dropdown +en_US: Dropdown +editUrl: $BASE/docs/pages/dropdown/md/title.md +--- + ++++ zh_CN +## 下拉菜单 Dropdown [editUrl] +Dropdown组件。通常情况下，对于增删改查之类的操作，一般在界面上使用按钮进行布局即可。 +但当操作比较多且使用Button会导致布局凌乱时，可以考虑使用Dropdown组件，将多个操作组合到Dropdown中。 +

+Dropdown主要提供以下功能： + +- 提供一个可供点击的弹出菜单，可将一系列的操作在此控件中组合 +- 如果需要选择菜单的某一项，请使用Select组件 + + ++++ en_US +## Dropdown [editUrl] diff --git a/src/docs/pages/dropdown/Dp1.js b/src/docs/pages/dropdown/samples/Dp1.js similarity index 100% rename from src/docs/pages/dropdown/Dp1.js rename to src/docs/pages/dropdown/samples/Dp1.js diff --git a/src/docs/pages/dropdown/Dp2.js b/src/docs/pages/dropdown/samples/Dp2.js similarity index 100% rename from src/docs/pages/dropdown/Dp2.js rename to src/docs/pages/dropdown/samples/Dp2.js diff --git a/src/docs/pages/dropdown/Dp3.js b/src/docs/pages/dropdown/samples/Dp3.js similarity index 100% rename from src/docs/pages/dropdown/Dp3.js rename to src/docs/pages/dropdown/samples/Dp3.js diff --git a/src/docs/pages/dropdown/Dp4.js b/src/docs/pages/dropdown/samples/Dp4.js similarity index 100% rename from src/docs/pages/dropdown/Dp4.js rename to src/docs/pages/dropdown/samples/Dp4.js diff --git a/src/docs/pages/dropdown/Dp5.js b/src/docs/pages/dropdown/samples/Dp5.js similarity index 100% rename from src/docs/pages/dropdown/Dp5.js rename to src/docs/pages/dropdown/samples/Dp5.js diff --git a/src/docs/pages/form/FormIndex.js b/src/docs/pages/form/FormIndex.js index e674155f..21b5ccaf 100755 --- a/src/docs/pages/form/FormIndex.js +++ b/src/docs/pages/form/FormIndex.js @@ -1,36 +1,13 @@ import React from 'react'; -import DocPage from '../../utils/DocPage'; -import Form1 from './Form1'; -import Form2 from './Form2'; -import Form3 from './Form3'; -import Form4 from './Form4'; -import Form5 from './Form5'; -import Form6 from './Form6'; -import Form7 from './Form7'; -import Form8 from './Form8'; -import Form9 from './Form9'; -import Form10 from './Form10'; -import Form11 from './Form11'; -import Form12 from './Form12'; +import DocPage2 from '../../utils/DocPage2'; -const componentMapping = { - Form1: , - Form2: , - Form3: , - Form4: , - Form5: , - Form6: , - Form7: , - Form8: , - Form9: , - Form10: , - Form11: , - Form12: , -}; +const requireMd = require.context('!raw-loader!./md', false, /.md$/); +const requireCode = require.context('!raw-loader!./samples', false, /.js$/); +const requireJs = require.context('./samples', false, /.js$/); -export default function FormIndex(props) { - return import('./doc.md')} - componentMapping={componentMapping} - />; +export default function FormIndex() { + return ; } \ No newline at end of file diff --git a/src/docs/pages/form/md/form1.md b/src/docs/pages/form/md/form1.md new file mode 100644 index 00000000..6d57eaf0 --- /dev/null +++ b/src/docs/pages/form/md/form1.md @@ -0,0 +1,16 @@ +--- +order: 1 +type: sample +zh_CN: Form +en_US: Form +editUrl: $BASE/docs/pages/form/md/form1.md +--- + ++++ zh_CN + + ++++ en_US +Dp1 + ++++ SampleCode +fileName: Form1 diff --git a/src/docs/pages/form/md/form10.md b/src/docs/pages/form/md/form10.md new file mode 100644 index 00000000..1d5dbd1e --- /dev/null +++ b/src/docs/pages/form/md/form10.md @@ -0,0 +1,16 @@ +--- +order: 10 +type: sample +zh_CN: Form +en_US: Form +editUrl: $BASE/docs/pages/form/md/form10.md +--- + ++++ zh_CN +form10 + ++++ en_US +form10 + ++++ SampleCode +fileName: Form10 diff --git a/src/docs/pages/form/md/form11.md b/src/docs/pages/form/md/form11.md new file mode 100644 index 00000000..a424b789 --- /dev/null +++ b/src/docs/pages/form/md/form11.md @@ -0,0 +1,16 @@ +--- +order: 11 +type: sample +zh_CN: Form +en_US: Form +editUrl: $BASE/docs/pages/form/md/form11.md +--- + ++++ zh_CN +form11 + ++++ en_US +form11 + ++++ SampleCode +fileName: Form11 diff --git a/src/docs/pages/form/md/form12.md b/src/docs/pages/form/md/form12.md new file mode 100644 index 00000000..246c543d --- /dev/null +++ b/src/docs/pages/form/md/form12.md @@ -0,0 +1,16 @@ +--- +order: 12 +type: sample +zh_CN: Form +en_US: Form +editUrl: $BASE/docs/pages/form/md/form12.md +--- + ++++ zh_CN +form12 + ++++ en_US +form12 + ++++ SampleCode +fileName: Form12 diff --git a/src/docs/pages/form/md/form2.md b/src/docs/pages/form/md/form2.md new file mode 100644 index 00000000..e3af6eac --- /dev/null +++ b/src/docs/pages/form/md/form2.md @@ -0,0 +1,16 @@ +--- +order: 2 +type: sample +zh_CN: Form +en_US: Form +editUrl: $BASE/docs/pages/form/md/form2.md +--- + ++++ zh_CN +form2 + ++++ en_US +form2 + ++++ SampleCode +fileName: Form2 diff --git a/src/docs/pages/form/md/form3.md b/src/docs/pages/form/md/form3.md new file mode 100644 index 00000000..68980076 --- /dev/null +++ b/src/docs/pages/form/md/form3.md @@ -0,0 +1,16 @@ +--- +order: 3 +type: sample +zh_CN: Form +en_US: Form +editUrl: $BASE/docs/pages/form/md/form3.md +--- + ++++ zh_CN +form3 + ++++ en_US +form3 + ++++ SampleCode +fileName: Form3 diff --git a/src/docs/pages/form/md/form4.md b/src/docs/pages/form/md/form4.md new file mode 100644 index 00000000..128cbb3d --- /dev/null +++ b/src/docs/pages/form/md/form4.md @@ -0,0 +1,16 @@ +--- +order: 4 +type: sample +zh_CN: Form +en_US: Form +editUrl: $BASE/docs/pages/form/md/form4.md +--- + ++++ zh_CN +form4 + ++++ en_US +form4 + ++++ SampleCode +fileName: Form4 diff --git a/src/docs/pages/form/md/form5.md b/src/docs/pages/form/md/form5.md new file mode 100644 index 00000000..7f0f95c6 --- /dev/null +++ b/src/docs/pages/form/md/form5.md @@ -0,0 +1,16 @@ +--- +order: 5 +type: sample +zh_CN: Form +en_US: Form +editUrl: $BASE/docs/pages/form/md/form5.md +--- + ++++ zh_CN +form5 + ++++ en_US +form5 + ++++ SampleCode +fileName: Form5 diff --git a/src/docs/pages/form/md/form6.md b/src/docs/pages/form/md/form6.md new file mode 100644 index 00000000..d3238fff --- /dev/null +++ b/src/docs/pages/form/md/form6.md @@ -0,0 +1,16 @@ +--- +order: 6 +type: sample +zh_CN: Form +en_US: Form +editUrl: $BASE/docs/pages/form/md/form6.md +--- + ++++ zh_CN +form6 + ++++ en_US +form6 + ++++ SampleCode +fileName: Form6 diff --git a/src/docs/pages/form/md/form7.md b/src/docs/pages/form/md/form7.md new file mode 100644 index 00000000..36fc328b --- /dev/null +++ b/src/docs/pages/form/md/form7.md @@ -0,0 +1,16 @@ +--- +order: 7 +type: sample +zh_CN: Form +en_US: Form +editUrl: $BASE/docs/pages/form/md/form7.md +--- + ++++ zh_CN +form7 + ++++ en_US +form7 + ++++ SampleCode +fileName: Form7 diff --git a/src/docs/pages/form/md/form8.md b/src/docs/pages/form/md/form8.md new file mode 100644 index 00000000..ec8196ae --- /dev/null +++ b/src/docs/pages/form/md/form8.md @@ -0,0 +1,16 @@ +--- +order: 8 +type: sample +zh_CN: Form +en_US: Form +editUrl: $BASE/docs/pages/form/md/form8.md +--- + ++++ zh_CN +form8 + ++++ en_US +form8 + ++++ SampleCode +fileName: Form8 diff --git a/src/docs/pages/form/md/form9.md b/src/docs/pages/form/md/form9.md new file mode 100644 index 00000000..7bbed926 --- /dev/null +++ b/src/docs/pages/form/md/form9.md @@ -0,0 +1,16 @@ +--- +order: 9 +type: sample +zh_CN: Form +en_US: Form +editUrl: $BASE/docs/pages/form/md/form9.md +--- + ++++ zh_CN +form9 + ++++ en_US +form9 + ++++ SampleCode +fileName: Form9 diff --git a/src/docs/pages/form/Form1.js b/src/docs/pages/form/samples/Form1.js similarity index 100% rename from src/docs/pages/form/Form1.js rename to src/docs/pages/form/samples/Form1.js diff --git a/src/docs/pages/form/Form10.js b/src/docs/pages/form/samples/Form10.js similarity index 100% rename from src/docs/pages/form/Form10.js rename to src/docs/pages/form/samples/Form10.js diff --git a/src/docs/pages/form/Form11.js b/src/docs/pages/form/samples/Form11.js similarity index 100% rename from src/docs/pages/form/Form11.js rename to src/docs/pages/form/samples/Form11.js diff --git a/src/docs/pages/form/Form12.js b/src/docs/pages/form/samples/Form12.js similarity index 100% rename from src/docs/pages/form/Form12.js rename to src/docs/pages/form/samples/Form12.js diff --git a/src/docs/pages/form/Form2.js b/src/docs/pages/form/samples/Form2.js similarity index 100% rename from src/docs/pages/form/Form2.js rename to src/docs/pages/form/samples/Form2.js diff --git a/src/docs/pages/form/Form3.js b/src/docs/pages/form/samples/Form3.js similarity index 100% rename from src/docs/pages/form/Form3.js rename to src/docs/pages/form/samples/Form3.js diff --git a/src/docs/pages/form/Form4.js b/src/docs/pages/form/samples/Form4.js similarity index 100% rename from src/docs/pages/form/Form4.js rename to src/docs/pages/form/samples/Form4.js diff --git a/src/docs/pages/form/Form5.js b/src/docs/pages/form/samples/Form5.js similarity index 100% rename from src/docs/pages/form/Form5.js rename to src/docs/pages/form/samples/Form5.js diff --git a/src/docs/pages/form/Form6.js b/src/docs/pages/form/samples/Form6.js similarity index 100% rename from src/docs/pages/form/Form6.js rename to src/docs/pages/form/samples/Form6.js diff --git a/src/docs/pages/form/Form7.js b/src/docs/pages/form/samples/Form7.js similarity index 100% rename from src/docs/pages/form/Form7.js rename to src/docs/pages/form/samples/Form7.js diff --git a/src/docs/pages/form/Form8.js b/src/docs/pages/form/samples/Form8.js similarity index 100% rename from src/docs/pages/form/Form8.js rename to src/docs/pages/form/samples/Form8.js diff --git a/src/docs/pages/form/Form9.js b/src/docs/pages/form/samples/Form9.js similarity index 100% rename from src/docs/pages/form/Form9.js rename to src/docs/pages/form/samples/Form9.js diff --git a/src/docs/pages/grid/GridIndex.js b/src/docs/pages/grid/GridIndex.js index bfab842c..1070b673 100755 --- a/src/docs/pages/grid/GridIndex.js +++ b/src/docs/pages/grid/GridIndex.js @@ -1,26 +1,13 @@ import React from 'react'; -import DocPage from '../../utils/DocPage'; -import Grid1 from './samples/Grid1'; -import Grid2 from './samples/Grid2'; -import Grid3 from './samples/Grid3'; -import Grid4 from './samples/Grid4'; -import Grid5 from './samples/Grid5'; -import Grid6 from './samples/Grid6'; -import Grid7 from './samples/Grid7'; +import DocPage2 from '../../utils/DocPage2'; -const componentMapping = { - Grid1: , - Grid2: , - Grid3: , - Grid4: , - Grid5: , - Grid6: , - Grid7: , -}; +const requireMd = require.context('!raw-loader!./md', false, /.md$/); +const requireCode = require.context('!raw-loader!./samples', false, /.js$/); +const requireJs = require.context('./samples', false, /.js$/); -export default function GridIndex(props) { - return import('./doc.md')} - componentMapping={componentMapping} - />; +export default function GridIndex() { + return ; } \ No newline at end of file diff --git a/src/docs/pages/grid/doc.md b/src/docs/pages/grid/doc.md deleted file mode 100755 index b13e6172..00000000 --- a/src/docs/pages/grid/doc.md +++ /dev/null @@ -1,399 +0,0 @@ ------------ Title ------------ -[TITLE_BEGIN_zh_CN] -## 删格 Grid -Grid系统在响应式布局中占有不可或缺的地位，Windy-UI遵循了12列的定义，将页面均等分为12个区域用于布局。凭借flex-box强大的布局功能， -我们可以将页面元素有序地归类，并在不同宽度的窗口下展现不同的部分。如果需要划分更小的列，例如24列，则需要修改Wui的变量去重新生成一份新的样式文件(css)。 - -Grid主要有以下功能： - -- 使用Row和Col进行布局，row表示水平方向的整行，Col表示每个Row可以拆分的列 -- 支持某列固定宽度其他列均分剩余空间 -- 支持响应式布局，在窗口不同宽度下更改列的宽度 -- 基于Flex 布局，列中的子元素可以指定水平对齐方式：居左、居中、居右等 -- 支持列中的子元素顶部对齐、垂直居中、底部对齐的方式 - -对于屏幕宽度的划分，请参见API部分。 - -[TITLE_END_zh_CN] - - -[TITLE_BEGIN_en_US] -[TITLE_END_en_US] - -------------- Footer --------------------- -[FOOTER_BEGIN_zh_CN] -## API - -- 依据Bootstrap的Grid设计，窗口从宽度上分为以下几例 - -| | Extra small | Small | Medium | Large | Extra large | -| --- | --- | --- | --- | --- | --- | -| 窗口宽度 | <576px | ≥576px | ≥768px | ≥992px | ≥1200px | -| 值的范围 | [0, 576) | [576, 768) | [768,992) | [992,1200) | [1200, ..] | -| 对应样式 | .col-xs | .col-sm | .col-md | .col-lg | .col-xl | - -- Row的属性如下所示： - -| 属性 | 名称 | 类型 | 默认值 | 描述 | -| --- | --- | --- | --- | --- | -| ref | Input Dom对象的引用 | function \| ref | - | 当需要获取dom对象时可设置此属性 | -| className | 样式名称 | string | row | | -| extraClassName | 额外添加的样式名称 | string | - | | -| justify | 指定列在水平方向的排列方式 | string | start | 值可以是: start、center、end、around、between、evenly | -| align | 指定列在垂直方向的排列方式 | string | start | 值可以是: start、center、end | - -- Col的属性如下所示： - -| 属性 | 名称 | 类型 | 默认值 | 描述 | -| --- | --- | --- | --- | --- | -| ref | Input Dom对象的引用 | function \| ref | - | 当需要获取dom对象时可设置此属性 | -| className | 样式名称 | string | - | | -| extraClassName | 额外添加的样式名称 | string | - | | -| col | 固定宽度下占据的列数 | number | - | | -| xs | xs尺寸下占据的列数 | number | - | | -| sm | sm尺寸下占据的列数 | number | - | | -| md | md尺寸下占据的列数 | number | - | | -| lg | lg尺寸下占据的列数 | number | - | | -| xl | xl尺寸下占据的列数 | number | - | | -| xsOffset | xsOffset尺寸下偏移的列数 | number | - | | -| smOffset | smOffset尺寸下偏移的列数 | number | - | | -| mdOffset | mdOffset尺寸下偏移的列数 | number | - | | -| lgOffset | lgOffset尺寸下偏移的列数 | number | - | | -| xlOffset | xlOffset尺寸下偏移的列数 | number | - | | -| order | 顺序 | number | - | 值越小排列越靠前 | - - - -[FOOTER_END_zh_CN] - -[FOOTER_BEGIN_en_US] -[FOOTER_END_en_US] - -------------- Samples --------------------- -[Grid1_BEGIN_zh_CN] -### 示例1 固定宽度 - - 设置col属性，将其设置为一个在1到12范围内的一个整数值后，该列将以固定宽度展示。 - 列的宽度不会因为窗口宽度变化而变化。 - - -```jsx -import React from 'react'; -import {Row, Col} from 'react-windy-ui'; - -export default function Grid1() { - return <> -
- - col-12 - - - col-6 - col-6 - - - col-4 - col-4 - col-4 - - - col-3 - col-3 - col-3 - col-3 - -
- ; -} -``` -[Grid1_END_zh_CN] - -[Grid1_BEGIN_en_US] -[Grid1_END_en_US] ----------------------------------- -[Grid2_BEGIN_zh_CN] -### 示例2 固定宽度 - - 设置offset属性可以将列向右侧偏移。对于xs宽度布局，设置xsOffset={4} 则会将该列向右侧偏移 4 个列的宽度。 - - -```jsx -import React from 'react'; -import {Row, Col} from 'react-windy-ui'; - -export default function Grid2() { - return <> -
- - col-4 - col-4 - - - col-3 - col-3 - - - col-4 - -
- ; -} -``` -[Grid2_END_zh_CN] - -[Grid2_BEGIN_en_US] -[Grid2_END_en_US] ----------------------------------- -[Grid3_BEGIN_zh_CN] -### 示例3 水平排列 - - 通过Row的justify属性可以指定列在水平方向的排列方式，可以将其设置为：start、center、 - end、around、between、evenly。 - - -```jsx -import React from 'react'; -import {Row, Col, Tooltip} from 'react-windy-ui'; - -export default function Grid3() { - return <> -
-
-
justify="start"
- - - col-5 - col-5 - - - -
justify="center"
- - - col-5 - col-5 - - - -
justify="end"
- - - col-5 - col-5 - - - -
justify="around"
- - - col-5 - col-5 - - -
justify="between"
- - - col-5 - col-5 - - - -
justify="evenly"
- - - col-5 - col-5 - - -
-
- ; -} -``` -[Grid3_END_zh_CN] - -[Grid3_BEGIN_en_US] -[Grid3_END_en_US] ----------------------------------- -[Grid4_BEGIN_zh_CN] -### 示例4 垂直排列 - - 通过Row的align属性可以指定列在垂直方向的排列方式，可以将其设置为：start、center、 - end。 - - -```jsx -import React from 'react'; -import {Row, Col, Tooltip} from 'react-windy-ui'; - -export default function Grid4() { - return <> -
-
- - - - - - - - - - - - - - - - - - - - - - - - -
-
- ; -} -``` -[Grid4_END_zh_CN] - -[Grid4_BEGIN_en_US] -[Grid4_END_en_US] ----------------------------------- -[Grid5_BEGIN_zh_CN] -### 示例5 排序 - - 通过order属性可以指定列的顺序，值越小排列越靠前。 - - -```jsx -import React from 'react'; -import {Row, Col, Tooltip} from 'react-windy-ui'; - -export default function Grid5() { - return <> -
-
- - - First - - - Second - - - Last - - -
-
- ; -} -``` -[Grid5_END_zh_CN] - -[Grid5_BEGIN_en_US] -[Grid5_END_en_US] ----------------------------------- -[Grid6_BEGIN_zh_CN] -### 示例6 响应式布局 - - 针对响应式布局，提供了几种尺寸的属性可供使用： xs、sm、 - md、lg、xg。 - 例如<Col xs={12} sm={4}>sm-4</Col>, 设定了当屏幕尺寸为xs - 时占据全部的12列宽度，当尺寸是sm时，只占据4列。 - - -```jsx -import React from 'react'; -import {Col, Row, Tooltip} from 'react-windy-ui'; - -export default function Grid6() { - return <> -
-
- - - sm-4 - sm-4 - sm-4 - - - - - md-4 - md-4 - - - - sm-4 - - - - - - Col - - - - -
-
- ; -} -``` -[Grid6_END_zh_CN] - -[Grid6_BEGIN_en_US] -[Grid6_END_en_US] ----------------------------------- - -[Grid7_BEGIN_zh_CN] -### 示例7 等宽和固定某列固定一列宽度 - - 在这个例子中： - 当三个列同时使用<Col/>时，表示这三个列宽度相等; - 当中间一列指定col={5}属性时，表示这列固定宽度为5列的宽度值，另外两个列等比例分配剩余空间; - 当中间一列指定col={10}属性时，表示这列固定宽度为10列的宽度值，另外两个列等比例分配剩余空间。 - - -```jsx -import React from 'react'; -import {Col, Row} from 'react-windy-ui'; - -export default function Grid7() { - return <> -
-
- - col - col - col - - - - col - col-5 - col - - - col - col-10 - col - -
-
- ; -} -``` -[Grid7_END_zh_CN] - -[Grid7_BEGIN_en_US] -[Grid7_END_en_US] ----------------------------------- \ No newline at end of file diff --git a/src/docs/pages/grid/md/grid1.md b/src/docs/pages/grid/md/grid1.md new file mode 100644 index 00000000..90c59fb8 --- /dev/null +++ b/src/docs/pages/grid/md/grid1.md @@ -0,0 +1,17 @@ +--- +order: 1 +type: sample +zh_CN: 固定宽度 +en_US: Fixed width +editUrl: $BASE/docs/pages/grid/md/grid1.md +--- + ++++ zh_CN +设置col属性，将其设置为一个在1到12范围内的一个整数值后，该列将以固定宽度展示。 + 列的数量不会因为窗口宽度变化而变化。 + ++++ en_US +Grid1 + ++++ SampleCode +fileName: Grid1 diff --git a/src/docs/pages/grid/md/grid2.md b/src/docs/pages/grid/md/grid2.md new file mode 100644 index 00000000..8c6980f2 --- /dev/null +++ b/src/docs/pages/grid/md/grid2.md @@ -0,0 +1,16 @@ +--- +order: 2 +type: sample +zh_CN: 偏移量 +en_US: Offset +editUrl: $BASE/docs/pages/grid/md/grid2.md +--- + ++++ zh_CN + 设置offset属性可以将列向右侧偏移。对于xs宽度布局，设置xsOffset={4} 则会将该列向右侧偏移 4 个列的宽度。 + ++++ en_US +Grid2 + ++++ SampleCode +fileName: Grid2 diff --git a/src/docs/pages/grid/md/grid3.md b/src/docs/pages/grid/md/grid3.md new file mode 100644 index 00000000..8761ab8f --- /dev/null +++ b/src/docs/pages/grid/md/grid3.md @@ -0,0 +1,17 @@ +--- +order: 3 +type: sample +zh_CN: 水平排列 +en_US: Horizontal +editUrl: $BASE/docs/pages/grid/md/grid3.md +--- + ++++ zh_CN +通过Row的justify属性可以指定列在水平方向的排列方式，可以将其设置为：start、center、 + end、around、between、evenly。 + ++++ en_US +Grid3 + ++++ SampleCode +fileName: Grid3 diff --git a/src/docs/pages/grid/md/grid4.md b/src/docs/pages/grid/md/grid4.md new file mode 100644 index 00000000..ef52e8be --- /dev/null +++ b/src/docs/pages/grid/md/grid4.md @@ -0,0 +1,17 @@ +--- +order: 4 +type: sample +zh_CN: 垂直排列 +en_US: Vertical +editUrl: $BASE/docs/pages/grid/md/grid4.md +--- + ++++ zh_CN +通过Row的align属性可以指定列在垂直方向的排列方式，可以将其设置为：start、center、 + end。 + ++++ en_US +Grid4 + ++++ SampleCode +fileName: Grid4 diff --git a/src/docs/pages/grid/md/grid5.md b/src/docs/pages/grid/md/grid5.md new file mode 100644 index 00000000..bd9d082f --- /dev/null +++ b/src/docs/pages/grid/md/grid5.md @@ -0,0 +1,16 @@ +--- +order: 5 +type: sample +zh_CN: 排序 +en_US: Order +editUrl: $BASE/docs/pages/grid/md/grid5.md +--- + ++++ zh_CN +通过order属性可以指定列的顺序，值越小排列越靠前。 + ++++ en_US +Grid5 + ++++ SampleCode +fileName: Grid5 diff --git a/src/docs/pages/grid/md/grid6.md b/src/docs/pages/grid/md/grid6.md new file mode 100644 index 00000000..c2dc193c --- /dev/null +++ b/src/docs/pages/grid/md/grid6.md @@ -0,0 +1,19 @@ +--- +order: 6 +type: sample +zh_CN: 排序 +en_US: Order +editUrl: $BASE/docs/pages/grid/md/grid6.md +--- + ++++ zh_CN +针对响应式布局，提供了几种尺寸的属性可供使用： xs、sm、 + md、lg、xg。 + 例如<Col xs={12} sm={4}>sm-4</Col>, 设定了当屏幕尺寸为xs + 时占据全部的12列宽度，当尺寸是sm时，只占据4列。 + ++++ en_US +Grid6 + ++++ SampleCode +fileName: Grid6 diff --git a/src/docs/pages/grid/md/grid7.md b/src/docs/pages/grid/md/grid7.md new file mode 100644 index 00000000..84a65294 --- /dev/null +++ b/src/docs/pages/grid/md/grid7.md @@ -0,0 +1,20 @@ +--- +order: 7 +type: sample +zh_CN: 等宽和固定某列固定一列宽度 +en_US: Grid7 +editUrl: $BASE/docs/pages/grid/md/grid7.md +--- + ++++ zh_CN +在这个例子中： + 当三个列同时使用<Col/>时，表示这三个列宽度相等; + 当中间一列指定col={5}属性时，表示这列固定宽度为5列的宽度值，另外两个列等比例分配剩余空间; + 当中间一列指定col={10}属性时，表示这列固定宽度为10列的宽度值，另外两个列等比例分配剩余空间。 + + ++++ en_US +Grid7 + ++++ SampleCode +fileName: Grid7 diff --git a/src/docs/pages/grid/md/title.md b/src/docs/pages/grid/md/title.md new file mode 100644 index 00000000..b1eed2fc --- /dev/null +++ b/src/docs/pages/grid/md/title.md @@ -0,0 +1,26 @@ +--- + order: 100 + type: text + zh_CN: 删格 Grid + en_US: Grid + editUrl: $BASE/docs/pages/grid/md/title.md +--- + ++++ zh_CN +## 删格 Grid [editUrl] +Grid系统在响应式布局中占有不可或缺的地位，Windy-UI遵循了12列的定义，将页面均等分为12个区域用于布局。凭借flex-box强大的布局功能， +我们可以将页面元素有序地归类，并在不同宽度的窗口下展现不同的部分。如果需要划分更小的列，例如24列，则需要修改Wui的变量去重新生成一份新的样式文件(css)。 + +Grid主要有以下功能： + +- 使用Row和Col进行布局，row表示水平方向的整行，Col表示每个Row可以拆分的列 +- 支持某列固定宽度其他列均分剩余空间 +- 支持响应式布局，在窗口不同宽度下更改列的宽度 +- 基于Flex 布局，列中的子元素可以指定水平对齐方式：居左、居中、居右等 +- 支持列中的子元素顶部对齐、垂直居中、底部对齐的方式 + +对于屏幕宽度的划分，请参见API部分。 + ++++ en_US +## API [editUrl] + diff --git a/src/docs/pages/input/InputIndex.js b/src/docs/pages/input/InputIndex.js index 67b9fa0a..3cb9466b 100755 --- a/src/docs/pages/input/InputIndex.js +++ b/src/docs/pages/input/InputIndex.js @@ -1,24 +1,13 @@ import React from 'react'; -import SampleInput1 from './samples/SampleInput1'; -import DocPage from '../../utils/DocPage'; -import SampleInput2 from './samples/SampleInput2'; -import SampleInput3 from './samples/SampleInput3'; -import SampleInput4 from './samples/SampleInput4'; -import SampleInput5 from './samples/SampleInput5'; -import SampleInput6 from './samples/SampleInput6'; +import DocPage2 from '../../utils/DocPage2'; -const componentMapping = { - SampleInput1: , - SampleInput2: , - SampleInput3: , - SampleInput4: , - SampleInput5: , - SampleInput6: , -}; +const requireMd = require.context('!raw-loader!./md', false, /.md$/); +const requireCode = require.context('!raw-loader!./samples', false, /.js$/); +const requireJs = require.context('./samples', false, /.js$/); -export default function InputIndex(props) { - return import('./input.md')} - componentMapping={componentMapping} - />; +export default function InputIndex() { + return ; } \ No newline at end of file diff --git a/src/docs/pages/input/md/api.md b/src/docs/pages/input/md/api.md new file mode 100644 index 00000000..d18b7a07 --- /dev/null +++ b/src/docs/pages/input/md/api.md @@ -0,0 +1,51 @@ +--- + order: 100 + type: text + zh_CN: API + en_US: API + editUrl: $BASE/docs/pages/input/md/api.md +--- + ++++ zh_CN +## API [editUrl] +* Input的属性如下所示： + +| 属性 | 名称 | 类型 | 默认值 | 描述 | +| --- | --- | --- | --- | --- | +| ref | Input Dom对象的引用 | function \| ref | - | 当需要获取到按钮的dom对象时可设置此属性 | +| className | 样式名称 | string | button | | +| extraClassName | 额外添加的样式名称 | string | - | | +| borderType | 边框类型 | string | - | 值可以为：ok, warning, error | +| type | Input的类型 | string | - | 值可以是：text, textarea, password, file等html中关于input可设置的类型 | +| block | 将Input宽度设置为100%的行宽 | boolean | `false` | | +| size | Input的尺寸 | string | medium | 值可以是: large, medium, small或者不设置 | +| disabled | 是否禁用此Input | boolean | false | | +| onClick/onXX | Input的各类回调函数 | function | - | 比如onFocus, onBlur等 | + + +* IconInput的属性如下所示： + +| 属性 | 名称 | 类型 | 默认值 | 描述 | +| --- | --- | --- | --- | --- | +| ref | 根节点Dom对象的引用 | function \| ref | - | 当需要获取到根节点的dom对象时可设置此属性 | +| className | 样式名称 | string | button | | +| extraClassName | 额外添加的样式名称 | string | - | 比如设置为’aClass bClass', 按钮的实际样式是'aClass bClass button' | +| block | 将宽度设置为100%的行宽 | boolean | `false` | | +| size | 尺寸 | string | medium | 值可以是: large, medium, small或者不设置 | +| disabled | 是否禁用此Input | boolean | false | | + + +* InputGroup的属性如下所示： + +| 属性 | 名称 | 类型 | 默认值 | 描述 | +| --- | --- | --- | --- | --- | +| ref | 根节点Dom对象的引用 | function \| ref | - | 当需要获取到根节点的dom对象时可设置此属性 | +| className | 样式名称 | string | button | | +| extraClassName | 额外添加的样式名称 | string | - | 比如设置为’aClass bClass', 按钮的实际样式是'aClass bClass button' | +| block | 将宽度设置为100%的行宽 | boolean | `false` | | +| size | 尺寸 | string | medium | 值可以是: large, medium, small或者不设置 | + + ++++ en_US +## API [editUrl] + diff --git a/src/docs/pages/input/md/input1.md b/src/docs/pages/input/md/input1.md new file mode 100644 index 00000000..0a97ab97 --- /dev/null +++ b/src/docs/pages/input/md/input1.md @@ -0,0 +1,16 @@ +--- +order: 1 +type: sample +zh_CN: 大、中、小三种输入框 +en_US: Size +editUrl: $BASE/docs/pages/input/md/input1.md +--- + ++++ zh_CN +通过设置'size'属性，可以将输入框组件以不同的尺寸进行展示。 + ++++ en_US +Input1 + ++++ SampleCode +fileName: Input1 diff --git a/src/docs/pages/input/md/input2.md b/src/docs/pages/input/md/input2.md new file mode 100644 index 00000000..0ecb64d7 --- /dev/null +++ b/src/docs/pages/input/md/input2.md @@ -0,0 +1,17 @@ +--- +order: 1 +type: sample +zh_CN: 在输入框中显示图标 +en_US: Icon +editUrl: $BASE/docs/pages/input/md/input2.md +--- + ++++ zh_CN + 使用IconInput组件，在Input中显示Icon。默认情况下Icon在右侧显示，如果需要据左显示 + 则可以设置一个'leftIcon'属性即可。 + ++++ en_US +Input2 + ++++ SampleCode +fileName: Input2 diff --git a/src/docs/pages/input/md/input3.md b/src/docs/pages/input/md/input3.md new file mode 100644 index 00000000..812f4730 --- /dev/null +++ b/src/docs/pages/input/md/input3.md @@ -0,0 +1,19 @@ +--- +order: 3 +type: sample +zh_CN: 不同的类型 +en_US: Type +editUrl: $BASE/docs/pages/input/md/input3.md +--- + ++++ zh_CN +设置不同的type，则将获得不同类型的Input。在这个例子中我们让Input显示成textarea，允许输入多行文字。 + 您也可以设置为其他诸如password、file等类型。 + 另外对于textarea类型的Input,您也可以设置rows和cols属性，如果想占据整行显示，则可以只设置rows属性即可。 + + ++++ en_US +Input3 + ++++ SampleCode +fileName: Input3 diff --git a/src/docs/pages/input/md/input4.md b/src/docs/pages/input/md/input4.md new file mode 100644 index 00000000..bf810ed8 --- /dev/null +++ b/src/docs/pages/input/md/input4.md @@ -0,0 +1,17 @@ +--- +order: 4 +type: sample +zh_CN: Input Group +en_US: Input Group +editUrl: $BASE/docs/pages/input/md/input4.md +--- + ++++ zh_CN + Input Group组件中可以放置Button、Input、Dropdown、Label等组件，并在界面上同一水平线上排列。 + + ++++ en_US +Input4 + ++++ SampleCode +fileName: Input4 diff --git a/src/docs/pages/input/md/input5.md b/src/docs/pages/input/md/input5.md new file mode 100644 index 00000000..075e8b87 --- /dev/null +++ b/src/docs/pages/input/md/input5.md @@ -0,0 +1,17 @@ +--- +order: 5 +type: sample +zh_CN: Input Group整行显示 +en_US: Input Group +editUrl: $BASE/docs/pages/input/md/input5.md +--- + ++++ zh_CN +Input、IconInput、Input Group都可设置block属性，使控件占据整行显示。 + 这里演示了如何在InputGroup中，组合放置Button、Input、Dropdown、Label等组件。 + ++++ en_US +Input5 + ++++ SampleCode +fileName: Input5 diff --git a/src/docs/pages/input/md/input6.md b/src/docs/pages/input/md/input6.md new file mode 100644 index 00000000..de59eb41 --- /dev/null +++ b/src/docs/pages/input/md/input6.md @@ -0,0 +1,16 @@ +--- +order: 6 +type: sample +zh_CN: 禁用输入框 +en_US: Disable Input +editUrl: $BASE/docs/pages/input/md/input6.md +--- + ++++ zh_CN +在Input、IconInput上设置disabled属性为true后，可以将控件禁用。但对于Input Group，由于可能是由不同的组件组合而成的，您需要单独设置各个子控件的disabled属性。 + ++++ en_US +Input6 + ++++ SampleCode +fileName: Input6 diff --git a/src/docs/pages/input/md/title.md b/src/docs/pages/input/md/title.md new file mode 100644 index 00000000..3116b186 --- /dev/null +++ b/src/docs/pages/input/md/title.md @@ -0,0 +1,19 @@ +--- + order: 0 + type: text + zh_CN: 输入框 Input + en_US: Input + editUrl: $BASE/docs/pages/input/md/title.md +--- + ++++ zh_CN +## 输入框 Input [editUrl] +在一个表单里，输入框也是最常使用的组件。Windy UI中的输入框组件主要有以下几种类型： + +- 大、中、小三种尺寸的输入框 +- 能够嵌入图标的输入框 +- 可以将多个控件组合在一起显示的Input Group组件 + ++++ en_US +## Input [editUrl] + diff --git a/src/docs/pages/input/samples/SampleInput1.js b/src/docs/pages/input/samples/Input1.js similarity index 78% rename from src/docs/pages/input/samples/SampleInput1.js rename to src/docs/pages/input/samples/Input1.js index 511fcc14..783ffd6c 100755 --- a/src/docs/pages/input/samples/SampleInput1.js +++ b/src/docs/pages/input/samples/Input1.js @@ -1,8 +1,7 @@ import React from 'react'; import {Input} from 'react-windy-ui'; -import {IconUnChecked} from "../../../../components/src"; -export default function SampleInput1(props) { +export default function Input1(props) { const fun=(elem)=>{ console.log("==",elem) } diff --git a/src/docs/pages/input/samples/SampleInput2.js b/src/docs/pages/input/samples/Input2.js similarity index 95% rename from src/docs/pages/input/samples/SampleInput2.js rename to src/docs/pages/input/samples/Input2.js index 7241cf08..85cbca0e 100755 --- a/src/docs/pages/input/samples/SampleInput2.js +++ b/src/docs/pages/input/samples/Input2.js @@ -2,7 +2,7 @@ import React from 'react'; import {IconSearch, Input} from 'react-windy-ui'; //todo update the document -export default function SampleInput2(props) { +export default function Input2(props) { return <>
}/> diff --git a/src/docs/pages/input/samples/SampleInput3.js b/src/docs/pages/input/samples/Input3.js similarity index 87% rename from src/docs/pages/input/samples/SampleInput3.js rename to src/docs/pages/input/samples/Input3.js index 4cf0957e..effd239d 100755 --- a/src/docs/pages/input/samples/SampleInput3.js +++ b/src/docs/pages/input/samples/Input3.js @@ -1,7 +1,7 @@ import React from 'react'; import {Input} from 'react-windy-ui'; -export default function SampleInput3(props) { +export default function Input3(props) { return <>
diff --git a/src/docs/pages/input/samples/SampleInput4.js b/src/docs/pages/input/samples/Input4.js similarity index 93% rename from src/docs/pages/input/samples/SampleInput4.js rename to src/docs/pages/input/samples/Input4.js index 8a60b8ad..0902ca06 100755 --- a/src/docs/pages/input/samples/SampleInput4.js +++ b/src/docs/pages/input/samples/Input4.js @@ -1,7 +1,7 @@ import React from 'react'; import {Input, InputGroup} from 'react-windy-ui'; -export default function SampleInput4(props) { +export default function Input4(props) { return <>
diff --git a/src/docs/pages/input/samples/SampleInput5.js b/src/docs/pages/input/samples/Input5.js similarity index 97% rename from src/docs/pages/input/samples/SampleInput5.js rename to src/docs/pages/input/samples/Input5.js index 198a619a..85c98bc9 100755 --- a/src/docs/pages/input/samples/SampleInput5.js +++ b/src/docs/pages/input/samples/Input5.js @@ -9,7 +9,7 @@ import { } from 'react-windy-ui'; //todo -export default function SampleInput5(props) { +export default function Input5(props) { return <>
diff --git a/src/docs/pages/input/samples/SampleInput6.js b/src/docs/pages/input/samples/Input6.js similarity index 93% rename from src/docs/pages/input/samples/SampleInput6.js rename to src/docs/pages/input/samples/Input6.js index 0a6339b3..95b80fd0 100755 --- a/src/docs/pages/input/samples/SampleInput6.js +++ b/src/docs/pages/input/samples/Input6.js @@ -1,7 +1,7 @@ import React from 'react'; import {Checkbox, Input, InputGroup, Loader} from 'react-windy-ui'; -export default function SampleInput6(props) { +export default function Input6(props) { return <>
diff --git a/src/docs/pages/layout/LayoutIndex.js b/src/docs/pages/layout/LayoutIndex.js index 93fd9716..a8a42043 100755 --- a/src/docs/pages/layout/LayoutIndex.js +++ b/src/docs/pages/layout/LayoutIndex.js @@ -1,24 +1,13 @@ import React from 'react'; -import DocPage from '../../utils/DocPage'; -import Layout1 from './samples/Layout1'; -import Layout2 from './samples/Layout2'; -import Layout3 from './samples/Layout3'; -import Layout4 from './samples/Layout4'; -import Layout5 from './samples/Layout5'; -import Layout6 from './samples/Layout6'; +import DocPage2 from '../../utils/DocPage2'; -const componentMapping = { - Layout1: , - Layout2: , - Layout3: , - Layout4: , - Layout5: , - Layout6: , -}; +const requireMd = require.context('!raw-loader!./md', false, /.md$/); +const requireCode = require.context('!raw-loader!./samples', false, /.js$/); +const requireJs = require.context('./samples', false, /.js$/); -export default function LayoutIndex(props) { - return import('./doc.md')} - componentMapping={componentMapping} - />; +export default function LayoutIndex() { + return ; } \ No newline at end of file diff --git a/src/docs/pages/layout/md/api.md b/src/docs/pages/layout/md/api.md new file mode 100644 index 00000000..3a6b6e2f --- /dev/null +++ b/src/docs/pages/layout/md/api.md @@ -0,0 +1,63 @@ +--- + order: 100 + type: text + zh_CN: API + en_US: API + editUrl: $BASE/docs/pages/layout/md/api.md +--- + ++++ zh_CN +## API [editUrl] + +- 下列对象存在相同的属性定义： + Header, Slider, Content, Split, Footer。 + +| 属性 | 名称 | 类型 | 默认值 | 描述 | +| --- | --- | --- | --- | --- | +| ref | Dom对象的引用 | function \| ref | - | 当需要获取dom对象时可设置此属性 | +| className | 样式名称 | string | | | +| extraClassName | 额外添加的样式名称 | string | - | | + +- Header和Footer额外还有相同属性: + +| 属性 | 名称 | 类型 | 默认值 | 描述 | +| --- | --- | --- | --- | --- | +| fixed | 固定显示的位置 | string | - | 可以设置为: top, bottom | + +- Slider额外属性定义: + +| 属性 | 名称 | 类型 | 默认值 | 描述 | +| --- | --- | --- | --- | --- | + +| hasBox | 是否有阴影 | boolean | - | | +| collapse | 是否折叠 | boolean | | | +| width | 展开时的宽度(px) | string | 240px | | +| minWidth | 折叠后显示的最小宽度 | string | 80px | | + +- Layout额外属性定义: + +| 属性 | 名称 | 类型 | 默认值 | 描述 | +| --- | --- | --- | --- | --- | +| collapse | 是否折叠 | boolean | | | +| collapseAttribute | 折叠的参数设置 | object | | 格式如：{attr, minValue, maxValue} | + +
+ +对于collapseAttribute属性，例如如下显示一段默认配置： + + +collapseAttribute = { + attr: 'marginLeft', + minValue: '80px', + maxValue: '240px', +} + +这里的参数指定了，当折叠时将'margin-left'设置为'80px'；当展开时，将'margin-left' +设置为'240px'。这里的参数值以‘px’为单位，请勿设置为其他单位。 + +
+ + ++++ en_US +## API [editUrl] + diff --git a/src/docs/pages/layout/md/layout1.md b/src/docs/pages/layout/md/layout1.md new file mode 100644 index 00000000..9a788ca7 --- /dev/null +++ b/src/docs/pages/layout/md/layout1.md @@ -0,0 +1,26 @@ +--- +order: 1 +type: sample +zh_CN: 上下结构 +en_US: Structure +editUrl: $BASE/docs/pages/layout/md/layout1.md +--- + ++++ zh_CN + 上下、或上中下结构通常用于网页正文区域的结构展示， + 这里使用了如下的Layout结构： + +<Layout> + <Layout.Header/> + <Layout> + <Breadcrumb/> + <Layout.Content/> + </Layout> +</Layout> + + ++++ en_US +Layout1 + ++++ SampleCode +fileName: Layout1 diff --git a/src/docs/pages/layout/md/layout2.md b/src/docs/pages/layout/md/layout2.md new file mode 100644 index 00000000..5a4d6750 --- /dev/null +++ b/src/docs/pages/layout/md/layout2.md @@ -0,0 +1,30 @@ +--- +order: 2 +type: sample +zh_CN: 上中下结构 +en_US: Structure +editUrl: $BASE/docs/pages/layout/md/layout2.md +--- + ++++ zh_CN + 这里示例如果构建一个上中下布局的页面，同时将中间内容区域分为左右两块。 + Layout结构如下： + +<Layout> + <Layout.Header/> + <Layout.Split> + <Layout.Slider/> + <Layout> + <Breadcrumb/> + <Layout.Content/> + <Layout> + </Layout.Split> + <Layout.Footer/> +</Layout> + + ++++ en_US +Layout2 + ++++ SampleCode +fileName: Layout2 diff --git a/src/docs/pages/layout/md/layout3.md b/src/docs/pages/layout/md/layout3.md new file mode 100644 index 00000000..f137355f --- /dev/null +++ b/src/docs/pages/layout/md/layout3.md @@ -0,0 +1,30 @@ +--- +order: 3 +type: sample +zh_CN: 将Slider与Content衔接在一起 +en_US: Slider and content +editUrl: $BASE/docs/pages/layout/md/layout3.md +--- + ++++ zh_CN + 在中间内容区域分为左右两块后，可以作为一个整体显示，避免出现视觉上的隔阂。 + Layout结构如下： + +<Layout> + <Layout.Header/> + <Layout> + <Breadcrumb/> + <Layout.Split> + <Layout.Slider/> + <Layout.Content/> + <Layout.Split> + </Layout> + <Layout.Footer/> +</Layout> + + ++++ en_US +Layout3 + ++++ SampleCode +fileName: Layout3 diff --git a/src/docs/pages/layout/md/layout4.md b/src/docs/pages/layout/md/layout4.md new file mode 100644 index 00000000..5b536607 --- /dev/null +++ b/src/docs/pages/layout/md/layout4.md @@ -0,0 +1,31 @@ +--- +order: 4 +type: sample +zh_CN: 可折叠的Slider +en_US: Slider +editUrl: $BASE/docs/pages/layout/md/layout4.md +--- + ++++ zh_CN + 将Slider与Menu折叠显示, 您需要相应地设置Layout.Slider的collapse属性, + 以及Menu的compact属性。 + Layout结构如下： + +<Layout> + <Layout.Header/> + <Layout.Split> + <Layout.Slider/> + <Layout> + <Breadcrumb/> + <Layout.Content/> + <Layout> + </Layout.Split> + <Layout.Footer/> +</Layout> + + ++++ en_US +Layout4 + ++++ SampleCode +fileName: Layout4 diff --git a/src/docs/pages/layout/md/layout5.md b/src/docs/pages/layout/md/layout5.md new file mode 100644 index 00000000..f115adde --- /dev/null +++ b/src/docs/pages/layout/md/layout5.md @@ -0,0 +1,17 @@ +--- +order: 5 +type: sample +zh_CN: 将Header固定在顶部 +en_US: Fixed header +editUrl: $BASE/docs/pages/layout/md/layout5.md +--- + ++++ zh_CN + 将Layout.Header的属性fixed设置为top, Header就可以固定在顶部显示。 + fixed的值可以设置成top或bottom。 + ++++ en_US +Layout5 + ++++ SampleCode +fileName: Layout5 diff --git a/src/docs/pages/layout/md/layout6.md b/src/docs/pages/layout/md/layout6.md new file mode 100644 index 00000000..371b64cb --- /dev/null +++ b/src/docs/pages/layout/md/layout6.md @@ -0,0 +1,19 @@ +--- +order: 6 +type: sample +zh_CN: 固定左侧的Slider +en_US: Slider +editUrl: $BASE/docs/pages/layout/md/layout6.md +--- + ++++ zh_CN + 这里通过设置Slider的style属性将Slider固定在左边显示，同时与Content区域一样在内容高度超出时，允许各自滚动展示。 + 在需要折叠Slider时，可以设置Slider、右侧Layout的collapse属性，将其折叠或展开。另外，Slider默认在折叠状态时宽度为80px, 如果需要设置为0时， + 则需要将Slider的minWidth设置为‘0px'即可。当Slider展开时，右侧Layout默认margin-left的值为240px, + 如果需要修改，则需要提供一个collapseAttribute配置对象进行调整。 + ++++ en_US +Layout6 + ++++ SampleCode +fileName: Layout6 diff --git a/src/docs/pages/layout/md/title.md b/src/docs/pages/layout/md/title.md new file mode 100644 index 00000000..7c62a2b4 --- /dev/null +++ b/src/docs/pages/layout/md/title.md @@ -0,0 +1,24 @@ +--- + order: 0 + type: text + zh_CN: 布局 Layout + en_US: Layout + editUrl: $BASE/docs/pages/layout/md/title.md +--- + ++++ zh_CN +## 布局 Layout [editUrl] +常用于网站的整体布局, 可以将页面分区域划分常见的上中下、左右等结构。 + +布局主要由以下几类组件搭配组合而成： + +- Layout: 容器区域，通常标记一块大的显示区域, 可以嵌套组合 +- Header: 头部区域 +- Split: 可分割的内容区域，内部由Slider和Content组成 +- Slider: 侧边栏区域，中间区域划分为两列、三列时居边排列的区域 +- Content: 内容显示区域，通常与Layout一起在Slider中显示 +- Footer： 尾部区域，通常显示版权等信息的区域 + ++++ en_US +## Input [editUrl] + diff --git a/src/docs/pages/loader/LoaderIndex.js b/src/docs/pages/loader/LoaderIndex.js index 71197e40..d3b072e7 100755 --- a/src/docs/pages/loader/LoaderIndex.js +++ b/src/docs/pages/loader/LoaderIndex.js @@ -1,28 +1,13 @@ import React from 'react'; -import DocPage from '../../utils/DocPage'; -import Loader1 from './samples/Loader1'; -import Loader2 from './samples/Loader2'; -import Loader3 from './samples/Loader3'; -import Loader4 from './samples/Loader4'; -import Loader5 from './samples/Loader5'; -import Loader6 from './samples/Loader6'; -import Loader7 from './samples/Loader7'; -import Loader8 from './samples/Loader8'; +import DocPage2 from '../../utils/DocPage2'; -const componentMapping = { - Loader1: , - Loader2: , - Loader3: , - Loader4: , - Loader5: , - Loader6: , - Loader7: , - Loader8: , -}; +const requireMd = require.context('!raw-loader!./md', false, /.md$/); +const requireCode = require.context('!raw-loader!./samples', false, /.js$/); +const requireJs = require.context('./samples', false, /.js$/); -export default function LoaderIndex(props) { - return import('./doc.md')} - componentMapping={componentMapping} - />; +export default function LoaderIndex() { + return ; } \ No newline at end of file diff --git a/src/docs/pages/loader/md/Loader1.md b/src/docs/pages/loader/md/Loader1.md new file mode 100644 index 00000000..7904c082 --- /dev/null +++ b/src/docs/pages/loader/md/Loader1.md @@ -0,0 +1,16 @@ +--- +order: 1 +type: sample +zh_CN: Loader简单示例 +en_US: Loader +editUrl: $BASE/docs/pages/loader/md/loader1.md +--- + ++++ zh_CN + Loader简单示例，有三种类型的Loader可供使用, 可以将type属性设置为： primary、secondary、 third。 + ++++ en_US +Loader1 + ++++ SampleCode +fileName: Loader1 diff --git a/src/docs/pages/loader/md/Loader2.md b/src/docs/pages/loader/md/Loader2.md new file mode 100644 index 00000000..a946f805 --- /dev/null +++ b/src/docs/pages/loader/md/Loader2.md @@ -0,0 +1,16 @@ +--- +order: 2 +type: sample +zh_CN: Loader的大小 +en_US: Loader +editUrl: $BASE/docs/pages/loader/md/loader2.md +--- + ++++ zh_CN +有三种大小的Loader可供使用, 可以将size属性设置为： small、medium、 large。 + ++++ en_US +Loader2 + ++++ SampleCode +fileName: Loader2 diff --git a/src/docs/pages/loader/md/Loader3.md b/src/docs/pages/loader/md/Loader3.md new file mode 100644 index 00000000..606f538b --- /dev/null +++ b/src/docs/pages/loader/md/Loader3.md @@ -0,0 +1,16 @@ +--- +order: 3 +type: sample +zh_CN: Button中的Icon +en_US: Button Loader +editUrl: $BASE/docs/pages/loader/md/loader3.md +--- + ++++ zh_CN + 在Button中显示Loader。 + ++++ en_US +Loader3 + ++++ SampleCode +fileName: Loader3 diff --git a/src/docs/pages/loader/md/Loader4.md b/src/docs/pages/loader/md/Loader4.md new file mode 100644 index 00000000..95a86e2f --- /dev/null +++ b/src/docs/pages/loader/md/Loader4.md @@ -0,0 +1,18 @@ +--- +order: 4 +type: sample +zh_CN: 全局显示的Loader +en_US: Global Loader +editUrl: $BASE/docs/pages/loader/md/loader4.md +--- + ++++ zh_CN + Loader可以跟Modal相似，全局弹出显示。此时你需要将global属性设置为true,同时将hasMask设置为true可以显示黑色背景。 + 如果Loader需要设置一个背景色，可以将hasBackground设置为true。点击黑色背景需要关闭Loader时，需要提供onMaskClick + 回调。另外Loader的颜色，当前可以设置成white或blue两张颜色，需要其他颜色时可以自行覆盖对应的样式class。 + ++++ en_US +Loader4 + ++++ SampleCode +fileName: Loader4 diff --git a/src/docs/pages/loader/md/Loader5.md b/src/docs/pages/loader/md/Loader5.md new file mode 100644 index 00000000..9330b970 --- /dev/null +++ b/src/docs/pages/loader/md/Loader5.md @@ -0,0 +1,18 @@ +--- +order: 5 +type: sample +zh_CN: 自适应宽度 +en_US: Loader +editUrl: $BASE/docs/pages/loader/md/loader5.md +--- + ++++ zh_CN +默认情况下全局显示的Loader会有一个默认的宽度，如果需要Loader的宽度以内容区域的宽度为准，则可以设置hasDefaultWidth + 属性为false。同时可以通过modalStyle属性去修改Loader使用的Modal样式，比如这个例子，就将背景色设置为黑色。 + + ++++ en_US +Loader5 + ++++ SampleCode +fileName: Loader5 diff --git a/src/docs/pages/loader/md/Loader6.md b/src/docs/pages/loader/md/Loader6.md new file mode 100644 index 00000000..e9c67fb5 --- /dev/null +++ b/src/docs/pages/loader/md/Loader6.md @@ -0,0 +1,16 @@ +--- +order: 6 +type: sample +zh_CN: 自适应宽度 +en_US: Loader +editUrl: $BASE/docs/pages/loader/md/loader6.md +--- + ++++ zh_CN +默认情况下，Loader图标和文字会在垂直方向上展示，如需要水平展示可以将direction设置为horizontal。 + ++++ en_US +Loader6 + ++++ SampleCode +fileName: Loader6 diff --git a/src/docs/pages/loader/md/Loader7.md b/src/docs/pages/loader/md/Loader7.md new file mode 100644 index 00000000..6f59f771 --- /dev/null +++ b/src/docs/pages/loader/md/Loader7.md @@ -0,0 +1,17 @@ +--- +order: 7 +type: sample +zh_CN: 使用Loader包裹其他容器 +en_US: Loader +editUrl: $BASE/docs/pages/loader/md/loader7.md +--- + ++++ zh_CN +可以直接把内容或其他容器嵌入到Loader中，激活Loader后可以呈现加载状态。比如可以将Card,Alert等组件嵌入到Loader中。 + 另外如果需要Loader占据整行，则需要将block属性设置为true。 + ++++ en_US +Loader7 + ++++ SampleCode +fileName: Loader7 diff --git a/src/docs/pages/loader/md/Loader8.md b/src/docs/pages/loader/md/Loader8.md new file mode 100644 index 00000000..7d6d46fe --- /dev/null +++ b/src/docs/pages/loader/md/Loader8.md @@ -0,0 +1,16 @@ +--- +order: 8 +type: sample +zh_CN: 不使用黑色背景去遮罩内容区域 +en_US: Loader +editUrl: $BASE/docs/pages/loader/md/loader8.md +--- + ++++ zh_CN +设置darkMask为false后，将使用50%透明度的背景层展示。 + ++++ en_US +Loader8 + ++++ SampleCode +fileName: Loader8 diff --git a/src/docs/pages/loader/md/api.md b/src/docs/pages/loader/md/api.md new file mode 100644 index 00000000..0a71a28b --- /dev/null +++ b/src/docs/pages/loader/md/api.md @@ -0,0 +1,36 @@ +--- + order: 100 + type: text + zh_CN: API + en_US: API + editUrl: $BASE/docs/pages/loader/md/api.md +--- + ++++ zh_CN +## API [editUrl] +Loader的属性如下所示： + +| 属性 | 名称 | 类型 | 默认值 | 描述 | +| --- | --- | --- | --- | --- | +| ref | Dom对象的引用 | function \| ref | - | 当需要获取dom对象时可设置此属性 | +| className | 样式名称 | string | loader | | +| extraClassName | 额外添加的样式名称 | string | - | | +| text | 描述内容 | react node | - | 描述内容 | +| block | 是否占据整行显示 | boolean | false | | +| color | 颜色 | string | blue | 当前可设置为: white, blue | +| active | 是否激活显示Loader | boolean | false | | +| type | 类型 | string | info | 值可以是：primary，secondary，third | +| size | Loader的大小 | string | medium | 值可以是：small，medium，large | +| hasMask | 是否有背景层 | boolean | true | | +| darkMask | 是否显示黑色的背景层 | boolean | true | | +| hasBackground | 是否有背景色 | boolean | true | | +| direction | Loader内容区域的排列方向 | string | vertical | 值可以设置为: horizontal, vertical | +| modalStyle | Loader对话框的样式对象 | object | - | | +| global | 是否全局显示一个Loader | boolean | - | | +| onMaskClick | 点击背景层的回调 | function | - | | +| hasDefaultWidth | Loader是否设置默认宽度 | boolean | true | | + + ++++ en_US +## API [editUrl] + diff --git a/src/docs/pages/loader/md/title.md b/src/docs/pages/loader/md/title.md new file mode 100644 index 00000000..d9b6c56f --- /dev/null +++ b/src/docs/pages/loader/md/title.md @@ -0,0 +1,21 @@ +--- + order: 0 + type: text + zh_CN: 加载 Loader + en_US: Loader + editUrl: $BASE/docs/pages/loader/md/title.md +--- + ++++ zh_CN +## 加载 Loader [editUrl] +Loader常用于页面加载，也可在处理耗时较长的请求时，提示用户等待。 + +Loader主要提供了以下功能： +- 全局显示加载中状态 +- 可嵌入Button或Input中 +- 可包裹Card，Alert等组件，可用于在加载过程中缓冲显示 + + ++++ en_US +## Loader [editUrl] + diff --git a/src/docs/pages/menu/MenuIndex.js b/src/docs/pages/menu/MenuIndex.js index 47b25394..5acae272 100755 --- a/src/docs/pages/menu/MenuIndex.js +++ b/src/docs/pages/menu/MenuIndex.js @@ -1,41 +1,13 @@ import React from 'react'; -import DocPage from '../../utils/DocPage'; -import Menu1 from './samples/Menu1'; -import Menu2 from './samples/Menu2'; -import Menu3 from './samples/Menu3'; -import Menu4 from './samples/Menu4'; -import Menu5 from './samples/Menu5'; -import Menu6 from './samples/Menu6'; -import Menu8 from './samples/Menu8'; -import Menu9 from './samples/Menu9'; -import Menu12 from './samples/Menu12'; -import Menu7 from './samples/Menu7'; -import Menu10 from './samples/Menu10'; -import Menu11 from './samples/Menu11'; -import Menu13 from './samples/Menu13'; -import Menu14 from './samples/Menu14'; +import DocPage2 from '../../utils/DocPage2'; -const componentMapping = { - // Menu12: , - Menu1: , - Menu2: , - Menu3: , - Menu4: , - Menu5: , - Menu6: , - Menu7: , - Menu8: , - Menu9: , - Menu10: , - Menu11: , - Menu12: , - Menu13: , - Menu14: , -}; +const requireMd = require.context('!raw-loader!./md', false, /.md$/); +const requireCode = require.context('!raw-loader!./samples', false, /.js$/); +const requireJs = require.context('./samples', false, /.js$/); -export default function MenuIndex(props) { - return import('./doc.md')} - componentMapping={componentMapping} - />; +export default function MenuIndex() { + return ; } \ No newline at end of file diff --git a/src/docs/pages/menu/doc.md b/src/docs/pages/menu/doc.md deleted file mode 100755 index d3f5ea12..00000000 --- a/src/docs/pages/menu/doc.md +++ /dev/null @@ -1,1056 +0,0 @@ ------------ Title ------------ -[TITLE_BEGIN_zh_CN] -## 菜单 Menu -在网站布局中，通常需要在水平或垂直方向展示一系列的条目，此时使用Menu是一个不错的选择。 - -Menu主要有以下功能 -* 提供了primary、normal、dark三种类型的菜单 -* Menu可以水平或垂直排列 -* Menu可以在下方或右侧弹出子菜单 - -[TITLE_END_zh_CN] - - -[TITLE_BEGIN_en_US] -[TITLE_END_en_US] - -------------- Footer --------------------- -[FOOTER_BEGIN_zh_CN] -## API -几个需要注意的事项： -* 请给SubMenu、Item设置一个在Menu内唯一的id。这个id在菜单折叠展示或Item选中时需要用到。 -* 请给SubMenu的配置一个header，这样子菜单才会显示对应的头部区域 -
- -Menu - -| 属性 | 名称 | 类型 | 默认值 | 描述 | -| --- | --- | --- | --- | --- | -| ref | 根节点Dom对象的引用 | function \| ref | - | 当需要获取到根节点的dom对象时可设置此属性 | -| className | 样式名称 | string | menu | | -| extraClassName | 额外添加的样式名称 | string | - | | -| hasBox | 是否显示边框阴影 | boolean | - | - | -| hasBorderRadius | 是否边角有弧形 | boolean | - | | -| hasArrow | 是否有折叠/展开的箭头 | boolean | - | | -| collapsable | 是否能够折叠 | boolean | - | | -| justify | 水平排列Item的方式 | string | start | 可设置为： start，end, center, around, between, evenly | -| direction | 菜单的布局方向 | string | vertical | 可设置为： horizontal（水平布局），vertical（垂直布局） | -| type | 类型 | string | normal | 可设置为： normal, primary, dark | -| popupSubMenu | 是否弹出子菜单 | boolean | false | | -| children | 子节点 | react node | - | | -| autoIndent | Menu是否自动缩进 | boolean | true | | -| indentUnit | 菜单缩进值的单位 | string | rem | | -| indentation | 默认的缩进量 | string | rem | | -| onSelect | 当有Item选中时的回调 | function | - | | -| onClickItem | 当点击Item时的回调 | function | - | | -| multiSelect | 是否可以选择多个Item | boolean | false | | -| compact | 是否允许菜单压缩显示 | boolean | false | | -| defaultActiveItems | 默认选中的Item其id组成的数组 | string[] \| number[] | - | | -| activeItems | 当前选中的Item其id组成的数组 | string[] \| number[] | - | | -| defaultOpenedMenus | 默认展开的Menu/SubMenu其id组成的数组 | string[] \| number[] | - | | -| openedMenus | 当前展开的Menu/SubMenu其id组成的数组 | string[] \| number[] | - | | -| onOpenedMenu | 但菜单展开或折叠所触发的回调 | function | - | | -| selectable | 点击Item是否允许显示选中状态 | boolean | - | | - - -SubMenu - -| 属性 | 名称 | 类型 | 默认值 | 描述 | -| --- | --- | --- | --- | --- | -| ref | 根节点Dom对象的引用 | function \| ref | - | 当需要获取到根节点的dom对象时可设置此属性 | -| className | 样式名称 | string | base-menu | | -| extraClassName | 额外添加的样式名称 | string | - | | -| id | SubMenu的ID | string \| number | - | 务必设置一个Menu内部唯一的值 | -| icon | 在Header左侧显示的Icon | react node | - | | -| popupSubMenu | SubMenu是否弹出显示 | boolean | false | | -| popupSubMenuPosition | SubMenu弹出显示的位置 | string | right | 可设置为： right, bottom | -| hasBottomBar | 是否在Header下方显示选中状态下的横条 | boolean | false | | - - -Group - -| 属性 | 名称 | 类型 | 默认值 | 描述 | -| --- | --- | --- | --- | --- | -| ref | 根节点Dom对象的引用 | function \| ref | - | 当需要获取到根节点的dom对象时可设置此属性 | -| className | 样式名称 | string | base-menu | | -| extraClassName | 额外添加的样式名称 | string | - | | -| header | 分组的抬头显示 | react node | - | | - - - -Item - -| 属性 | 名称 | 类型 | 默认值 | 描述 | -| --- | --- | --- | --- | --- | -| ref | 根节点Dom对象的引用 | function \| ref | - | 当需要获取到根节点的dom对象时可设置此属性 | -| className | 样式名称 | string | base-menu | | -| extraClassName | 额外添加的样式名称 | string | - | | -| id | SubMenu的ID | string \| number | - | 务必设置一个Menu内部唯一的值 | -| equitable | Item是否均匀瓜分剩余的空间 | boolean | - | | -| hasBackground | 选中时是否添加背景色 | boolean | - | | -| hasBottomBar | 是否在下方显示选中状态下的横条 | boolean | false | | -| disabled | 是否禁用 | boolean | - | | -| align | 对齐的方向 | string | - | 可设置为: left、center、right | -| icon | 在Item左侧显示的Icon | react node | - | | -| onClick | 点击时的回调 | | - | | - -[FOOTER_END_zh_CN] - -[FOOTER_BEGIN_en_US] -[FOOTER_END_en_US] - -------------- Samples --------------------- -[Menu1_BEGIN_zh_CN] -### 示例1: 最简单的Menu -
- 提示 -
- 一个最简单的Menu示例，Menu默认情况下在垂直方向上排列。 -
-
- -```jsx -import React from 'react'; -import {Menu} from 'react-windy-ui'; - -export default function Menu1() { - - return { - console.log(itemInfo); - }}> - Menu Item1 - Menu Item2 - Menu Item3 - Menu Item4 - ; - -} -``` -[Menu1_END_zh_CN] - -[Menu1_BEGIN_en_US] -[Menu1_END_en_US] ----------------------------------- -[Menu2_BEGIN_zh_CN] -### 示例2: 切换不同类型的Menu -
- 提示 -
- 有三种Menu类型： primary、normal、dark。 -
-
- -```jsx -import React, {useState} from 'react'; -import {Menu, RadioGroup, Radio} from 'react-windy-ui'; - -export default function Menu2() { - const [type, setType] = useState('normal'); - return <> -
- Type: - setType(val)}> - primary - dark - normal - -
- { - console.log(itemInfo); - }}> - Menu Item1 - Menu Item2 - Menu Item3 - Menu Item4 - - ; - -} -``` -[Menu2_END_zh_CN] - -[Menu2_BEGIN_en_US] -[Menu2_END_en_US] ----------------------------------- -[Menu3_BEGIN_zh_CN] -### 示例3: 切换不同类型的Menu -
- 提示 -
- 默认情况下Menu在垂直方向上排列，要在水平方向上排列的话，则需要将direction属性设置为'horizontal'。 -
-
- - -```jsx -import React, {useState} from 'react'; -import {Menu, Toggle} from 'react-windy-ui'; - -export default function Menu3() { - const [vertical, setVertical] = useState(true); - return <> -
- setVertical(active)} - content={{on: 'Veritical', off: 'Horizontal'}}/> -
- - Menu Item1 - Menu Item2 - Menu Item3 - Menu Item4 - - ; - -} -``` - -[Menu3_END_zh_CN] - -[Menu3_BEGIN_en_US] -[Menu3_END_en_US] ----------------------------------- -[Menu4_BEGIN_zh_CN] -### 示例4: 在水平方向排列各个Item -
- 提示 -
- 通过设置justify属性，你可以针对水平展示的Menu，指定其下各个Item的排放位置。 -
-
- - -```jsx -import React, {useState} from 'react'; -import {Menu, RadioGroup, Radio} from 'react-windy-ui'; - -export default function Menu4() { - const [justify, setJustify] = useState(null); - return <> -
- Type: - setJustify(val)}> - start - end - center - around - between - evenly - -
-
- - Menu Item1 - Menu Item2 - Menu Item3 - -
- ; - -} -``` -[Menu4_END_zh_CN] - -[Menu4_BEGIN_en_US] -[Menu4_END_en_US] ----------------------------------- -[Menu5_BEGIN_zh_CN] -### 示例5: 在Item左侧或右侧占据剩余空间 -
- 提示 -
- 在最左侧的Item上设置align="left"属性后，将尽可能占据左侧空间；在最右侧的Item上设置align="right"属性后，将尽可能占据右侧空间 -
-
- - -```jsx -import React from 'react'; -import {Menu} from 'react-windy-ui'; - -export default function Menu5() { - return <> -
- - - Left Menu - - - Menu Item2 - - - Menu Item3 - - -
- -
- - - Menu Item1 - - - Menu Item2 - - - Right Menu - - -
- ; - -} -``` - -[Menu5_END_zh_CN] - -[Menu5_BEGIN_en_US] -[Menu5_END_en_US] ----------------------------------- -[Menu6_BEGIN_zh_CN] -### 示例6: 给Item设置背景色和下边框 -
- 提示 -
- 在Item上设置hasBottomBar属性，Item将会在下方显示一个横条；在Item上设置hasBackground属性，Item将会获得一个背景色； -
-
- - -```jsx -import React from 'react'; -import {Menu} from 'react-windy-ui'; - -export default function Menu6() { - return <> -
- - - Menu Item1 - - - Menu Item2 - - - Menu Item3 - - - - - - Menu Item1 - - - Menu Item2 - - - Menu Item3 - - -
- ; - -} -``` - -[Menu6_END_zh_CN] - -[Menu6_BEGIN_en_US] -[Menu6_END_en_US] ----------------------------------- -[Menu7_BEGIN_zh_CN] -### 示例7: 自定义Menu的高度 -
- 提示 -
- 修改Item的style属性，将line-height设置为一个具体的高度值后，则可使整个Menu的高度得到改变。 -
-
- - -```jsx -import React from 'react'; -import {Menu} from 'react-windy-ui'; - -const ItemStyle = { - lineHeight: '3.2rem', -}; - -export default function Menu7() { - return <> - - - Menu Item1 - - - Menu Item2 - - - Menu Item3 - - - ; - -} -``` - -[Menu7_END_zh_CN] - -[Menu7_BEGIN_en_US] -[Menu7_END_en_US] ----------------------------------- - -[Menu8_BEGIN_zh_CN] -### 示例8: 子菜单SubMenu -
- 提示 -
- 在Menu中添加子菜单SubMenu, 将整个Menu展示成具备层级关系的菜单。每个菜单只能有一个Menu根节点，并且SubMenu只能在Menu下嵌套添加。 -
-
- -```jsx -import React, {useState} from 'react'; -import {Menu, RadioGroup, Radio} from 'react-windy-ui'; - -export default function Menu8() { - const [type, setType] = useState('normal'); - return <> -
- Type: - setType(val)}> - primary - dark - normal - -
-
- - - Menu item1 - - - Menu item2 - - - - Menu item5 - - - Menu item6 - - - Menu item7 - - - Menu item8 - - - - Menu item9 - - - Menu item10 - - - Menu item11 - - - Menu item12 - - - - - - Menu item13 - - - Menu item14 - - - Menu item15 - - - Menu item16 - - - -
- ; - -} -``` - -[Menu8_END_zh_CN] - -[Menu8_BEGIN_en_US] -[Menu8_END_en_US] ----------------------------------- -[Menu9_BEGIN_zh_CN] -### 示例9: 切换成折叠模式 -
- 提示 -
- 设置compact属性，可将菜单折叠或展开。当Menu折叠后将只显示SubMenu或Item的图标，所以您需要给对应的Item和SubMenu指定一个Icon对象。 -
-
- -```jsx -import React, {useState} from 'react'; -import {IconList, Menu, Radio, RadioGroup, Toggle} from 'react-windy-ui'; -import {IconInfo, IconQuestion} from '../../../../components/src'; - -export default function Menu9() { - const [type, setType] = useState('normal'); - const [compact, setCompact] = useState(false); - return <> -
- Type: - setType(val)}> - primary - dark - normal - -
-
- setCompact(active)} - content={{on: 'Compact', off: 'Compact'}}/> -
-
- console.log(`open==${data}`)} - onSelect={(data, e) => console.log(`select=${data.id}`)} - type={type}> - }> - Menu item1 - - }> - Menu item2 - - }> - - Menu item3 - - - Menu item4 - - - Menu item5 - - - Menu item6 - - - Menu item7 - - - Menu item8 - - - - Menu item9 - - - Menu item10 - - - Menu item11 - - - Menu item12 - - - - }> - - Menu item13 - - - Menu item14 - - - Menu item15 - - - Menu item16 - - - -
- -
- -
- ; - -} -``` - -[Menu9_END_zh_CN] - -[Menu9_BEGIN_en_US] -[Menu9_END_en_US] ----------------------------------- -[Menu10_BEGIN_zh_CN] -### 示例10: 弹出式的SubMenu -
- 提示 -
- Menu还有一个属性可以让SubMenu弹出显示，将popupSubMenu设置为true后，SubMenu将被弹出显示。 -
-
- -```jsx -import React, {useState} from 'react'; -import {IconHome, Menu, Radio, RadioGroup, Toggle} from 'react-windy-ui'; -import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'; -import {faLaptop} from '@fortawesome/free-solid-svg-icons'; - -export default function Menu10() { - const [hasArrow, setHasArrow] = useState(true); - const [hasBox, setHasBox] = useState(true); - const [horizontal, setHorizontal] = useState(false); - const [type, setType] = useState('normal'); - const [popupSubMenu, setPopupSubMenu] = useState(false); - - return
-
- setHasArrow(active)} - content={{on: 'Arrow', off: 'Arrow'}}/> -
-
- setHorizontal(active)} - content={{on: 'Horizontal', off: 'Horizontal'}}/> -
-
- type: - setType(val)}> - primary - dark - normal - -
-
- setPopupSubMenu(active)} - content={{on: 'Popup SubMenu', off: 'Popup SubMenu'}}/> -
-
- setHasBox(active)} - content={{on: 'Box Shadow', off: 'Box Shadow'}}/> -
- -
-
- console.log(`==${data}`)} - hasArrow={hasArrow} icon={}> - }> - - - Item1 - - - Item2 - - - - - Item3 - - - Item4 - - - - }> - - Item5 - - - Item6 - - - Item7 - - - Item8 - - - }> - - Item9 - - - Item10 - - - Item11 - - - Item12 - - - -
-
-
; -} -``` - -[Menu10_END_zh_CN] - -[Menu10_BEGIN_en_US] -[Menu10_END_en_US] ----------------------------------- - - ----------------------------------- -[Menu11_BEGIN_zh_CN] -### 示例11: 分组Group -
- 提示 -
- 可以使用一个Group将多个Item组合。 -
-
- -```jsx -import React from 'react'; -import {Menu} from 'react-windy-ui'; - -export default function Menu11() { - - return
-
-
- - - - Item1 - - - Item2 - - - - - Item3 - - - Item4 - - - -
-
-
; -} -``` - -[Menu11_END_zh_CN] - -[Menu11_BEGIN_en_US] -[Menu11_END_en_US] ----------------------------------- -[Menu12_BEGIN_zh_CN] -### 示例12: 多选Menu -
- 提示 -
- 可多选的Menu。当Item是未选中状态时，点击Item会显示选中状态；当Item是已选中状态时，再次点击Item会取消选中。想要在点击时获取 - 当前选中的Item时，可以实现onSelect方法。 -
-
- -```jsx -import React, {useState} from 'react'; -import {IconList, Menu, Radio, RadioGroup, Toggle} from 'react-windy-ui'; - -export default function Menu12() { - const [type, setType] = useState('primary'); - const [multiSelect, setMultiSelect] = useState(true); - return <> -
- Type: - setType(val)}> - primary - dark - normal - -
-
- setMultiSelect(active)} - content={{on: 'Multi-Select', off: 'Multi-Select'}}/> -
- -
- console.log(`open==${data}`)} - onSelect={(data, e) => console.log(`select=${data}`)} - type={type}> - }> - - Menu item1 - - - Menu item2 - - - Menu item3 - - - Menu item4 - - - Menu item5 - - - Menu item6 - - - Menu item7 - - - Menu item8 - - - - Menu item9 - - - Menu item10 - - - Menu item11 - - - Menu item12 - - - - }> - - Menu item13 - - - Menu item14 - - - Menu item15 - - - Menu item16 - - - -
- -
- -
- ; - -} -``` - -[Menu12_END_zh_CN] - -[Menu12_BEGIN_en_US] -[Menu12_END_en_US] ----------------------------------- -[Menu13_BEGIN_zh_CN] -### 示例13: 多选Menu -
- 提示 -
- 这里示例了如下几个配置项: 是否在菜单上显示折叠箭头图标、是否Menu具有边框阴影、是否在底部显示一个变化的横条。 - 对于SubMenu，设置了hasBottomBar属性后，将会在Header下方显示。如果是Item的话，则需要在每个Item上设置这个属性后方可显示。 -
-
- -```jsx -import React, {useState} from 'react'; -import {IconList, Menu, Radio, RadioGroup, Toggle} from 'react-windy-ui'; - -export default function Menu13() { - const [type, setType] = useState('normal'); - const [hasBox, setHasBox] = useState(true); - const [hasArrow, setHasArrow] = useState(true); - const [bottomBar, setBottomBar] = useState(true); - return <> -
- Type: - setType(val)}> - primary - dark - normal - -
-
- setHasArrow(active)} - content={{on: 'Arrow', off: 'Arrow'}}/> -
-
- setHasBox(active)} - content={{on: 'Box Shadow', off: 'Box Shadow'}}/> -
- - -
- setBottomBar(active)} - content={{on: 'Bottom Bar', off: 'Bottom Bar'}}/> -
-
- - } - hasBottomBar={bottomBar}> - - Menu item3 - - - Menu item4 - - - Menu item5 - - - Menu item6 - - - Menu item7 - - - Menu item8 - - - - - Menu item9 - - - Menu item10 - - - Menu item11 - - - Menu item12 - - - -
- -
- -
- ; - -} -``` - -[Menu13_END_zh_CN] - -[Menu13_BEGIN_en_US] -[Menu13_END_en_US] ----------------------------------- - -[Menu14_BEGIN_zh_CN] -### 示例14: 利用SubMenu显示层级菜单 -
- 提示 -
- 对于通常使用的层级菜单，推荐使用SubMenu将对应的Item组合在一起，而且可以面板可以折叠展开。 -
-
- -```jsx -import React from 'react'; -import {IconList, Menu} from 'react-windy-ui'; - -export default function Menu14() { - - return <> -
- - }> - - Menu item3 - - - Menu item4 - - - Menu item5 - - - Menu item6 - - - Menu item7 - - - Menu item8 - - - - - Menu item9 - - - Menu item10 - - - Menu item11 - - - Menu item12 - - - -
- -
- -
- ; - -} -``` - -[Menu14_END_zh_CN] - -[Menu14_BEGIN_en_US] -[Menu14_END_en_US] ----------------------------------- diff --git a/src/docs/pages/menu/md/Menu1.md b/src/docs/pages/menu/md/Menu1.md new file mode 100644 index 00000000..10b2b281 --- /dev/null +++ b/src/docs/pages/menu/md/Menu1.md @@ -0,0 +1,16 @@ +--- +order: 1 +type: sample +zh_CN: 简单示例 +en_US: Menu +editUrl: $BASE/docs/pages/menu/md/Menu1.md +--- + ++++ zh_CN +一个最简单的Menu示例，Menu默认情况下在垂直方向上排列。 + ++++ en_US +Menu1 + ++++ SampleCode +fileName: Menu1 diff --git a/src/docs/pages/menu/md/Menu10.md b/src/docs/pages/menu/md/Menu10.md new file mode 100644 index 00000000..65ec90fe --- /dev/null +++ b/src/docs/pages/menu/md/Menu10.md @@ -0,0 +1,17 @@ +--- +order: 10 +type: sample +zh_CN: 弹出式的SubMenu +en_US: Menu10 +editUrl: $BASE/docs/pages/menu/md/Menu10.md +--- + ++++ zh_CN +Menu还有一个属性可以让SubMenu弹出显示，将popupSubMenu设置为true后，SubMenu将被弹出显示。 + + ++++ en_US +Menu10 + ++++ SampleCode +fileName: Menu10 diff --git a/src/docs/pages/menu/md/Menu11.md b/src/docs/pages/menu/md/Menu11.md new file mode 100644 index 00000000..23b7ee73 --- /dev/null +++ b/src/docs/pages/menu/md/Menu11.md @@ -0,0 +1,16 @@ +--- +order: 11 +type: sample +zh_CN: 分组Group +en_US: Menu11 +editUrl: $BASE/docs/pages/menu/md/Menu11.md +--- + ++++ zh_CN +可以使用一个Group将多个Item组合。 + ++++ en_US +Menu11 + ++++ SampleCode +fileName: Menu11 diff --git a/src/docs/pages/menu/md/Menu12.md b/src/docs/pages/menu/md/Menu12.md new file mode 100644 index 00000000..06291b2e --- /dev/null +++ b/src/docs/pages/menu/md/Menu12.md @@ -0,0 +1,17 @@ +--- +order: 12 +type: sample +zh_CN: 多选Menu +en_US: Menu12 +editUrl: $BASE/docs/pages/menu/md/Menu12.md +--- + ++++ zh_CN + 可多选的Menu。当Item是未选中状态时，点击Item会显示选中状态；当Item是已选中状态时，再次点击Item会取消选中。想要在点击时获取 + 当前选中的Item时，可以实现onSelect方法。 + ++++ en_US +Menu12 + ++++ SampleCode +fileName: Menu12 diff --git a/src/docs/pages/menu/md/Menu13.md b/src/docs/pages/menu/md/Menu13.md new file mode 100644 index 00000000..12e8e2d5 --- /dev/null +++ b/src/docs/pages/menu/md/Menu13.md @@ -0,0 +1,18 @@ +--- +order: 13 +type: sample +zh_CN: 多选Menu +en_US: Menu13 +editUrl: $BASE/docs/pages/menu/md/Menu13.md +--- + ++++ zh_CN +这里示例了如下几个配置项: 是否在菜单上显示折叠箭头图标、是否Menu具有边框阴影、是否在底部显示一个变化的横条。 + 对于SubMenu，设置了hasBottomBar属性后，将会在Header下方显示。如果是Item的话，则需要在每个Item上设置这个属性后方可显示。 + + ++++ en_US +Menu13 + ++++ SampleCode +fileName: Menu13 diff --git a/src/docs/pages/menu/md/Menu14.md b/src/docs/pages/menu/md/Menu14.md new file mode 100644 index 00000000..e81f15d8 --- /dev/null +++ b/src/docs/pages/menu/md/Menu14.md @@ -0,0 +1,16 @@ +--- +order: 14 +type: sample +zh_CN: 利用SubMenu显示层级菜单 +en_US: Menu14 +editUrl: $BASE/docs/pages/menu/md/Menu14.md +--- + ++++ zh_CN +对于通常使用的层级菜单，推荐使用SubMenu将对应的Item组合在一起，而且可以面板可以折叠展开。 + ++++ en_US +Menu14 + ++++ SampleCode +fileName: Menu14 diff --git a/src/docs/pages/menu/md/Menu15.md b/src/docs/pages/menu/md/Menu15.md new file mode 100644 index 00000000..3c130f8d --- /dev/null +++ b/src/docs/pages/menu/md/Menu15.md @@ -0,0 +1,16 @@ +--- +order: 15 +type: sample +zh_CN: Menu15 +en_US: Menu15 +editUrl: $BASE/docs/pages/menu/md/Menu15.md +--- + ++++ zh_CN + + ++++ en_US +Menu14 + ++++ SampleCode +fileName: Menu_open diff --git a/src/docs/pages/menu/md/Menu2.md b/src/docs/pages/menu/md/Menu2.md new file mode 100644 index 00000000..77dc2aea --- /dev/null +++ b/src/docs/pages/menu/md/Menu2.md @@ -0,0 +1,16 @@ +--- +order: 2 +type: sample +zh_CN: 切换不同类型的Menu +en_US: Menu2 +editUrl: $BASE/docs/pages/menu/md/Menu2.md +--- + ++++ zh_CN +有三种Menu类型： primary、normal、dark。 + ++++ en_US +Menu2 + ++++ SampleCode +fileName: Menu2 diff --git a/src/docs/pages/menu/md/Menu3.md b/src/docs/pages/menu/md/Menu3.md new file mode 100644 index 00000000..b932c90a --- /dev/null +++ b/src/docs/pages/menu/md/Menu3.md @@ -0,0 +1,16 @@ +--- +order: 3 +type: sample +zh_CN: 切换不同类型的Menu +en_US: Menu3 +editUrl: $BASE/docs/pages/menu/md/Menu3.md +--- + ++++ zh_CN +默认情况下Menu在垂直方向上排列，要在水平方向上排列的话，则需要将direction属性设置为'horizontal'。 + ++++ en_US +Menu3 + ++++ SampleCode +fileName: Menu3 diff --git a/src/docs/pages/menu/md/Menu4.md b/src/docs/pages/menu/md/Menu4.md new file mode 100644 index 00000000..a9daa36d --- /dev/null +++ b/src/docs/pages/menu/md/Menu4.md @@ -0,0 +1,16 @@ +--- +order: 4 +type: sample +zh_CN: 在水平方向排列各个Item +en_US: Menu4 +editUrl: $BASE/docs/pages/menu/md/Menu4.md +--- + ++++ zh_CN +通过设置justify属性，你可以针对水平展示的Menu，指定其下各个Item的排放位置。 + ++++ en_US +Menu4 + ++++ SampleCode +fileName: Menu4 diff --git a/src/docs/pages/menu/md/Menu5.md b/src/docs/pages/menu/md/Menu5.md new file mode 100644 index 00000000..c92569da --- /dev/null +++ b/src/docs/pages/menu/md/Menu5.md @@ -0,0 +1,17 @@ +--- +order: 5 +type: sample +zh_CN: 在Item左侧或右侧占据剩余空间 +en_US: Menu5 +editUrl: $BASE/docs/pages/menu/md/Menu5.md +--- + ++++ zh_CN +在最左侧的Item上设置align="left"属性后，将尽可能占据左侧空间；在最右侧的Item上设置align="right"属性后，将尽可能占据右侧空间 + + ++++ en_US +Menu5 + ++++ SampleCode +fileName: Menu5 diff --git a/src/docs/pages/menu/md/Menu6.md b/src/docs/pages/menu/md/Menu6.md new file mode 100644 index 00000000..0c1d2ad7 --- /dev/null +++ b/src/docs/pages/menu/md/Menu6.md @@ -0,0 +1,17 @@ +--- +order: 6 +type: sample +zh_CN: 给Item设置背景色和下边框 +en_US: Menu6 +editUrl: $BASE/docs/pages/menu/md/Menu6.md +--- + ++++ zh_CN +在Item上设置hasBottomBar属性，Item将会在下方显示一个横条；在Item上设置hasBackground属性，Item将会获得一个背景色； + + ++++ en_US +Menu6 + ++++ SampleCode +fileName: Menu6 diff --git a/src/docs/pages/menu/md/Menu7.md b/src/docs/pages/menu/md/Menu7.md new file mode 100644 index 00000000..850c2685 --- /dev/null +++ b/src/docs/pages/menu/md/Menu7.md @@ -0,0 +1,16 @@ +--- +order: 7 +type: sample +zh_CN: 自定义Menu的高度 +en_US: Menu7 +editUrl: $BASE/docs/pages/menu/md/Menu7.md +--- + ++++ zh_CN +修改Item的style属性，将line-height设置为一个具体的高度值后，则可使整个Menu的高度得到改变。 + ++++ en_US +Menu7 + ++++ SampleCode +fileName: Menu7 diff --git a/src/docs/pages/menu/md/Menu8.md b/src/docs/pages/menu/md/Menu8.md new file mode 100644 index 00000000..3a350777 --- /dev/null +++ b/src/docs/pages/menu/md/Menu8.md @@ -0,0 +1,16 @@ +--- +order: 8 +type: sample +zh_CN: 子菜单SubMenu +en_US: Menu8 +editUrl: $BASE/docs/pages/menu/md/Menu8.md +--- + ++++ zh_CN +在Menu中添加子菜单SubMenu, 将整个Menu展示成具备层级关系的菜单。每个菜单只能有一个Menu根节点，并且SubMenu只能在Menu下嵌套添加。 + ++++ en_US +Menu8 + ++++ SampleCode +fileName: Menu8 diff --git a/src/docs/pages/menu/md/Menu9.md b/src/docs/pages/menu/md/Menu9.md new file mode 100644 index 00000000..25c91abf --- /dev/null +++ b/src/docs/pages/menu/md/Menu9.md @@ -0,0 +1,16 @@ +--- +order: 9 +type: sample +zh_CN: 子菜单SubMenu +en_US: Menu9 +editUrl: $BASE/docs/pages/menu/md/Menu9.md +--- + ++++ zh_CN +设置compact属性，可将菜单折叠或展开。当Menu折叠后将只显示SubMenu或Item的图标，所以您需要给对应的Item和SubMenu指定一个Icon对象。 + ++++ en_US +Menu9 + ++++ SampleCode +fileName: Menu9 diff --git a/src/docs/pages/menu/md/api.md b/src/docs/pages/menu/md/api.md new file mode 100644 index 00000000..ba3b3af7 --- /dev/null +++ b/src/docs/pages/menu/md/api.md @@ -0,0 +1,91 @@ +--- + order: 100 + type: text + zh_CN: API + en_US: API + editUrl: $BASE/docs/pages/menu/md/api.md +--- + ++++ zh_CN +## API [editUrl] +几个需要注意的事项： + 请给SubMenu、Item设置一个在Menu内唯一的id。这个id在菜单折叠展示或Item选中时需要用到。 + 请给SubMenu的配置一个header，这样子菜单才会显示对应的头部区域 +
+ +Menu + +| 属性 | 名称 | 类型 | 默认值 | 描述 | +| --- | --- | --- | --- | --- | +| ref | 根节点Dom对象的引用 | function \| ref | - | 当需要获取到根节点的dom对象时可设置此属性 | +| className | 样式名称 | string | menu | | +| extraClassName | 额外添加的样式名称 | string | - | | +| hasBox | 是否显示边框阴影 | boolean | - | - | +| hasBorderRadius | 是否边角有弧形 | boolean | - | | +| hasArrow | 是否有折叠/展开的箭头 | boolean | - | | +| collapsable | 是否能够折叠 | boolean | - | | +| justify | 水平排列Item的方式 | string | start | 可设置为： start，end, center, around, between, evenly | +| direction | 菜单的布局方向 | string | vertical | 可设置为： horizontal（水平布局），vertical（垂直布局） | +| type | 类型 | string | normal | 可设置为： normal, primary, dark | +| popupSubMenu | 是否弹出子菜单 | boolean | false | | +| children | 子节点 | react node | - | | +| autoIndent | Menu是否自动缩进 | boolean | true | | +| indentUnit | 菜单缩进值的单位 | string | rem | | +| indentation | 默认的缩进量 | string | rem | | +| onSelect | 当有Item选中时的回调 | function | - | | +| onClickItem | 当点击Item时的回调 | function | - | | +| multiSelect | 是否可以选择多个Item | boolean | false | | +| compact | 是否允许菜单压缩显示 | boolean | false | | +| defaultActiveItems | 默认选中的Item其id组成的数组 | string[] \| number[] | - | | +| activeItems | 当前选中的Item其id组成的数组 | string[] \| number[] | - | | +| defaultOpenedMenus | 默认展开的Menu/SubMenu其id组成的数组 | string[] \| number[] | - | | +| openedMenus | 当前展开的Menu/SubMenu其id组成的数组 | string[] \| number[] | - | | +| onOpenedMenu | 但菜单展开或折叠所触发的回调 | function | - | | +| selectable | 点击Item是否允许显示选中状态 | boolean | - | | + + +SubMenu + +| 属性 | 名称 | 类型 | 默认值 | 描述 | +| --- | --- | --- | --- | --- | +| ref | 根节点Dom对象的引用 | function \| ref | - | 当需要获取到根节点的dom对象时可设置此属性 | +| className | 样式名称 | string | base-menu | | +| extraClassName | 额外添加的样式名称 | string | - | | +| id | SubMenu的ID | string \| number | - | 务必设置一个Menu内部唯一的值 | +| icon | 在Header左侧显示的Icon | react node | - | | +| popupSubMenu | SubMenu是否弹出显示 | boolean | false | | +| popupSubMenuPosition | SubMenu弹出显示的位置 | string | right | 可设置为： right, bottom | +| hasBottomBar | 是否在Header下方显示选中状态下的横条 | boolean | false | | + + +Group + +| 属性 | 名称 | 类型 | 默认值 | 描述 | +| --- | --- | --- | --- | --- | +| ref | 根节点Dom对象的引用 | function \| ref | - | 当需要获取到根节点的dom对象时可设置此属性 | +| className | 样式名称 | string | base-menu | | +| extraClassName | 额外添加的样式名称 | string | - | | +| header | 分组的抬头显示 | react node | - | | + + + +Item + +| 属性 | 名称 | 类型 | 默认值 | 描述 | +| --- | --- | --- | --- | --- | +| ref | 根节点Dom对象的引用 | function \| ref | - | 当需要获取到根节点的dom对象时可设置此属性 | +| className | 样式名称 | string | base-menu | | +| extraClassName | 额外添加的样式名称 | string | - | | +| id | SubMenu的ID | string \| number | - | 务必设置一个Menu内部唯一的值 | +| equitable | Item是否均匀瓜分剩余的空间 | boolean | - | | +| hasBackground | 选中时是否添加背景色 | boolean | - | | +| hasBottomBar | 是否在下方显示选中状态下的横条 | boolean | false | | +| disabled | 是否禁用 | boolean | - | | +| align | 对齐的方向 | string | - | 可设置为: left、center、right | +| icon | 在Item左侧显示的Icon | react node | - | | +| onClick | 点击时的回调 | | - | | + + ++++ en_US +## API [editUrl] + diff --git a/src/docs/pages/menu/md/title.md b/src/docs/pages/menu/md/title.md new file mode 100644 index 00000000..a8c81845 --- /dev/null +++ b/src/docs/pages/menu/md/title.md @@ -0,0 +1,21 @@ +--- + order: 0 + type: text + zh_CN: 菜单 Menu + en_US: Menu + editUrl: $BASE/docs/pages/menu/md/title.md +--- + ++++ zh_CN +## 菜单 Menu [editUrl] +在网站布局中，通常需要在水平或垂直方向展示一系列的条目，此时使用Menu是一个不错的选择。 + +Menu主要有以下功能 +* 提供了primary、normal、dark三种类型的菜单 +* Menu可以水平或垂直排列 +* Menu可以在下方或右侧弹出子菜单 + + ++++ en_US +## Menu [editUrl] + diff --git a/src/docs/pages/menu/samples/Store.js b/src/docs/pages/menu/samples/Store.js deleted file mode 100755 index 1b4546c0..00000000 --- a/src/docs/pages/menu/samples/Store.js +++ /dev/null @@ -1,49 +0,0 @@ -import React, {useContext, useEffect, useMemo, useState} from 'react'; -import {Button} from 'react-windy-ui'; -import { - initStore, - Provider, - StoreContext, -} from '../../../../components/src/common/Store'; - -export default function Store() { - const store = useMemo(() => initStore({ - msg: 'NULL', - }), []); - return - - - ; -} - -export function Store2() { - const store = useMemo(() => initStore({ - msg: 'NULL', - }), []); - return - - - ; -} - -function Child({id}) { - const [active, setActive] = useState(); - const {setState, attach, detach} = useContext(StoreContext); - console.log(`${id}-> updated.`); - - useEffect(() => { - const listener = (state) => { - console.log(`${id} is notified`) - const isActive = state.id === id; - if (isActive) { - setActive(true); - } - }; - attach(listener); - return () => detach(listener); - }, []); - - return
{active ? id + ' Activated' : null} --
; - -} \ No newline at end of file diff --git a/src/docs/pages/menu/samples/TestReducer.js b/src/docs/pages/menu/samples/TestReducer.js deleted file mode 100755 index b4e5164f..00000000 --- a/src/docs/pages/menu/samples/TestReducer.js +++ /dev/null @@ -1,31 +0,0 @@ -import React, {useContext, useReducer} from 'react'; -import {Button} from 'react-windy-ui'; - -const AppCtx = React.createContext(null); - -const reducer = (state, action) => { - switch (action.type) { - case 'add': - return {data: action.payload}; - - default: - return state; - } -}; - -export default function TestReducer() { - const [state, dispatch] = useReducer(reducer, {data: 'NULL'}); - console.log("TestReducer changed") - return - {/*
{state.data}
*/} - - ; -} - -function Child() { - console.log("Child changed") - const ctx = useContext(AppCtx); - return
{ctx.state.data} --
; - -} \ No newline at end of file diff --git a/src/docs/pages/modal/ModalIndex.js b/src/docs/pages/modal/ModalIndex.js index 89740c2b..5acae272 100755 --- a/src/docs/pages/modal/ModalIndex.js +++ b/src/docs/pages/modal/ModalIndex.js @@ -1,35 +1,13 @@ import React from 'react'; -import DocPage from '../../utils/DocPage'; -import Modal1 from './samples/Modal1'; -import Modal2 from './samples/Modal2'; -import Modal3 from './samples/Modal3'; -import Modal4 from './samples/Modal4'; -import Modal5 from './samples/Modal5'; -import Modal7 from './samples/Modal7'; -import Modal6 from './samples/Modal6'; -import Modal8 from './samples/Modal8'; -import Modal9 from './samples/Modal9'; -import Modal10 from './samples/Modal10'; +import DocPage2 from '../../utils/DocPage2'; -/** - * It maps the text blocks in Markdown file - */ -const componentMapping = { - Modal1: , - Modal2: , - Modal3: , - Modal4: , - Modal5: , - Modal6: , - Modal7: , - Modal8: , - Modal9: , - Modal10: , -}; +const requireMd = require.context('!raw-loader!./md', false, /.md$/); +const requireCode = require.context('!raw-loader!./samples', false, /.js$/); +const requireJs = require.context('./samples', false, /.js$/); -export default function ModalIndex(props) { - return import('./doc.md')} - componentMapping={componentMapping} - />; +export default function MenuIndex() { + return ; } \ No newline at end of file diff --git a/src/docs/pages/modal/md/api.md b/src/docs/pages/modal/md/api.md new file mode 100644 index 00000000..f88b1154 --- /dev/null +++ b/src/docs/pages/modal/md/api.md @@ -0,0 +1,47 @@ +--- + order: 100 + type: text + zh_CN: API + en_US: API + editUrl: $BASE/docs/pages/modal/md/api.md +--- + ++++ zh_CN +## API [editUrl] +Modal的属性如下所示： + +| 属性 | 名称 | 类型 | 默认值 | 描述 | +| --- | --- | --- | --- | --- | +| ref | Modal Dom对象的引用 | function \| ref | - | 当需要获取dom对象时可设置此属性 | +| className | 样式名称 | string | dialog | | +| extraClassName | 额外添加的样式名称 | string | - | | +| type | 类型 | string | info | 值可以是：primary，secondary，simple | +| hasMask | 是否显示黑色遮罩层 | boolean | true | | +| onCancel | 关闭时的回调函数 | function | - | 点击右上角的关闭图标或黑色遮罩层时会在内部自动调用 | +| active | 激活显示 | boolean | - | | +| autoClose | 是否允许自动关闭 | boolean | - | 点击右上角的关闭图标或黑色遮罩层时是否自动关闭 | +| alignCenter | 是否居中显示 | boolean | true | 如果设置成false时，会在距离顶部某处显示，此时需要通过style设置对应的top值 | +| allowOverflow | 是否允许内容区域垂直滚动 | boolean | true | 如果设置为true时，请给Modal窗体设置一个高度，这样Body区域超出会自动滚动显示 | +| hasDefaultWidth | 是否设置一个默认的宽度 | boolean | true | 如果设置为true时，Modal的宽度默认为90%；为false时，不设置宽度，宽度以内容的实际宽度为准。 | + +Mode.method()对应的方法如下所示： + +| 方法名 | 名称 | 参数 | 返回值 | 描述 | +| --- | --- | --- | --- | --- | +| info | 显示info类型的Modal | object | modal | config: {type, header, title, body, okText, cancelText, onOk, onCancel} | +| warning | 显示warning类型的Modal | object | modal | config: 同上 | +| error | 显示error类型的Modal | object | modal | config: 同上 | +| success | 显示success类型的Modal | object | modal | config: 同上 | +| confirm | 显示confirm类型的Modal | object | modal | config: 同上 | +| closeAll | 关闭所有的Modal | - | - | | + +通过上面Modal.method()方法返回的modal对象，其提供的方法如下所示： + +| 方法名 | 名称 | 参数 | 返回值 | 描述 | +| --- | --- | --- | --- | --- | +| close | 关闭当前的Modal | - | - | | +| update | 更新Modal的内容 | object | - | 可更新的内容：{header，title，body，okText，cancelText} | + ++++ en_US +## API [editUrl] + diff --git a/src/docs/pages/modal/md/modal1.md b/src/docs/pages/modal/md/modal1.md new file mode 100644 index 00000000..104a0ae7 --- /dev/null +++ b/src/docs/pages/modal/md/modal1.md @@ -0,0 +1,17 @@ +--- +order: 1 +type: sample +zh_CN: 简单示例 +en_US: Modal +editUrl: $BASE/docs/pages/menu/md/modal1.md +--- + ++++ zh_CN +一个简单的Modal示例。在这个示例中，通过active属性去控制Modal的开关，实现onClose回调以便当点击黑色 + 背景或关闭按钮时关闭Modal。同时自定义了两个按钮。 + ++++ en_US +Modal1 + ++++ SampleCode +fileName: Modal1 diff --git a/src/docs/pages/modal/md/modal10.md b/src/docs/pages/modal/md/modal10.md new file mode 100644 index 00000000..15c4e1b6 --- /dev/null +++ b/src/docs/pages/modal/md/modal10.md @@ -0,0 +1,18 @@ +--- +order: 10 +type: sample +zh_CN: 关闭单个Modal以及更新Modal的内容 +en_US: Modal +editUrl: $BASE/docs/pages/menu/md/modal10.md +--- + ++++ zh_CN +对于通过Modal.info()这类方式打开的Modal，会返回一个对象，你可以调用其提供的close和update方法。 + close可以关闭该Modal，update则用来更新Modal的header、title、body、ok按钮文字以及cancel按钮文字。 + + ++++ en_US +Modal10 + ++++ SampleCode +fileName: Modal10 diff --git a/src/docs/pages/modal/md/modal2.md b/src/docs/pages/modal/md/modal2.md new file mode 100644 index 00000000..dba7ee19 --- /dev/null +++ b/src/docs/pages/modal/md/modal2.md @@ -0,0 +1,17 @@ +--- +order: 2 +type: sample +zh_CN: 在窗口顶部显示的Modal +en_US: Modal +editUrl: $BASE/docs/pages/menu/md/modal2.md +--- + ++++ zh_CN + 默认情况下，Modal会在屏幕居中显示。如果需要在顶部一定距离显示，可以指定alignCenter为false,同时在style + 中设置top属性值， 这样Modal就会在top距离位置开始显示。 + ++++ en_US +Modal2 + ++++ SampleCode +fileName: Modal2 diff --git a/src/docs/pages/modal/md/modal3.md b/src/docs/pages/modal/md/modal3.md new file mode 100644 index 00000000..465a86f1 --- /dev/null +++ b/src/docs/pages/modal/md/modal3.md @@ -0,0 +1,16 @@ +--- +order: 3 +type: sample +zh_CN: Modal类型 +en_US: Modal type +editUrl: $BASE/docs/pages/menu/md/modal3.md +--- + ++++ zh_CN + Modal有三种类型可供选择： primary, secondary, simple。 + ++++ en_US +Modal3 + ++++ SampleCode +fileName: Modal3 diff --git a/src/docs/pages/modal/md/modal4.md b/src/docs/pages/modal/md/modal4.md new file mode 100644 index 00000000..24f66008 --- /dev/null +++ b/src/docs/pages/modal/md/modal4.md @@ -0,0 +1,18 @@ +--- +order: 4 +type: sample +zh_CN: Modal的背景颜色 +en_US: Modal background +editUrl: $BASE/docs/pages/menu/md/modal4.md +--- + ++++ zh_CN +要想切换不同的背景色，可以结合使用框架提供的几个样式。其中'text color-white'指定了文字为白色； + 'bg-color-pink'或其他以’bg-color'开头的class，用来指定背景色。有关背景色和文字颜色的具体可使用的参数值， + 您可以参阅文字和颜色章节。 + ++++ en_US +Modal4 + ++++ SampleCode +fileName: Modal4 diff --git a/src/docs/pages/modal/md/modal5.md b/src/docs/pages/modal/md/modal5.md new file mode 100644 index 00000000..0b97d783 --- /dev/null +++ b/src/docs/pages/modal/md/modal5.md @@ -0,0 +1,17 @@ +--- +order: 5 +type: sample +zh_CN: Modal的大小 +en_US: Modal background +editUrl: $BASE/docs/pages/menu/md/modal5.md +--- + ++++ zh_CN +Modal可以指定四种大小： small、medium、large、xLarge。当屏幕宽度达到一定尺寸后，Modal会以一定的宽度显示。 + 如果屏幕尺寸不满足时，将自动切换为默认宽度，即当前窗口90%的宽度。 + ++++ en_US +Modal5 + ++++ SampleCode +fileName: Modal5 diff --git a/src/docs/pages/modal/md/modal6.md b/src/docs/pages/modal/md/modal6.md new file mode 100644 index 00000000..0052a07a --- /dev/null +++ b/src/docs/pages/modal/md/modal6.md @@ -0,0 +1,17 @@ +--- +order: 6 +type: sample +zh_CN: 按钮居中显示 +en_US: Modal Button +editUrl: $BASE/docs/pages/menu/md/modal6.md +--- + ++++ zh_CN +Modal的Footer可以指定一侧排列，可以指定靠左、居中、靠右排列。对应地将Footer的align属性设置为： + left、center、right。这里将align设置为center后，Modal中的按钮将居中显示。 + ++++ en_US +Modal6 + ++++ SampleCode +fileName: Modal6 diff --git a/src/docs/pages/modal/md/modal7.md b/src/docs/pages/modal/md/modal7.md new file mode 100644 index 00000000..4a1b89ff --- /dev/null +++ b/src/docs/pages/modal/md/modal7.md @@ -0,0 +1,18 @@ +--- +order: 7 +type: sample +zh_CN: Modal快捷使用 +en_US: Modal +editUrl: $BASE/docs/pages/menu/md/modal7.md +--- + ++++ zh_CN +在上面例子中，显示一个Modal您需要在组件中添加<Modal .../>的组件，同时控制Modal的显示与关闭。 + 如果需要快捷地弹出一个对话框进行提示、告警之类的，可以考虑使用这个快捷的调用方式（通过调用Modal.method方法调用）。 + + ++++ en_US +Modal7 + ++++ SampleCode +fileName: Modal7 diff --git a/src/docs/pages/modal/md/modal8.md b/src/docs/pages/modal/md/modal8.md new file mode 100644 index 00000000..06ed7cd1 --- /dev/null +++ b/src/docs/pages/modal/md/modal8.md @@ -0,0 +1,17 @@ +--- +order: 8 +type: sample +zh_CN: Body内容超出自动滚动显示 +en_US: Modal Body +editUrl: $BASE/docs/pages/menu/md/modal8.md +--- + ++++ zh_CN +当Body内容过多后，Modal内部会出现滚动条，将内容滚动显示。此时您需要将allowOverflow设置为true, + 并同时给Modal设置一个整体的高度，而且Body会默认占据尽可能多的空间。 + ++++ en_US +Modal8 + ++++ SampleCode +fileName: Modal8 diff --git a/src/docs/pages/modal/md/modal9.md b/src/docs/pages/modal/md/modal9.md new file mode 100644 index 00000000..3988c503 --- /dev/null +++ b/src/docs/pages/modal/md/modal9.md @@ -0,0 +1,16 @@ +--- +order: 9 +type: sample +zh_CN: 弹出多个Modal +en_US: Modal +editUrl: $BASE/docs/pages/menu/md/modal9.md +--- + ++++ zh_CN +弹出多个Modal示例，点击Close All按钮后将调用Modal.closeAll()方法将所有Modal关闭。 + ++++ en_US +Modal9 + ++++ SampleCode +fileName: Modal9 diff --git a/src/docs/pages/modal/md/title.md b/src/docs/pages/modal/md/title.md new file mode 100644 index 00000000..67a010b9 --- /dev/null +++ b/src/docs/pages/modal/md/title.md @@ -0,0 +1,16 @@ +--- + order: 0 + type: text + zh_CN: 对话框 Modal + en_US: Modal + editUrl: $BASE/docs/pages/menu/md/title.md +--- + ++++ zh_CN +## 对话框 Modal [editUrl] +Modal也即模态对话框。在当前页面额外弹出一个框体，比如确认对话框、提示对话框等。 + + ++++ en_US +## Modal [editUrl] + diff --git a/src/docs/pages/navbar/NavbarIndex.js b/src/docs/pages/navbar/NavbarIndex.js index cd5c62a3..0e88f2fe 100755 --- a/src/docs/pages/navbar/NavbarIndex.js +++ b/src/docs/pages/navbar/NavbarIndex.js @@ -1,37 +1,13 @@ import React from 'react'; -import DocPage from '../../utils/DocPage'; -import Navbar1 from './samples/Navbar1'; -import Navbar2 from './samples/Navbar2'; -import Navbar3 from './samples/Navbar3'; -import Navbar4 from './samples/Navbar4'; -import Navbar5 from './samples/Navbar5'; -import Navbar6 from './samples/Navbar6'; -import Navbar7 from './samples/Navbar7'; -import Navbar8 from './samples/Navbar8'; -import Navbar9 from './samples/Navbar9'; -import md from './samples/test.md'; -import Navbar10 from './samples/Navbar10'; +import DocPage2 from '../../utils/DocPage2'; -/** - * It maps the text blocks in Markdown file - */ -const componentMapping = { - Navbar1: , - Navbar2: , - Navbar3: , - Navbar4: , - Navbar5: , - Navbar6: , - Navbar7: , - Navbar8: , - Navbar9: , - // Navbar10: , -}; +const requireMd = require.context('!raw-loader!./md', false, /.md$/); +const requireCode = require.context('!raw-loader!./samples', false, /.js$/); +const requireJs = require.context('./samples', false, /.js$/); -export default function NavbarIndex(props) { - return <> - import('./doc.md')} - componentMapping={componentMapping} - />; +export default function NavbarIndex() { + return ; } \ No newline at end of file diff --git a/src/docs/pages/navbar/doc.md b/src/docs/pages/navbar/doc.md deleted file mode 100755 index c81e9501..00000000 --- a/src/docs/pages/navbar/doc.md +++ /dev/null @@ -1,623 +0,0 @@ ------------ Title ------------ -[TITLE_BEGIN_zh_CN] -## 导航条 NavBar -可将一系列操作放置在导航条，或是当前窗口相关的内容。可用于展示标题、品牌、导航选项等。 - -- 提供了两种类型的NavBar -- 支持自定义背景色 -- NavBar可以在顶部或底部固定位置显示 -- 支持响应式布局，可自动隐藏或显示NavBar中的List - -[TITLE_END_zh_CN] - - -[TITLE_BEGIN_en_US] -[TITLE_END_en_US] - -------------- Footer --------------------- -[FOOTER_BEGIN_zh_CN] -## API - -* Navbar的属性如下所示: - -| 属性 | 名称 | 类型 | 默认值 | 描述 | -| --- | --- | --- | --- | --- | -| ref | Input Dom对象的引用 | function \| ref | - | 当需要获取dom对象时可设置此属性 | -| className | 样式名称 | string | navbar | | -| extraClassName | 额外添加的样式名称 | string | - | | -| type | 类型 | string | normal | 值可以是：primary, normal | -| fixed | 固定位置 | string | top | 值可以是：top, bottom | -| hasBox | 是否显示阴影 | bool | true | | -| hasBorder | 是否有边框 | bool | false | | -| autoHide | 是否自动折叠/展示List | bool | true | 当窗口宽度变窄时是否自动隐藏List | -| expand | 展开Navbar | bool | - | 当设置了此属性后，需要配合onExpand方法去修改这个属性值。 | -| defaultExpand | 是否初始展开Navbar | bool | false | 初始显示时是否展开List | -| onExpand | 展开/折叠List时的回调函数 | function(expand) | - | 当expand变化后触发。格式：onExpand(true|false}) | - -* Switch的属性如下所示: - -| 属性 | 名称 | 类型 | 默认值 | 描述 | -| --- | --- | --- | --- | --- | -| ref | Input Dom对象的引用 | function \| ref | - | 当需要获取dom对象时可设置此属性 | -| className | 样式名称 | string | button navbar-switch bg-transparent | | -| extraClassName | 额外添加的样式名称 | string | - | | -| type | 类型 | string | normal | 值可以是：primary, normal | -| onClick | 点击切换按钮的回调 | function(e) | - | | -| circle | 是否时圆形按钮 | bool | true | | - -* Title的属性如下所示: - -| 属性 | 名称 | 类型 | 默认值 | 描述 | -| --- | --- | --- | --- | --- | -| ref | Input Dom对象的引用 | function \| ref | - | 当需要获取dom对象时可设置此属性 | -| className | 样式名称 | string | title | | -| extraClassName | 额外添加的样式名称 | string | - | | -| nativeType | html标签类型 | string | li | | - -* List的属性如下所示: - -| 属性 | 名称 | 类型 | 默认值 | 描述 | -| --- | --- | --- | --- | --- | -| ref | Input Dom对象的引用 | function \| ref | - | 当需要获取dom对象时可设置此属性 | -| className | 样式名称 | string | list | | -| extraClassName | 额外添加的样式名称 | string | - | | -| nativeType | html标签类型 | string | ul | | -| align | List里面的Item对齐方向 | string | left | 值可以是: left, center, right | - -* Item的属性如下所示: - -| 属性 | 名称 | 类型 | 默认值 | 描述 | -| --- | --- | --- | --- | --- | -| ref | Input Dom对象的引用 | function \| ref | - | 当需要获取dom对象时可设置此属性 | -| className | 样式名称 | string | list | | -| extraClassName | 额外添加的样式名称 | string | - | | -| nativeType | html标签类型 | string | li | | -| hasBackground | 激活后是否有背景色 | bool | true | | -| hasBar | 激活后是否底部横条 | bool | false | | -| active | 是否激活选中状态 | bool | false | | -| alignRight | 是否靠右显示 | bool | false | | - -[FOOTER_END_zh_CN] - -[FOOTER_BEGIN_en_US] -[FOOTER_END_en_US] - -------------- Samples --------------------- -[Navbar1_BEGIN_zh_CN] -### 示例1 简单示例 - - 默认的Navbar, 有灰色背景，还可以选择是否有border、box-shadow。您可以在Navbar上对应设置hasBorder， hasBox属性。 - 对于每个Item，如果需要选中后有背景色可以设置hasBackground属性。将active设置为true后，将显示选中的效果。 - - -```jsx -import React from 'react'; -import {NavBar, Menu} from 'react-windy-ui'; - -export default function Navbar1() { - return <> - - - - Navbar - - - - User - - - Role - - - Privileges - - - Security - - - - - - - Navbar - - - - User - - - Role - - - Privileges - - - Security - - - - ; -} -``` -[Navbar1_END_zh_CN] - -[Navbar1_BEGIN_en_US] -[Navbar1_END_en_US] ----------------------------------- -[Navbar2_BEGIN_zh_CN] -### 示例2 Primary类型 - - 除了默认类型外，还提供了primary类型的具有蓝色背景的Navbar，只需要设置type='primary'即可。 - 另外这个示例中，还展示了如何让Navbar中的Item显示选中的背景色以及绿色的下边条，这里可以设置hasBackground和 - hasBox两个属性。如果需要将List中的某个Item靠右显示，则可以设置alignRight属性为true。 - - -```jsx -import React, {useState} from 'react'; -import {Dropdown, Navbar, Toggle} from 'react-windy-ui'; - -export default function Navbar2() { - const [bg, setBg] = useState(false); - const [bottomBar, setBottomBar] = useState(false); - - return <> -
-
- setBg(val)}/> -
-
- setBottomBar(val)}/> -
-
- - - - Navbar - - - - User - - - Role - - - Security - - - Dropdown}> - - Menu Item1 - Menu Item2 - Menu Item3 - Menu Item4 - - - - - - ; -} -``` -[Navbar2_END_zh_CN] - -[Navbar2_BEGIN_en_US] -[Navbar2_END_en_US] ----------------------------------- - -[Navbar3_BEGIN_zh_CN] -### 示例3 靠右侧排列的Item - - Navbar的List可以设置align属性，设置为left时将居左显示，这也是默认的排列方式；设置 - 为right时将居右显示。 - - -```jsx -import React, {useState} from 'react'; -import {Navbar, Toggle} from 'react-windy-ui'; - -export default function Navbar3() { - const [bg, setBg] = useState(false); - const [bottomBar, setBottomBar] = useState(false); - - return <> -
-
- setBg(val)}/> -
-
- setBottomBar(val)}/> -
-
- - - - Web - - - - User - - - Role - - - Security - - - - - ; -} -``` -[Navbar3_END_zh_CN] - -[Navbar3_BEGIN_en_US] -[Navbar3_END_en_US] ----------------------------------- - -[Navbar4_BEGIN_zh_CN] -### 示例4 小窗口下折叠隐藏List - - 当窗口宽度小于layout中的md定义的宽度时（768px），Navbar的List将会被隐藏，同时显示一个切换显示的按钮。 - 点击这个按钮后，会再次展开List。这里注意需要在<Title/>中添加一个<Navbar.Switch/>。 - - -```jsx -import React, {useState} from 'react'; -import {IconCalendar, Navbar, Toggle} from 'react-windy-ui'; - -export default function Navbar4() { - const [bg, setBg] = useState(false); - const [bottomBar, setBottomBar] = useState(false); - - return <> -
-
- setBg(val)}/> -
-
- setBottomBar(val)}/> -
-
- - - - - - - Web - - - - User - - - Role - - - Security - - - - - ; -} -``` -[Navbar4_END_zh_CN] - -[Navbar4_BEGIN_en_US] -[Navbar4_END_en_US] ----------------------------------- - -[Navbar5_BEGIN_zh_CN] -### 示例5 小窗口下在右侧显示折叠按钮 - - 当窗口宽度小于layout中的md定义的宽度时（768px），Navbar的List将会被隐藏，同时显示一个切换显示的按钮。 - 如果需要按钮在Navbar右侧显示时，可参照此例设置<Navbar.Title/> - - -```jsx -import React, {useState} from 'react'; -import {IconList, Navbar, Toggle} from 'react-windy-ui'; -import DocFrame from '../../../utils/DocFrame'; - -export default function Navbar5() { - const [smallWindow, setSmallWindow] = useState(false); - - const width = smallWindow ? '500px' : '100%'; - return <> -
-
- setSmallWindow(val)}/> -
-
- - - - - Web - - - - - - - User - - - Role - - - Security - - - - - ; -} -``` -[Navbar5_END_zh_CN] - -[Navbar5_BEGIN_en_US] -[Navbar5_END_en_US] ----------------------------------- - -[Navbar6_BEGIN_zh_CN] -### 示例6 小窗口下始终显示List - - 某些情况下，不需要在窗口变化的情况下自动显示或隐藏List，可以将Navbar的autoHide属性设置为false。 - 此时无论窗口宽度如何变化，List都一直显示。 - - -```jsx -import React, {useState} from 'react'; -import {Button, IconHome, IconSearch, Navbar, Toggle} from 'react-windy-ui'; -import DocFrame from '../../../utils/DocFrame'; - -export default function Navbar6() { - const [smallWindow, setSmallWindow] = useState(false); - - const width = smallWindow ? '500px' : '100%'; - return <> -
-
- setSmallWindow(val)}/> -
-
- - - - - Web - - - - - - - - - - - - ; -} -``` -[Navbar6_END_zh_CN] - -[Navbar6_BEGIN_en_US] -[Navbar6_END_en_US] ----------------------------------- - -[Navbar7_BEGIN_zh_CN] -### 示例7 在Navbar中放置其他组件 - - 您可以在Navbar中放置其他诸如Button、Dropdown、Input等组件。 - - -```jsx -import React from 'react'; -import {Button, Dropdown, IconSearch, Input, Navbar} from 'react-windy-ui'; - -export default function Navbar7() { - return <> - - - - Navbar - - - - - - - - - - - - - Dropdown}> - - Menu Item1 - Menu Item2 - Menu Item3 - Menu Item4 - - - - - - ; -} -``` -[Navbar7_END_zh_CN] - -[Navbar7_BEGIN_en_US] -[Navbar7_END_en_US] ----------------------------------- - -[Navbar8_BEGIN_zh_CN] -### 示例8 自定义背景色 - - Navbar支持定义背景色，您可以通过extraClassName属性给Navbar添加额外的样式去覆盖默认的背景色即可。 - 默认提供的背景色样式可以参阅此处。 - - -```jsx -import React, {useState} from 'react'; -import {Navbar, Toggle} from 'react-windy-ui'; - -export default function Navbar8() { - const [bg, setBg] = useState(false); - const [bottomBar, setBottomBar] = useState(false); - const [box, setBox] = useState(true); - - const colorClassNames = [ - 'bg-color-green', 'bg-color-brown', 'bg-color-black', - 'bg-color-red', 'bg-color-teal']; - return <> -
-
- setBg(val)}/> -
-
- setBottomBar(val)}/> -
-
- setBox(val)}/> -
-
- - { - colorClassNames.map((item, i) => - - - Navbar - - - - User - - - Role - - - Privileges - - - Security - - - , - ) - } - - ; -} -``` -[Navbar8_END_zh_CN] - -[Navbar8_BEGIN_en_US] -[Navbar8_END_en_US] ----------------------------------- - -[Navbar9_BEGIN_zh_CN] -### 示例9 固定位置显示 - - Navbar提供了一个fixed属性用于将Navbar固定显示。当fixed='top'时，将固定在顶部显示； - 当fixed='bottom'时，将固定在底部显示。 - - -```jsx -import React, {useState} from 'react'; -import {Navbar, Toggle} from 'react-windy-ui'; - -export default function Navbar9() { - const [bg, setBg] = useState(false); - const [bottomBar, setBottomBar] = useState(false); - const [box, setBox] = useState(true); - - const colorClassNames = [ - 'bg-color-green', 'bg-color-brown', 'bg-color-black', - 'bg-color-red', 'bg-color-teal']; - return <> -
-
- setBg(val)}/> -
-
- setBottomBar(val)}/> -
-
- setBox(val)}/> -
-
- - { - colorClassNames.map((item, i) => - - - Navbar - - - - User - - - Role - - - Privileges - - - Security - - - , - ) - } - - ; -} -``` -[Navbar9_END_zh_CN] - -[Navbar9_BEGIN_en_US] -[Navbar9_END_en_US] ----------------------------------- \ No newline at end of file diff --git a/src/docs/pages/navbar/md/api.md b/src/docs/pages/navbar/md/api.md new file mode 100644 index 00000000..bcc84217 --- /dev/null +++ b/src/docs/pages/navbar/md/api.md @@ -0,0 +1,74 @@ +--- + order: 100 + type: text + zh_CN: API + en_US: API + editUrl: $BASE/docs/pages/navbar/md/api.md +--- + ++++ zh_CN +## API [editUrl] + +* Navbar的属性如下所示: + +| 属性 | 名称 | 类型 | 默认值 | 描述 | +| --- | --- | --- | --- | --- | +| ref | Input Dom对象的引用 | function \| ref | - | 当需要获取dom对象时可设置此属性 | +| className | 样式名称 | string | navbar | | +| extraClassName | 额外添加的样式名称 | string | - | | +| type | 类型 | string | normal | 值可以是：primary, normal | +| fixed | 固定位置 | string | top | 值可以是：top, bottom | +| hasBox | 是否显示阴影 | bool | true | | +| hasBorder | 是否有边框 | bool | false | | +| autoHide | 是否自动折叠/展示List | bool | true | 当窗口宽度变窄时是否自动隐藏List | +| expand | 展开Navbar | bool | - | 当设置了此属性后，需要配合onExpand方法去修改这个属性值。 | +| defaultExpand | 是否初始展开Navbar | bool | false | 初始显示时是否展开List | +| onExpand | 展开/折叠List时的回调函数 | function(expand) | - | 当expand变化后触发。格式：onExpand(true|false}) | + +* Switch的属性如下所示: + +| 属性 | 名称 | 类型 | 默认值 | 描述 | +| --- | --- | --- | --- | --- | +| ref | Input Dom对象的引用 | function \| ref | - | 当需要获取dom对象时可设置此属性 | +| className | 样式名称 | string | button navbar-switch bg-transparent | | +| extraClassName | 额外添加的样式名称 | string | - | | +| type | 类型 | string | normal | 值可以是：primary, normal | +| onClick | 点击切换按钮的回调 | function(e) | - | | +| circle | 是否时圆形按钮 | bool | true | | + +* Title的属性如下所示: + +| 属性 | 名称 | 类型 | 默认值 | 描述 | +| --- | --- | --- | --- | --- | +| ref | Input Dom对象的引用 | function \| ref | - | 当需要获取dom对象时可设置此属性 | +| className | 样式名称 | string | title | | +| extraClassName | 额外添加的样式名称 | string | - | | +| nativeType | html标签类型 | string | li | | + +* List的属性如下所示: + +| 属性 | 名称 | 类型 | 默认值 | 描述 | +| --- | --- | --- | --- | --- | +| ref | Input Dom对象的引用 | function \| ref | - | 当需要获取dom对象时可设置此属性 | +| className | 样式名称 | string | list | | +| extraClassName | 额外添加的样式名称 | string | - | | +| nativeType | html标签类型 | string | ul | | +| align | List里面的Item对齐方向 | string | left | 值可以是: left, center, right | + +* Item的属性如下所示: + +| 属性 | 名称 | 类型 | 默认值 | 描述 | +| --- | --- | --- | --- | --- | +| ref | Input Dom对象的引用 | function \| ref | - | 当需要获取dom对象时可设置此属性 | +| className | 样式名称 | string | list | | +| extraClassName | 额外添加的样式名称 | string | - | | +| nativeType | html标签类型 | string | li | | +| hasBackground | 激活后是否有背景色 | bool | true | | +| hasBar | 激活后是否底部横条 | bool | false | | +| active | 是否激活选中状态 | bool | false | | +| alignRight | 是否靠右显示 | bool | false | | + + ++++ en_US +## API [editUrl] + diff --git a/src/docs/pages/navbar/md/navbar1.md b/src/docs/pages/navbar/md/navbar1.md new file mode 100644 index 00000000..522213c7 --- /dev/null +++ b/src/docs/pages/navbar/md/navbar1.md @@ -0,0 +1,18 @@ +--- +order: 1 +type: sample +zh_CN: 简单示例 +en_US: navbar +editUrl: $BASE/docs/pages/navbar/md/navbar1.md +--- + ++++ zh_CN +默认的Navbar, 有灰色背景，还可以选择是否有border、box-shadow。您可以在Navbar上对应设置hasBorder， hasBox属性。 + 对于每个Item，如果需要选中后有背景色可以设置hasBackground属性。将active设置为true后，将显示选中的效果。 + + ++++ en_US +Navbar1 + ++++ SampleCode +fileName: Navbar1 diff --git a/src/docs/pages/navbar/md/navbar10.md b/src/docs/pages/navbar/md/navbar10.md new file mode 100644 index 00000000..0cd9c806 --- /dev/null +++ b/src/docs/pages/navbar/md/navbar10.md @@ -0,0 +1,17 @@ +--- +order: 10 +type: sample +zh_CN: navbar +en_US: navbar +editUrl: $BASE/docs/pages/navbar/md/navbar10.md +--- + ++++ zh_CN +Navbar提供了一个fixed属性用于将Navbar固定显示。当fixed='top'时，将固定在顶部显示； + 当fixed='bottom'时，将固定在底部显示。 + ++++ en_US +Navbar10 + ++++ SampleCode +fileName: Navbar10 diff --git a/src/docs/pages/navbar/md/navbar2.md b/src/docs/pages/navbar/md/navbar2.md new file mode 100644 index 00000000..eb9c110c --- /dev/null +++ b/src/docs/pages/navbar/md/navbar2.md @@ -0,0 +1,19 @@ +--- +order: 2 +type: sample +zh_CN: Primary类型 +en_US: Primary +editUrl: $BASE/docs/pages/navbar/md/navbar2.md +--- + ++++ zh_CN + 除了默认类型外，还提供了primary类型的具有蓝色背景的Navbar，只需要设置type='primary'即可。 + 另外这个示例中，还展示了如何让Navbar中的Item显示选中的背景色以及绿色的下边条，这里可以设置hasBackground和 + hasBox两个属性。如果需要将List中的某个Item靠右显示，则可以设置alignRight属性为true。 + + ++++ en_US +Navbar2 + ++++ SampleCode +fileName: Navbar2 diff --git a/src/docs/pages/navbar/md/navbar3.md b/src/docs/pages/navbar/md/navbar3.md new file mode 100644 index 00000000..afa0c902 --- /dev/null +++ b/src/docs/pages/navbar/md/navbar3.md @@ -0,0 +1,17 @@ +--- +order: 3 +type: sample +zh_CN: 靠右侧排列的Item +en_US: navbar +editUrl: $BASE/docs/pages/navbar/md/navbar3.md +--- + ++++ zh_CN + Navbar的List可以设置align属性，设置为left时将居左显示，这也是默认的排列方式；设置 + 为right时将居右显示。 + ++++ en_US +Navbar3 + ++++ SampleCode +fileName: Navbar3 diff --git a/src/docs/pages/navbar/md/navbar4.md b/src/docs/pages/navbar/md/navbar4.md new file mode 100644 index 00000000..da1a70c7 --- /dev/null +++ b/src/docs/pages/navbar/md/navbar4.md @@ -0,0 +1,17 @@ +--- +order: 4 +type: sample +zh_CN: 靠右侧排列的Item +en_US: navbar +editUrl: $BASE/docs/pages/navbar/md/navbar4.md +--- + ++++ zh_CN +当窗口宽度小于layout中的md定义的宽度时（768px），Navbar的List将会被隐藏，同时显示一个切换显示的按钮。 + 点击这个按钮后，会再次展开List。这里注意需要在<Title/>中添加一个<Navbar.Switch/>。 + ++++ en_US +Navbar4 + ++++ SampleCode +fileName: Navbar4 diff --git a/src/docs/pages/navbar/md/navbar5.md b/src/docs/pages/navbar/md/navbar5.md new file mode 100644 index 00000000..6513fa0d --- /dev/null +++ b/src/docs/pages/navbar/md/navbar5.md @@ -0,0 +1,17 @@ +--- +order: 5 +type: sample +zh_CN: 靠右侧排列的Item +en_US: navbar +editUrl: $BASE/docs/pages/navbar/md/navbar5.md +--- + ++++ zh_CN +当窗口宽度小于layout中的md定义的宽度时（768px），Navbar的List将会被隐藏，同时显示一个切换显示的按钮。 + 如果需要按钮在Navbar右侧显示时，可参照此例设置<Navbar.Title/> + ++++ en_US +Navbar5 + ++++ SampleCode +fileName: Navbar5 diff --git a/src/docs/pages/navbar/md/navbar6.md b/src/docs/pages/navbar/md/navbar6.md new file mode 100644 index 00000000..34367af7 --- /dev/null +++ b/src/docs/pages/navbar/md/navbar6.md @@ -0,0 +1,17 @@ +--- +order: 6 +type: sample +zh_CN: 小窗口下始终显示List +en_US: navbar +editUrl: $BASE/docs/pages/navbar/md/navbar5.md +--- + ++++ zh_CN + 某些情况下，不需要在窗口变化的情况下自动显示或隐藏List，可以将Navbar的autoHide属性设置为false。 + 此时无论窗口宽度如何变化，List都一直显示。 + ++++ en_US +Navbar6 + ++++ SampleCode +fileName: Navbar6 diff --git a/src/docs/pages/navbar/md/navbar7.md b/src/docs/pages/navbar/md/navbar7.md new file mode 100644 index 00000000..a342bbd1 --- /dev/null +++ b/src/docs/pages/navbar/md/navbar7.md @@ -0,0 +1,17 @@ +--- +order: 7 +type: sample +zh_CN: 在Navbar中放置其他组件 +en_US: navbar +editUrl: $BASE/docs/pages/navbar/md/navbar7.md +--- + ++++ zh_CN +您可以在Navbar中放置其他诸如Button、Dropdown、Input等组件。 + + ++++ en_US +Navbar7 + ++++ SampleCode +fileName: Navbar7 diff --git a/src/docs/pages/navbar/md/navbar8.md b/src/docs/pages/navbar/md/navbar8.md new file mode 100644 index 00000000..ecf324ea --- /dev/null +++ b/src/docs/pages/navbar/md/navbar8.md @@ -0,0 +1,17 @@ +--- +order: 8 +type: sample +zh_CN: 自定义背景色 +en_US: navbar +editUrl: $BASE/docs/pages/navbar/md/navbar8.md +--- + ++++ zh_CN +Navbar支持定义背景色，您可以通过extraClassName属性给Navbar添加额外的样式去覆盖默认的背景色即可。 + 默认提供的背景色样式可以参阅此处。 + ++++ en_US +Navbar8 + ++++ SampleCode +fileName: Navbar8 diff --git a/src/docs/pages/navbar/md/navbar9.md b/src/docs/pages/navbar/md/navbar9.md new file mode 100644 index 00000000..eae3889f --- /dev/null +++ b/src/docs/pages/navbar/md/navbar9.md @@ -0,0 +1,17 @@ +--- +order: 9 +type: sample +zh_CN: 自定义背景色 +en_US: navbar +editUrl: $BASE/docs/pages/navbar/md/navbar9.md +--- + ++++ zh_CN +Navbar提供了一个fixed属性用于将Navbar固定显示。当fixed='top'时，将固定在顶部显示； + 当fixed='bottom'时，将固定在底部显示。 + ++++ en_US +Navbar9 + ++++ SampleCode +fileName: Navbar9 diff --git a/src/docs/pages/navbar/md/title.md b/src/docs/pages/navbar/md/title.md new file mode 100644 index 00000000..9ee554d4 --- /dev/null +++ b/src/docs/pages/navbar/md/title.md @@ -0,0 +1,21 @@ +--- + order: 0 + type: text + zh_CN: 导航条 NavBar + en_US: NavBar + editUrl: $BASE/docs/pages/navbar/md/title.md +--- + ++++ zh_CN +## 导航条 NavBar [editUrl] +可将一系列操作放置在导航条，或是当前窗口相关的内容。可用于展示标题、品牌、导航选项等。 + +- 提供了两种类型的NavBar +- 支持自定义背景色 +- NavBar可以在顶部或底部固定位置显示 +- 支持响应式布局，可自动隐藏或显示NavBar中的List + + ++++ en_US +## NavBar [editUrl] + diff --git a/src/docs/pages/notification/NotificationIndex.js b/src/docs/pages/notification/NotificationIndex.js index a3448479..79412162 100755 --- a/src/docs/pages/notification/NotificationIndex.js +++ b/src/docs/pages/notification/NotificationIndex.js @@ -1,33 +1,13 @@ import React from 'react'; -import DocPage from '../../utils/DocPage'; -import Notification1 from './samples/Notification1'; -import Notification2 from './samples/Notification2'; -import Notification3 from './samples/Notification3'; -import Notification4 from './samples/Notification4'; -import Notification5 from './samples/Notification5'; -import Notification6 from './samples/Notification6'; -import Notification7 from './samples/Notification7'; -import Notification8 from './samples/Notification8'; -import Notification9 from './samples/Notification9'; +import DocPage2 from '../../utils/DocPage2'; -/** - * It maps the text blocks in Markdown file - */ -const componentMapping = { - Notification1: , - Notification2: , - Notification3: , - Notification4: , - Notification5: , - Notification6: , - Notification7: , - Notification8: , - Notification9: , -}; +const requireMd = require.context('!raw-loader!./md', false, /.md$/); +const requireCode = require.context('!raw-loader!./samples', false, /.js$/); +const requireJs = require.context('./samples', false, /.js$/); -export default function NotificationIndex(props) { - return import('./doc.md')} - componentMapping={componentMapping} - />; +export default function NotificationIndex() { + return ; } \ No newline at end of file diff --git a/src/docs/pages/notification/doc.md b/src/docs/pages/notification/doc.md deleted file mode 100755 index 50bb6ccf..00000000 --- a/src/docs/pages/notification/doc.md +++ /dev/null @@ -1,538 +0,0 @@ -import {PrismLight as SyntaxHighlighter} from 'react-syntax-highlighter'; - ------------ Title ------------ -[TITLE_BEGIN_zh_CN] -## 通知 Notification -Notification组件结合使用了Alert组件，以便展示一系列的全局消息。 - -* 默认情况下可以在TopLeft、TopRight、BottomLeft、BottomRight自个方位展示 -* 消息框中的Alert可以定时关闭，也可手动关闭 - -另外，需要提醒的是，以下示例中有些涉及到更改全局配置的，会对其他的示例有影响。如果需要恢复默认效果，请重新刷新下页面。 - -[TITLE_END_zh_CN] - - -[TITLE_BEGIN_en_US] -[TITLE_END_en_US] - -------------- Footer --------------------- -[FOOTER_BEGIN_zh_CN] -## API - -Notification的全局配置属性如下所示 - -| 属性 | 名称 | 类型 | 默认值 | 描述 | -| --- | --- | --- | --- | --- | -| position | 显示位置 | string | topRight | 当需要获取到根节点的dom对象时可设置此属性 | -| duration | 消息持续显示的时间 | number | 5000ms | | -| hasCloseIcon | 是否显示关闭消息的Icon | boolean | true | | -| onClose | 关闭某个消息的回调 | function | - | 当消息被关闭时触发，同时会将消息对应的配置传入该方法。 | -| rect | 上下左右四个方位的距离 | object | 所有默认值全部为1.5rem | 当topLeft时，可只设置rect中的top、left属性。当topRight时，可只设置rect中的top、right属性。当bottomLeft时，可只设置rect中的bottom、left属性。当bottomRight时，可只设置rect中的bottom、right属性。| - -您可以使用调用Notification的config方法去设置: Notification.config({...})。 - -
-每个消息可自定义设置的属性有 - -| 属性 | 名称 | 类型 | 默认值 | 描述 | -| --- | --- | --- | --- | --- | -| position | 显示位置 | string | topRight | 当需要获取到根节点的dom对象时可设置此属性 | -| duration | 消息持续显示的时间 | number | 5000ms | | -| title | Alert消息标题 | react node | - | | -| body | Alert消息内容 | react node | - | | -| icon | Alert显示的图标 | react node | - | | -| onClose | 关闭消息的回调 | function | - | 当消息被关闭时触发 | -| alertProps | Alert消息的配置对象 | object | - | 对应Alert组件的API属性，可参阅Alert的API | -上面这些参数在显示各个消息时设置，比如Notification.info({duration: 3000, title: 'title' .....})。 - - -[FOOTER_END_zh_CN] - -[FOOTER_BEGIN_en_US] -[FOOTER_END_en_US] - -------------- Samples --------------------- -[Notification1_BEGIN_zh_CN] -### 示例1: 普通的Notification -
- 提示 -
- 通过调用Notification的info、ok、warning、error、simple方法，可在Notification框体中显示对应的 - Alert。要显示一个Alert, 您可以简单地传入一个消息字符串，也可以传入一个具体的config对像。 -
-
- -```jsx -import React from 'react'; -import {Button, Notification} from 'react-windy-ui'; - -export default function Notification1() { - return <> - - - - - - ; - -} -``` -[Notification1_END_zh_CN] - -[Notification1_BEGIN_en_US] -[Notification1_END_en_US] ----------------------------------- - -[Notification2_BEGIN_zh_CN] -### 示例2: Notification的类型 -
- 提示 -
- Notification与Alert类型一致，主要提供了info、ok、warning、error、simple这几种类型。 -
-
- -```jsx -import React from 'react'; -import { - Button, - IconError, - IconInfo, - IconOk, - IconWarning, - Notification, -} from 'react-windy-ui'; - -export default function Notification2() { - return <> - - - - - - - - - - ; - -} -``` -[Notification2_END_zh_CN] - -[Notification2_BEGIN_en_US] -[Notification2_END_en_US] ----------------------------------- - -[Notification3_BEGIN_zh_CN] -### 示例3: 显示位置 -
- 提示 -
- 可以设置为四个位置： topLeft、topRight、bottomLeft、bottomRight。您可以给每一个消息指定对应的Position, - 也可以通过全局Config对象给所有的消息指定显示位置。 -
-
- -```jsx -import React from 'react'; -import {Button, Notification} from 'react-windy-ui'; - -export default function Notification3() { - return <> - - - - - - - - - - ; - -} -``` -[Notification3_END_zh_CN] - -[Notification3_BEGIN_en_US] -[Notification3_END_en_US] ----------------------------------- - -[Notification4_BEGIN_zh_CN] -### 示例4: 全局设置 -
- 提示 -
- 当一系列显示消息要遵循统一的规则去展示时，您可以使用Notification.config()方法去配置一个全局的config对象。 - Notification中的消息队列将在每个消息体上应用配置的全局设定。需要注意的是，修改后，这个全局对象对这个页面的其他示例也有影响。 - 在这个示例中一旦修改了hasCloseIcon、duration、position属性，会在useEffect中调用Notification.config()方法去配置一个全局的对象。 - 而且这个方法会将传入的参数与已有的全局对象里面的参数进行合并操作。也就是说如果只修改了position属性，您可以只设置一个 - {position: 'topCenter'}对象，在Notification内部会负责与其他参数的合并组装，您无需担心其他属性是否会被丢弃掉的问题。 - 这个示例展示了您可以告诉Notification是否要显示关闭的Icon, 消息持续显示多久以及显示的位置。 -
-
- -```jsx -import React, {useEffect, useState} from 'react'; -import {Button, Input, Notification, Toggle, Select} from 'react-windy-ui'; - -export default function Notification4() { - const [duration, setDuration] = useState(5000); - const [hasCloseIcon, setCloseIcon] = useState(true); - const [position, setPosition] = useState('topRight'); - - useEffect(() => { - //update the global configuration of Notification - //while the dependencies updated - Notification.config({ - hasCloseIcon, - duration, - position, - }); - }, [hasCloseIcon, duration, position]); - - const changeCloseIcon = (val) => { - setCloseIcon(val); - }; - - const changeDuration = (e) => { - setDuration(parseInt(e.target.value)); - }; - - return <> -
- Duration: - - changeDuration(val)}/>  ms -
-
- changeCloseIcon(val)} - content={{on: 'Close icon', off: 'Close icon'}}/> -
-
- Position: - -
- - - - - ; - -} -``` -[Notification4_END_zh_CN] - -[Notification4_BEGIN_en_US] -[Notification4_END_en_US] ----------------------------------- - -[Notification5_BEGIN_zh_CN] -### 示例5: 自定义消息 -
- 提示 -
- 除了全局的config配置外，您还可以给每个消息添加自定义属性。比如设置duration、position后，可以让单条消息以 - 在指定的位置显示，并且持续显示多久。由于Notification内部依靠Alert组件实现的，如果需要更改每个消息的属性， - 可以在alertProps中配置。具体的可配置项可以参阅Alert的API。这个例子中，会在右上角位置显示一条白字黑底的消息 -
-
- -```jsx -import React from 'react'; -import {Button, Notification} from 'react-windy-ui'; - -export default function Notification5() { - - const sendMessage = () => { - Notification.info({ - title: 'Simple Message', - body: 'Will close in 2 seconds.', - - duration: 3000, - position: 'topRight', - - alertProps: { - hasIcon: true, - hasCloseIcon: false, - iconStyle: { - color: 'white', - }, - style: { - background: 'black', - color: 'white', - border: 'none', - }, - closeStyle: {}, - }, - }); - }; - - return <> - - ; -} -``` -[Notification5_END_zh_CN] - -[Notification5_BEGIN_en_US] -[Notification5_END_en_US] ----------------------------------- - -[Notification6_BEGIN_zh_CN] -### 示例6: 更改间距 -
- 提示 -
- 默认情况下，页面上存放消息的容器会在四个角落以一定的间隔显示。比如对于leftRight位置，会在当前窗口top距离为'1.5rem', - right距离为'1.5rem'的地方排列显示消息。如果需要更改这个间距，则可以修改全局配置，设置对应的rect属性。 -
    -
  • 当topLeft时，可只设置rect中的top、left属性
    • -
  • 当topRight时，可只设置rect中的top、right属性
    • -
  • 当bottomLeft时，可只设置rect中的bottom、left属性
    • -
  • 当bottomRight时，可只设置rect中的bottom、right属性
    • -
  • 当topCenter时，可只设置rect中的top属性, 因为在水平方向上始终是居中显示的
    • -
- - 在这个示例中选择一个方位后，点击“Update the global Configuration”，并点击Message按钮，可以查看到消息在垂直方向 - 上5rem、水平方向上2rem的位置显示。 - -
-
- -```jsx -import React, {useRef, useState} from 'react'; -import {Button, Notification, Toggle, Select} from 'react-windy-ui'; - -export default function Notification6() { - const [position, setPosition] = useState('topRight'); - - //a reference to previous global config - const defaultConfigRef = useRef({...Notification.getConfig()}); - - const updateGlobalConf = () => { - Notification.config({ - rect: { - top: '5rem', - left: '2rem', - bottom: '5rem', - right: '2rem', - }, - }); - }; - - const revert = () => { - Notification.config(defaultConfigRef.current); - }; - - const toggle = (active) => { - if (active) { - updateGlobalConf(); - } else { - revert(); - } - }; - - const sendMessage = () => { - Notification.simple({body: 'Hello folks', position: position}); - }; - return <> -
- Position: - -
-
- toggle(active)} - content={{ - on: 'Update the global Configuration', - off: 'Update the global Configuration', - }}/> -
- - ; -} -``` -[Notification6_END_zh_CN] - -[Notification6_BEGIN_en_US] -[Notification6_END_en_US] ----------------------------------- - -[Notification7_BEGIN_zh_CN] -### 示例7: 取消延时关闭 -
- 提示 -
- 默认情况下，消息会在显示的5秒后自行关闭。这个时间可以通过duration指定，如果只需要手动关闭，则可以将duration - 设置为0或负数值。 -
-
- -```jsx -import React from 'react'; -import {Button, Notification, Toggle} from 'react-windy-ui'; - -export default function Notification7() { - - const toggle = (active) => { - if (active) { - Notification.config({duration: 5000}); - } else { - Notification.config({duration: 0});//0 or negative number - } - }; - - const sendMessage = () => { - Notification.simple('This is a message.'); - }; - - return <> -
- toggle(active)} - content={{ - on: 'Auto close', - off: 'Auto close', - }}/> -
- - ; -} -``` -[Notification7_END_zh_CN] - -[Notification7_BEGIN_en_US] -[Notification7_END_en_US] ----------------------------------- - - -[Notification8_BEGIN_zh_CN] -### 示例8: 简洁类型的消息 -
- 提示 -
- 对于info、ok、warning、error这类的消息，会有独特的样式。如果需要简洁点的消息，可以考虑mini或simple类型。 - 这里演示了如果使用simple类型的消息，去构造对应info、ok、warning、error这样的消息。 -
-
- -```jsx -import React from 'react'; -import { - Button, Notification, IconError, - IconInfo, - IconOk, - IconWarning, -} from 'react-windy-ui'; - -export default function Notification8() { - Notification.config({ - position: 'topRight', - }); - return <> - - - - - - - - - - ; - -} -``` -[Notification8_END_zh_CN] - -[Notification8_BEGIN_en_US] -[Notification8_END_en_US] ----------------------------------- \ No newline at end of file diff --git a/src/docs/pages/notification/md/api.md b/src/docs/pages/notification/md/api.md new file mode 100644 index 00000000..e5873037 --- /dev/null +++ b/src/docs/pages/notification/md/api.md @@ -0,0 +1,42 @@ +--- + order: 100 + type: text + zh_CN: API + en_US: API + editUrl: $BASE/docs/pages/notification/md/api.md +--- + ++++ zh_CN +## API [editUrl] + +Notification的全局配置属性如下所示 + +| 属性 | 名称 | 类型 | 默认值 | 描述 | +| --- | --- | --- | --- | --- | +| position | 显示位置 | string | topRight | 当需要获取到根节点的dom对象时可设置此属性 | +| duration | 消息持续显示的时间 | number | 5000ms | | +| hasCloseIcon | 是否显示关闭消息的Icon | boolean | true | | +| onClose | 关闭某个消息的回调 | function | - | 当消息被关闭时触发，同时会将消息对应的配置传入该方法。 | +| rect | 上下左右四个方位的距离 | object | 所有默认值全部为1.5rem | 当topLeft时，可只设置rect中的top、left属性。当topRight时，可只设置rect中的top、right属性。当bottomLeft时，可只设置rect中的bottom、left属性。当bottomRight时，可只设置rect中的bottom、right属性。| + +您可以使用调用Notification的config方法去设置: Notification.config({...})。 + +
+每个消息可自定义设置的属性有 + +| 属性 | 名称 | 类型 | 默认值 | 描述 | +| --- | --- | --- | --- | --- | +| position | 显示位置 | string | topRight | 当需要获取到根节点的dom对象时可设置此属性 | +| duration | 消息持续显示的时间 | number | 5000ms | | +| title | Alert消息标题 | react node | - | | +| body | Alert消息内容 | react node | - | | +| icon | Alert显示的图标 | react node | - | | +| onClose | 关闭消息的回调 | function | - | 当消息被关闭时触发 | +| alertProps | Alert消息的配置对象 | object | - | 对应Alert组件的API属性，可参阅Alert的API | +上面这些参数在显示各个消息时设置，比如Notification.info({duration: 3000, title: 'title' .....})。 + + + ++++ en_US +## API [editUrl] + diff --git a/src/docs/pages/notification/md/notification1.md b/src/docs/pages/notification/md/notification1.md new file mode 100644 index 00000000..985b94dc --- /dev/null +++ b/src/docs/pages/notification/md/notification1.md @@ -0,0 +1,17 @@ +--- +order: 1 +type: sample +zh_CN: 普通的Notification +en_US: Notification +editUrl: $BASE/docs/pages/notification/md/notification1.md +--- + ++++ zh_CN +通过调用Notification的info、ok、warning、error、simple方法，可在Notification框体中显示对应的 + Alert。要显示一个Alert, 您可以简单地传入一个消息字符串，也可以传入一个具体的config对像。 + ++++ en_US +Notification1 + ++++ SampleCode +fileName: Notification1 diff --git a/src/docs/pages/notification/md/notification2.md b/src/docs/pages/notification/md/notification2.md new file mode 100644 index 00000000..f59dfc6e --- /dev/null +++ b/src/docs/pages/notification/md/notification2.md @@ -0,0 +1,16 @@ +--- +order: 2 +type: sample +zh_CN: Notification的类型 +en_US: Notification +editUrl: $BASE/docs/pages/notification/md/notification2.md +--- + ++++ zh_CN +Notification与Alert类型一致，主要提供了info、ok、warning、error、simple这几种类型。 + ++++ en_US +Notification2 + ++++ SampleCode +fileName: Notification2 diff --git a/src/docs/pages/notification/md/notification3.md b/src/docs/pages/notification/md/notification3.md new file mode 100644 index 00000000..99d3193d --- /dev/null +++ b/src/docs/pages/notification/md/notification3.md @@ -0,0 +1,17 @@ +--- +order: 3 +type: sample +zh_CN: 显示位置 +en_US: Notification +editUrl: $BASE/docs/pages/notification/md/notification3.md +--- + ++++ zh_CN +可以设置为四个位置： topLeft、topRight、bottomLeft、bottomRight。您可以给每一个消息指定对应的Position, + 也可以通过全局Config对象给所有的消息指定显示位置。 + ++++ en_US +Notification3 + ++++ SampleCode +fileName: Notification3 diff --git a/src/docs/pages/notification/md/notification4.md b/src/docs/pages/notification/md/notification4.md new file mode 100644 index 00000000..87b8229e --- /dev/null +++ b/src/docs/pages/notification/md/notification4.md @@ -0,0 +1,21 @@ +--- +order: 4 +type: sample +zh_CN: 全局设置 +en_US: Notification +editUrl: $BASE/docs/pages/notification/md/notification4.md +--- + ++++ zh_CN +当一系列显示消息要遵循统一的规则去展示时，您可以使用Notification.config()方法去配置一个全局的config对象。 + Notification中的消息队列将在每个消息体上应用配置的全局设定。需要注意的是，修改后，这个全局对象对这个页面的其他示例也有影响。 + 在这个示例中一旦修改了hasCloseIcon、duration、position属性，会在useEffect中调用Notification.config()方法去配置一个全局的对象。 + 而且这个方法会将传入的参数与已有的全局对象里面的参数进行合并操作。也就是说如果只修改了position属性，您可以只设置一个 + {position: 'topCenter'}对象，在Notification内部会负责与其他参数的合并组装，您无需担心其他属性是否会被丢弃掉的问题。 + 这个示例展示了您可以告诉Notification是否要显示关闭的Icon, 消息持续显示多久以及显示的位置。 + ++++ en_US +Notification4 + ++++ SampleCode +fileName: Notification4 diff --git a/src/docs/pages/notification/md/notification5.md b/src/docs/pages/notification/md/notification5.md new file mode 100644 index 00000000..382e239a --- /dev/null +++ b/src/docs/pages/notification/md/notification5.md @@ -0,0 +1,19 @@ +--- +order: 5 +type: sample +zh_CN: 全局设置 +en_US: Notification +editUrl: $BASE/docs/pages/notification/md/notification5.md +--- + ++++ zh_CN +除了全局的config配置外，您还可以给每个消息添加自定义属性。比如设置duration、position后，可以让单条消息以 + 在指定的位置显示，并且持续显示多久。由于Notification内部依靠Alert组件实现的，如果需要更改每个消息的属性， + 可以在alertProps中配置。具体的可配置项可以参阅Alert的API。这个例子中，会在右上角位置显示一条白字黑底的消息 + + ++++ en_US +Notification5 + ++++ SampleCode +fileName: Notification5 diff --git a/src/docs/pages/notification/md/notification6.md b/src/docs/pages/notification/md/notification6.md new file mode 100644 index 00000000..e8089f87 --- /dev/null +++ b/src/docs/pages/notification/md/notification6.md @@ -0,0 +1,28 @@ +--- +order: 6 +type: sample +zh_CN: 全局设置 +en_US: Notification +editUrl: $BASE/docs/pages/notification/md/notification6.md +--- + ++++ zh_CN + 默认情况下，页面上存放消息的容器会在四个角落以一定的间隔显示。比如对于leftRight位置，会在当前窗口top距离为'1.5rem', + right距离为'1.5rem'的地方排列显示消息。如果需要更改这个间距，则可以修改全局配置，设置对应的rect属性。 +
    +
  • 当topLeft时，可只设置rect中的top、left属性
    • +
  • 当topRight时，可只设置rect中的top、right属性
    • +
  • 当bottomLeft时，可只设置rect中的bottom、left属性
    • +
  • 当bottomRight时，可只设置rect中的bottom、right属性
    • +
  • 当topCenter时，可只设置rect中的top属性, 因为在水平方向上始终是居中显示的
    • +
+ + 在这个示例中选择一个方位后，点击“Update the global Configuration”，并点击Message按钮，可以查看到消息在垂直方向 + 上5rem、水平方向上2rem的位置显示。 + + ++++ en_US +Notification6 + ++++ SampleCode +fileName: Notification6 diff --git a/src/docs/pages/notification/md/notification7.md b/src/docs/pages/notification/md/notification7.md new file mode 100644 index 00000000..07476b60 --- /dev/null +++ b/src/docs/pages/notification/md/notification7.md @@ -0,0 +1,18 @@ +--- +order: 7 +type: sample +zh_CN: 取消延时关闭 +en_US: Notification +editUrl: $BASE/docs/pages/notification/md/notification7.md +--- + ++++ zh_CN +默认情况下，消息会在显示的5秒后自行关闭。这个时间可以通过duration指定，如果只需要手动关闭，则可以将duration +设置为0或负数值。 + + ++++ en_US +Notification7 + ++++ SampleCode +fileName: Notification7 diff --git a/src/docs/pages/notification/md/notification8.md b/src/docs/pages/notification/md/notification8.md new file mode 100644 index 00000000..6aa06fcf --- /dev/null +++ b/src/docs/pages/notification/md/notification8.md @@ -0,0 +1,18 @@ +--- +order: 8 +type: sample +zh_CN: 简洁类型的消息 +en_US: Notification +editUrl: $BASE/docs/pages/notification/md/notification8.md +--- + ++++ zh_CN +对于info、ok、warning、error这类的消息，会有独特的样式。如果需要简洁点的消息，可以考虑mini或simple类型。 +这里演示了如果使用simple类型的消息，去构造对应info、ok、warning、error这样的消息。 + + ++++ en_US +Notification8 + ++++ SampleCode +fileName: Notification8 diff --git a/src/docs/pages/notification/md/title.md b/src/docs/pages/notification/md/title.md new file mode 100644 index 00000000..64d67a62 --- /dev/null +++ b/src/docs/pages/notification/md/title.md @@ -0,0 +1,22 @@ +--- + order: 0 + type: text + zh_CN: 通知 Notification + en_US: Notification + editUrl: $BASE/docs/pages/notification/md/title.md +--- + ++++ zh_CN +## 通知 Notification [editUrl] +Notification组件结合使用了Alert组件，以便展示一系列的全局消息。 + +* 默认情况下可以在TopLeft、TopRight、BottomLeft、BottomRight自个方位展示 +* 消息框中的Alert可以定时关闭，也可手动关闭 + +另外，需要提醒的是，以下示例中有些涉及到更改全局配置的，会对其他的示例有影响。如果需要恢复默认效果，请重新刷新下页面。 + + + ++++ en_US +## Notification [editUrl] + diff --git a/src/docs/pages/pagination/PaginationIndex.js b/src/docs/pages/pagination/PaginationIndex.js index 4641b2f9..5168d5dc 100755 --- a/src/docs/pages/pagination/PaginationIndex.js +++ b/src/docs/pages/pagination/PaginationIndex.js @@ -1,25 +1,13 @@ import React from 'react'; -import DocPage from '../../utils/DocPage'; -import Pagination1 from './samples/Pagination1'; -import Pagination2 from './samples/Pagination2'; -import Pagination3 from './samples/Pagination3'; -import Pagination4 from './samples/Pagination4'; -import Pagination5 from './samples/Pagination5'; +import DocPage2 from '../../utils/DocPage2'; -/** - * It maps the text blocks in Markdown file - */ -const componentMapping = { - Pagination1: , - Pagination2: , - Pagination3: , - Pagination4: , - Pagination5: , -}; +const requireMd = require.context('!raw-loader!./md', false, /.md$/); +const requireCode = require.context('!raw-loader!./samples', false, /.js$/); +const requireJs = require.context('./samples', false, /.js$/); -export default function PaginationIndex(props) { - return import('./doc.md')} - componentMapping={componentMapping} - />; +export default function PaginationIndex() { + return ; } \ No newline at end of file diff --git a/src/docs/pages/pagination/md/api.md b/src/docs/pages/pagination/md/api.md new file mode 100644 index 00000000..e1b2244e --- /dev/null +++ b/src/docs/pages/pagination/md/api.md @@ -0,0 +1,16 @@ +--- + order: 100 + type: text + zh_CN: API + en_US: API + editUrl: $BASE/docs/pages/pagination/md/api.md +--- + ++++ zh_CN +## API [editUrl] + + + ++++ en_US +## API [editUrl] + diff --git a/src/docs/pages/pagination/md/pagination1.md b/src/docs/pages/pagination/md/pagination1.md new file mode 100644 index 00000000..2f64bae3 --- /dev/null +++ b/src/docs/pages/pagination/md/pagination1.md @@ -0,0 +1,17 @@ +--- +order: 1 +type: sample +zh_CN: 分页 +en_US: Pagination +editUrl: $BASE/docs/pages/pagination/md/pagination1.md +--- + ++++ zh_CN +通过调用Notification的info、ok、warning、error、simple方法，可在Notification框体中显示对应的 + Alert。要显示一个Alert, 您可以简单地传入一个消息字符串，也可以传入一个具体的config对像。 + ++++ en_US +Pagination1 + ++++ SampleCode +fileName: Pagination1 diff --git a/src/docs/pages/pagination/md/pagination2.md b/src/docs/pages/pagination/md/pagination2.md new file mode 100644 index 00000000..13a5d35e --- /dev/null +++ b/src/docs/pages/pagination/md/pagination2.md @@ -0,0 +1,16 @@ +--- +order: 2 +type: sample +zh_CN: 分页 +en_US: Pagination +editUrl: $BASE/docs/pages/pagination/md/pagination2.md +--- + ++++ zh_CN + + ++++ en_US +Pagination2 + ++++ SampleCode +fileName: Pagination2 diff --git a/src/docs/pages/pagination/md/pagination3.md b/src/docs/pages/pagination/md/pagination3.md new file mode 100644 index 00000000..314488da --- /dev/null +++ b/src/docs/pages/pagination/md/pagination3.md @@ -0,0 +1,16 @@ +--- +order: 3 +type: sample +zh_CN: 分页 +en_US: Pagination +editUrl: $BASE/docs/pages/pagination/md/pagination3.md +--- + ++++ zh_CN + + ++++ en_US +Pagination3 + ++++ SampleCode +fileName: Pagination3 diff --git a/src/docs/pages/pagination/md/pagination4.md b/src/docs/pages/pagination/md/pagination4.md new file mode 100644 index 00000000..2733e0d6 --- /dev/null +++ b/src/docs/pages/pagination/md/pagination4.md @@ -0,0 +1,16 @@ +--- +order: 4 +type: sample +zh_CN: 分页 +en_US: Pagination +editUrl: $BASE/docs/pages/pagination/md/pagination4.md +--- + ++++ zh_CN + + ++++ en_US +Pagination4 + ++++ SampleCode +fileName: Pagination4 diff --git a/src/docs/pages/pagination/md/pagination5.md b/src/docs/pages/pagination/md/pagination5.md new file mode 100644 index 00000000..091b438f --- /dev/null +++ b/src/docs/pages/pagination/md/pagination5.md @@ -0,0 +1,16 @@ +--- +order: 5 +type: sample +zh_CN: 分页 +en_US: Pagination +editUrl: $BASE/docs/pages/pagination/md/pagination5.md +--- + ++++ zh_CN + + ++++ en_US +Pagination5 + ++++ SampleCode +fileName: Pagination5 diff --git a/src/docs/pages/pagination/md/title.md b/src/docs/pages/pagination/md/title.md new file mode 100644 index 00000000..d957ab28 --- /dev/null +++ b/src/docs/pages/pagination/md/title.md @@ -0,0 +1,15 @@ +--- + order: 0 + type: text + zh_CN: 分页 Pagination + en_US: Notification + editUrl: $BASE/docs/pages/pagination/md/title.md +--- + ++++ zh_CN +## 分页 Pagination [editUrl] + + ++++ en_US +## Pagination [editUrl] + diff --git a/src/docs/pages/popconfirm/PcIndex.js b/src/docs/pages/popconfirm/PcIndex.js index 06f4e83f..51243403 100755 --- a/src/docs/pages/popconfirm/PcIndex.js +++ b/src/docs/pages/popconfirm/PcIndex.js @@ -1,27 +1,13 @@ import React from 'react'; -import DocPage from '../../utils/DocPage'; -import Pc1 from './Pc1'; -import Pc2 from './Pc2'; -import Pc3 from './Pc3'; -import Pc4 from './Pc4'; -import Pc5 from './Pc5'; -import Pc6 from './Pc6'; +import DocPage2 from '../../utils/DocPage2'; -/** - * It maps the text blocks in Markdown file - */ -const componentMapping = { - Pc1: , - Pc2: , - Pc3: , - Pc4: , - Pc5: , - Pc6: , -}; +const requireMd = require.context('!raw-loader!./md', false, /.md$/); +const requireCode = require.context('!raw-loader!./samples', false, /.js$/); +const requireJs = require.context('./samples', false, /.js$/); -export default function PcIndex(props) { - return import('./doc.md')} - componentMapping={componentMapping} - />; +export default function PcIndex() { + return ; } \ No newline at end of file diff --git a/src/docs/pages/popconfirm/md/api.md b/src/docs/pages/popconfirm/md/api.md new file mode 100644 index 00000000..cea31b06 --- /dev/null +++ b/src/docs/pages/popconfirm/md/api.md @@ -0,0 +1,46 @@ +--- + order: 100 + type: text + zh_CN: API + en_US: API + editUrl: $BASE/docs/pages/popconfirm/md/api.md +--- + ++++ zh_CN +## API [editUrl] + +- PopConfirm属性定义: + +| 属性 | 名称 | 类型 | 默认值 | 描述 | +| --- | --- | --- | --- | --- | +| ref | Dom对象的引用 | function \| ref | - | 当需要获取dom对象时可设置此属性 | +| className | 样式名称 | string | | | +| extraClassName | 额外添加的样式名称 | string | - | | +| body | 描述内容 | react node | - | | +| okText | OK按钮上的文字 | string | Ok | | +| cancelText | No按钮上的文字 | string | No | | +| okButtonProps | OK按钮的属性 | object | | | +| cancelButtonProps | cancel按钮的属性 | object | | | +| onOk | 点击OK按钮后的回调 | function | | | +| onCancel | 点击No按钮后的回调 | function | | | +| icon | 图标 | react node | IconWarning2 | | +| justifyFooter | 按钮的排列方式 | string | | | +| position | 弹出框的位置 | string | 参见下面详细描述 | | + +
+ +对于justifyFooter属性，可以配置以下值： + +start, end, center, around, between, evenly + +对于position属性，可以配置以下值： + +top, topLeft, topRight, bottom, bottomLeft, bottomRight, +left, leftTop, leftBottom, right, rightTop, rightBottom + +
+ + ++++ en_US +## API [editUrl] + diff --git a/src/docs/pages/popconfirm/md/pc1.md b/src/docs/pages/popconfirm/md/pc1.md new file mode 100644 index 00000000..1665701a --- /dev/null +++ b/src/docs/pages/popconfirm/md/pc1.md @@ -0,0 +1,16 @@ +--- +order: 1 +type: sample +zh_CN: 简单示例 +en_US: PopConfirm +editUrl: $BASE/docs/pages/popconfirm/md/pc1.md +--- + ++++ zh_CN +将支持点击的控件放置在PopConfirm中，点击后将会出现确认弹出框。 + ++++ en_US +popconfirm + ++++ SampleCode +fileName: Pc1 diff --git a/src/docs/pages/popconfirm/md/pc2.md b/src/docs/pages/popconfirm/md/pc2.md new file mode 100644 index 00000000..4de7812d --- /dev/null +++ b/src/docs/pages/popconfirm/md/pc2.md @@ -0,0 +1,16 @@ +--- +order: 2 +type: sample +zh_CN: 按钮点击处理 +en_US: PopConfirm +editUrl: $BASE/docs/pages/popconfirm/md/pc2.md +--- + ++++ zh_CN +提供onOk、onCancel回调函数，点击确认框按钮后处理对应的事件。 + ++++ en_US +popconfirm + ++++ SampleCode +fileName: Pc2 diff --git a/src/docs/pages/popconfirm/md/pc3.md b/src/docs/pages/popconfirm/md/pc3.md new file mode 100644 index 00000000..2cf328e8 --- /dev/null +++ b/src/docs/pages/popconfirm/md/pc3.md @@ -0,0 +1,17 @@ +--- +order: 3 +type: sample +zh_CN: 自定义按钮文字及图标 +en_US: PopConfirm +editUrl: $BASE/docs/pages/popconfirm/md/pc3.md +--- + ++++ zh_CN +设置okText、cancelText属性，将在对按钮上显示对应的文字。如果需要更改图标，则可以设置icon属性。 + + ++++ en_US +popconfirm + ++++ SampleCode +fileName: Pc3 diff --git a/src/docs/pages/popconfirm/md/pc4.md b/src/docs/pages/popconfirm/md/pc4.md new file mode 100644 index 00000000..7e3b8547 --- /dev/null +++ b/src/docs/pages/popconfirm/md/pc4.md @@ -0,0 +1,17 @@ +--- +order: 4 +type: sample +zh_CN: 设置按钮的对齐方式 +en_US: PopConfirm +editUrl: $BASE/docs/pages/popconfirm/md/pc4.md +--- + ++++ zh_CN +设置justifyFooter属性，则可控制按钮在水平方向的排列方式。默认情况下，按钮靠右排列。这里只示例了左中右三个方向， +具体可设置的值请参阅API。 + ++++ en_US +popconfirm + ++++ SampleCode +fileName: Pc4 diff --git a/src/docs/pages/popconfirm/md/pc5.md b/src/docs/pages/popconfirm/md/pc5.md new file mode 100644 index 00000000..bb3a6f40 --- /dev/null +++ b/src/docs/pages/popconfirm/md/pc5.md @@ -0,0 +1,17 @@ +--- +order: 5 +type: sample +zh_CN: 设置弹出框的位置 +en_US: PopConfirm +editUrl: $BASE/docs/pages/popconfirm/md/pc5.md +--- + ++++ zh_CN +设置position属性，则可控制弹出框显示的位置。position属性可设置的值，请参阅Popover的API。 + + ++++ en_US +popconfirm + ++++ SampleCode +fileName: Pc5 diff --git a/src/docs/pages/popconfirm/md/pc6.md b/src/docs/pages/popconfirm/md/pc6.md new file mode 100644 index 00000000..1ee615ab --- /dev/null +++ b/src/docs/pages/popconfirm/md/pc6.md @@ -0,0 +1,18 @@ +--- +order: 6 +type: sample +zh_CN: 自定义弹出框、按钮的props属性 +en_US: PopConfirm +editUrl: $BASE/docs/pages/popconfirm/md/pc6.md +--- + ++++ zh_CN +由于PopConfirm内部使用了Popover组件，你可以直接将Popover的props属性直接设置在PopConfirm上。比如这里的 + position、offset、hasBorder、hasArrow、hasBox都是Popover上的属性。如果需要设置两个按钮的props属性， + 则可以配置okButtonProps、cancelButtonProps。 + ++++ en_US +popconfirm + ++++ SampleCode +fileName: Pc6 diff --git a/src/docs/pages/popconfirm/md/title.md b/src/docs/pages/popconfirm/md/title.md new file mode 100644 index 00000000..3421e4b8 --- /dev/null +++ b/src/docs/pages/popconfirm/md/title.md @@ -0,0 +1,20 @@ +--- + order: 0 + type: text + zh_CN: 确认 PopConfirm + en_US: PopConfirm + editUrl: $BASE/docs/pages/popconfirm/md/title.md +--- + ++++ zh_CN +## 确认 PopConfirm [editUrl] +弹出确认弹出框，在当前页面额外弹出一个小框体，提示用户确认操作。 + +- 与Modal相比，在页面占用更小的空间 +- 提供了一个快捷的确认弹出框 +- 不打断用户的关注焦点，从而提供更好的操作体验 + + ++++ en_US +## Notification [editUrl] + diff --git a/src/docs/pages/popconfirm/Pc1.js b/src/docs/pages/popconfirm/samples/Pc1.js similarity index 100% rename from src/docs/pages/popconfirm/Pc1.js rename to src/docs/pages/popconfirm/samples/Pc1.js diff --git a/src/docs/pages/popconfirm/Pc2.js b/src/docs/pages/popconfirm/samples/Pc2.js similarity index 100% rename from src/docs/pages/popconfirm/Pc2.js rename to src/docs/pages/popconfirm/samples/Pc2.js diff --git a/src/docs/pages/popconfirm/Pc3.js b/src/docs/pages/popconfirm/samples/Pc3.js similarity index 100% rename from src/docs/pages/popconfirm/Pc3.js rename to src/docs/pages/popconfirm/samples/Pc3.js diff --git a/src/docs/pages/popconfirm/Pc4.js b/src/docs/pages/popconfirm/samples/Pc4.js similarity index 100% rename from src/docs/pages/popconfirm/Pc4.js rename to src/docs/pages/popconfirm/samples/Pc4.js diff --git a/src/docs/pages/popconfirm/Pc5.js b/src/docs/pages/popconfirm/samples/Pc5.js similarity index 100% rename from src/docs/pages/popconfirm/Pc5.js rename to src/docs/pages/popconfirm/samples/Pc5.js diff --git a/src/docs/pages/popconfirm/Pc6.js b/src/docs/pages/popconfirm/samples/Pc6.js similarity index 100% rename from src/docs/pages/popconfirm/Pc6.js rename to src/docs/pages/popconfirm/samples/Pc6.js diff --git a/src/docs/pages/popover/PopoverIndex.js b/src/docs/pages/popover/PopoverIndex.js index 33d533e9..2b199108 100755 --- a/src/docs/pages/popover/PopoverIndex.js +++ b/src/docs/pages/popover/PopoverIndex.js @@ -1,21 +1,13 @@ import React from 'react'; -import DocPage from '../../utils/DocPage'; -import Pop1 from './Pop1'; -import Pop3 from './Pop3'; -import Pop2 from './Pop2'; -import Pop4 from './Pop4'; +import DocPage2 from '../../utils/DocPage2'; +const requireMd = require.context('!raw-loader!./md', false, /.md$/); +const requireCode = require.context('!raw-loader!./samples', false, /.js$/); +const requireJs = require.context('./samples', false, /.js$/); -const componentMapping = { - Pop1: , - Pop2: , - Pop3: , - Pop4: , -}; - -export default function PopoverIndex(props) { - return import('./doc.md')} - componentMapping={componentMapping} - />; +export default function PopoverIndex() { + return ; } \ No newline at end of file diff --git a/src/docs/pages/popover/md/api.md b/src/docs/pages/popover/md/api.md new file mode 100644 index 00000000..5afc688a --- /dev/null +++ b/src/docs/pages/popover/md/api.md @@ -0,0 +1,16 @@ +--- + order: 100 + type: text + zh_CN: API + en_US: API + editUrl: $BASE/docs/pages/popover/md/api.md +--- + ++++ zh_CN +## API [editUrl] + + + ++++ en_US +## API [editUrl] + diff --git a/src/docs/pages/popover/md/pop1.md b/src/docs/pages/popover/md/pop1.md new file mode 100644 index 00000000..b130fc73 --- /dev/null +++ b/src/docs/pages/popover/md/pop1.md @@ -0,0 +1,17 @@ +--- +order: 1 +type: sample +zh_CN: 简单示例 +en_US: popover +editUrl: $BASE/docs/pages/popover/md/pop1.md +--- + ++++ zh_CN +一个最简单的Popover示例，Popover默认情况下在下方显示。在body中放置需要显示的内容，如果需要显示标题，可以设置一个header。 + + ++++ en_US +popover + ++++ SampleCode +fileName: Pop1 diff --git a/src/docs/pages/popover/md/pop2.md b/src/docs/pages/popover/md/pop2.md new file mode 100644 index 00000000..8a4774eb --- /dev/null +++ b/src/docs/pages/popover/md/pop2.md @@ -0,0 +1,16 @@ +--- +order: 2 +type: sample +zh_CN: 激活弹出菜单 +en_US: popover +editUrl: $BASE/docs/pages/popover/md/pop2.md +--- + ++++ zh_CN +设置activeBy属性可以选择Popover的弹出方式，activeBy可以设置成'hover'或'click'。这里示例了当鼠标 悬停在Button上时，激活弹出菜单。 + ++++ en_US +popover + ++++ SampleCode +fileName: Pop2 diff --git a/src/docs/pages/popover/md/pop3.md b/src/docs/pages/popover/md/pop3.md new file mode 100644 index 00000000..0101d88f --- /dev/null +++ b/src/docs/pages/popover/md/pop3.md @@ -0,0 +1,21 @@ +--- +order: 3 +type: sample +zh_CN: 显示位置 +en_US: popover +editUrl: $BASE/docs/pages/popover/md/pop3.md +--- + ++++ zh_CN +可在十二个方位显示，可相应地设置position属性为以下值： + Top方位： 'topLeft'、'top'、'topRight'； + Bottom方位: 'bottomLeft'、'bottom'、'bottomRight'； + Left方位: 'leftTop'、'left'、'leftBottom'； + Right方位: 'rightTop'、'right'、'rightBottom'。 + + ++++ en_US +popover + ++++ SampleCode +fileName: Pop3 diff --git a/src/docs/pages/popover/md/pop4.md b/src/docs/pages/popover/md/pop4.md new file mode 100644 index 00000000..b89a45ab --- /dev/null +++ b/src/docs/pages/popover/md/pop4.md @@ -0,0 +1,21 @@ +--- +order: 4 +type: sample +zh_CN: Popover的显示和关闭 +en_US: popover +editUrl: $BASE/docs/pages/popover/md/pop4.md +--- + ++++ zh_CN +在这个示例中，一旦Popover显示后，就只能通过点击Popover中的Close按钮去关闭。这里就是将active和onChange函数一起使用后达到的效果。 + Popover有defaultActive和active两个属性, 用来控制Popover显示和关闭。 defaultActive属性值为true后，控件初始状态下显示Popover。但不影响后续的关闭和显示。 + defaultActive属性设置的是初始状态，可以后续被改变。但active属性与之则不同，当设置active属性后，Popover将不能被自动显示、关闭， + 此时会触发onChange调用，您需要在onChange中切换选中状态。另外，active与onChange方法需要同时提供，以便一起完成状态的切换过程。 + + + ++++ en_US +popover + ++++ SampleCode +fileName: Pop34 diff --git a/src/docs/pages/popover/md/title.md b/src/docs/pages/popover/md/title.md new file mode 100644 index 00000000..2ffe783e --- /dev/null +++ b/src/docs/pages/popover/md/title.md @@ -0,0 +1,18 @@ +--- + order: 0 + type: text + zh_CN: 弹出框 Popover + en_US: Popover + editUrl: $BASE/docs/pages/popconfirm/md/title.md +--- + ++++ zh_CN +## 弹出框 Popover [editUrl] +Popover通常用于弹出展示一段说明性的文字，例如向导、指南性的说明。**但有一点需要注意的是，Popover的children只能有一个子节点对象**。 +- 你可以在Popover中放置一段文字，也可以在其中放入一系列的控件 +- 如果以Popover为基础，你可以构建出更强大易用的组件。 + + ++++ en_US +## Popover [editUrl] + diff --git a/src/docs/pages/popover/Pop1.js b/src/docs/pages/popover/samples/Pop1.js similarity index 100% rename from src/docs/pages/popover/Pop1.js rename to src/docs/pages/popover/samples/Pop1.js diff --git a/src/docs/pages/popover/Pop2.js b/src/docs/pages/popover/samples/Pop2.js similarity index 100% rename from src/docs/pages/popover/Pop2.js rename to src/docs/pages/popover/samples/Pop2.js diff --git a/src/docs/pages/popover/Pop3.js b/src/docs/pages/popover/samples/Pop3.js similarity index 100% rename from src/docs/pages/popover/Pop3.js rename to src/docs/pages/popover/samples/Pop3.js diff --git a/src/docs/pages/popover/Pop4.js b/src/docs/pages/popover/samples/Pop4.js similarity index 100% rename from src/docs/pages/popover/Pop4.js rename to src/docs/pages/popover/samples/Pop4.js diff --git a/src/docs/pages/progress/ProgressIndex.js b/src/docs/pages/progress/ProgressIndex.js index efed78a5..427d6f26 100755 --- a/src/docs/pages/progress/ProgressIndex.js +++ b/src/docs/pages/progress/ProgressIndex.js @@ -1,22 +1,13 @@ import React from 'react'; -import DocPage from '../../utils/DocPage'; -import Progress1 from './samples/Progress1'; -import Progress2 from './samples/Progress2'; -import Progress3 from './samples/Progress3'; -import Progress4 from './samples/Progress4'; -import Progress5 from './samples/Progress5'; +import DocPage2 from '../../utils/DocPage2'; -const componentMapping = { - Progress1: , - Progress2: , - Progress3: , - Progress4: , - Progress5: , -}; +const requireMd = require.context('!raw-loader!./md', false, /.md$/); +const requireCode = require.context('!raw-loader!./samples', false, /.js$/); +const requireJs = require.context('./samples', false, /.js$/); export default function ProgressIndex() { - return import('./doc.md')} - componentMapping={componentMapping} - />; + return ; } \ No newline at end of file diff --git a/src/docs/pages/progress/md/api.md b/src/docs/pages/progress/md/api.md new file mode 100644 index 00000000..f08f382a --- /dev/null +++ b/src/docs/pages/progress/md/api.md @@ -0,0 +1,47 @@ +--- + order: 100 + type: text + zh_CN: API + en_US: API + editUrl: $BASE/docs/pages/progress/md/api.md +--- + ++++ zh_CN +## API [editUrl] +Progress的属性如下所示 + + +| 属性 | 名称 | 类型 | 默认值 | 描述 | +| --- | --- | --- | --- | --- | +| ref | 根节点Dom对象的引用 | function \| ref | - | 当需要获取到根节点的dom对象时可设置此属性 | +| className | 样式名称 | string | progress | | +| extraClassName | 额外添加的样式名称 | string | - | | +| active | 是否激活显示 | boolean | false | | +| percentValue | 当前百分百进度值 | number | 0 | 值的范围是\[0, 100\] | +| type | 类型 | string | info | 可以设置为: info、warning、ok、error | +| hasStripe | 是否显示条纹效果 | boolean | false | | +| hasAnimation | 是否显示动画效果 | boolean | false | | +| top | 是否居顶显示 | boolean | false | | +| hasContent | 是否在右侧显示进度值 | boolean | false | | +| showLoading | 是否在进度条下方显示Loader | boolean | false | | +| loaderType | Loader的类型 | string | secondary | | +| loaderSize | Loader的大小 | string | small | | +| style | progress的样式 | object | - | | +| barStyle | progress当前进度横条的样式 | object | - | | +| config | 对应不同进度下的显示配置 | Array({...}) | - | 格式如：
\[{percentValue: 30, type: 'error', content: (p) => 'OK'}\] | + +
+
+ +Progress全局方法： + +| 方法 | 名称 | 参数 | 返回值 | 描述 | +| --- | --- | --- | --- | --- | +| showTop | 显示Progress | object | - | 参数格式：{style, type, showLoading,...} ,其他参数可参见Progress的API | +| closeTop | 关闭Progress | - | - | | + + + ++++ en_US +## API [editUrl] + diff --git a/src/docs/pages/progress/md/progress1.md b/src/docs/pages/progress/md/progress1.md new file mode 100644 index 00000000..4f8cd999 --- /dev/null +++ b/src/docs/pages/progress/md/progress1.md @@ -0,0 +1,17 @@ +--- +order: 1 +type: sample +zh_CN: 简单示例 +en_US: progress +editUrl: $BASE/docs/pages/progress/md/progress1.md +--- + ++++ zh_CN + 有四种类型的Progress可供使用，对应的type可以设置为： info、ok、warning、error。当percentValue设置不同的 + 整数值后，Progress的进度将以百分百值显示当前进度。 + ++++ en_US +progress + ++++ SampleCode +fileName: Progress1 diff --git a/src/docs/pages/progress/md/progress2.md b/src/docs/pages/progress/md/progress2.md new file mode 100644 index 00000000..dfabbba4 --- /dev/null +++ b/src/docs/pages/progress/md/progress2.md @@ -0,0 +1,17 @@ +--- +order: 2 +type: sample +zh_CN: 显示条纹和动画效果 +en_US: progress +editUrl: $BASE/docs/pages/progress/md/progress2.md +--- + ++++ zh_CN +为了更好的显示效果，您可以设置hasAnimation属性去展示动画效果。设置hasStripe属性可以在进度条上显示条纹效果。 + 如果需要在右侧显示进度百分比，可以设置hasContent属性。 + ++++ en_US +progress + ++++ SampleCode +fileName: Progress2 diff --git a/src/docs/pages/progress/md/progress3.md b/src/docs/pages/progress/md/progress3.md new file mode 100644 index 00000000..1319d5e7 --- /dev/null +++ b/src/docs/pages/progress/md/progress3.md @@ -0,0 +1,17 @@ +--- +order: 3 +type: sample +zh_CN: 全局显示的进度条 +en_US: progress +editUrl: $BASE/docs/pages/progress/md/progress3.md +--- + ++++ zh_CN +如果需要类似在页面顶部显示的全局进度条，可以将top属性设置为true。而且要在style中指定top值，以便进度条在 + 顶部某处显示。另外当属性showLoading为true时，将会在进度条下面显示一个Loader。 + ++++ en_US +progress + ++++ SampleCode +fileName: Progress3 diff --git a/src/docs/pages/progress/md/progress4.md b/src/docs/pages/progress/md/progress4.md new file mode 100644 index 00000000..e862d608 --- /dev/null +++ b/src/docs/pages/progress/md/progress4.md @@ -0,0 +1,19 @@ +--- +order: 4 +type: sample +zh_CN: Progress快捷使用 +en_US: progress +editUrl: $BASE/docs/pages/progress/md/progress4.md +--- + ++++ zh_CN +Progress还提供了两个方法以程序调用方式去控制显示和关闭，这两个方法是: showTop()、closeTop()。 + 当调用showTop后，进度条在页面顶端显示，并定时更新进度。当closeTop被调用时，进度条随后显示进度完成并从界面隐藏。 + initPercentValue指定了进度条初始百分百值，每次更新时进度值会在incrementStart和incrementEnd之间随机 + 生成并递增一个新的进度值用于进度条的更新。 + ++++ en_US +progress + ++++ SampleCode +fileName: Progress4 diff --git a/src/docs/pages/progress/md/progress5.md b/src/docs/pages/progress/md/progress5.md new file mode 100644 index 00000000..f50c8ecf --- /dev/null +++ b/src/docs/pages/progress/md/progress5.md @@ -0,0 +1,17 @@ +--- +order: 5 +type: sample +zh_CN: 分段显示 +en_US: progress +editUrl: $BASE/docs/pages/progress/md/progress5.md +--- + ++++ zh_CN +Progress可以在不同进度显示不同的颜色、文字。您可以在config数组中添加对应不同百分值下的配置信息。 + + ++++ en_US +progress + ++++ SampleCode +fileName: Progress5 diff --git a/src/docs/pages/progress/md/title.md b/src/docs/pages/progress/md/title.md new file mode 100644 index 00000000..81a6e956 --- /dev/null +++ b/src/docs/pages/progress/md/title.md @@ -0,0 +1,22 @@ +--- + order: 0 + type: text + zh_CN: 进度 Progress + en_US: Progress + editUrl: $BASE/docs/pages/progress/md/title.md +--- + ++++ zh_CN +## 进度 Progress [editUrl] +Progress组件通常在界面加载或分步配置中使用，可以提示用户当前进度或者提醒用户在请求返回前需要等待一段时间。 +
+
+ +Progress组件, 其主要的功能主要有： + +- 显示一个进度条，并且显示当前进度 +- 可在页面顶部显示全局进度条，可用于界面加载时的显示 + ++++ en_US +## Progress [editUrl] + diff --git a/src/docs/pages/radio/RadioIndex.js b/src/docs/pages/radio/RadioIndex.js index 1f9ad0ad..43f58df8 100755 --- a/src/docs/pages/radio/RadioIndex.js +++ b/src/docs/pages/radio/RadioIndex.js @@ -1,27 +1,13 @@ import React from 'react'; -import DocPage from '../../utils/DocPage'; -import Radio1 from './samples/Radio1'; -import Radio2 from './samples/Radio2'; -import Radio3 from './samples/Radio3'; -import Radio4 from './samples/Radio4'; -import Radio5 from './samples/Radio5'; -import Radio6 from './samples/Radio6'; -import Radio7 from './samples/Radio7'; +import DocPage2 from '../../utils/DocPage2'; - -const componentMapping = { - Radio1: , - Radio2: , - Radio3: , - Radio4: , - Radio5: , - Radio6: , - Radio7: , -}; +const requireMd = require.context('!raw-loader!./md', false, /.md$/); +const requireCode = require.context('!raw-loader!./samples', false, /.js$/); +const requireJs = require.context('./samples', false, /.js$/); export default function RadioIndex() { - return import('./doc.md')} - componentMapping={componentMapping} - />; + return ; } \ No newline at end of file diff --git a/src/docs/pages/radio/doc.md b/src/docs/pages/radio/doc.md deleted file mode 100755 index fcd3e439..00000000 --- a/src/docs/pages/radio/doc.md +++ /dev/null @@ -1,369 +0,0 @@ ------------ Title ------------ -[TITLE_BEGIN_zh_CN] -## 单选 Radio -在一个表单里，单选框也是最常使用的组件。Radio组件常用来在一组选项中勾选一个， 如果只需要多选则可使用Checkbox组件。 -
- -Radio单选组件, 从可配置项上来说与Checkbox有相似之处，其主要的功能主要有： - -- 显示一个可供选择的组件，并且可以添加文字进行标示 -- 可以组合使用预定义的颜色样式， 修改Radio的颜色，进行定制显示 -- 可使用键盘的Tab键进行切换，并可相应键盘Enter键事件，选中该组件 -- 提供了一个Radio Group组件，用于在一组状态中切换 - -[TITLE_END_zh_CN] - - -[TITLE_BEGIN_en_US] -[TITLE_END_en_US] - -------------- Footer --------------------- -[FOOTER_BEGIN_zh_CN] -## API - -Radio的属性如下所示 - - -| 属性 | 名称 | 类型 | 默认值 | 描述 | -| --- | --- | --- | --- | --- | -| ref | 根节点Dom对象的引用 | function \| ref | - | 当需要获取到根节点的dom对象时可设置此属性 | -| className | 样式名称 | string | radio | | -| extraClassName | 额外添加的样式名称 | string | - | | -| disabled | 是否禁用 | boolean | false | | -| checked | 是否勾选状态 | boolean | false | | -| defaultChecked | 初始勾选状态 | boolean | false | | -| onChange | 状态变化触发的回调 | function | - | | -| label | 显示的提示信息 | string | - | | -| children | 子节点对象 | react node | - | | -| checkedColor | 对应选中时的颜色 | string | - | 可选的颜色参见颜色列表定义 | -| uncheckedColor | 对应去选中时的颜色 | string | - | 可选的颜色参见颜色列表定义 | -| checkedIcon | 对应去选中时的图标 | string | - | | -| uncheckedIcon | 对应去选中时的图标 | string | - | | - -
-RadioGroup的属性如下所示 - - -| 属性 | 名称 | 类型 | 默认值 | 描述 | -| --- | --- | --- | --- | --- | -| ref | 根节点Dom对象的引用 | function \| ref | - | 当需要获取到根节点的dom对象时可设置此属性 | -| className | 样式名称 | string | radio | | -| extraClassName | 额外添加的样式名称 | string | - | | -| disabled | 是否禁用 | boolean | false | | -| defaultValue | 初始选中的Radio对应的值 | string | | | -| value | 初始勾选状态 | boolean | false | | -| onChange | 状态变化触发的回调 | function | - | | -| children | 子节点对象 | react node | - | | - -[FOOTER_END_zh_CN] - -[FOOTER_BEGIN_en_US] -[FOOTER_END_en_US] - -------------- Samples --------------------- -[Radio1_BEGIN_zh_CN] -### 示例1: 普通的Radio -
- 提示 -
- Radio中要在右侧显示提示文字，可以设置label属性值或添加children子节点。 -
-
- -```jsx -import React from 'react'; -import {Radio} from 'react-windy-ui'; - -export default function Radio1() { - - return <> - console.log(checked)} label="Radio"/> - console.log('value should be 2 ' + value)}> - Value2 - - ; -} -``` - -[Radio1_END_zh_CN] - -[Radio1_BEGIN_en_US] -[Radio1_END_en_US] ----------------------------------- - -[Radio2_BEGIN_zh_CN] -### 示例2: 设置不同的颜色 -
- 提示 -
- 需要更改勾选状态下的颜色时，可以设置checkedColor属性；需要更改去勾选状态下的颜色时，可以设置uncheckedColor属性。 - 另外，如果需要更改对应的图标时，可以相应地设置checkedIcon和uncheckedIcon属性。具体checkedColor和uncheckedColor的属性可配置哪些属性值， - 请参阅API文档部分。 -
-
- -```jsx -import React from 'react'; -import {Radio} from 'react-windy-ui'; - -export default function Radio2() { - - return <> - console.log(checked)} label="Radio"/> - console.log('value should be 2 ' + value)}> - Value2 - - ; -} -``` - -[Radio2_END_zh_CN] - -[Radio2_BEGIN_en_US] -[Radio2_END_en_US] ----------------------------------- - -[Radio3_BEGIN_zh_CN] -### 示例3: 禁用Radio -
- 提示 -
- 将disabled设置为true后，将禁用对应的Radio. -
-
- -```jsx -import React from 'react'; -import {Radio} from 'react-windy-ui'; - -export default function Radio3() { - - return <> - - purple - - - - green - - - - red - - - ; -} -``` -[Radio3_END_zh_CN] - -[Radio3_BEGIN_en_US] -[Radio3_END_en_US] ----------------------------------- - - -[Radio4_BEGIN_zh_CN] -### 示例4: 设置label所在的位置 -
- 提示 -
- 设置alignLabel属性，可以将Label放置在上下左右四个方位。 -
-
- -```jsx -import React from 'react'; -import {Radio} from 'react-windy-ui'; - -export default function Radio4() { - return <> -
- - Right - - - Right - -
-
- - Left - - - Left - -
-
- - Top - - - Top - -
-
- - Bottom - - - Bottom - -
- ; -} -``` -[Radio4_END_zh_CN] - -[Radio4_BEGIN_en_US] -[Radio4_END_en_US] - ------------------------------------- - -[Radio5_BEGIN_zh_CN] -### 示例5: Radio Group -
- 提示 -
- 要使用RadioGroup，需要在children节点中添加Radio组件，同时给每个Radio设置对应的value。 - RadioGroup会根据value值进行切换，另外设置defaultValue属性，可以让对应的Radio从一开始就变成选中状态。 -
-
- -```jsx -import React from 'react'; -import {Radio, RadioGroup} from 'react-windy-ui'; - -export default function Radio5() { - return <> -
-
- console.log(val)}> - - purple - - - - green - - - - blue - - -
- -
- console.log(val)}> - - one - - - - two - - - - three - - -
-
- ; -} -``` -[Radio5_END_zh_CN] - -[Radio5_BEGIN_en_US] -[Radio5_END_en_US] - ----------------------------------- -[Radio6_BEGIN_zh_CN] -### 示例6: 使用value和onChange方法自定义实现状态的切换 -
- 提示 -
- 与defaultValue不同，一旦设置了value属性后，点击Radio时，RadioGroup将不会自动切换。您需要实现onChange回调，并自行更改 - 当前选中的Radio值，以便进行状态的切换。 -
-
- -```jsx -import React, {useState} from 'react'; -import {Radio, RadioGroup} from 'react-windy-ui'; - -export default function Radio6() { - const [value, setValue] = useState("one"); - return <> -
-
- setValue(val)}> - - one - - - - two - - - - three - - -
-
- ; -} -``` -[Radio6_END_zh_CN] -[Radio6_BEGIN_en_US] -[Radio6_END_en_US] ----------------------------------- - -[Radio7_BEGIN_zh_CN] -### 示例7: 禁用RadioGroup -
- 提示 -
- 将disabled设置为true后，将禁用对应的RadioGroup. -
-
- -```jsx -import React from 'react'; -import {Radio, RadioGroup} from 'react-windy-ui'; - -export default function Radio7() { - return <> -
-
- console.log(val)}> - - one - - - - two - - - - three - - -
-
- ; -} -``` -[Radio7_END_zh_CN] - -[Radio7_BEGIN_en_US] -[Radio7_END_en_US] ----------------------------------- \ No newline at end of file diff --git a/src/docs/pages/radio/md/api.md b/src/docs/pages/radio/md/api.md new file mode 100644 index 00000000..b41ac6ce --- /dev/null +++ b/src/docs/pages/radio/md/api.md @@ -0,0 +1,48 @@ +--- + order: 100 + type: text + zh_CN: API + en_US: API + editUrl: $BASE/docs/pages/radio/md/api.md +--- + ++++ zh_CN +## API [editUrl] +Radio的属性如下所示 + + +| 属性 | 名称 | 类型 | 默认值 | 描述 | +| --- | --- | --- | --- | --- | +| ref | 根节点Dom对象的引用 | function \| ref | - | 当需要获取到根节点的dom对象时可设置此属性 | +| className | 样式名称 | string | radio | | +| extraClassName | 额外添加的样式名称 | string | - | | +| disabled | 是否禁用 | boolean | false | | +| checked | 是否勾选状态 | boolean | false | | +| defaultChecked | 初始勾选状态 | boolean | false | | +| onChange | 状态变化触发的回调 | function | - | | +| label | 显示的提示信息 | string | - | | +| children | 子节点对象 | react node | - | | +| checkedColor | 对应选中时的颜色 | string | - | 可选的颜色参见颜色列表定义 | +| uncheckedColor | 对应去选中时的颜色 | string | - | 可选的颜色参见颜色列表定义 | +| checkedIcon | 对应去选中时的图标 | string | - | | +| uncheckedIcon | 对应去选中时的图标 | string | - | | + +
+RadioGroup的属性如下所示 + + +| 属性 | 名称 | 类型 | 默认值 | 描述 | +| --- | --- | --- | --- | --- | +| ref | 根节点Dom对象的引用 | function \| ref | - | 当需要获取到根节点的dom对象时可设置此属性 | +| className | 样式名称 | string | radio | | +| extraClassName | 额外添加的样式名称 | string | - | | +| disabled | 是否禁用 | boolean | false | | +| defaultValue | 初始选中的Radio对应的值 | string | | | +| value | 初始勾选状态 | boolean | false | | +| onChange | 状态变化触发的回调 | function | - | | +| children | 子节点对象 | react node | - | | + + ++++ en_US +## API [editUrl] + diff --git a/src/docs/pages/radio/md/radio1.md b/src/docs/pages/radio/md/radio1.md new file mode 100644 index 00000000..64c3c3b0 --- /dev/null +++ b/src/docs/pages/radio/md/radio1.md @@ -0,0 +1,16 @@ +--- +order: 1 +type: sample +zh_CN: 简单示例 +en_US: Radio +editUrl: $BASE/docs/pages/radio/md/radio1.md +--- + ++++ zh_CN +Radio中要在右侧显示提示文字，可以设置label属性值或添加children子节点。 + ++++ en_US +Radio + ++++ SampleCode +fileName: Radio1 diff --git a/src/docs/pages/radio/md/radio2.md b/src/docs/pages/radio/md/radio2.md new file mode 100644 index 00000000..d5617b47 --- /dev/null +++ b/src/docs/pages/radio/md/radio2.md @@ -0,0 +1,18 @@ +--- +order: 2 +type: sample +zh_CN: 设置不同的颜色 +en_US: Radio +editUrl: $BASE/docs/pages/radio/md/radio2.md +--- + ++++ zh_CN +需要更改勾选状态下的颜色时，可以设置checkedColor属性；需要更改去勾选状态下的颜色时，可以设置uncheckedColor属性。 + 另外，如果需要更改对应的图标时，可以相应地设置checkedIcon和uncheckedIcon属性。具体checkedColor和uncheckedColor的属性可配置哪些属性值， + 请参阅API文档部分。 + ++++ en_US +Radio + ++++ SampleCode +fileName: Radio2 diff --git a/src/docs/pages/radio/md/radio3.md b/src/docs/pages/radio/md/radio3.md new file mode 100644 index 00000000..ba6d470b --- /dev/null +++ b/src/docs/pages/radio/md/radio3.md @@ -0,0 +1,16 @@ +--- +order: 3 +type: sample +zh_CN: 禁用Radio +en_US: Radio +editUrl: $BASE/docs/pages/radio/md/radio3.md +--- + ++++ zh_CN +将disabled设置为true后，将禁用对应的Radio. + ++++ en_US +Radio + ++++ SampleCode +fileName: Radio3 diff --git a/src/docs/pages/radio/md/radio4.md b/src/docs/pages/radio/md/radio4.md new file mode 100644 index 00000000..faa33e82 --- /dev/null +++ b/src/docs/pages/radio/md/radio4.md @@ -0,0 +1,16 @@ +--- +order: 4 +type: sample +zh_CN: 设置label所在的位置 +en_US: Radio +editUrl: $BASE/docs/pages/radio/md/radio4.md +--- + ++++ zh_CN +设置alignLabel属性，可以将Label放置在上下左右四个方位。 + ++++ en_US +Radio + ++++ SampleCode +fileName: Radio4 diff --git a/src/docs/pages/radio/md/radio5.md b/src/docs/pages/radio/md/radio5.md new file mode 100644 index 00000000..3e43ed5a --- /dev/null +++ b/src/docs/pages/radio/md/radio5.md @@ -0,0 +1,18 @@ +--- +order: 5 +type: sample +zh_CN: Radio Group +en_US: Radio +editUrl: $BASE/docs/pages/radio/md/radio5.md +--- + ++++ zh_CN +要使用RadioGroup，需要在children节点中添加Radio组件，同时给每个Radio设置对应的value。 +RadioGroup会根据value值进行切换，另外设置defaultValue属性，可以让对应的Radio从一开始就变成选中状态。 + + ++++ en_US +Radio + ++++ SampleCode +fileName: Radio5 diff --git a/src/docs/pages/radio/md/radio6.md b/src/docs/pages/radio/md/radio6.md new file mode 100644 index 00000000..9be843a6 --- /dev/null +++ b/src/docs/pages/radio/md/radio6.md @@ -0,0 +1,17 @@ +--- +order: 6 +type: sample +zh_CN: 使用value和onChange方法自定义实现状态的切换 +en_US: Radio +editUrl: $BASE/docs/pages/radio/md/radio6.md +--- + ++++ zh_CN +与defaultValue不同，一旦设置了value属性后，点击Radio时，RadioGroup将不会自动切换。您需要实现onChange回调，并自行更改 + 当前选中的Radio值，以便进行状态的切换。 + ++++ en_US +Radio + ++++ SampleCode +fileName: Radio6 diff --git a/src/docs/pages/radio/md/radio7.md b/src/docs/pages/radio/md/radio7.md new file mode 100644 index 00000000..fe873359 --- /dev/null +++ b/src/docs/pages/radio/md/radio7.md @@ -0,0 +1,16 @@ +--- +order: 7 +type: sample +zh_CN: 禁用RadioGroup +en_US: Radio +editUrl: $BASE/docs/pages/radio/md/radio7.md +--- + ++++ zh_CN +将disabled设置为true后，将禁用对应的RadioGroup. + ++++ en_US +Radio + ++++ SampleCode +fileName: Radio7 diff --git a/src/docs/pages/radio/md/title.md b/src/docs/pages/radio/md/title.md new file mode 100644 index 00000000..772fdf9e --- /dev/null +++ b/src/docs/pages/radio/md/title.md @@ -0,0 +1,23 @@ +--- + order: 0 + type: text + zh_CN: 单选 Radio + en_US: Radio + editUrl: $BASE/docs/pages/radio/md/title.md +--- + ++++ zh_CN +## 单选 Radio [editUrl] +在一个表单里，单选框也是最常使用的组件。Radio组件常用来在一组选项中勾选一个， 如果只需要多选则可使用Checkbox组件。 +
+ +Radio单选组件, 从可配置项上来说与Checkbox有相似之处，其主要的功能主要有： + +- 显示一个可供选择的组件，并且可以添加文字进行标示 +- 可以组合使用预定义的颜色样式， 修改Radio的颜色，进行定制显示 +- 可使用键盘的Tab键进行切换，并可相应键盘Enter键事件，选中该组件 +- 提供了一个Radio Group组件，用于在一组状态中切换 + ++++ en_US +## Radio [editUrl] + diff --git a/src/docs/pages/select/SelectIndex.js b/src/docs/pages/select/SelectIndex.js index 4eef20d2..290dceb5 100755 --- a/src/docs/pages/select/SelectIndex.js +++ b/src/docs/pages/select/SelectIndex.js @@ -1,27 +1,13 @@ import React from 'react'; -import DocPage from '../../utils/DocPage'; -import Select1 from './Select1'; -import Select3 from './Select3'; -import Select2 from './Select2'; -import Select4 from './Select4'; -import Select5 from './Select5'; -import Select7 from './Select7'; -import Select6 from './Select6'; +import DocPage2 from '../../utils/DocPage2'; - -const componentMapping = { - Select1: , - Select2: , - Select3: , - Select4: , - Select5: , - Select6: , - Select7: , -}; +const requireMd = require.context('!raw-loader!./md', false, /.md$/); +const requireCode = require.context('!raw-loader!./samples', false, /.js$/); +const requireJs = require.context('./samples', false, /.js$/); export default function SelectIndex() { - return import('./doc.md')} - componentMapping={componentMapping} - />; + return ; } \ No newline at end of file diff --git a/src/docs/pages/select/doc.md b/src/docs/pages/select/doc.md deleted file mode 100755 index 93a1fa08..00000000 --- a/src/docs/pages/select/doc.md +++ /dev/null @@ -1,476 +0,0 @@ ------------ Title ------------ -[TITLE_BEGIN_zh_CN] -## 选择 Select -Select与Dropdown组件有相似之处，不同之处就在于，Dropdown只能单击某个选项而且不会高亮显示，但Select却可以。 - -Select主要有以下功能 -- 单选Select -- 多选Select -- 支持关键字搜索 -- Select的菜单也可以在十二个方位显示 - -[TITLE_END_zh_CN] - - -[TITLE_BEGIN_en_US] -[TITLE_END_en_US] - -------------- Footer --------------------- -[FOOTER_BEGIN_zh_CN] -[FOOTER_END_zh_CN] - -[FOOTER_BEGIN_en_US] -[FOOTER_END_en_US] - -------------- Samples --------------------- -[Select1_BEGIN_zh_CN] -### 示例1: 最简单的Popover -
- 提示 -
- 一个最简单的Select示例，需要给每个Option设置一个value属性，另外还可设置一个defaultValue去初始选中某个选项。Select的Option组件实际 - 是一个Menu的Item组件，Item上可用的属性同样也适用于Option组件。 -
-
- -```jsx -import React from 'react'; -import {Select} from 'react-windy-ui'; - -export default function Select1() { - return <> - - - ; - -} -``` - -[Select1_END_zh_CN] - -[Select1_BEGIN_en_US] -[Select1_END_en_US] ----------------------------------- -[Select2_BEGIN_zh_CN] -### 示例2: 可以搜索的Select -
- 提示 -
- 当searchable设置为true时，Select可以根据输入的值进行过滤显示。需要注意的是默认的匹配规则是，用输入的值与Option的文本而不是value值进行比较。 - 如果Option的text与输入值匹配，列表中将只显示包含输入值的Option。 -
-
- -```jsx -import React from 'react'; -import {Select, Divider} from 'react-windy-ui'; - -export default function Select2() { - return <> - - ; - -} -``` - -[Select2_END_zh_CN] - -[Select2_BEGIN_en_US] -[Select2_END_en_US] ----------------------------------- -[Select3_BEGIN_zh_CN] -### 示例3: 显示搜索中状态 -
- 提示 -
- 设置showLoader为true后，将显示一个加载中的状态。 -
-
- -```jsx -import React from 'react'; -import {Select, Divider} from 'react-windy-ui'; - -export default function Select3() { - return <> - - ; - -} -``` - -[Select3_END_zh_CN] - -[Select3_BEGIN_en_US] -[Select3_END_en_US] ----------------------------------- -[Select4_BEGIN_zh_CN] -### 示例4: 自定义搜索逻辑的Select -
- 提示 -
- 当searchable设置为true时，Select可以根据输入的值进行过滤显示。但如果需要自行实现search的逻辑时，你可以提供一个onSearch方法。 - 当有搜索值时Select会调用onSelect方法，让用户自行决定如何搜索并更新列表。 -
-
- -```jsx -import React, {useMemo, useState} from 'react'; -import {Select} from 'react-windy-ui'; - -export default function Select4() { - //the items count - const count = 15; - - //generate the items for selection - const items = useMemo(() => { - return [...Array(count).keys()].map((key, index) => - {`Option ${key}`}, - ); - }, [count]); - - const [itemList, setItemList] = useState(items); - - const search = (value) => { - console.log('search ' + value); - let list; - //if the value is blank, show the original items - if (value == null || /^\s*$/.test(value)) { - list = items; - } else { - //filter a list of items and ecch item's text should contain the searched value - list = items.filter( - item => { - return item.props.children.toLowerCase(). - includes(value.toLowerCase()); - - }); - } - setItemList(list); - }; - - return <> - - ; - -} -``` - -[Select4_END_zh_CN] - -[Select4_BEGIN_en_US] -[Select4_END_en_US] ----------------------------------- -[Select5_BEGIN_zh_CN] -### 示例5: 构建复杂的Select -
- 提示 -
- 在这个示例中，我们构建了一个更复杂的Select组件。Select的Option内部使用一个自定义的Template去展示更丰富的内容，同时您还可以动态地新增一个Option。 - 另外需要说明的是，你需要给Option指定一个value和text属性。Option的text属性是指当该选项选中时会在Select上显示的文字内容， - 当一个复杂的Option选中后，你需要在Select显示的是一个简短的内容而不是Option的子节点。 -
-
- -```jsx -import React, {useState} from 'react'; -import { - Button, - IconHome, - Input, - InputGroup, - Select, - Tooltip, -} from 'react-windy-ui'; - -const rootStyle = { - display: 'flex', - flex: '1 1 200px', -}; - -const iconColumn = { - display: 'inline-flex', - justifyContent: 'center', - alignItems: 'center', - flex: '0 0 2rem', - color: '#f2791a', - marginRight: '1rem', -}; - -const infoColumn = { - display: 'flex', - flex: '1 1 auto', - flexDirection: 'column', -}; - -const titleStyle = { - display: 'flex', - justifyContent: 'flex-start', - alignItems: 'center', - padding: '.25rem', -}; - -const descStyle = { - display: 'flex', - justifyContent: 'flex-start', - alignItems: 'center', - padding: '.25rem', - color: '#818a91', - fontSize: '.8rem', -}; - -const Template = ({title, desc}) => { - return
-
- -
-
-
- {title} -
-
- {desc} -
-
-
; - -}; - -export default function Select5() { - const [list, setList] = useState([]); - const [value, setValue] = useState(''); - - const changValue = (e) => { - setValue(e.target.value); - }; - - const create = (e) => { - if (value && !/^\s*$/.test(value)) { - setList(list.concat(value)); - } - }; - - return <> -