页面链接 - Nuxt UI Pro

使用

使用 title 和 links 道具显示链接列表。

标题

发现

<template>
  <UPageLinks
    :links="[{ icon: 'i-heroicons-pencil-square', label: 'Edit this page' }, { icon: 'i-heroicons-star', label: 'Star on GitHub', to: 'https://github.com/nuxt/ui', target: '_blank' }, { icon: 'i-heroicons-book-open', label: 'Nuxt documentation', to: 'https://nuxtjs.org.cn', target: '_blank' }]"
    title="Discover"
  />
</template>

您通常会在 Aside 或 ContentToc 组件的 #bottom 槽中使用此组件。这将与 ContentToc 和 NavigationTree 的链接设计相匹配。

pages/[...slug].vue

<script setup lang="ts">
const route = useRoute()

const { data: page } = await useAsyncData(route.path, () => queryContent(route.path).findOne())
if (!page.value) {
  throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
}

const links = computed(() => [{
  icon: 'i-ph-pen-duotone',
  label: 'Edit this page',
  to: `https://github.com/nuxt/nuxt/edit/main/docs/${page?.value?._file?.split('/').slice(1).join('/')}`,
  target: '_blank'
}, {
  icon: 'i-ph-shooting-star-duotone',
  label: 'Star on GitHub',
  to: 'https://github.com/nuxt/nuxt',
  target: '_blank'
}, {
  icon: 'i-ph-chat-centered-text-duotone',
  label: 'Chat on Discord',
  to: 'https://discord.com/invite/ps2h6QT',
  target: '_blank'
}, {
  icon: 'i-ph-hand-heart-duotone',
  label: 'Become a Sponsor',
  to: 'https://github.com/sponsors/nuxt',
  target: '_blank'
}])
</script>

<template>
  <UPage>
    <UPageHeader v-bind="page" />

    <UPageBody prose>
      <ContentRenderer v-if="page && page.body" :value="page" />
    </UPageBody>

    <template v-if="page.toc !== false" #right>
      <UContentToc :links="page.body?.toc?.links">
        <template #bottom>
          <div class="hidden lg:block space-y-6" :class="{ '!mt-6': page.body?.toc?.links?.length }">
            <UDivider v-if="page.body?.toc?.links?.length" type="dashed" />

            <UPageLinks title="Community" :links="links" />
          </div>
        </template>
      </UContentToc>
    </template>
  </UPage>
</template>

槽

标题

{}

默认

{}

道具

标题

字符串

未定义

任何

{}

链接

PageLink[]

[]

配置

{
  wrapper: 'space-y-3',
  title: 'text-sm/6 font-semibold flex items-center gap-1.5',
  container: 'space-y-3 lg:space-y-1.5',
  base: 'flex items-center gap-1.5',
  active: 'text-primary',
  inactive: 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200',
  icon: {
    base: 'w-5 h-5 flex-shrink-0'
  },
  avatar: {
    base: 'self-center',
    size: '2xs'
  },
  externalIcon: {
    name: 'i-heroicons-arrow-up-right-20-solid',
    base: 'w-3 h-3 absolute top-0.5 -right-3.5 text-gray-400 dark:text-gray-500'
  },
  label: 'text-sm/6 font-medium relative'
}

PageHero

您的页面的响应式英雄区域。

PricingCard

包含显示定价计划所需的一切的预构建卡片。