feat: 实现Tooltip组件
This commit is contained in:
16
src/lib/components/ui/tooltip/Tooltip.svelte
Normal file
16
src/lib/components/ui/tooltip/Tooltip.svelte
Normal file
@ -0,0 +1,16 @@
|
||||
<script lang="ts">
|
||||
import { Tooltip as BitsTooltip, type WithoutChildren } from 'bits-ui';
|
||||
import type { Snippet } from 'svelte';
|
||||
|
||||
type Props = WithoutChildren<BitsTooltip.RootProps> & {
|
||||
children?: Snippet;
|
||||
};
|
||||
|
||||
let { children, ...restProps }: Props = $props();
|
||||
</script>
|
||||
|
||||
<BitsTooltip.Provider delayDuration={0}>
|
||||
<BitsTooltip.Root {...restProps}>
|
||||
{@render children?.()}
|
||||
</BitsTooltip.Root>
|
||||
</BitsTooltip.Provider>
|
||||
30
src/lib/components/ui/tooltip/TooltipContent.svelte
Normal file
30
src/lib/components/ui/tooltip/TooltipContent.svelte
Normal file
@ -0,0 +1,30 @@
|
||||
<script lang="ts">
|
||||
import { Tooltip as BitsTooltip, type WithoutChildren } from 'bits-ui';
|
||||
import type { Snippet } from 'svelte';
|
||||
import { fly } from 'svelte/transition';
|
||||
|
||||
type Props = WithoutChildren<BitsTooltip.ContentProps> & {
|
||||
children?: Snippet;
|
||||
};
|
||||
|
||||
let { children, ...restProps }: Props = $props();
|
||||
</script>
|
||||
|
||||
<BitsTooltip.Portal>
|
||||
<BitsTooltip.Content
|
||||
forceMount
|
||||
sideOffset={8}
|
||||
class="tooltip z-0 flex items-center justify-center rounded-xl border border-base-content/20 bg-base-200 p-3 text-sm font-medium shadow-xl outline-hidden"
|
||||
{...restProps}
|
||||
>
|
||||
{#snippet child({ wrapperProps, props, open })}
|
||||
{#if open}
|
||||
<div {...wrapperProps}>
|
||||
<div {...props} transition:fly={{ y: 5, duration: 150 }}>
|
||||
{@render children?.()}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/snippet}
|
||||
</BitsTooltip.Content>
|
||||
</BitsTooltip.Portal>
|
||||
14
src/lib/components/ui/tooltip/TooltipTrigger.svelte
Normal file
14
src/lib/components/ui/tooltip/TooltipTrigger.svelte
Normal file
@ -0,0 +1,14 @@
|
||||
<script lang="ts">
|
||||
import { Tooltip as BitsTooltip, type WithoutChildren } from 'bits-ui';
|
||||
import type { Snippet } from 'svelte';
|
||||
|
||||
type Props = WithoutChildren<BitsTooltip.TriggerProps> & {
|
||||
children?: Snippet;
|
||||
};
|
||||
|
||||
let { children, ...restProps }: Props = $props();
|
||||
</script>
|
||||
|
||||
<BitsTooltip.Trigger class="tooltip tooltip-primary" {...restProps}>
|
||||
{@render children?.()}
|
||||
</BitsTooltip.Trigger>
|
||||
3
src/lib/components/ui/tooltip/index.ts
Normal file
3
src/lib/components/ui/tooltip/index.ts
Normal file
@ -0,0 +1,3 @@
|
||||
export { default as Tooltip } from './Tooltip.svelte';
|
||||
export { default as TooltipTrigger } from './TooltipTrigger.svelte';
|
||||
export { default as TooltipContent } from './TooltipContent.svelte';
|
||||
Reference in New Issue
Block a user