Pagelinaires

Une liste de liens à afficher dans la page.

Utilisation

Utilisez le composant PageLinks pour afficher une liste de liens.

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

const links = ref<PageLink[]>([
  {
    label: 'Edit this page',
    icon: 'i-lucide-file-pen',
    to: 'https://github.com/nuxt/ui/blob/v4/docs/content/docs/2.components/page-links.md'
  },
  {
    label: 'Star on GitHub',
    icon: 'i-lucide-star',
    to: 'https://github.com/nuxt/ui'
  },
  {
    label: 'Releases',
    icon: 'i-lucide-rocket',
    to: 'https://github.com/nuxt/ui/releases'
  }
])
</script>

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

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

const links = ref<PageLink[]>([
  {
    label: 'Edit this page',
    icon: 'i-lucide-file-pen',
    to: 'https://github.com/nuxt/ui/blob/v4/docs/content/docs/2.components/page-links.md'
  },
  {
    label: 'Star on GitHub',
    icon: 'i-lucide-star',
    to: 'https://github.com/nuxt/ui'
  },
  {
    label: 'Releases',
    icon: 'i-lucide-rocket',
    to: 'https://github.com/nuxt/ui/releases'
  }
])
</script>

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

Liens

Utilisez le prop links comme un tableau d'objets avec les propriétés suivantes:

xlabel: stringx{lang="ts-type"}
xicon?: stringx{lang="ts-type"}
xclass?: anyx{lang="ts-type"}
xui?: { item?: ClassNameValue, link?: ClassNameValue, linkLabel?: ClassNameValue, linkLabelExternalIcon?: ClassNameValue, linkLeadingIcon?: ClassNameValue }xx{lang="ts-type"}

Vous pouvez passer n'importe quelle propriété du composant Link telle que to, target, etc.

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

const links = ref<PageLink[]>([
  {
    label: 'Edit this page',
    icon: 'i-lucide-file-pen',
    to: 'https://github.com/nuxt/ui/blob/v4/docs/content/docs/2.components/page-links.md'
  },
  {
    label: 'Star on GitHub',
    icon: 'i-lucide-star',
    to: 'https://github.com/nuxt/ui'
  },
  {
    label: 'Releases',
    icon: 'i-lucide-rocket',
    to: 'https://github.com/nuxt/ui/releases'
  }
])
</script>

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

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

const links = ref<PageLink[]>([
  {
    label: 'Edit this page',
    icon: 'i-lucide-file-pen',
    to: 'https://github.com/nuxt/ui/blob/v4/docs/content/docs/2.components/page-links.md'
  },
  {
    label: 'Star on GitHub',
    icon: 'i-lucide-star',
    to: 'https://github.com/nuxt/ui'
  },
  {
    label: 'Releases',
    icon: 'i-lucide-rocket',
    to: 'https://github.com/nuxt/ui/releases'
  }
])
</script>

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

Titre

Utilisez le prop title pour afficher un titre au-dessus des liens.

title

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

const links = ref<PageLink[]>([
  {
    label: 'Edit this page',
    icon: 'i-lucide-file-pen',
    to: 'https://github.com/nuxt/ui/blob/v4/docs/content/docs/2.components/page-links.md'
  },
  {
    label: 'Star on GitHub',
    icon: 'i-lucide-star',
    to: 'https://github.com/nuxt/ui'
  },
  {
    label: 'Releases',
    icon: 'i-lucide-rocket',
    to: 'https://github.com/nuxt/ui/releases'
  }
])
</script>

<template>
  <UPageLinks title="Community" :links="links" />
</template>

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

const links = ref<PageLink[]>([
  {
    label: 'Edit this page',
    icon: 'i-lucide-file-pen',
    to: 'https://github.com/nuxt/ui/blob/v4/docs/content/docs/2.components/page-links.md'
  },
  {
    label: 'Star on GitHub',
    icon: 'i-lucide-star',
    to: 'https://github.com/nuxt/ui'
  },
  {
    label: 'Releases',
    icon: 'i-lucide-rocket',
    to: 'https://github.com/nuxt/ui/releases'
  }
])
</script>

<template>
  <UPageLinks title="Community" :links="links" />
</template>

Exemples

Bien que ces exemples utilisent Nuxt Content, les composants peuvent être intégrés à n'importe quel système de gestion de contenu.

Au sein d'une page

Utilisez le composant PageLinks dans l'emplacement bottom du composant ContentToc pour afficher une liste de liens sous la table des matières.

pages/[...slug].vue

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

const route = useRoute()

definePageMeta({
  layout: 'docs'
})

const { data: page } = await useAsyncData(route.path, () => {
  return queryCollection('docs').path(route.path).first()
})

const { data: surround } = await useAsyncData(`${route.path}-surround`, () => {
  return queryCollectionItemSurroundings('content', route.path)
})

const links = computed<PageLink[]>(() => [{
  icon: 'i-lucide-file-pen',
  label: 'Edit this page',
  to: `https://github.com/nuxt/ui/edit/v4/docs/content/${page?.value?.stem}.md`,
  target: '_blank'
}, {
  icon: 'i-lucide-star',
  label: 'Star on GitHub',
  to: 'https://github.com/nuxt/ui',
  target: '_blank'
}, {
  label: 'Releases',
  icon: 'i-lucide-rocket',
  to: 'https://github.com/nuxt/ui/releases'
}])
</script>

<template>
  <UPage>
    <UPageHeader :title="page.title" :description="page.description" />

    <UPageBody>
      <ContentRenderer :value="page" />

      <USeparator />

      <UContentSurround :surround="surround" />
    </UPageBody>

    <template #right>
      <UContentToc :links="page.body.toc.links">
        <template #bottom>
          <USeparator type="dashed" />

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

API

Props

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

Slots

Slot	Type
`title`	`{}`
`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; }`

Thème

app.config.ts

export default defineAppConfig({
  ui: {
    pageLinks: {
      slots: {
        root: 'flex flex-col gap-3',
        title: 'text-sm font-semibold flex items-center gap-1.5',
        list: 'flex flex-col gap-2',
        item: 'relative',
        link: 'group text-sm flex items-center gap-1.5 rounded-sm outline-primary/25 focus-visible:outline-3',
        linkLeadingIcon: 'size-5 shrink-0',
        linkLabel: 'truncate',
        linkLabelExternalIcon: 'size-3 absolute top-0 text-dimmed'
      },
      variants: {
        active: {
          true: {
            link: 'text-primary font-medium'
          },
          false: {
            link: [
              'text-muted 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: {
        pageLinks: {
          slots: {
            root: 'flex flex-col gap-3',
            title: 'text-sm font-semibold flex items-center gap-1.5',
            list: 'flex flex-col gap-2',
            item: 'relative',
            link: 'group text-sm flex items-center gap-1.5 rounded-sm outline-primary/25 focus-visible:outline-3',
            linkLeadingIcon: 'size-5 shrink-0',
            linkLabel: 'truncate',
            linkLabelExternalIcon: 'size-3 absolute top-0 text-dimmed'
          },
          variants: {
            active: {
              true: {
                link: 'text-primary font-medium'
              },
              false: {
                link: [
                  'text-muted hover:text-default',
                  'transition-colors'
                ]
              }
            }
          }
        }
      }
    })
  ]
})

Changelog écrit

No recent changes

PageHero

A responsive hero for your pages.

PageList

A vertical list layout for displaying content in a stacked format.