链接

GitHub

一个围绕的包装器，并提供额外的 props。

用法

链接组件是一个围绕<NuxtLink>的包装器，使用了自定义prop。它提供了一些额外的 props

inactive-class prop 用于设置链接不活跃时的类，active-class 在活跃时使用。
exact prop 用于在链接活跃且路由与当前路由完全相同时，通过 active-class 进行样式设置。
exact-query 和 exact-hash props 用于在链接活跃且查询或哈希与当前查询或哈希完全相同时，通过 active-class 进行样式设置。
- 使用 exact-query="partial" 在链接活跃且查询部分匹配当前查询时，通过 active-class 进行样式设置。

这样做的目的是为了提供与 Nuxt 2 / Vue 2 中 NuxtLink 相同的 API。你可以在 Vue Router从 Vue 2 迁移指南中了解更多信息。

它被 Breadcrumb、Button、ContextMenu、DropdownMenu 和 NavigationMenu 组件使用。

样式

默认情况下，链接具有默认的活跃和不活跃样式，请查看#主题部分。

过渡到

链接

<template>
  <ULink to="/components/link">Link</ULink>
</template>

尝试改变 to prop 以查看活跃和不活跃状态。

你可以通过使用 raw prop 并使用 class、active-class 和 inactive-class 提供自己的样式来覆盖此行为。

过渡到

activeClass

inactiveClass

链接

<template>
  <ULink raw to="/components/link" active-class="font-bold" inactive-class="text-muted">Link</ULink>
</template>

智能提示

如果你正在使用 VSCode 并希望获得 active-class 和 inactive-class 类的自动补全，你可以将以下设置添加到你的 .vscode/settings.json

.vscode/settings.json

{
  "tailwindCSS.classAttributes": [
    "active-class",
    "inactive-class"
  ]
}

API

属性

属性	默认值	类型
`as`	`'button'`	`any` 此组件在不是链接时应呈现的元素或组件。
`type`	`'button'`	`"reset" \| "submit" \| "button"` 当不是链接时按钮的类型。
`disabled`		`boolean`
`active`	`undefined`	`boolean` 强制链接处于活动状态，独立于当前路由。
`exact`		`boolean` 仅当当前路由完全匹配时才处于活跃状态。
`exactQuery`		`boolean \| "partial"` 允许控制当前路由查询如何将链接设置为活跃状态。
`exactHash`		`boolean` 仅当当前路由哈希完全匹配时才处于活跃状态。
`inactiveClass`		`string` 链接不活跃时应用的类。
`raw`		`boolean` 当为 `true` 时，将只应用来自 `class`、`activeClass` 和 `inactiveClass` 的样式。
`过渡到`		`string \| RouteLocationAsRelativeGeneric \| RouteLocationAsPathGeneric` 点击时链接应导航到的路由位置。
`href`		`string \| RouteLocationAsRelativeGeneric \| RouteLocationAsPathGeneric` `to` 的别名。如果与 `to` 一起使用，`href` 将被忽略
`external`		`boolean` 强制将链接视为外部（true）或内部（false）。这有助于处理边缘情况
`target`		`null \| "_blank" \| "_parent" \| "_self" \| "_top" \| string & {}` 在何处显示链接的 URL，作为浏览上下文的名称。
`rel`		`null \| string & {} \| "noopener" \| "noreferrer" \| "nofollow" \| "sponsored" \| "ugc"` 要应用于链接的 rel 属性值。对于外部链接，默认为“noopener noreferrer”。
`noRel`		`boolean` 如果设置为 true，则不会向链接添加 rel 属性
`prefetchedClass`		`string` 应用于已预取链接的类。
`prefetch`		`boolean` 启用后将预取视口中链接的中间件、布局和有效负载。
`prefetchOn`		`"visibility" \| "interaction" \| Partial<{ visibility: boolean; interaction: boolean; }>` 允许控制何时预取链接。默认情况下，预取仅在可见时触发。
`noPrefetch`		`boolean` 禁用 `prefetch` 属性的应急方案。
`activeClass`		`string` 链接活跃时应用的类
`exactActiveClass`		`string` 链接完全活跃时应用的类
`ariaCurrentValue`	`'page'`	`"page" \| "step" \| "location" \| "date" \| "time" \| "true" \| "false"` 当链接完全活跃时，传递给 `aria-current` 属性的值。
`viewTransition`		`boolean` 如果支持，将 `router.push()` 返回的 Promise 传递给 `document.startViewTransition()`。
`replace`		`boolean` 调用 `router.replace` 而不是 `router.push`。

插槽

插槽	类型
`default`	`{ active: boolean; }`

主题

app.config.ts

export default defineAppConfig({
  ui: {
    link: {
      base: 'focus-visible:outline-primary',
      variants: {
        active: {
          true: 'text-primary',
          false: 'text-muted'
        },
        disabled: {
          true: 'cursor-not-allowed opacity-75'
        }
      },
      compoundVariants: [
        {
          active: false,
          disabled: false,
          class: [
            'hover:text-default',
            'transition-colors'
          ]
        }
      ]
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        link: {
          base: 'focus-visible:outline-primary',
          variants: {
            active: {
              true: 'text-primary',
              false: 'text-muted'
            },
            disabled: {
              true: 'cursor-not-allowed opacity-75'
            }
          },
          compoundVariants: [
            {
              active: false,
              disabled: false,
              class: [
                'hover:text-default',
                'transition-colors'
              ]
            }
          ]
        }
      }
    })
  ]
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'

export default defineConfig({
  plugins: [
    vue(),
    uiPro({
      ui: {
        link: {
          base: 'focus-visible:outline-primary',
          variants: {
            active: {
              true: 'text-primary',
              false: 'text-muted'
            },
            disabled: {
              true: 'cursor-not-allowed opacity-75'
            }
          },
          compoundVariants: [
            {
              active: false,
              disabled: false,
              class: [
                'hover:text-default',
                'transition-colors'
              ]
            }
          ]
        }
      }
    })
  ]
})

Kbd

显示键盘按键的 kbd 元素。

Modal

一个对话窗口，可用于显示消息或请求用户输入。