kylefang/react
1
0
Fork 0
mirror of https://github.com/zhigang1992/react.git synced 2026-03-26 06:55:07 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(link): display as a separate block

Browse Source
This commit is contained in:
unix
2020-03-20 21:07:08 +08:00
parent e6ce581e69
commit ea80119057
2 changed files with 26 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
components/link/link.tsx
View File

@@ -7,7 +7,8 @@ interface Props {
href?: string
color?: boolean
pure?: boolean
underline: boolean
underline?: boolean
block?: boolean
className?: string
}
@@ -16,16 +17,18 @@ const defaultProps = {
color: false,
pure: false,
underline: false,
block: false,
className: '',
}
export type LinkProps = Props & typeof defaultProps & React.AllHTMLAttributes<any>
const Link: React.FC<React.PropsWithChildren<LinkProps>> = React.memo(({
href, color, underline, pure, children, className, ...props
href, color, underline, pure, children, className, block, ...props
}) => {
const theme = useTheme()
const linkColor = color ? theme.palette.success : 'inherit'
const linkColor = color || block ? theme.palette.success : 'inherit'
const padding = block ? theme.layout.gapQuarter : '0'
const decoration = underline ? 'underline' : 'none'
return (
@@ -38,12 +41,18 @@ const Link: React.FC<React.PropsWithChildren<LinkProps>> = React.memo(({
line-height: inherit;
color: ${linkColor};
text-decoration: none;
padding: calc(${padding} * .8) calc(${padding} * 1.7);
border-radius: ${block ? theme.layout.radius : 0};
width: fit-content;
}
.link:hover, .link:active, .link:focus {
text-decoration: ${decoration};
}
.link:hover {
background-color: ${block ? '#0076ff1a' : 'unset'};
}
`}</style>
</a>
)

20
pages/docs/components/link.mdx
View File

@@ -30,13 +30,20 @@ Hyperlinks between pages.
desc="Use `Text` to standardize text content."
scope={{ Link, Text }}
code={`
<div>
<Text><Link href="#" pure>The Evil Rabbit Jumped over the Fence.</Link></Text>
<Text><Link href="#" color pure>The Evil Rabbit Jumped over the Fence.</Link></Text>
<Text><Link href="#" pure underline>The Evil Rabbit Jumped over the Fence.</Link></Text>
<Text><Link href="#" underline>The Evil Rabbit Jumped over the Fence.</Link></Text>
<>
<Text><Link href="#" pure>The Evil Rabbit Jumped over the Fence.</Link></Text>
<Text><Link href="#" color pure>The Evil Rabbit Jumped over the Fence.</Link></Text>
<Text><Link href="#" pure underline>The Evil Rabbit Jumped over the Fence.</Link></Text>
<Text><Link href="#" underline>The Evil Rabbit Jumped over the Fence.</Link></Text>
</>
`} />
</div>
<Playground
title="block"
desc="Display as a separate block."
scope={{ Link }}
code={`
<Link href="#" pure block>The Evil Rabbit Jumped over the Fence.</Link>
`} />
<Attributes edit="/pages/docs/components/link.mdx">
@@ -48,6 +55,7 @@ Hyperlinks between pages.
| **color** | display color for link | `boolean` | - | `false` |
| **pure** | hide icon | `boolean` | - | `false` |
| **underline** | display underline | `boolean` | - | `false` |
| **block** | display as a separate block | `boolean` | - | `false` |
| ... | native props | `LinkHTMLAttributes` | `'alt', 'className', ...` | - |
</Attributes>