View Shadcn UI

Appearance

介绍 ​


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

用法 ​

查看代码
vue
<template>
    <ShadcnToolbarFooter>
      <template #left>Basic</template>
    </ShadcnToolbarFooter>
</template>

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

自动隐藏 (auto-hide) ​

查看代码
vue
<template>
  <ShadcnToolbarFooter auto-hide>
    <template #left>Auto Hide</template>
  </ShadcnToolbarFooter>
</template>

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

自动隐藏延迟 (auto-hide-delay) ​

查看代码
vue
<template>
  <ShadcnToolbarFooter auto-hide auto-hide-delay="2000">
    <template #left>Auto Hide Delay</template>
  </ShadcnToolbarFooter>
</template>

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

全宽 (full-width) ​

查看代码
vue
<template>
  <ShadcnToolbarFooter full-width>
    <template #left>Full Width</template>
  </ShadcnToolbarFooter>
</template>

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

液态玻璃效果 (glass) ​

查看代码
vue
<template>
    <div class="p-8 rounded-lg bg-gradient-to-r from-green-400 to-teal-400">
        <div class="rounded-lg relative h-48 overflow-hidden bg-white/50">
            <div class="p-4 text-gray-700">
                <p class="text-sm">液态玻璃效果工具栏</p>
                <p class="text-sm mt-2">底部显示带有玻璃效果的工具栏</p>
            </div>
            <ShadcnToolbarFooter glass :hide-on-scroll="false">
                <template #left>
                    <span class="text-sm">液态玻璃效果工具栏</span>
                </template>
            </ShadcnToolbarFooter>
        </div>
    </div>
</template>

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