Nuxt UI v3-alpha 已发布！

试试看
组件

按钮

GitHub
创建一个带有图标或链接功能的按钮。

用法

使用默认插槽设置按钮的文本。

<template>
  <UButton>Button</UButton>
</template>

你也可以使用 label 属性。

<template>
  <UButton label="Button" />
</template>

样式

使用 color 和 variant 属性来改变按钮的视觉样式。

<template>
  <UButton color="primary" variant="solid">Button</UButton>
</template>

除了来自 ui.colors 对象的所有颜色，你还可以使用 white、 gray 和 black 颜色及其预定义变体。

白色

<template>
  <UButton color="white" variant="solid">Button</UButton>
</template>

灰色

<template>
  <UButton color="gray" variant="solid">Button</UButton>
</template>

黑色

<template>
  <UButton color="black" variant="solid">Button</UButton>
</template>

尺寸

使用 size 属性来改变按钮的尺寸。

<template>
  <UButton size="sm">Button</UButton>
</template>

圆角

要自定义按钮的圆角，可以使用 ui 属性。

<template>
  <UButton :ui="{ rounded: 'rounded-full' }">Button</UButton>
</template>
你可以通过使用 ui 属性来自定义整个 预设。

图标

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

使用 leading 和 trailing 属性来设置图标位置，或使用 leading-icon 和 trailing-icon 属性来为每个位置设置不同的图标。

<template>
  <UButton
    icon="i-heroicons-pencil-square"
    size="sm"
    color="primary"
    variant="solid"
    label="Button"
    :trailing="false"
  />
</template>

label 作为属性或插槽是可选的，因此你可以将按钮用作仅包含图标的按钮。

<template>
  <UButton
    icon="i-heroicons-pencil-square"
    size="sm"
    color="primary"
    square
    variant="solid"
  />
</template>

禁用

使用 disabled 属性来禁用按钮。

<template>
  <UButton disabled>Button</UButton>
</template>

加载

使用 loading 属性来显示加载图标并禁用按钮。

使用 loading-icon 属性来设置不同的图标，或者在 ui.button.default.loadingIcon 中全局更改它。默认值为 i-heroicons-arrow-path-20-solid。

<template>
  <UButton loading>Button</UButton>
</template>

块级

使用 block 属性来使按钮填满其容器的宽度。

<template>
  <UButton block>Button</UButton>
</template>

链接

使用 to 属性来使按钮成为链接。

按钮

<template>
  <UButton to="https://volta.net" target="_blank">Button</UButton>
</template>

你也可以传递来自 NuxtLink 组件的任何属性，例如 target、 exact 等。

填充

使用 padded 属性来移除按钮的填充。

<template>
  <UButton
    :padded="false"
    color="gray"
    variant="link"
    icon="i-heroicons-x-mark-20-solid"
  />
</template>

方形

使用 square 属性来强制按钮在水平和垂直方向上具有相同的填充。

<template>
  <UButton square label="Button" color="gray" variant="solid" />
</template>

截断

使用 truncate 属性来截断按钮的标签。

<template>
  <UButton truncate class="w-20" label="Button with a long text" />
</template>

组

要将按钮堆叠为组，请使用 ButtonGroup 组件。

  • 要使所有按钮的大小相同，请传递 size 属性。
  • 要更改按钮的方向，请将 orientation 属性设置为 vertical。
  • 要调整按钮周围的圆角或阴影，请使用 ui.buttonGroup.rounded 或 ui.buttonGroup.shadow 进行自定义。
<template>
  <UButtonGroup size="sm" orientation="horizontal">
    <UButton label="Action" color="white" />
    <UButton icon="i-heroicons-chevron-down-20-solid" color="gray" />
  </UButtonGroup>
</template>

例如，这也可以与 Input 组件一起使用。

<template>
  <UButtonGroup size="sm" orientation="horizontal">
    <UInput />
    <UButton icon="i-heroicons-clipboard-document" color="gray" />
  </UButtonGroup>
</template>

插槽

leading

使用 #leading 插槽来设置前导图标的内容。

<template>
  <UButton label="Button" color="gray">
    <template #leading>
      <UAvatar
        src="https://avatars.githubusercontent.com/u/739984?v=4"
        size="2xs"
      />
    </template>
  </UButton>
</template>

trailing

使用 #trailing 插槽来设置后置图标的内容。

<template>
  <UButton label="Button" color="gray">
    <template #trailing>
      <UIcon name="i-heroicons-arrow-right-20-solid" class="w-5 h-5" />
    </template>
  </UButton>
</template>

属性

ui
{ base?: string; font?: string; rounded?: string; truncate?: string; block?: string; inline?: string; size?: DeepPartial<{ '2xs': string; xs: string; sm: string; md: string; lg: string; xl: string; }, any>; ... 6 more ...; default?: DeepPartial<...>; } & { ...; } & { ...; }
{}
size
ButtonSize
config.default.size
"sm""2xs""xs""md""lg""xl"
type
string
"button"
label
string
null
color
string
config.default.color
variant
ButtonVariant
config.default.variant
"link""solid""outline""soft""ghost"
icon
string
null
target
"_blank" | "_parent" | "_self" | "_top" | (string & {})
to
string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric
activeClass
string
exactActiveClass
string
ariaCurrentValue
"time" | "page" | "step" | "location" | "date" | "true" | "false"
prefetchedClass
string
href
string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric
rel
any
loadingIcon
string
config.default.loadingIcon
leadingIcon
string
null
trailingIcon
string
null
replace
boolean
noRel
boolean
prefetch
boolean
noPrefetch
boolean
external
boolean
disabled
boolean
false
truncate
boolean
false
block
boolean
false
square
boolean
false
loading
boolean
false
padded
boolean
true
trailing
boolean
false
leading
boolean
false
ui
{ wrapper?: DeepPartial<{ horizontal: string; vertical: string; }, any>; rounded?: string; shadow?: string; orientation?: DeepPartial<{ 'rounded-none': { horizontal: { start: string; end: string; }; vertical: { ...; }; }; ... 7 more ...; 'rounded-full': { ...; }; }, any>; } & { ...; } & { ...; }
{}
size
ButtonSize
null
"sm""2xs""xs""md""lg""xl"
orientation
"horizontal" | "vertical"
"horizontal"

配置

{
  base: 'focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:cursor-not-allowed aria-disabled:opacity-75 flex-shrink-0',
  font: 'font-medium',
  rounded: 'rounded-md',
  truncate: 'text-left break-all line-clamp-1',
  block: 'w-full flex justify-center items-center',
  inline: 'inline-flex items-center',
  size: {
    '2xs': 'text-xs',
    xs: 'text-xs',
    sm: 'text-sm',
    md: 'text-sm',
    lg: 'text-sm',
    xl: 'text-base'
  },
  gap: {
    '2xs': 'gap-x-1',
    xs: 'gap-x-1.5',
    sm: 'gap-x-1.5',
    md: 'gap-x-2',
    lg: 'gap-x-2.5',
    xl: 'gap-x-2.5'
  },
  padding: {
    '2xs': 'px-2 py-1',
    xs: 'px-2.5 py-1.5',
    sm: 'px-2.5 py-1.5',
    md: 'px-3 py-2',
    lg: 'px-3.5 py-2.5',
    xl: 'px-3.5 py-2.5'
  },
  square: {
    '2xs': 'p-1',
    xs: 'p-1.5',
    sm: 'p-1.5',
    md: 'p-2',
    lg: 'p-2.5',
    xl: 'p-2.5'
  },
  color: {
    white: {
      solid: 'shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white aria-disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 dark:aria-disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
      ghost: 'text-gray-900 dark:text-white hover:bg-white dark:hover:bg-gray-900 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400'
    },
    gray: {
      solid: 'shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-50 hover:bg-gray-100 disabled:bg-gray-50 aria-disabled:bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700/50 dark:disabled:bg-gray-800 dark:aria-disabled:bg-gray-800 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
      ghost: 'text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
      link: 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400'
    },
    black: {
      solid: 'shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 aria-disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white dark:aria-disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
      link: 'text-gray-900 dark:text-white underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400'
    }
  },
  variant: {
    solid: 'shadow-sm text-white dark:text-gray-900 bg-{color}-500 hover:bg-{color}-600 disabled:bg-{color}-500 aria-disabled:bg-{color}-500 dark:bg-{color}-400 dark:hover:bg-{color}-500 dark:disabled:bg-{color}-400 dark:aria-disabled:bg-{color}-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-{color}-500 dark:focus-visible:outline-{color}-400',
    outline: 'ring-1 ring-inset ring-current text-{color}-500 dark:text-{color}-400 hover:bg-{color}-50 disabled:bg-transparent aria-disabled:bg-transparent dark:hover:bg-{color}-950 dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400',
    soft: 'text-{color}-500 dark:text-{color}-400 bg-{color}-50 hover:bg-{color}-100 disabled:bg-{color}-50 aria-disabled:bg-{color}-50 dark:bg-{color}-950 dark:hover:bg-{color}-900 dark:disabled:bg-{color}-950 dark:aria-disabled:bg-{color}-950 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400',
    ghost: 'text-{color}-500 dark:text-{color}-400 hover:bg-{color}-50 disabled:bg-transparent aria-disabled:bg-transparent dark:hover:bg-{color}-950 dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400',
    link: 'text-{color}-500 hover:text-{color}-600 disabled:text-{color}-500 aria-disabled:text-{color}-500 dark:text-{color}-400 dark:hover:text-{color}-500 dark:disabled:text-{color}-400 dark:aria-disabled:text-{color}-400 underline-offset-4 hover:underline focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400'
  },
  icon: {
    base: 'flex-shrink-0',
    loading: 'animate-spin',
    size: {
      '2xs': 'h-4 w-4',
      xs: 'h-4 w-4',
      sm: 'h-5 w-5',
      md: 'h-5 w-5',
      lg: 'h-5 w-5',
      xl: 'h-6 w-6'
    }
  },
  default: {
    size: 'sm',
    variant: 'solid',
    color: 'primary',
    loadingIcon: 'i-heroicons-arrow-path-20-solid'
  }
}

{
  wrapper: {
    horizontal: 'inline-flex -space-x-px',
    vertical: 'inline-flex flex-col -space-y-px'
  },
  rounded: 'rounded-md',
  shadow: 'shadow-sm',
  orientation: {
    'rounded-none': {
      horizontal: {
        start: 'rounded-s-none',
        end: 'rounded-e-none'
      },
      vertical: {
        start: 'rounded-t-none',
        end: 'rounded-b-none'
      }
    },
    'rounded-sm': {
      horizontal: {
        start: 'rounded-s-sm',
        end: 'rounded-e-sm'
      },
      vertical: {
        start: 'rounded-t-sm',
        end: 'rounded-b-sm'
      }
    },
    rounded: {
      horizontal: {
        start: 'rounded-s',
        end: 'rounded-e'
      },
      vertical: {
        start: 'rounded-t',
        end: 'rounded-b'
      }
    },
    'rounded-md': {
      horizontal: {
        start: 'rounded-s-md',
        end: 'rounded-e-md'
      },
      vertical: {
        start: 'rounded-t-md',
        end: 'rounded-b-md'
      }
    },
    'rounded-lg': {
      horizontal: {
        start: 'rounded-s-lg',
        end: 'rounded-e-lg'
      },
      vertical: {
        start: 'rounded-t-lg',
        end: 'rounded-b-lg'
      }
    },
    'rounded-xl': {
      horizontal: {
        start: 'rounded-s-xl',
        end: 'rounded-e-xl'
      },
      vertical: {
        start: 'rounded-t-xl',
        end: 'rounded-b-xl'
      }
    },
    'rounded-2xl': {
      horizontal: {
        start: 'rounded-s-2xl',
        end: 'rounded-e-2xl'
      },
      vertical: {
        start: 'rounded-t-2xl',
        end: 'rounded-b-2xl'
      }
    },
    'rounded-3xl': {
      horizontal: {
        start: 'rounded-s-3xl',
        end: 'rounded-e-3xl'
      },
      vertical: {
        start: 'rounded-t-3xl',
        end: 'rounded-b-3xl'
      }
    },
    'rounded-full': {
      horizontal: {
        start: 'rounded-s-full',
        end: 'rounded-e-full'
      },
      vertical: {
        start: 'rounded-t-full',
        end: 'rounded-b-full'
      }
    }
  }
}

面包屑

一系列链接，指示当前页面在导航层次结构中的位置。

卡片

显示带有标题、主体和页脚的内容卡片。