Nuxt UI v3-alpha 已发布！

试用一下
组件

仪表盘

GitHub
显示一个填充或消耗的仪表盘。

用法

使用 value 属性从 0 到 100 设置仪表盘条的值。

<template>
  <UMeter :value="25" />
</template>
查看 范围滑块 组件以获取输入。

最小值和最大值

默认情况下，min 为 0，max 为 100。您可以使用各自的属性更改这两者，即使对于负数也是如此。

<template>
  <UMeter :value="-25" :min="-50" :max="50" />
</template>

指示器

您可以使用 indicator 属性在仪表盘顶部显示百分比指示器。

35% 
<template>
  <UMeter :value="35" indicator />
</template>

标签

使用 label 属性在仪表盘下方添加标签。

磁盘使用率
<template>
  <UMeter label="Disk usage" :value="86" />
</template>

图标

您还可以使用 icon 属性在开始标签中添加图标。

磁盘使用率
<template>
  <UMeter icon="i-heroicons-server" :value="86" label="Disk usage" />
</template>

大小

使用 size 属性更改仪表盘条的大小。

75%
CPU 负载
<template>
  <UMeter size="md" indicator label="CPU Load" :value="75.4" />
</template>

样式

color 属性更改仪表盘条的视觉样式。 color 可以是 ui.colors 对象中的任何颜色。

80%
内存使用率
<template>
  <UMeter color="primary" :value="80" indicator label="Memory usage" />
</template>

组

要将多个仪表盘分组到一个组中，将所有值相加，请使用 MeterGroup 组件。

  • 要更改总体最小值和最大值，请分别传递 min 和 max 属性。
  • 要更改所有仪表盘的大小，请使用 size 属性。
  • 要显示总体金额的指示器，请设置 indicator 属性或插槽。
  • 要更改每个仪表盘的颜色，请使用 color 属性。
  • 要显示每个仪表盘的标签，请在每个仪表盘上使用 label 属性。
  • 要更改每个仪表盘的图标，请使用 icon 属性。
67%
  1. 系统 (19%)
  2. 应用程序 (6%)
  3. 文档 (9%)
  4. 多媒体 (33%)
<template>
  <UMeterGroup :min="0" :max="128" size="md" indicator icon="i-heroicons-minus">
    <UMeter :value="24" color="gray" label="System" />
    <UMeter :value="8" color="red" label="Apps" />
    <UMeter :value="12" color="yellow" label="Documents" />
    <UMeter :value="42" color="green" label="Multimedia" />
    <!-- Total: 86 -->
  </UMeterGroup>
</template>
当仪表盘分组时，它们的各个指示器和标签插槽将被去除。

仪表盘组也可以与 指示器插槽 一起使用，甚至可以包含各个仪表盘图标。

已使用 86GB

剩余 42GB

  1. 系统 (19%)
  2. 应用程序 (6%)
  3. 文档 (9%)
  4. 多媒体 (33%)
<template>
  <UMeterGroup :max="128">
    <template #indicator>
      <div class="flex gap-1.5 justify-between text-sm">
        <p>86GB used</p>
        <p class="text-gray-500 dark:text-gray-400">
          42GB remaining
        </p>
      </div>
    </template>

    <UMeter :value="24" color="gray" label="System" icon="i-heroicons-cog-6-tooth" />
    <UMeter :value="8" color="red" label="Apps" icon="i-heroicons-window" />
    <UMeter :value="12" color="yellow" label="Documents" icon="i-heroicons-document" />
    <UMeter :value="42" color="green" label="Multimedia" icon="i-heroicons-film" />
  </UMeterGroup>
</template>

插槽

indicator

使用 #indicator 插槽更改显示在条形顶部​​的指示器。 它接收当前仪表盘百分比。

已使用 84.2GB (35%)
<script setup lang="ts">
const used = ref(84.2)

const total = 238.42
</script>

<template>
  <UMeter :value="used" :max="total">
    <template #indicator="{ percent }">
      <div class="text-sm text-right">
        {{ used }}GB used ({{ Math.round(percent) }}%)
      </div>
    </template>
  </UMeter>
</template>

label

label 插槽可用于更改仪表盘条下方标签的显示方式。 它接收当前仪表盘百分比。

您正在使用 84GB (65%) 的空间

<script setup lang="ts">
const used = ref(84.2)

const total = 238.42
</script>

<template>
  <UMeter :value="used" :max="total">
    <template #label="{ percent }">
      <p class="text-sm">
        You are using {{ Math.round(used) }}GB ({{ Math.round(100 - percent) }}%) of space
      </p>
    </template>
  </UMeter>
</template>

属性

ui
{ wrapper?: string; indicator?: DeepPartial<{ container: string; text: string; size: { '2xs': string; xs: string; sm: string; md: string; lg: string; xl: string; '2xl': string; }; }, any>; meter?: DeepPartial<...>; label?: DeepPartial<...>; color?: DeepPartial<...>; default?: DeepPartial<...>; } & { ...; } & { ...; }
{}
size
"sm" | "2xs" | "xs" | "md" | "lg" | "xl" | "2xl"
config.default.size
value
number
0
label
string
null
color
string
config.default.color
icon
string
null
min
number
0
max
number
100
indicator
boolean
false
size
"md" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl"
meterConfig.default.size
min
number
0
max
number
100
icon
string
meterGroupConfig.default.icon
ui
{ wrapper?: string; base?: string; background?: string; transition?: string; rounded?: string; shadow?: string; list?: string; orientation?: DeepPartial<{ 'rounded-none': { left: string; right: string; }; 'rounded-sm': { ...; }; ... 6 more ...; 'rounded-full': { ...; }; }, any>; default?: DeepPartial<...>; } & { ......
{}
indicator
boolean
false

配置

{
  wrapper: 'w-full flex flex-col gap-2',
  indicator: {
    container: 'min-w-fit transition-all',
    text: 'text-gray-400 dark:text-gray-500 text-end',
    size: {
      '2xs': 'text-xs',
      xs: 'text-xs',
      sm: 'text-sm',
      md: 'text-sm',
      lg: 'text-sm',
      xl: 'text-base',
      '2xl': 'text-base'
    }
  },
  meter: {
    base: 'appearance-none block w-full bg-none overflow-y-hidden',
    background: 'bg-gray-200 dark:bg-gray-700',
    color: 'text-{color}-500 dark:text-{color}-400',
    ring: '',
    rounded: 'rounded-full',
    shadow: '',
    size: {
      '2xs': 'h-px',
      xs: 'h-0.5',
      sm: 'h-1',
      md: 'h-2',
      lg: 'h-3',
      xl: 'h-4',
      '2xl': 'h-5'
    },
    appearance: {
      inner: '[&::-webkit-meter-inner-element]:block [&::-webkit-meter-inner-element]:relative [&::-webkit-meter-inner-element]:border-none [&::-webkit-meter-inner-element]:bg-none [&::-webkit-meter-inner-element]:bg-transparent',
      meter: '[&::-webkit-meter-bar]:border-none [&::-webkit-meter-bar]:bg-none [&::-webkit-meter-bar]:bg-transparent',
      bar: '[&::-webkit-meter-optimum-value]:border-none [&::-webkit-meter-optimum-value]:bg-none [&::-webkit-meter-optimum-value]:bg-current',
      value: '[&::-moz-meter-bar]:border-none [&::-moz-meter-bar]:bg-none [&::-moz-meter-bar]:bg-current'
    },
    bar: {
      transition: '[&::-webkit-meter-optimum-value]:transition-all [&::-moz-meter-bar]:transition-all',
      ring: '',
      rounded: '[&::-webkit-meter-optimum-value]:rounded-full [&::-moz-meter-bar]:rounded-full',
      size: {
        '2xs': '[&::-webkit-meter-optimum-value]:h-px [&::-moz-meter-bar]:h-px',
        xs: '[&::-webkit-meter-optimum-value]:h-0.5 [&::-moz-meter-bar]:h-0.5',
        sm: '[&::-webkit-meter-optimum-value]:h-1 [&::-moz-meter-bar]:h-1',
        md: '[&::-webkit-meter-optimum-value]:h-2 [&::-moz-meter-bar]:h-2',
        lg: '[&::-webkit-meter-optimum-value]:h-3 [&::-moz-meter-bar]:h-3',
        xl: '[&::-webkit-meter-optimum-value]:h-4 [&::-moz-meter-bar]:h-4',
        '2xl': '[&::-webkit-meter-optimum-value]:h-5 [&::-moz-meter-bar]:h-5'
      }
    }
  },
  label: {
    base: 'flex gap-2 items-center',
    text: 'truncate',
    color: 'text-{color}-500 dark:text-{color}-400',
    size: {
      '2xs': 'text-xs',
      xs: 'text-xs',
      sm: 'text-sm',
      md: 'text-sm',
      lg: 'text-sm',
      xl: 'text-base',
      '2xl': 'text-base'
    }
  },
  color: {
    white: 'text-white dark:text-black',
    black: 'text-black dark:text-white',
    gray: 'text-gray-500 dark:text-gray-400'
  },
  default: {
    size: 'md',
    color: 'primary'
  }
}

{
  wrapper: 'flex flex-col gap-2 w-full',
  base: 'flex flex-row flex-nowrap flex-shrink overflow-hidden',
  background: 'bg-gray-200 dark:bg-gray-700',
  transition: 'transition-all',
  rounded: 'rounded-full',
  shadow: '',
  list: 'list-disc list-inside',
  orientation: {
    'rounded-none': {
      left: 'rounded-s-none',
      right: 'rounded-e-none'
    },
    'rounded-sm': {
      left: 'rounded-s-sm',
      right: 'rounded-e-sm'
    },
    rounded: {
      left: 'rounded-s',
      right: 'rounded-e'
    },
    'rounded-md': {
      left: 'rounded-s-md',
      right: 'rounded-e-md'
    },
    'rounded-lg': {
      left: 'rounded-s-lg',
      right: 'rounded-e-lg'
    },
    'rounded-xl': {
      left: 'rounded-s-xl',
      right: 'rounded-e-xl'
    },
    'rounded-2xl': {
      left: 'rounded-s-2xl',
      right: 'rounded-e-2xl'
    },
    'rounded-3xl': {
      left: 'rounded-s-3xl',
      right: 'rounded-e-3xl'
    },
    'rounded-full': {
      left: 'rounded-s-full',
      right: 'rounded-e-full'
    }
  },
  default: {
    size: 'md',
    icon: 'i-heroicons-minus-20-solid'
  }
}

链接

渲染 NuxtLink，但具有超能力。

模态框

在您的应用程序中显示模态框。