Code
<template>
<w-stack gap="medium" direction="column" full-width align-items="stretch">
<w-text type="subSectionHeading">
Header basic
</w-text>
<w-header title="Patients">
<div slot="actions">
<w-button label="Import patients" variant="secondary"></w-button>
<w-button label="New patient" leading-icon="plus" variant="primary"></w-button>
</div>
</w-header>
</w-stack>
</template>
Props
|
Name |
Description |
Type |
Default |
Values |
|---|---|---|---|---|
|
parent-navigation |
Array of objects representing the list of parent pages. For one parent page, it renders a Link. For more than one, it renders Breadcrumbs. |
array |
|
[ { label: String, href: String, to: String, isActive: Boolean } ] |
|
title |
Title of the page. |
string |
|
|
|
title-tag-type |
Specifies the HTML tag for the title. Useful for changing the semantic meaning of the title. |
string |
h1 |
p, h1, h2, h3, h4, span, div |
|
badge |
Displays a trailing badge to support the page title. |
string |
|
|
|
badge-type |
Specifies the type of the badge. |
string |
neutral |
accent, accent-inverted, neutral, info, success, warning, danger, neutral-inverted, info-inverted, success-inverted, warning-inverted, danger-inverted |
|
description |
Displays an additional text below the title. |
string |
|
|
Slots
|
Name |
Description |
|---|---|
|
actions |
Used to render header actions |