garysoed / mask

Display

Displays are components that cannot be interacted with. Their purpose is for display only. They enforce some styling, but cannot be composed with other components.

• mk-code-block (β): Displays a block of code, with syntax highlighting.
• mk-icon (β): Displays an SVG icon.

Layout

Layouts are components that cannot be interacted with. They enforce margins and paddings and does not display anything, unless the appropriate slots are filled.

• mk-drawer-layout (β): Expands and collapses.
• mk-line-layout (α): Displays things in a line.
• mk-list-item-layout (α): Layouts out the items as a list item. This means adding a slot for bullet point and a details row.
• mk-overlay-layout
• mk-root-layout (α): Provides a general root layout for the app.

Action

Interactable components.

• mk-button (β): Represents a button.
• mk-checkbox (β): Represents a checkbox.
• mk-number-input
• mk-radio-input (β): Radio input.
• mk-text-input (β): Represents a text input.

Note:

• Unimplemented
• implemented (α)
• implemented and demoed (β)