Related Pages
The VRelatedPages component is a Vue 3 component that displays a table of related pages, grouped by a specified category.
Props
| Prop Name | Type | Required | Description |
|---|---|---|---|
data | readonly UiContentNode[] | Yes | Tree nodes whose data provides link fields and whose children provide related links. |
ts
interface UiContentBaseRecord {
readonly url: string;
readonly title: string;
}
interface UiContentNode {
readonly data: UiContentBaseRecord | undefined;
children(): readonly UiContentNode[];
}Example
vue
<script setup lang="ts">
import { VRelatedPages } from '@webdevelop-pro/ui-kit/docs';
const relatedPages = [
{
data: { title: 'Group 1', url: '/group-1' },
children: () => [
{ title: 'Related Page 1', url: '/related-page-1' },
{ title: 'Related Page 2', url: '/related-page-2' },
].map(data => ({ data, children: () => [] })),
},
{
data: { title: 'Group 2', url: '/group-2' },
children: () => [
{ title: 'Related Page 3', url: '/related-page-3' },
{ title: 'Related Page 4', url: '/related-page-4' },
].map(data => ({ data, children: () => [] })),
},
];
</script>
<VRelatedPages :data="relatedPages" />VSectionRelatedPages
The VSectionRelatedPages component wraps the VRelatedPages component within a VSection, allowing for a title slot and providing a structured layout for displaying related pages.
Props
| Prop Name | Type | Required | Description |
|---|---|---|---|
data | readonly UiContentNode[] | Yes | The same readonly tree-node contract consumed by VRelatedPages. |
Slots
default: Slot for additional content displayed above the related pages.
Example
vue
<script setup lang="ts">
import { VSectionRelatedPages } from '@webdevelop-pro/ui-kit/docs';
const relatedPages = [
{
data: { title: 'Group 1', url: '/group-1' },
children: () => [
{ title: 'Related Page 1', url: '/related-page-1' },
{ title: 'Related Page 2', url: '/related-page-2' },
].map(data => ({ data, children: () => [] })),
},
];
</script>
<VSectionRelatedPages :data="relatedPages">
<h2>Related Pages</h2>
</VSectionRelatedPages>