Try Install Learn Blog API Packages GitHub
Pages
mint-ui

Search
Basic information
Entities
Versions
Dependencies
mint-color 0.9.0 <= v < 1.0.0

Ui.Header

The header component with a brand and navigation items which on mobile collapses into a icon which when interacted with opens up an action sheet with the navigation items.

States

openDropdowns
:
Map(String, Bool)
=
Map.empty()

A state to store the state of the dropdowns.

url
:
Url
=
Window.url()

A state to store the current url.

width
:
Number
=
0

Properties

brand
:
Html
=
<></>

Content for the brand.

breakpoint
:
Number
=
1000

The breakpoint for the mobile version.

gap
:
Ui.Size
=
Ui.Size::Em(2)

The gap between the items.

height
:
Ui.Size
=
Ui.Size::Em(3.5)

The height of the component.

icon
:
Html
=
Ui.Icons:THREE_BARS

The menu icon.

items
:
Array(Ui.NavItem)
=
[]

The navigation items.

size
:
Ui.Size
=
Ui.Size::Inherit

The size of the component.

Functions

handleClick
:
Promise(Void)

The menu icon click handler.

render
:
Html

Renders the component.

renderItem
(
iconBefore
:
Html
iconAfter
:
Html
label
:
String
)

Renders the contents of an item.

updateUrl
(
url
:
Url
)

Updates the url state.

updateWidth
(
dimensions
:
Dom.Dimensions
)

Updates the width state based on the dimensions and breakpoint.