侧滑菜单 - Nuxt UI

用法

使用 v-model 控制侧滑菜单的状态。

<script setup lang="ts">
const isOpen = ref(false)
</script>

<template>
  <div>
    <UButton label="Open" @click="isOpen = true" />

    <USlideover v-model="isOpen">
      <div class="p-4 flex-1">
        <UButton
          color="gray"
          variant="ghost"
          size="sm"
          icon="i-heroicons-x-mark-20-solid"
          class="flex sm:hidden absolute end-5 top-5 z-10"
          square
          padded
          @click="isOpen = false"
        />
        <Placeholder class="h-full" />
      </div>
    </USlideover>
  </div>
</template>

你可以在侧滑菜单中放入一个卡片组件，用于处理表单并利用 header 和 footer 插槽

<script setup lang="ts">
const isOpen = ref(false)
</script>

<template>
  <div>
    <UButton label="Open" @click="isOpen = true" />

    <USlideover v-model="isOpen">
      <UCard
        class="flex flex-col flex-1"
        :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }"
      >
        <template #header>
          <UButton
            color="gray"
            variant="ghost"
            size="sm"
            icon="i-heroicons-x-mark-20-solid"
            class="flex sm:hidden absolute end-5 top-5 z-10"
            square
            padded
            @click="isOpen = false"
          />

          <Placeholder class="h-8" />
        </template>

        <Placeholder class="h-full" />

        <template #footer>
          <Placeholder class="h-8" />
        </template>
      </UCard>
    </USlideover>
  </div>
</template>

禁用覆盖层

将 overlay 属性设置为 false 来禁用它。

<script setup lang="ts">
const isOpen = ref(false)
</script>

<template>
  <div>
    <UButton label="Open" @click="isOpen = true" />

    <USlideover v-model="isOpen" :overlay="false">
      <div class="p-4 flex-1">
        <UButton
          color="gray"
          variant="ghost"
          size="sm"
          icon="i-heroicons-x-mark-20-solid"
          class="flex sm:hidden absolute end-5 top-5 z-10"
          square
          padded
          @click="isOpen = false"
        />

        <Placeholder class="h-full" />
      </div>
    </USlideover>
  </div>
</template>

禁用过渡动画

将 transition 属性设置为 false 来禁用它。

<script setup lang="ts">
const isOpen = ref(false)
</script>

<template>
  <div>
    <UButton label="Open" @click="isOpen = true" />

    <USlideover v-model="isOpen" :transition="false">
      <div class="p-4 flex-1">
        <UButton
          color="gray"
          variant="ghost"
          size="sm"
          icon="i-heroicons-x-mark-20-solid"
          class="flex sm:hidden absolute end-5 top-5 z-10"
          square
          padded
          @click="isOpen = false"
        />

        <Placeholder class="h-full" />
      </div>
    </USlideover>
  </div>
</template>

阻止关闭

使用 prevent-close 属性来禁用点击外部和 esc 键盘快捷键。当用户尝试关闭侧滑菜单时，将发出 close-prevented 事件。

<script setup lang="ts">
const isOpen = ref(false)
</script>

<template>
  <div>
    <UButton label="Open" @click="isOpen = true" />

    <USlideover v-model="isOpen" prevent-close>
      <UCard class="flex flex-col flex-1" :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
        <template #header>
          <div class="flex items-center justify-between">
            <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
              Slideover
            </h3>
            <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="isOpen = false" />
          </div>
        </template>

        <Placeholder class="h-full" />
      </UCard>
    </USlideover>
  </div>
</template>

你仍然可以使用我们的 defineShortcuts 可组合函数来自己处理 esc 快捷键。

<script setup lang="ts">
const isOpen = ref(false)

defineShortcuts({
  escape: {
    usingInput: true,
    whenever: [isOpen],
    handler: () => { isOpen.value = false }
  }
})
</script>

程序化控制

首先，将 USlideovers 组件添加到你的应用程序中，最好是在 app.vue 中。

app.vue

<template>
  <div>
    <UContainer>
      <NuxtPage />
    </UContainer>
    <USlideovers />
  </div>
</template>

然后，你可以在应用程序中使用 useSlideover 可组合函数来控制侧滑菜单。

<script setup lang="ts">
import { SlideoverExampleComponent } from '#components'

const slideover = useSlideover()
const count = ref(0)
function openSlideover() {
  count.value += 1
  slideover.open(SlideoverExampleComponent, {
    count: count.value,
    onClose: slideover.close
  })
}
</script>

<template>
  <UButton label="Reveal slideover" @click="openSlideover" />
</template>

{ wrapper?: string; overlay?: DeepPartial<{ base: string; background: string; transition: { enter: string; enterFrom: string; enterTo: string; leave: string; leaveFrom: string; leaveTo: string; }; }, any>; ... 9 more ...; transition?: DeepPartial<...>; } & { ...; } & { ...; }

{}

侧边

"left" | "right" | "top" | "bottom"

"right"

过渡动画

布尔值

true

modelValue

布尔值

false

出现

布尔值

false

覆盖层

布尔值

true

阻止关闭

布尔值

false

配置

{
  wrapper: 'fixed inset-0 flex z-50',
  overlay: {
    base: 'fixed inset-0 transition-opacity',
    background: 'bg-gray-200/75 dark:bg-gray-800/75',
    transition: {
      enter: 'ease-in-out duration-500',
      enterFrom: 'opacity-0',
      enterTo: 'opacity-100',
      leave: 'ease-in-out duration-500',
      leaveFrom: 'opacity-100',
      leaveTo: 'opacity-0'
    }
  },
  base: 'relative flex-1 flex flex-col w-full focus:outline-none',
  background: 'bg-white dark:bg-gray-900',
  ring: '',
  rounded: '',
  padding: '',
  shadow: 'shadow-xl',
  width: 'w-screen max-w-md',
  height: 'h-screen max-h-96',
  translate: {
    base: 'translate-x-0',
    left: '-translate-x-full rtl:translate-x-full',
    right: 'translate-x-full rtl:-translate-x-full',
    top: '-translate-y-full',
    bottom: 'translate-y-full'
  },
  transition: {
    enter: 'transform transition ease-in-out duration-300',
    leave: 'transform transition ease-in-out duration-200'
  }
}

骨架屏

在内容加载时显示占位符。

表格

在表格中显示数据。