PageLinks

GitLab
Uma lista de links para ser exibida na página.

Uso

Use o componente PageLinks para exibir uma lista de links.

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

const links = ref<PageLink[]>([
  {
    label: 'Edit this page',
    icon: 'i-lucide-file-pen',
    to: 'https://gitlab.nitro.news/nitro/ui/-/blob/main/docs/content/3.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>
  <NPageLinks :links="links" />
</template>

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

const links = ref<PageLink[]>([
  {
    label: 'Edit this page',
    icon: 'i-lucide-file-pen',
    to: 'https://gitlab.nitro.news/nitro/ui/-/blob/main/docs/content/3.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>
  <NPageLinks :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, linkLeadingIcon?: ClassNameValue }

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

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

const links = ref<PageLink[]>([
  {
    label: 'Edit this page',
    icon: 'i-lucide-file-pen',
    to: 'https://gitlab.nitro.news/nitro/ui/-/blob/main/docs/content/3.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>
  <NPageLinks :links="links" />
</template>

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

const links = ref<PageLink[]>([
  {
    label: 'Edit this page',
    icon: 'i-lucide-file-pen',
    to: 'https://gitlab.nitro.news/nitro/ui/-/blob/main/docs/content/3.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>
  <NPageLinks :links="links" />
</template>

Título

Use a prop title para exibir um título acima dos links.

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

const links = ref<PageLink[]>([
  {
    label: 'Edit this page',
    icon: 'i-lucide-file-pen',
    to: 'https://gitlab.nitro.news/nitro/ui/-/blob/main/docs/content/3.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>
  <NPageLinks title="Community" :links="links" />
</template>

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

const links = ref<PageLink[]>([
  {
    label: 'Edit this page',
    icon: 'i-lucide-file-pen',
    to: 'https://gitlab.nitro.news/nitro/ui/-/blob/main/docs/content/3.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>
  <NPageLinks title="Community" :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 uma página

Use o componente PageLinks no slot bottom do componente ContentToc para exibir uma lista de links abaixo do sumário.

pages/[...slug].vue
<script setup lang="ts">
import type { PageLink } from '@nitro/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>
  <NPage>
    <NPageHeader :title="page.title" :description="page.description" />

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

      <NSeparator />

      <NContentSurround :surround="surround" />
    </NPageBody>

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

          <NPageLinks title="Community" :links="links" />
        </template>
      </NContentToc>
    </template>
  </NPage>
</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; }

Tema

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 '@nitro/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

No recent changes

PageHero

Um hero responsivo para as suas páginas.

PageList

Um layout de lista vertical para exibir conteúdo em formato empilhado.