PageArticle Pro

Part of Pro. Versions up to 0.10 of the open source package include it under MIT; later releases keep it in Pro.

Article page. Slots: cover, body, toc, share, related.

Jump to API reference

Import

Vue
import { UiPageArticle } from '@ziyarago/ui-pro/vue'

Default

Article

Section

Cover slot
Article body slot
Share slot
Related posts slot
Table of contents slot
Vue
<UiPageArticle title="Article" subtitle="Section">
  <template #cover>Cover slot</template>
  <template #body>Article body slot</template>
  <template #toc>Table of contents slot</template>
  <template #share>Share slot</template>
  <template #related>Related posts slot</template>
</UiPageArticle>

API reference

Article template: cover, post body, sticky table of contents, share row and related posts.

Props

PropType and valuesDefaultDescription
titlestring—Page heading. The built-in header renders only when title is set and the header slot is empty.
subtitlestring—Caption under the heading.
crumbs{ label: string; href?: string }[]—Breadcrumb trail above the title.

Slots

Vue: named slots. React: a prop with the same name; default is children.

headerCustom page header; replaces the built-in title/subtitle/crumbs header.
actionsButtons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled).
coverCover image area with title and author line; a gradient Card or LazyImage.
bodyArticle text; Heading, Text, Code, Alert.
tocSticky table of contents; Card with a list of anchor links.
shareShare and reaction row; Button, IconButton, CopyButton.
relatedRelated posts; Card grid.

Notes

  • Place inside AppShell; fill only the slots you need.
  • Body, share and related share the main column; the table of contents stays visible on the right while the body scrolls and drops under the body below 860 px.