Skip to content

Latest commit

 

History

History
47 lines (41 loc) · 1.13 KB

readme.md

File metadata and controls

47 lines (41 loc) · 1.13 KB

LayoutHeader

Layout component for the section motif of FOLIO with customizeable title and actions. Defaults to having a single default action.

Usage

<LayoutBox>
  <LayoutHeader title="Section" onDelete={()=>{}}/>
  <div>Content in section</div>
</LayoutBox>

Properties

Name type description default required
title string text for the header of the section
level number The header level of the rendered <Hx> tag. (1-6). 3
actions array of { title, icon, handler } see examples
onDelete function to support delete actions in the simplest use case.
noActions bool hides action buttons. Useful for 'read-only' mode.

Custom Actions

The actions prop can be used to supply a custom set of rendered buttons with icons. The type is an array of objects with the shape of:

[
  {
    title: string,
    icon: string,
    handler: function
  },
  ...
]

The simple delete action configuration looks like this:

[
  {
    title: 'Delete',
    icon: 'trash',
    handler: props.onDelete,
  },
]

The array will render out as buttons containing icons.