lwc-ui

lwc-ui

Minimal UI Components for Prototypes. View Demo

Install

npm install lwc-ui

Components

Attention - ui-attention

<ui-attention variant="danger">
  <ui-icon slot="left" path={mdiAlertOctagon}></ui-icon>
  Attention danger text.
</ui-attention>

Slot	Components
left	ui-icon
default	Text
right	ui-icon

Badge - ui-badge

Work in Progress...

<ui-button>
  Button with Badge
  <ui-badge slot="right">42</ui-badge>
</ui-button>

Button - ui-button

<ui-button>
  <ui-icon slot="left" path={mdiAccount}></ui-icon>
  Account Button
</ui-button>

Attribute	Default	Values
block	false	true, false
onclick	n/a	MouseEvent
active	null	index or ui-button name
onactive	n/a	{ detail: true }

ButtonGroup - ui-button-group

<ui-button-group>
  <ui-button>Button 1</ui-button>
  <ui-button>Button 2</ui-button>
</ui-button-group>

Attribute	Default	Values
block	false	true, false
active	null	index or ui-button name
onactive	n/a	{ detail: { index: 0, name: null }}

Note: active must be set for onactive to trigger.

Card - ui-card

Cards can section content.

<ui-card>
  <ui-card-header>
    Header
  </ui-card-header>
  <ui-card-body>
    <p>Hello!</p>
  </ui-card-body>
  <ui-card-footer>
    Footer
  </ui-card-footer>
</ui-card>

Attribute	Default	Values
shadow	0	0, 1, 2, 3

ContextMenu - ui-context-menu

Wrap any element to add a right click context menu.

<ui-context-menu>
  <div>Right Click Here</div>
  <ui-menu slot="menu">
    <ui-menu-item>Option 1</ui-menu-item>
  </ui-menu>
</ui-context-menu>

Attribute	Default	Values
placement	bottom-start	Popper Placement

Dropdown - ui-dropdown

This works the same as ui-picker but will display a caret on button elements that flips based on placement.

<ui-dropdown>
  <ui-button>Down</ui-button>
  <ui-menu slot="menu">
    <ui-menu-item>Option 1</ui-menu-item>
  </ui-menu>
</ui-dropdown>

Attribute	Default	Values
placement	bottom-start	Popper Placement

Note: The menu slot can be any element, but the most common will be ui-menu.

Flex - ui-flex

Flex layout helper tags.

<ui-flex>
  <ui-flex flex="1">Column 1 (flex=1)</ui-flex>
  <ui-flex flex="2">Column 2 (flex=2)</ui-flex>
  <ui-flex>Column 3 (flex=content)</ui-flex>
</ui-flex>

Attribute	Default	Values
flex	content	Usually an integer
column		flex-direction: column
row		flex-direction: row

Form - ui-form

The form shold wrap any elements you plan to use. It will handle simple things like validation.

<ui-form oninit={handleFormInit} onsubmit={handleFormSubmit} onchange={handleFormChange}>
  <ui-label>
    Type Textarea
    <ui-input type="textarea" value={value}></ui-textarea>
  </ui-label>
  <ui-button submit>Submit Form</button>
</ui-form>

Component	ui-input type=*	Attributes
ui-input-text	text	value, minlength, maxlength, pattern
ui-input-counter	counter	value, step, min, max
ui-textarea	textarea	value, minlength, maxlength, pattern
ui-input-number	number	value, min, max, step
ui-input-password	password	value, minlength
ui-input-syntax	syntax	value, parts

Input Syntax

This is a text input with auto complete.

@track

Icon - ui-icon

Use with the @mdi/js package which contains thousands of icons.

import { mdiAccount } from '@mdi/js';
// ...
@track mdiAccount: string = mdiAccount;

<ui-icon path={mdiAccount}></ui-icon>

List - ui-list

List is often used with the ui-card component.

<ui-list>
  <ui-list-header>Items</ui-list-header>
  <ui-list-item>Item 1</ui-list-item>
  <ui-list-separator></ui-list-separator>
  <ui-list-section>
    <ui-list-header>Additional Items</ui-list-header>
    <ui-list-item>
      <ui-icon slot="left" path={mdiNumeric1}></ui-icon>
      Item 2
    </ui-list-item>
  </ui-list-section>
</ui-list>

Menu - ui-menu

The menu can be used by itself or with ui-context-menu, ui-dropdown, and ui-picker.

<ui-menu>
  <ui-menu-item>Option 1</ui-menu-item>
  <ui-menu-separator></ui-menu-separator>
  <ui-menu-item>Option 2</ui-menu-item>
  <ui-menu-item>Option 3</ui-menu-item>
</ui-menu>

Modal - ui-modal

<ui-modal>
  <ui-modal-header>Title</ui-modal-header>
  <ui-modal-body>Content</ui-modal-body>
  <ui-modal-footer>
    <ui-button>Button</ui-button>
  </ui-modal-footer>
</ui-modal>

Picker - ui-picker

Exact same as ui-dropdown, but does not cause a inner ui-button to render a caret. Think date picker dropdown.

<ui-dropdown>
  <ui-button>Down</ui-button>
  <div slot="menu">
    This can be absolutely anything.
  </div>
</ui-dropdown>

Attribute	Default	Values
placement	bottom-start	Popper Placement

Tab - ui-tab

The ui-tab creates tabs using the existing ui-nav and ui-nav-item elements.

<ui-tab>
  <ui-nav>
    <ui-nav-item>
      Basic Tab 1
    </ui-nav-item>
    <ui-nav-item>
      Basic Tab 2
    </ui-nav-item>
  </ui-nav>
  <ui-tab-item>
    Basic Tab 1 content
  </ui-tab-item>
  <ui-tab-item>
    Basic Tab 2 content
  </ui-tab-item>
</ui-tab>

Toast - ui-toast

To use the toast service you must include one ui-toast component in the root of your app.

<ui-toast></ui-toast>

import {
  showToast,
  showWarningToast,
  showErrorToast,
  showLoadingToast,
  removeToast,
  removeAllToasts
} from `lwc-ui`;
// ...
var id = showToast('Saved');
showWarningToast('Ehh... could be worse', 3);
showErrorToast('No good.', 3);
showLoadingToast('Soon...', 3);
// Remove a specific toast
removeToast(id);
// Or remove all toasts
removeAllToasts();

Tree - ui-tree

<ui-tree folder={isFolder}>
  <ui-tree-item>
    Item 1
    <ui-tree-item-group>
      <ui-tree-item>
        Sub Item 1
      </ui-tree-item>
      <ui-tree-item>
        <ui-icon path={mdiFile}></ui-icon>
        Sub Item 2
      </ui-tree-item>
    </ui-tree-item-group>
  </ui-tree-item>
</ui-tree>

Attribute	Default	Values
variant	default	default, chevron, folder

Why?

Mostly using this to try out ideas in TypeScript.