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

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

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