View Shadcn UI

Appearance

介绍 ​


本文档主要用于描述 ShadcnHoverCard 组件的一些特性和用法。

用法 ​

查看代码
vue
<template>
    <ShadcnHoverCard content="This is a hover card">
        <ShadcnButton>Hover</ShadcnButton>
    </ShadcnHoverCard>
</template>

<script setup lang="ts">
</script>

延迟 (delay) ​

查看代码
vue
<template>
    <ShadcnHoverCard content="This is a hover card" :delay="500">
        <ShadcnButton>Hover</ShadcnButton>
    </ShadcnHoverCard>
</template>

<script setup lang="ts">
</script>

位置 (position) ​

查看代码
vue
<template>
    <ShadcnHoverCard content="Position" position="top">
        <ShadcnButton>Top</ShadcnButton>
    </ShadcnHoverCard>
    <ShadcnHoverCard content="Position" position="bottom">
        <ShadcnButton>Bottom</ShadcnButton>
    </ShadcnHoverCard>
    <ShadcnHoverCard content="Position" position="left">
        <ShadcnButton>Left</ShadcnButton>
    </ShadcnHoverCard>
    <ShadcnHoverCard content="Position" position="right">
        <ShadcnButton>Right</ShadcnButton>
    </ShadcnHoverCard>
</template>

<script setup lang="ts">
</script>

箭头 (arrow) ​

查看代码
vue
<template>
    <ShadcnHoverCard content="Hello Shadcn UI" arrow>
        <ShadcnButton>Arrow</ShadcnButton>
    </ShadcnHoverCard>
    <ShadcnHoverCard content="Hello Shadcn UI" :arrow="false">
        <ShadcnButton>No Arrow</ShadcnButton>
    </ShadcnHoverCard>
</template>

<script setup lang="ts">
</script>

宽度 (width) ​

查看代码
vue
<template>
    <ShadcnHoverCard content="Steve Jobs (English: Steve Jobs) is an American entrepreneur, marketer and inventor. He is one of the co-founders of Apple and has served as chairman and CEO. He is also the founder and CEO of NeXT and the founder and former CEO of Pixar Animation. He was a member of the board of directors of the Walt Disney Company in 2006. The place where Apple's press conference was held in September 2017 was named Steve Jobs Theater after him." width="200">
        <ShadcnButton>Hover</ShadcnButton>
    </ShadcnHoverCard>
</template>

<script setup lang="ts">
</script>
查看代码
vue
<template>
    <ShadcnHoverCard content="This is a hover card">
      <template #title>Title</template>
      <template #footer>Footer</template>
      <ShadcnButton>Add Column</ShadcnButton>
    </ShadcnHoverCard>
</template>

<script setup lang="ts">
</script>

悬浮卡片 (Hover Card) 属性 ​

悬浮卡片 (Hover Card) 插槽 ​