xt/pylib-solid
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

enhance(compo):动作图标组件增加禁用功能。

Browse Source
This commit is contained in:
徐涛 2023-12-28 10:06:28 +08:00
parent 55ff7331d0
commit abc7b0a29e
2 changed files with 32 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/ActionIcon/ActionIcon.jsx
View File

@ -9,6 +9,7 @@ import classes from "./ActionIcon.module.css";
* @property {"filled" | "subtle" | "transparent"} [variant] * @property {"filled" | "subtle" | "transparent"} [variant]
* @property {"primary" | "secondary" | "danger" | "warn" | "success" | "info"} [color] * @property {"primary" | "secondary" | "danger" | "warn" | "success" | "info"} [color]
* @property {string[]} [additionalClasses] * @property {string[]} [additionalClasses]
* @property {boolean} [disabled]
* @property {JSX.EventHandler<HTMLButtonElement, PointerEvent>} [onClick] * @property {JSX.EventHandler<HTMLButtonElement, PointerEvent>} [onClick]
*/ */
@ -22,6 +23,7 @@ export default function ActionIcon(props) {
color: "secondary", color: "secondary",
variant: "transparent", variant: "transparent",
additionalClasses: [], additionalClasses: [],
disabled: false,
onClick: (e) => {}, onClick: (e) => {},
}, },
props props
@ -35,6 +37,7 @@ export default function ActionIcon(props) {
prop(`color-${mergedProps.color}`, classes), prop(`color-${mergedProps.color}`, classes),
...mergedProps.additionalClasses ...mergedProps.additionalClasses
)} )}
disabled={mergedProps.disabled}
onClick={mergedProps.onClick} onClick={mergedProps.onClick}
> >
{mergedProps.children} {mergedProps.children}

29
src/components/ActionIcon/ActionIcon.module.css
View File

@ -1,3 +1,5 @@
@import "@/mixins.css";
.action-icon-button { .action-icon-button {
--size: calc(var(--border-radius-xxs) * 2); --size: calc(var(--border-radius-xxs) * 2);
border: none; border: none;
@ -18,12 +20,34 @@
&.variant-transparent { &.variant-transparent {
color: var(--color-#{$color}); color: var(--color-#{$color});
background-color: transparent; background-color: transparent;
&[disabled] {
color: var(--palette-gray-4);
@include dark-mode {
color: var(--palette-gray-8);
}
}
} }
&.variant-subtle { &.variant-subtle {
background-color: color-mod(var(--color-#{$color}) a(50%)); background-color: color-mod(var(--color-#{$color}) a(50%));
&[disabled] {
color: var(--palette-gray-4);
background-color: color-mod(var(--palette-gray-6) a(50%));
@include dark-mode {
color: var(--palette-gray-8);
background-color: color-mod(var(--palette-gray-6) a(50%));
}
}
} }
&.variant-fill { &.variant-fill {
background-color: var(--color-#{$color}); background-color: var(--color-#{$color});
&[disabled] {
color: var(--palette-gray-4);
background-color: var(--palette-gray-6);
@include dark-mode {
color: var(--palette-gray-8);
background-color: var(--palette-gray-6);
}
}
} }
&:hover { &:hover {
color: var(--palette-white-0); color: var(--palette-white-0);
@ -48,4 +72,9 @@
} }
} }
} }
&[disabled] {
border: none;
background: none;
pointer-events: none;
}
} }