PageAnchors

Uma lista de âncoras para ser exibida na página.

Uso

Use o componente PageAnchors para exibir uma lista de links.

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

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

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

<script setup lang="ts">
import { ref } from 'vue'
import type { PageAnchor } from '@nitro/ui'

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

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

Links

Use a prop links como um array de objetos com as seguintes propriedades:

label: string
icon?: string
class?: any
ui?: { item?: ClassNameValue, link?: ClassNameValue, linkLabel?: ClassNameValue, linkLabelExternalIcon?: ClassNameValue, linkLeading?: ClassNameValue, linkLeadingIcon?: ClassNameValue }

Você pode passar qualquer propriedade do componente Link, como to, target, etc.

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

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

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

<script setup lang="ts">
import { ref } from 'vue'
import type { PageAnchor } from '@nitro/ui'

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

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

Exemplos

Embora estes exemplos usem o Nuxt Content, os componentes podem ser integrados a qualquer sistema de gerenciamento de conteúdo.

Dentro de um layout

Use o componente PageAnchors dentro do componente PageAside para exibir uma lista de links acima da navegação.

layouts/docs.vue

<script setup lang="ts">
import type { PageAnchor } from '@nitro/ui'
import type { ContentNavigationItem } from '@nuxt/content'

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

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

<template>
  <NPage>
    <template #left>
      <NPageAside>
        <NPageAnchors :links="links" />

        <NSeparator type="dashed" />

        <NContentNavigation :navigation="navigation" />
      </NPageAside>
    </template>

    <slot />
  </NPage>
</template>

API

Props

Prop	Default	Type
`as`	`'nav'`	`any` The element or component this component should render as.
`links`		`T[]`
`ui`		`{ root?: SlotClass; list?: SlotClass; item?: SlotClass; link?: SlotClass; linkLeading?: SlotClass; linkLeadingIcon?: SlotClass; linkLabel?: SlotClass; linkLabelExternalIcon?: SlotClass; }`

Slots

Slot	Type
`link`	`{ link: T; active: boolean; ui: object; }`
`link-leading`	`{ link: T; active: boolean; ui: object; }`
`link-label`	`{ link: T; active: boolean; }`
`link-trailing`	`{ link: T; active: boolean; }`

Tema

app.config.ts

export default defineAppConfig({
  ui: {
    pageAnchors: {
      slots: {
        root: '',
        list: '',
        item: 'relative',
        link: 'group text-sm flex items-center gap-1.5 py-1 rounded-sm outline-primary/25 focus-visible:outline-3',
        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 '@nitro/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        pageAnchors: {
          slots: {
            root: '',
            list: '',
            item: 'relative',
            link: 'group text-sm flex items-center gap-1.5 py-1 rounded-sm outline-primary/25 focus-visible:outline-3',
            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'
                ]
              }
            }
          }
        }
      }
    })
  ]
})

Changelog

No recent changes

Page

Um layout em grade para as suas páginas com colunas à esquerda e à direita.

PageAside

Um aside fixo para exibir a navegação da sua página.