feat: 实现Button组件/样式
- 相关属性对应DaisyUI的样式
This commit is contained in:
52
src/lib/components/ui/button/Button.svelte
Normal file
52
src/lib/components/ui/button/Button.svelte
Normal file
@ -0,0 +1,52 @@
|
||||
<script lang="ts">
|
||||
import { Button as BitsButton, type WithoutChildren } from 'bits-ui';
|
||||
import type { Snippet } from 'svelte';
|
||||
import { COLOR_MAP, VARIANT_MAP, SIZE_MAP } from './button.variants';
|
||||
import type { Color, Variant, Size } from './button.variants';
|
||||
|
||||
type Props = WithoutChildren<BitsButton.RootProps> & {
|
||||
color?: Color;
|
||||
variant?: Variant;
|
||||
size?: Size;
|
||||
wide?: boolean;
|
||||
block?: boolean;
|
||||
square?: boolean;
|
||||
circle?: boolean;
|
||||
|
||||
class?: string;
|
||||
children?: Snippet;
|
||||
};
|
||||
|
||||
let {
|
||||
color,
|
||||
variant,
|
||||
size,
|
||||
wide,
|
||||
block,
|
||||
square,
|
||||
circle,
|
||||
class: className = '',
|
||||
children,
|
||||
...restProps
|
||||
}: Props = $props();
|
||||
|
||||
const classes = $derived(
|
||||
[
|
||||
'btn',
|
||||
color && COLOR_MAP[color],
|
||||
variant && VARIANT_MAP[variant],
|
||||
size && SIZE_MAP[size],
|
||||
wide && 'btn-wide',
|
||||
block && 'btn-block',
|
||||
square && 'btn-square',
|
||||
circle && 'btn-circle',
|
||||
className,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(' ')
|
||||
);
|
||||
</script>
|
||||
|
||||
<BitsButton.Root class={classes.trim()} {...restProps}>
|
||||
{@render children?.()}
|
||||
</BitsButton.Root>
|
||||
30
src/lib/components/ui/button/button.variants.ts
Normal file
30
src/lib/components/ui/button/button.variants.ts
Normal file
@ -0,0 +1,30 @@
|
||||
export const COLOR_MAP = {
|
||||
neutral: 'btn-neutral',
|
||||
primary: 'btn-primary',
|
||||
secondary: 'btn-secondary',
|
||||
accent: 'btn-accent',
|
||||
info: 'btn-info',
|
||||
success: 'btn-success',
|
||||
warning: 'btn-warning',
|
||||
error: 'btn-error',
|
||||
} as const;
|
||||
|
||||
export const VARIANT_MAP = {
|
||||
outline: 'btn-outline',
|
||||
dash: 'btn-dash',
|
||||
soft: 'btn-soft',
|
||||
ghost: 'btn-ghost',
|
||||
link: 'btn-link',
|
||||
} as const;
|
||||
|
||||
export const SIZE_MAP = {
|
||||
xs: 'btn-xs',
|
||||
sm: 'btn-sm',
|
||||
md: 'btn-md',
|
||||
lg: 'btn-lg',
|
||||
xl: 'btn-xl',
|
||||
} as const;
|
||||
|
||||
export type Color = keyof typeof COLOR_MAP;
|
||||
export type Variant = keyof typeof VARIANT_MAP;
|
||||
export type Size = keyof typeof SIZE_MAP;
|
||||
1
src/lib/components/ui/button/index.ts
Normal file
1
src/lib/components/ui/button/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export { default as Button } from './Button.svelte';
|
||||
Reference in New Issue
Block a user