페이지링크 (PageLinks)

페이지에 표시할 링크 목록입니다.

Usage

PageLinks 구성 요소를 사용하여 링크 목록을 표시할 수 있습니다.

<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>

링크

links prop을 다음 속성을 가진 오브젝트 배열로 사용합니다.

label: string
icon?: string
class?: any - {lang="ts-type"}
ui?: { item?: ClassNameValue, link?: ClassNameValue, linkLabel?: ClassNameValue, linkLabelExternalIcon?: ClassNameValue, linkLeadingIcon?: ClassNameValue } Xph033x{lang="ts-type"}

Link 구성 요소(예: to, target 등)에서 모든 속성을 전달할 수 있습니다.

<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>

제목

title Prop을 사용하여 링크 위에 제목을 표시합니다.

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>

예

이러한 예제에서는 Nuxt Content를 사용하지만 구성 요소는 모든 콘텐츠 관리 시스템과 통합 할 수 있습니다.

페이지 안에서

ContentToc 구성 요소의 bottom 슬롯에 있는 PageLinks 구성 요소를 사용하여 목차 아래에 링크 목록을 표시합니다.

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

Theme (## 테마)

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'
                ]
              }
            }
          }
        }
      }
    })
  ]
})

변경 로그

No recent changes

PageHero

A responsive hero for your pages.

PageList

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