Appearance

Section Header ​

Beta Warning

This component is in beta and should not be used unless requested by design.

A section header component, with a title slot and an action button the defaults to "View All" button that triggers an action.

Section Title

Usage ​

This component can be imported locally like:

ts
import SectionHeader from '@leaflink/SectionHeader/SectionHeader.vue';

A slot for the title exists and renders as a header on the left of the component

template
<SectionHeader>
  Section Title
</SectionHeader>

from here we can customize the action label, action icon, and the action event emitted from clicking the action button. The action-label defaults to "View All", and the action-icon defaults to "arrow-right." No default action is set.

template
<SectionHeader
  action-label="Do Something"
  action-icon="mj-leaf"
  @action-event="console.log('Logging');">
My Little Section
</SectionHeader>

My Little Section

Alternatively, to set the button as a router link, you can use the to prop to specify the destination

template
<SectionHeader
  action-label="Go Somewhere"
  action-icon="chevron-right"
  to="/somewhere">
My Little Section
</SectionHeader>

API ​

See the documentation below for a complete reference to all the props and classes available to the components mentioned here.