mirror of
https://github.com/zhigang1992/react.git
synced 2026-02-10 09:03:57 +08:00
7facec3849
* feat(scaleable): add scaleable props to each component * chore(scaleable): update the exported type * feat: apply scaleable to components chore: remove with-default test: improve testcase for scaleable chore: resolve test warning ci: upgrade nodejs to latest lts docs: fix type error in document site * docs: update documents to be compatible with scaleable chore: fix build errors * chore: remove all size-related attributes docs: improve guide document * docs: add scaleable documentation test: update snapshots chore: remove unused * feat: add scaleable to grid components * docs: improve docs * test: update snapshots * fix(grid): fix basic component props
111 lines
3.3 KiB
TypeScript
111 lines
3.3 KiB
TypeScript
import React from 'react'
|
||
import Colors from './colors'
|
||
import { useTheme, Button, Text, Code, Spacer, Link, Select } from 'components'
|
||
import { useConfigs } from 'lib/config-context'
|
||
|
||
const Demo: React.FC<React.PropsWithChildren<unknown>> = () => {
|
||
const theme = useTheme()
|
||
const { isChinese } = useConfigs()
|
||
|
||
return (
|
||
<div className="demo">
|
||
<div className="content">
|
||
{isChinese ? (
|
||
<>
|
||
<Text h3>预览</Text>
|
||
<Text>
|
||
这里是你变更主题后的即时预览。此外，当你每次更新主题变量时，整个文档站点也会随之变化。
|
||
</Text>
|
||
<Text>你可以拷贝自动生成的代码，或是与任何人分享你自定义的主题样式。</Text>
|
||
</>
|
||
) : (
|
||
<>
|
||
<Text h3>Preview</Text>
|
||
<Text>
|
||
Here's a preview of your changes to the Theme. When you set the changes,
|
||
the entire document site will change with the theme.
|
||
</Text>
|
||
<Text>
|
||
You can copy automatically generated codes or share your custom theme with
|
||
anyone.
|
||
</Text>
|
||
</>
|
||
)}
|
||
|
||
<Spacer h={1.7} />
|
||
<Text h4>{isChinese ? '色彩' : 'Colors'}</Text>
|
||
<Colors />
|
||
|
||
<Spacer h={1.7} />
|
||
<Text h4>{isChinese ? '排版' : 'Typography'}</Text>
|
||
<Text>
|
||
<Code>inline codes</Code>
|
||
</Text>
|
||
<Text>
|
||
<a>Hyperlink Text</a>{' '}
|
||
</Text>
|
||
<Text>
|
||
<Link href="#" color>
|
||
Link Component
|
||
</Link>
|
||
</Text>
|
||
<Text>
|
||
Our mission is to make cloud computing accessible to everyone. We build products
|
||
for developers and designers. And those who aspire to become one.
|
||
</Text>
|
||
<Text h6>Heading</Text>
|
||
<Text h5>Heading</Text>
|
||
<Text h4>Heading</Text>
|
||
<Text h3>Heading</Text>
|
||
<Text h2>Heading</Text>
|
||
<Text h1>Heading</Text>
|
||
|
||
<Spacer h={1.7} />
|
||
<Text h4>{isChinese ? '基础组件' : 'Basic Components'}</Text>
|
||
<Select placeholder="Choose one" initialValue="1">
|
||
<Select.Option value="1">Option 1</Select.Option>
|
||
<Select.Option value="2">Option 2</Select.Option>
|
||
</Select>
|
||
<Spacer h={1} />
|
||
<Button disabled auto scale={0.5}>
|
||
Action
|
||
</Button>
|
||
<Spacer inline h={0.5} />
|
||
<Button auto scale={0.5}>
|
||
Action
|
||
</Button>
|
||
<Spacer inline h={0.5} />
|
||
<Button auto type="secondary" scale={0.5}>
|
||
Action
|
||
</Button>
|
||
<Spacer h={0.5} />
|
||
<Button>Action</Button>
|
||
</div>
|
||
<style jsx>{`
|
||
.demo {
|
||
width: 34%;
|
||
margin-top: calc(${theme.layout.gap} * 2);
|
||
margin-right: ${theme.layout.gap};
|
||
padding-right: ${theme.layout.gapQuarter};
|
||
position: relative;
|
||
border-right: 1px solid ${theme.palette.border};
|
||
height: auto;
|
||
transition: width 200ms ease;
|
||
}
|
||
|
||
.content {
|
||
width: 100%;
|
||
}
|
||
|
||
@media only screen and (max-width: ${theme.layout.breakpointMobile}) {
|
||
.demo {
|
||
display: none;
|
||
}
|
||
}
|
||
`}</style>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default Demo
|