Nuxt UI v3-alpha 已发布！

试用
组件

分隔线

GitHub
在内容之间显示分隔线。

用法

您可以传递 label、icon 或 avatar 到分隔线组件。

标签

或
<template>
  <UDivider label="OR" />
</template>

图标

使用来自 Iconify 的任何图标，通过设置 icon 属性来使用此模式：i-{collection_name}-{icon_name}。

<template>
  <UDivider icon="i-simple-icons-github" />
</template>

头像

使用 avatar 属性作为 object，并使用其任何属性进行配置。

<template>
  <UDivider
    :avatar="{ src: 'https://avatars.githubusercontent.com/u/739984?v=4' }"
  />
</template>

方向

您可以通过将 orientation 属性设置为 horizontal 或 vertical 来更改分隔线的方向。默认值为 horizontal。

或
或
<script setup lang="ts">
const form = reactive({ email: '[email protected]', password: 'password' })
</script>

<template>
  <div class="w-full flex flex-col gap-y-4">
    <UCard :ui="{ body: { base: 'grid grid-cols-3' } }">
      <div class="space-y-4">
        <UFormGroup label="Email" name="email">
          <UInput v-model="form.email" />
        </UFormGroup>

        <UFormGroup label="Password" name="password">
          <UInput v-model="form.password" type="password" />
        </UFormGroup>

        <UButton label="Login" color="gray" block />
      </div>

      <UDivider label="OR" orientation="vertical" />

      <div class="space-y-4 flex flex-col justify-center">
        <UButton color="black" label="Login with GitHub" icon="i-simple-icons-github" block />
        <UButton color="black" label="Login with Google" icon="i-simple-icons-google" block />
      </div>
    </UCard>

    <UCard>
      <div class="space-y-4">
        <UFormGroup label="Email" name="email">
          <UInput v-model="form.email" />
        </UFormGroup>

        <UFormGroup label="Password" name="password">
          <UInput v-model="form.password" type="password" />
        </UFormGroup>

        <UButton label="Login" color="gray" block />

        <UDivider label="OR" />

        <UButton color="black" label="Login with GitHub" icon="i-simple-icons-github" block />
        <UButton color="black" label="Login with Google" icon="i-simple-icons-google" block />
      </div>
    </UCard>
  </div>
</template>

类型

您可以通过将 type 属性设置为 solid、dotted 或 dashed 来更改分隔线的类型。默认值为 solid。

Nuxt UI
<template>
  <UDivider label="Nuxt UI" type="dashed" />
</template>

大小

使用 size 属性更改分隔线的大小。

Nuxt UI
<template>
  <UDivider label="Nuxt UI" size="sm" />
</template>

颜色

您可以使用 ui 属性更改内容的颜色。

Nuxt UI
<template>
  <UDivider
    label="Nuxt UI"
    :ui="{ label: 'text-primary-500 dark:text-primary-400' }"
  />
</template>

插槽

default

使用 default 插槽将内容添加到分隔线。

<template>
  <UDivider>
    <Logo class="w-28 h-6" />
  </UDivider>
</template>

属性

type
"solid" | "dotted" | "dashed"
config.default.type
size
DividerSize
config.default.size
"md""2xs""xs""sm""lg""xl"
label
string
null
icon
string
null
ui
{ wrapper?: DeepPartial<{ base: string; horizontal: string; vertical: string; }, any>; container?: DeepPartial<{ base: string; horizontal: string; vertical: string; }, any>; ... 4 more ...; default?: DeepPartial<...>; } & { ...; } & { ...; }
{}
orientation
"horizontal" | "vertical"
"horizontal"
avatar
头像
null

配置

{
  wrapper: {
    base: 'flex items-center align-center text-center',
    horizontal: 'w-full flex-row',
    vertical: 'flex-col'
  },
  container: {
    base: 'font-medium text-gray-700 dark:text-gray-200 flex',
    horizontal: 'mx-3 whitespace-nowrap',
    vertical: 'my-2'
  },
  border: {
    base: 'flex border-gray-200 dark:border-gray-800',
    horizontal: 'w-full',
    vertical: 'h-full',
    size: {
      horizontal: {
        '2xs': 'border-t',
        xs: 'border-t-[2px]',
        sm: 'border-t-[3px]',
        md: 'border-t-[4px]',
        lg: 'border-t-[5px]',
        xl: 'border-t-[6px]'
      },
      vertical: {
        '2xs': 'border-s',
        xs: 'border-s-[2px]',
        sm: 'border-s-[3px]',
        md: 'border-s-[4px]',
        lg: 'border-s-[5px]',
        xl: 'border-s-[6px]'
      }
    },
    type: {
      solid: 'border-solid',
      dotted: 'border-dotted',
      dashed: 'border-dashed'
    }
  },
  icon: {
    base: 'flex-shrink-0 w-5 h-5'
  },
  avatar: {
    base: 'flex-shrink-0',
    size: '2xs'
  },
  label: 'text-sm',
  default: {
    size: '2xs',
    type: 'solid'
  }
}

DatePicker

使用 v-calendar 构建的日期选择器组件示例。

下拉菜单

在下拉菜单中显示操作列表。