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.