kylefang/react
1
0
Fork 0
mirror of https://github.com/zhigang1992/react.git synced 2026-04-30 05:05:38 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs: add example for custom colors (#329)

Browse Source
This commit is contained in:
witt
2020-07-14 12:23:07 +08:00
committed by GitHub
parent b4bcc5b4fc
commit 9c0720bc87
4 changed files with 68 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
pages/en-us/components/badge.mdx
View File

@@ -1,5 +1,6 @@
import { Layout, Playground, Attributes } from 'lib/components'
import { Badge, Spacer, Avatar, Button, Link } from 'components'
import { Badge, Spacer, Avatar, Button, Link, useTheme } from 'components'
import NextLink from 'next/link'
export const meta = {
title: 'Badge',
@@ -37,6 +38,35 @@ Display an indicator that requires attention.
`}
/>
<Playground
title="Custom color"
desc={
<>
For more colors, please refer to the{' '}
<NextLink href="/en-us/guide/colors">
<Link color>color section</Link>
</NextLink>
.
</>
}
scope={{ Badge, Spacer, useTheme }}
code={`
() => {
const theme = useTheme()
return (
<>
<Badge style={{ backgroundColor: theme.palette.successLight }}>Success Light</Badge> <Spacer y={.5} />
<Badge style={{ backgroundColor: theme.palette.successDark }}>Success Dark</Badge> <Spacer y={.5} />
<Badge style={{ backgroundColor: theme.palette.alert }}>Alert</Badge> <Spacer y={.5} />
<Badge style={{ backgroundColor: theme.palette.purple }}>Purple</Badge> <Spacer y={.5} />
<Badge style={{ backgroundColor: theme.palette.violet }}>Violet</Badge> <Spacer y={.5} />
<Badge style={{ backgroundColor: theme.palette.cyanLighter, color: theme.palette.foreground }}>Cyan Ligher</Badge> <Spacer y={.5} />
</>
)
}
`}
/>
<Playground
title="Sizes"
desc="Components of different sizes."

32
pages/zh-cn/components/badge.mdx
View File

@@ -1,5 +1,6 @@
import { Layout, Playground, Attributes } from 'lib/components'
import { Badge, Spacer, Button, Link, Avatar } from 'components'
import { Badge, Spacer, Button, Link, Avatar, useTheme } from 'components'
import NextLink from 'next/link'
export const meta = {
title: '徽章 Badge',
@@ -37,6 +38,35 @@ export const meta = {
`}
/>
<Playground
title="Custom color"
desc={
<>
了解更多颜色，请参考{' '}
<NextLink href="/zh-cn/guide/colors">
<Link color>色彩章节</Link>
</NextLink>
。
</>
}
scope={{ Badge, Spacer, useTheme }}
code={`
() => {
const theme = useTheme()
return (
<>
<Badge style={{ backgroundColor: theme.palette.successLight }}>淡色成功状态</Badge> <Spacer y={.5} />
<Badge style={{ backgroundColor: theme.palette.successDark }}>深色成功状态</Badge> <Spacer y={.5} />
<Badge style={{ backgroundColor: theme.palette.alert }}>警告</Badge> <Spacer y={.5} />
<Badge style={{ backgroundColor: theme.palette.purple }}>紫色</Badge> <Spacer y={.5} />
<Badge style={{ backgroundColor: theme.palette.violet }}>紫罗兰</Badge> <Spacer y={.5} />
<Badge style={{ backgroundColor: theme.palette.cyanLighter, color: theme.palette.foreground }}>淡青色</Badge> <Spacer y={.5} />
</>
)
}
`}
/>
<Playground
title="大小"
desc="不同大小的徽章组件。"