PageAnchorsPRO

GitHub
页面中显示的锚点列表。

用法

链接

使用 links 属性作为一个包含以下属性的对象数组

  • label: string
  • icon?: string

你可以传递 Link 组件的任何属性，例如 to, target 等。

<script setup lang="ts">
import type { PageAnchor } from '@nuxt/ui-pro'

const links = ref<PageAnchor[]>([
  {
    label: 'Documentation',
    icon: 'i-lucide-book-open',
    to: '/getting-started'
  },
  {
    label: 'Components',
    icon: 'i-lucide-box',
    to: '/components/app'
  },
  {
    label: 'Roadmap',
    icon: 'i-lucide-map',
    to: '/roadmap'
  },
  {
    label: 'Figma Kit',
    icon: 'i-simple-icons-figma',
    to: 'https://www.figma.com/community/file/1288455405058138934',
    target: '_blank'
  },
  {
    label: 'Releases',
    icon: 'i-simple-icons-github',
    to: 'https://github.com/nuxt/ui/releases',
    target: '_blank'
  }
])
</script>

<template>
  <UPageAnchors :links="links" />
</template>

示例

虽然这些示例使用了Nuxt Content，但这些组件可以与任何内容管理系统集成。

在布局中

在 PageAside 组件内部使用 PageAnchors 组件，以便在导航上方显示链接列表。

layouts/docs.vue
<script setup lang="ts">
import type { PageAnchor } from '@nuxt/ui-pro'
import type { ContentNavigationItem } from '@nuxt/content'

const navigation = inject<ContentNavigationItem[]>('navigation')

const links: PageAnchor[] = [{
  label: 'Documentation',
  icon: 'i-lucide-book-open',
  to: '/getting-started'
}, {
  label: 'Components',
  icon: 'i-lucide-box',
  to: '/components/app'
}, {
  label: 'Roadmap',
  icon: 'i-lucide-map',
  to: '/roadmap'
}, {
  label: 'Figma Kit',
  icon: 'i-simple-icons-figma',
  to: 'https://www.figma.com/community/file/1288455405058138934',
  target: '_blank'
}, {
  label: 'Releases',
  icon: 'i-lucide-rocket',
  to: 'https://github.com/nuxt/ui/releases',
  target: '_blank'
}]
</script>

<template>
  <UPage>
    <template #left>
      <UPageAside>
        <UPageAnchors :links="links" />

        <USeparator type="dashed" />

        <UContentNavigation :navigation="navigation" />
      </UPageAside>
    </template>

    <slot />
  </UPage>
</template>

API

属性 (Props)

属性 (Prop)默认值类型
as

'nav'

any

该组件应渲染为的元素或组件。

links

PageAnchor[]

ui

{ root?: ClassNameValue; list?: ClassNameValue; item?: ClassNameValue; link?: ClassNameValue; linkLeading?: ClassNameValue; linkLeadingIcon?: ClassNameValue; linkLabel?: ClassNameValue; linkLabelExternalIcon?: ClassNameValue; }

插槽 (Slots)

插槽 (Slot)类型
link

{ link: PageAnchor; active: boolean; }

link-leading

{ link: PageAnchor; active: boolean; }

link-label

{ link: PageAnchor; active: boolean; }

link-trailing

{ link: PageAnchor; active: boolean; }

主题

app.config.ts
export default defineAppConfig({
  uiPro: {
    pageAnchors: {
      slots: {
        root: '',
        list: '',
        item: 'relative',
        link: 'group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary',
        linkLeading: 'rounded-md p-1 inline-flex ring-inset ring',
        linkLeadingIcon: 'size-4 shrink-0',
        linkLabel: 'truncate',
        linkLabelExternalIcon: 'size-3 absolute top-0 text-dimmed'
      },
      variants: {
        active: {
          true: {
            link: 'text-primary font-semibold',
            linkLeading: 'bg-primary ring-primary text-inverted'
          },
          false: {
            link: [
              'text-muted hover:text-default font-medium',
              'transition-colors'
            ],
            linkLeading: [
              'bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted',
              'transition'
            ]
          }
        }
      }
    }
  }
})
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({
      uiPro: {
        pageAnchors: {
          slots: {
            root: '',
            list: '',
            item: 'relative',
            link: 'group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary',
            linkLeading: 'rounded-md p-1 inline-flex ring-inset ring',
            linkLeadingIcon: 'size-4 shrink-0',
            linkLabel: 'truncate',
            linkLabelExternalIcon: 'size-3 absolute top-0 text-dimmed'
          },
          variants: {
            active: {
              true: {
                link: 'text-primary font-semibold',
                linkLeading: 'bg-primary ring-primary text-inverted'
              },
              false: {
                link: [
                  'text-muted hover:text-default font-medium',
                  'transition-colors'
                ],
                linkLeading: [
                  'bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted',
                  'transition'
                ]
              }
            }
          }
        }
      }
    })
  ]
})
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({
      uiPro: {
        pageAnchors: {
          slots: {
            root: '',
            list: '',
            item: 'relative',
            link: 'group text-sm flex items-center gap-1.5 py-1 focus-visible:outline-primary',
            linkLeading: 'rounded-md p-1 inline-flex ring-inset ring',
            linkLeadingIcon: 'size-4 shrink-0',
            linkLabel: 'truncate',
            linkLabelExternalIcon: 'size-3 absolute top-0 text-dimmed'
          },
          variants: {
            active: {
              true: {
                link: 'text-primary font-semibold',
                linkLeading: 'bg-primary ring-primary text-inverted'
              },
              false: {
                link: [
                  'text-muted hover:text-default font-medium',
                  'transition-colors'
                ],
                linkLeading: [
                  'bg-elevated/50 ring-accented text-dimmed group-hover:bg-primary group-hover:ring-primary group-hover:text-inverted',
                  'transition'
                ]
              }
            }
          }
        }
      }
    })
  ]
})

PageAccordion

一个预先样式的 Accordion 组件，可在页面中显示。

PageAside

一个固定的侧边栏，用于显示页面导航。