test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-11-29 18:50:00 +08:00
Code Issues Actions 48 Packages Projects Releases Wiki Activity

docs: improve preview interaction (#38802)

Browse Source 
docs: improve preview interaction
This commit is contained in:
Wuxh 2022-12-04 01:05:33 +08:00 committed by GitHub
parent 86de75649e
commit 3d9046d079
2 changed files with 35 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
.dumi/pages/index/components/Theme/ColorPicker.tsx
View File

@ -18,6 +18,17 @@ const useStyle = () => {
border-radius: 100%; border-radius: 100%;
cursor: pointer; cursor: pointer;
transition: all ${token.motionDurationFast}; transition: all ${token.motionDurationFast};
display: inline-block;
& > input[type="radio"] {
width: 0;
height: 0;
opacity: 0;
}
&:focus-within {
// need ？
}
`, `,
colorActive: css` colorActive: css`
@ -91,7 +102,8 @@ export default function ColorPicker({ value, onChange }: RadiusPickerProps) {
<Space size="middle"> <Space size="middle">
{matchColors.map(({ color, active, picker }) => { {matchColors.map(({ color, active, picker }) => {
let colorNode = ( let colorNode = (
<div // eslint-disable-next-line jsx-a11y/label-has-associated-control
<label
key={color} key={color}
css={[style.color, active && style.colorActive]} css={[style.color, active && style.colorActive]}
style={{ style={{
@ -102,7 +114,9 @@ export default function ColorPicker({ value, onChange }: RadiusPickerProps) {
onChange?.(color); onChange?.(color);
} }
}} }}
/> >
<input type="radio" name={picker ? 'picker' : 'color'} tabIndex={picker ? -1 : 0} />
</label>
); );
if (picker) { if (picker) {

29
.dumi/pages/index/components/Theme/ThemePicker.tsx
View File

@ -37,6 +37,13 @@ const useStyle = () => {
cursor: pointer; cursor: pointer;
transition: all ${token.motionDurationSlow}; transition: all ${token.motionDurationSlow};
overflow: hidden; overflow: hidden;
display: inline-block;
& > input[type="radio"] {
width: 0;
height: 0;
opacity: 0;
}
img { img {
vertical-align: top; vertical-align: top;
@ -44,6 +51,7 @@ const useStyle = () => {
0 9px 28px 8px rgba(0, 0, 0, 0.05); 0 9px 28px 8px rgba(0, 0, 0, 0.05);
} }
&:focus-within,
&:hover { &:hover {
transform: scale(1.04); transform: scale(1.04);
} }
@ -54,7 +62,7 @@ const useStyle = () => {
0 0 0 ${token.controlOutlineWidth * 2 + 1}px ${token.colorPrimary}; 0 0 0 ${token.controlOutlineWidth * 2 + 1}px ${token.colorPrimary};
&, &,
&:hover { &:hover:not(:focus-within) {
transform: scale(1); transform: scale(1);
} }
`, `,
@ -79,15 +87,16 @@ export default function ThemePicker({ value, onChange }: ThemePickerProps) {
return ( return (
<Space key={theme} direction="vertical" align="center"> <Space key={theme} direction="vertical" align="center">
<div css={[style.themeCard, value === theme && style.themeCardActive]}> {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
<img <label
src={url} css={[style.themeCard, value === theme && style.themeCardActive]}
onClick={() => { onClick={() => {
onChange?.(theme); onChange?.(theme);
}} }}
alt="" >
/> <input type="radio" name="theme" />
</div> <img src={url} alt={theme} />
</label>
<span>{locale[theme as keyof typeof locale]}</span> <span>{locale[theme as keyof typeof locale]}</span>
</Space> </Space>
); );