amis2/examples/components/CssDocs.tsx

616 lines
16 KiB
TypeScript
Raw Normal View History

2020-11-30 00:37:09 +08:00
import React from 'react';
import {Switch} from 'react-router-dom';
import {navigations2route} from './App';
2020-11-30 00:37:09 +08:00
import makeMarkdownRenderer from './MdRenderer';
function wrapDoc(doc: any) {
return {
default: makeMarkdownRenderer(doc)
};
}
2020-11-30 00:37:09 +08:00
export const cssDocs = [
{
2020-12-01 12:12:19 +08:00
label: '开始',
2020-11-30 00:37:09 +08:00
children: [
{
2020-11-30 14:50:04 +08:00
label: '快速开始',
path: '/zh-CN/style/index',
component: React.lazy(() =>
import('../../docs/zh-CN/style/index.md').then(wrapDoc)
)
2020-11-30 14:50:04 +08:00
},
{
label: 'CSS 变量',
path: '/zh-CN/style/css-vars',
component: React.lazy(() =>
import('../../docs/zh-CN/style/css-vars.md').then(wrapDoc)
)
2020-11-30 14:50:04 +08:00
},
{
label: '辅助类 - 响应式设计',
path: '/zh-CN/style/responsive-design',
component: React.lazy(() =>
import('../../docs/zh-CN/style/responsive-design.md').then(wrapDoc)
)
},
{
label: '辅助类 - 状态样式',
path: '/zh-CN/style/state',
component: React.lazy(() =>
import('../../docs/zh-CN/style/state.md').then(wrapDoc)
)
2020-11-30 00:37:09 +08:00
}
]
},
{
// prefix: ({classnames: cx}) => <li className={cx('AsideNav-divider')} />,
2020-12-01 11:43:30 +08:00
label: 'Layout',
2020-11-30 00:37:09 +08:00
children: [
{
2020-12-01 11:43:30 +08:00
label: 'Box Sizing',
path: '/zh-CN/style/layout/box-sizing',
component: React.lazy(() =>
import('../../scss/helper/layout/_box-sizing.scss').then(wrapDoc)
)
2020-12-01 11:43:30 +08:00
},
{
label: 'Display',
path: '/zh-CN/style/layout/display',
component: React.lazy(() =>
import('../../scss/helper/layout/_display.scss').then(wrapDoc)
)
2020-12-01 11:43:30 +08:00
},
{
label: 'Floats',
path: '/zh-CN/style/layout/floats',
component: React.lazy(() =>
import('../../scss/helper/layout/_float.scss').then(wrapDoc)
)
2020-12-01 11:43:30 +08:00
},
{
label: 'Clear',
path: '/zh-CN/style/layout/clear',
component: React.lazy(() =>
import('../../scss/helper/layout/_clear.scss').then(wrapDoc)
)
2020-12-01 11:43:30 +08:00
},
{
label: 'Overflow',
path: '/zh-CN/style/layout/overflow',
component: React.lazy(() =>
import('../../scss/helper/layout/_overflow.scss').then(wrapDoc)
)
2020-12-01 11:43:30 +08:00
},
{
label: 'Position',
path: '/zh-CN/style/layout/position',
component: React.lazy(() =>
import('../../scss/helper/layout/_position.scss').then(wrapDoc)
)
2020-12-01 11:43:30 +08:00
},
{
label: 'Top / Right / Bottom / Left',
path: '/zh-CN/style/layout/top-right-bottom-left',
component: React.lazy(() =>
import('../../scss/helper/layout/_top-right-bottom-left.scss').then(
wrapDoc
2020-12-01 11:43:30 +08:00
)
)
2020-12-01 11:43:30 +08:00
},
{
label: 'Visibility',
path: '/zh-CN/style/layout/visibility',
component: React.lazy(() =>
import('../../scss/helper/layout/_visibility.scss').then(wrapDoc)
)
2020-12-01 11:43:30 +08:00
},
{
label: 'Z-Index',
path: '/zh-CN/style/layout/z-index',
component: React.lazy(() =>
import('../../scss/helper/layout/_z-index.scss').then(wrapDoc)
)
2020-11-30 00:37:09 +08:00
}
]
2020-12-01 12:12:19 +08:00
},
{
label: 'Flexbox',
children: [
{
label: 'Flex Direction',
path: '/zh-CN/style/flexbox/direction',
component: React.lazy(() =>
import('../../scss/helper/flex/_direction.scss').then(wrapDoc)
)
2020-12-01 12:12:19 +08:00
},
{
label: 'Flex Wrap',
path: '/zh-CN/style/flexbox/wrap',
component: React.lazy(() =>
import('../../scss/helper/flex/_wrap.scss').then(wrapDoc)
)
2020-12-01 12:12:19 +08:00
},
{
label: 'Flex',
path: '/zh-CN/style/flexbox/flex',
component: React.lazy(() =>
import('../../scss/helper/flex/_flex.scss').then(wrapDoc)
)
2020-12-01 12:12:19 +08:00
},
{
label: 'Flex Grow',
path: '/zh-CN/style/flexbox/grow',
component: React.lazy(() =>
import('../../scss/helper/flex/_grow.scss').then(wrapDoc)
)
2020-12-01 12:12:19 +08:00
},
{
label: 'Flex Shrink',
path: '/zh-CN/style/flexbox/shrink',
component: React.lazy(() =>
import('../../scss/helper/flex/_shrink.scss').then(wrapDoc)
)
2020-12-01 12:12:19 +08:00
},
{
label: 'Flex Order',
path: '/zh-CN/style/flexbox/order',
component: React.lazy(() =>
import('../../scss/helper/flex/_order.scss').then(wrapDoc)
)
2020-12-01 12:12:19 +08:00
}
]
},
{
label: 'Grid',
children: [
{
label: 'Grid Template Columns',
path: '/zh-CN/style/grid/columns',
component: React.lazy(() =>
import('../../scss/helper/grid/_columns.scss').then(wrapDoc)
)
2020-12-01 12:12:19 +08:00
},
{
label: 'Grid Column Start / End',
path: '/zh-CN/style/grid/column-start-end',
component: React.lazy(() =>
import('../../scss/helper/grid/_column-start-end.scss').then(wrapDoc)
)
2020-12-01 12:12:19 +08:00
},
{
label: 'Grid Template Rows',
path: '/zh-CN/style/grid/rows',
component: React.lazy(() =>
import('../../scss/helper/grid/_rows.scss').then(wrapDoc)
)
2020-12-01 12:12:19 +08:00
},
{
label: 'Grid Row Start / End',
path: '/zh-CN/style/grid/row-start-end',
component: React.lazy(() =>
import('../../scss/helper/grid/_row-start-end.scss').then(wrapDoc)
)
2020-12-01 12:12:19 +08:00
},
{
label: 'Grid Auto Flow',
path: '/zh-CN/style/grid/auto-flow',
component: React.lazy(() =>
import('../../scss/helper/grid/_auto-flow.scss').then(wrapDoc)
)
2020-12-01 12:12:19 +08:00
},
{
label: 'Grid Auto Columns',
path: '/zh-CN/style/grid/auto-columns',
component: React.lazy(() =>
import('../../scss/helper/grid/_auto-columns.scss').then(wrapDoc)
)
2020-12-01 12:12:19 +08:00
},
{
label: 'Grid Auto Rows',
path: '/zh-CN/style/grid/auto-rows',
component: React.lazy(() =>
import('../../scss/helper/grid/_auto-rows.scss').then(wrapDoc)
)
2020-12-01 12:12:19 +08:00
},
{
label: 'Gap',
path: '/zh-CN/style/grid/gap',
component: React.lazy(() =>
import('../../scss/helper/grid/_gap.scss').then(wrapDoc)
)
2020-12-01 12:12:19 +08:00
}
]
},
{
label: 'Box Alignment',
children: [
{
label: 'Justify Content',
path: '/zh-CN/style/box-alignment/justify-content',
component: React.lazy(() =>
import('../../scss/helper/box-alignment/_justify-content.scss').then(
wrapDoc
2020-12-01 12:12:19 +08:00
)
)
2020-12-01 12:12:19 +08:00
},
{
label: 'Justify Items',
path: '/zh-CN/style/box-alignment/justify-items',
component: React.lazy(() =>
import('../../scss/helper/box-alignment/_justify-items.scss').then(
wrapDoc
2020-12-01 12:12:19 +08:00
)
)
2020-12-01 12:12:19 +08:00
},
{
label: 'Justify Self',
path: '/zh-CN/style/box-alignment/justify-self',
component: React.lazy(() =>
import('../../scss/helper/box-alignment/_justify-self.scss').then(
wrapDoc
2020-12-01 12:12:19 +08:00
)
)
2020-12-01 12:12:19 +08:00
},
{
label: 'Align Content',
path: '/zh-CN/style/box-alignment/align-content',
component: React.lazy(() =>
import('../../scss/helper/box-alignment/_align-content.scss').then(
wrapDoc
2020-12-01 12:12:19 +08:00
)
)
2020-12-01 12:12:19 +08:00
},
{
label: 'Align Items',
path: '/zh-CN/style/box-alignment/align-items',
component: React.lazy(() =>
import('../../scss/helper/box-alignment/_align-items.scss').then(
wrapDoc
2020-12-01 12:12:19 +08:00
)
)
2020-12-01 12:12:19 +08:00
},
{
label: 'Align Self',
path: '/zh-CN/style/box-alignment/align-self',
component: React.lazy(() =>
import('../../scss/helper/box-alignment/_align-self.scss').then(
wrapDoc
2020-12-01 12:12:19 +08:00
)
)
2020-12-01 12:12:19 +08:00
},
{
label: 'Place Content',
path: '/zh-CN/style/box-alignment/place-content',
component: React.lazy(() =>
import('../../scss/helper/box-alignment/_place-content.scss').then(
wrapDoc
2020-12-01 12:12:19 +08:00
)
)
2020-12-01 12:12:19 +08:00
},
{
label: 'Place Items',
path: '/zh-CN/style/box-alignment/place-items',
component: React.lazy(() =>
import('../../scss/helper/box-alignment/_place-items.scss').then(
wrapDoc
2020-12-01 12:12:19 +08:00
)
)
2020-12-01 12:12:19 +08:00
},
{
label: 'Place Self',
path: '/zh-CN/style/box-alignment/place-self',
component: React.lazy(() =>
import('../../scss/helper/box-alignment/_place-self.scss').then(
wrapDoc
2020-12-01 12:12:19 +08:00
)
)
2020-12-01 12:12:19 +08:00
}
]
},
{
label: 'Spacing',
children: [
{
label: 'Padding',
path: '/zh-CN/style/spacing/padding',
component: React.lazy(() =>
import('../../scss/helper/spacing/_padding.scss').then(wrapDoc)
)
2020-12-01 12:12:19 +08:00
},
{
label: 'Margin',
path: '/zh-CN/style/spacing/margin',
component: React.lazy(() =>
import('../../scss/helper/spacing/_margin.scss').then(wrapDoc)
)
2020-12-01 12:12:19 +08:00
},
{
label: 'Space Between',
path: '/zh-CN/style/spacing/space-between',
component: React.lazy(() =>
import('../../scss/helper/spacing/_space-between.scss').then(wrapDoc)
)
2020-12-01 12:12:19 +08:00
}
]
},
{
label: 'Sizing',
children: [
{
label: 'Width',
path: '/zh-CN/style/sizing/width',
component: React.lazy(() =>
import('../../scss/helper/sizing/_width.scss').then(wrapDoc)
)
2020-12-01 12:12:19 +08:00
},
{
label: 'Height',
path: '/zh-CN/style/sizing/height',
component: React.lazy(() =>
import('../../scss/helper/sizing/_height.scss').then(wrapDoc)
)
2020-12-01 12:12:19 +08:00
}
]
},
{
label: 'Typography',
children: [
{
label: 'Font Family',
path: '/zh-CN/style/typography/font-family',
component: React.lazy(() =>
import('../../scss/helper/typography/_font-family.scss').then(wrapDoc)
)
},
2020-12-01 12:12:19 +08:00
{
label: 'Font Size',
path: '/zh-CN/style/typography/font-size',
component: React.lazy(() =>
import('../../scss/helper/typography/_font-size.scss').then(wrapDoc)
)
2020-12-01 12:12:19 +08:00
},
{
label: 'Font style',
path: '/zh-CN/style/typography/font-style',
component: React.lazy(() =>
import('../../scss/helper/typography/_font-style.scss').then(wrapDoc)
)
2020-12-01 12:12:19 +08:00
},
{
label: 'Font Weight',
path: '/zh-CN/style/typography/font-weight',
component: React.lazy(() =>
import('../../scss/helper/typography/_font-weight.scss').then(wrapDoc)
)
2020-12-01 12:12:19 +08:00
},
{
label: 'Letter Spacing',
path: '/zh-CN/style/typography/letter-spacing',
component: React.lazy(() =>
import('../../scss/helper/typography/_letter-spacing.scss').then(
wrapDoc
2020-12-01 12:12:19 +08:00
)
)
2020-12-01 12:12:19 +08:00
},
{
label: 'Line Height',
path: '/zh-CN/style/typography/line-height',
component: React.lazy(() =>
import('../../scss/helper/typography/_line-height.scss').then(wrapDoc)
)
2020-12-01 12:12:19 +08:00
},
{
label: 'List Style Type',
path: '/zh-CN/style/typography/list-style-type',
component: React.lazy(() =>
import('../../scss/helper/typography/_list-style-type.scss').then(
wrapDoc
2020-12-01 12:12:19 +08:00
)
)
2020-12-01 12:12:19 +08:00
},
{
label: 'Text Alignment',
path: '/zh-CN/style/typography/text-align',
component: React.lazy(() =>
import('../../scss/helper/typography/_text-align.scss').then(wrapDoc)
)
2020-12-01 12:12:19 +08:00
},
{
label: 'Text Color',
path: '/zh-CN/style/typography/text-color',
component: React.lazy(() =>
import('../../scss/helper/typography/_text-color.scss').then(wrapDoc)
)
2020-12-01 12:12:19 +08:00
},
{
label: 'Text Decoration',
path: '/zh-CN/style/typography/text-decoration',
component: React.lazy(() =>
import('../../scss/helper/typography/_text-decoration.scss').then(
wrapDoc
2020-12-01 12:12:19 +08:00
)
)
2020-12-01 12:12:19 +08:00
},
{
label: 'Text Transform',
path: '/zh-CN/style/typography/text-transform',
component: React.lazy(() =>
import('../../scss/helper/typography/_text-transform.scss').then(
wrapDoc
2020-12-01 12:12:19 +08:00
)
)
2020-12-01 12:12:19 +08:00
},
{
label: 'Vertical Alignment',
path: '/zh-CN/style/typography/vertical-align',
component: React.lazy(() =>
import('../../scss/helper/typography/_vertical-align.scss').then(
wrapDoc
2020-12-01 12:12:19 +08:00
)
)
2020-12-01 12:12:19 +08:00
},
{
label: 'Whitespace',
path: '/zh-CN/style/typography/whitespace',
component: React.lazy(() =>
import('../../scss/helper/typography/_whitespace.scss').then(wrapDoc)
)
2020-12-01 12:12:19 +08:00
},
{
label: 'Word Break',
path: '/zh-CN/style/typography/word-break',
component: React.lazy(() =>
import('../../scss/helper/typography/_word-break.scss').then(wrapDoc)
)
2020-12-01 12:12:19 +08:00
}
]
},
{
label: 'Backgrounds',
children: [
{
label: 'Background Color',
path: '/zh-CN/style/background/background-color',
component: React.lazy(() =>
import('../../scss/helper/background/_background-color.scss').then(
wrapDoc
2020-12-01 12:12:19 +08:00
)
)
2020-12-01 12:12:19 +08:00
}
]
},
{
label: 'BORDERS',
children: [
{
label: 'Border Radius',
path: '/zh-CN/style/border/border-radius',
component: React.lazy(() =>
import('../../scss/helper/border/_border-radius.scss').then(wrapDoc)
)
2020-12-01 12:12:19 +08:00
},
{
label: 'Border Width',
path: '/zh-CN/style/border/border-width',
component: React.lazy(() =>
import('../../scss/helper/border/_border-width.scss').then(wrapDoc)
)
2020-12-01 12:12:19 +08:00
},
{
label: 'Border Color',
path: '/zh-CN/style/border/border-color',
component: React.lazy(() =>
import('../../scss/helper/border/_border-color.scss').then(wrapDoc)
)
2020-12-01 12:12:19 +08:00
},
{
label: 'Border Style',
path: '/zh-CN/style/border/border-style',
component: React.lazy(() =>
import('../../scss/helper/border/_border-style.scss').then(wrapDoc)
)
2020-12-01 12:12:19 +08:00
}
]
},
{
label: 'Effect',
children: [
{
label: 'Box Shadow',
path: '/zh-CN/style/effect/box-shadow',
component: React.lazy(() =>
import('../../scss/helper/effect/_box-shadow.scss').then(wrapDoc)
)
2020-12-01 12:12:19 +08:00
},
{
label: 'Opacity',
path: '/zh-CN/style/effect/opacity',
component: React.lazy(() =>
import('../../scss/helper/effect/_opacity.scss').then(wrapDoc)
)
2020-12-01 12:12:19 +08:00
}
]
2020-11-30 00:37:09 +08:00
}
];
export default class CSSDocs extends React.PureComponent<any> {
componentDidMount() {
this.props.setNavigations(cssDocs);
}
componentDidUpdate() {
this.props.setNavigations(cssDocs);
}
render() {
return (
<Switch>
{navigations2route(cssDocs, {
2020-11-30 00:37:09 +08:00
theme: this.props.theme,
classPrefix: this.props.classPrefix,
locale: this.props.locale,
viewMode: this.props.viewMode,
offScreen: this.props.offScreen
})}
{/* {React.cloneElement(this.props.children as any, {
...(this.props.children as any).props,
theme: this.props.theme,
classPrefix: this.props.classPrefix,
locale: this.props.locale,
viewMode: this.props.viewMode,
offScreen: this.props.offScreen
})} */}
</Switch>
2020-11-30 00:37:09 +08:00
);
}
}