@maggioli-design-system/mds-header-bar NPM

mds-header-bar

This is a web-component from Maggioli Design System Magma, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.

Properties

Property	Attribute	Description	Type	Default
`menu`	`menu`	Sets the visibility type of the hamburger menu	`"all" \\| "desktop" \\| "mobile" \\| "none"`	`'mobile'`
`nav`	`nav`	Sets the visibility type of the navigation menu	`"all" \\| "desktop" \\| "mobile" \\| "none"`	`'desktop'`

Events

Event	Description	Type
`mdsHeaderBarOpen`	Emits when the component is opened	`CustomEvent<void>`

Methods

`setOpened(isOpened?: boolean) => Promise<void>`

Parameters

Name	Type	Description
`isOpened`	`boolean`

Returns

Type: Promise<void>

Slots

Slot	Description
`"default"`	Put contents, like logo and a small description shown on the left of the component. Add `text string`, `HTML elements` or `components` to this slot.
`"nav"`	Put the actions shown when the component is on desktop mode. Add `HTML elements` or `components`, it is recommended to use `mds-button` element.

Shadow Parts

Part	Description
`"actions"`	Selects the element which wraps `nav` and `hamburger` parts
`"content"`
`"hamburger"`	Selects the `hamburger` menu action element
`"nav"`	Selects the `nav` element that contains the horizontal menu

Dependencies

Depends on

mds-button

Graph

graph TD;
  mds-header-bar --> mds-button
  mds-button --> mds-spinner
  mds-button --> mds-icon
  mds-button --> mds-text
  style mds-header-bar fill:#f9f,stroke:#333,stroke-width:4px

Built with love @ Gruppo Maggioli from R&D Department

@maggioli-design-system/mds-button @maggioli-design-system/styles @stencil/core

@infinitebrahmanuniverse/nolb-_mag @everything-registry/sub-chunk-570 @zalastax/nolb-_mag @maggioli-design-system/mds-header

9 months ago

12 months ago

12 months ago

6 months ago