feat(components): 添加 ActionIcon 组件
- 实现了一个新的 ActionIcon 组件,用于在界面上显示可点击的图标 - 组件支持自定义图标、点击事件和样式类 - 使用 SolidJS 和 clsx 库来构建组件
This commit is contained in:
24
src/components/ActionIcon.tsx
Normal file
24
src/components/ActionIcon.tsx
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
import { Icon, IconifyIconProps } from '@iconify-icon/solid';
|
||||||
|
import cx from 'clsx';
|
||||||
|
import { Component, JSX } from 'solid-js';
|
||||||
|
|
||||||
|
interface ActionIconProps {
|
||||||
|
icon: IconifyIconProps['icon'];
|
||||||
|
onClick?: () => void;
|
||||||
|
class?: JSX.HTMLAttributes<HTMLButtonElement>['class'];
|
||||||
|
}
|
||||||
|
|
||||||
|
const ActionIcon: Component<ActionIconProps> = (props) => {
|
||||||
|
const handleClick: JSX.EventHandler<HTMLButtonElement, MouseEvent> = (e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
props.onClick?.();
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button class={cx('p-2 rounded-sm', props.class)} onClick={handleClick}>
|
||||||
|
<Icon icon={props.icon} class="text-base/[1] stroke-1" />
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ActionIcon;
|
Reference in New Issue
Block a user