PageAncher

Eine Liste der Anker, die auf der Seite angezeigt werden sollen.

Bearbeiten

Verwenden Sie die PageAnchors-Komponente, um eine Liste von Links anzuzeigen.

<script setup lang="ts">
import type { PageAnchor } from '@nuxt/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-github',
    to: 'https://github.com/nuxt/ui/releases',
    target: '_blank'
  }
])
</script>

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

<script setup lang="ts">
import { ref } from 'vue'
import type { PageAnchor } from '@nuxt/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-github',
    to: 'https://github.com/nuxt/ui/releases',
    target: '_blank'
  }
])
</script>

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

x027xLinks (englisch)

Verwenden Sie die links-prop als Array von Objekten mit den folgenden Eigenschaften:

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

Sie können jede Eigenschaft der Komponente Link übergeben, z. B. to, target usw.

<script setup lang="ts">
import type { PageAnchor } from '@nuxt/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-github',
    to: 'https://github.com/nuxt/ui/releases',
    target: '_blank'
  }
])
</script>

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

<script setup lang="ts">
import { ref } from 'vue'
import type { PageAnchor } from '@nuxt/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-github',
    to: 'https://github.com/nuxt/ui/releases',
    target: '_blank'
  }
])
</script>

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

Beispiele:

Während diese Beispiele Nuxt Content verwenden, können die Komponenten in jedes Content Management System integriert werden.

In einem Layout

Verwenden Sie die PageAnchors-Komponente in der Komponente PageAside, um eine Liste von Links oberhalb der Navigation anzuzeigen.

layouts/docs.vue

<script setup lang="ts">
import type { PageAnchor } from '@nuxt/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>
  <UPage>
    <template #left>
      <UPageAside>
        <UPageAnchors :links="links" />

        <USeparator type="dashed" />

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

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

API ist

Props (englisch)

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 Bearbeiten

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; }`

Theme Bearbeiten

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 '@nuxt/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 (deutsch)

No recent changes

Page

A grid layout for your pages with left and right columns.

PageAside

A sticky aside to display your page navigation.