Usage
Links
Use the links prop as an array of objects with the following properties:
label: stringicon?: IconComponentclass?: anyb24ui?: { item?: ClassNameValue, link?: ClassNameValue, linkLabel?: ClassNameValue, linkLabelExternalIcon?: ClassNameValue, linkLeadingIcon?: ClassNameValue }
You can pass any property from the Link component such as to, target, etc.
<script setup lang="ts">
import type { PageLink } from '@bitrix24/b24ui-nuxt'
const links = ref<PageLink[]>([
{
label: 'Edit this page',
to: 'https://github.com/bitrix24/b24ui/blob/main/docs/content/docs/2.components/page-links.md'
},
{
label: 'Star on GitHub',
to: 'https://github.com/bitrix24/b24ui'
},
{
label: 'Releases',
to: 'https://github.com/bitrix24/b24ui/releases'
}
])
</script>
<template>
<B24PageLinks :links="links" />
</template>
Title
Use the title prop to display a title above the links.
<script setup lang="ts">
import type { PageLink } from '@bitrix24/b24ui-nuxt'
const links = ref<PageLink[]>([
{
label: 'Edit this page',
to: 'https://github.com/bitrix24/b24ui/blob/main/docs/content/docs/2.components/page-links.md'
},
{
label: 'Star on GitHub',
to: 'https://github.com/bitrix24/b24ui'
},
{
label: 'Releases',
to: 'https://github.com/bitrix24/b24ui/releases'
}
])
</script>
<template>
<B24PageLinks title="Community" :links="links" />
</template>
Examples
While these examples use Nuxt Content, the components can be integrated with any content management system.
Within a page
Use the PageLinks component in the bottom slot of the ContentToc component to display a list of links below the table of contents.
pages/[...slug].vue
<script setup lang="ts">
import type { PageLink } from '@bitrix24/b24ui-nuxt'
import DocumentSignIcon from '@bitrix24/b24icons-vue/main/DocumentSignIcon'
import AiStarsIcon from '@bitrix24/b24icons-vue/outline/AiStarsIcon'
import RocketIcon from '@bitrix24/b24icons-vue/outline/RocketIcon'
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[]>(() => [{
label: 'Edit this page',
icon: DocumentSignIcon,
to: `https://github.com/bitrix24/b24ui/blob/main/docs/content/docs/2.components/${page?.value?.stem}.md`,
target: '_blank'
}, {
label: 'Star on GitHub',
icon: AiStarsIcon,
to: 'https://github.com/bitrix24/b24ui',
target: '_blank'
}, {
label: 'Releases',
icon: RocketIcon,
to: 'https://github.com/bitrix24/b24ui/releases'
}])
</script>
<template>
<div>
<div>
<ContentRenderer :value="page" />
<B24Separator />
<B24ContentSurround :surround="surround" />
</div>
<div>
<B24ContentToc :links="page.body.toc.links">
<template #bottom>
<B24Separator type="dashed" />
<B24PageLinks title="Community" :links="links" />
</template>
</B24ContentToc>
</div>
</div>
</template>
API
Props
Slots
Theme
app.config.ts
export default defineAppConfig({
b24ui: {
pageLinks: {
slots: {
root: 'flex flex-col gap-[12px]',
title: 'text-(--b24ui-typography-legend-color) text-(length:--ui-font-size-md) leading-(--ui-font-line-height-md) font-(--ui-font-weight-semi-bold) flex items-center gap-[6px]',
list: 'flex flex-col gap-[8px]',
item: 'relative',
link: 'group text-(length:--ui-font-size-sm) cursor-pointer focus-visible:outline-(--ui-color-accent-main-primary) focus-visible:outline-1 focus-visible:rounded-[4px] text-start text-(--ui-color-design-selection-content) underline-offset-2 hover:text-(--ui-color-accent-main-primary-alt-2) hover:underline flex flex-row items-center justify-between',
linkWrapper: 'flex items-center gap-[6px]',
linkLeadingIcon: 'size-5 shrink-0',
linkLabel: 'truncate',
linkLabelExternalIcon: 'size-4 text-(--ui-color-design-selection-content) group-hover:text-(--ui-color-accent-main-primary-alt-2)'
},
variants: {
active: {
true: {
link: 'text-(--ui-color-accent-main-primary-alt-2)',
linkLabelExternalIcon: 'text-(--ui-color-accent-main-primary-alt-2)'
},
false: {
link: [
'text-(--ui-color-design-selection-content) hover:text-(--ui-color-accent-main-primary-alt-2)'
]
}
}
}
}
}
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import bitrix24UIPluginVite from '@bitrix24/b24ui-nuxt/vite'
export default defineConfig({
plugins: [
vue(),
bitrix24UIPluginVite({
b24ui: {
pageLinks: {
slots: {
root: 'flex flex-col gap-[12px]',
title: 'text-(--b24ui-typography-legend-color) text-(length:--ui-font-size-md) leading-(--ui-font-line-height-md) font-(--ui-font-weight-semi-bold) flex items-center gap-[6px]',
list: 'flex flex-col gap-[8px]',
item: 'relative',
link: 'group text-(length:--ui-font-size-sm) cursor-pointer focus-visible:outline-(--ui-color-accent-main-primary) focus-visible:outline-1 focus-visible:rounded-[4px] text-start text-(--ui-color-design-selection-content) underline-offset-2 hover:text-(--ui-color-accent-main-primary-alt-2) hover:underline flex flex-row items-center justify-between',
linkWrapper: 'flex items-center gap-[6px]',
linkLeadingIcon: 'size-5 shrink-0',
linkLabel: 'truncate',
linkLabelExternalIcon: 'size-4 text-(--ui-color-design-selection-content) group-hover:text-(--ui-color-accent-main-primary-alt-2)'
},
variants: {
active: {
true: {
link: 'text-(--ui-color-accent-main-primary-alt-2)',
linkLabelExternalIcon: 'text-(--ui-color-accent-main-primary-alt-2)'
},
false: {
link: [
'text-(--ui-color-design-selection-content) hover:text-(--ui-color-accent-main-primary-alt-2)'
]
}
}
}
}
}
})
]
})