lwc-ui
Minimal UI Components for Prototypes. View Demo
Install
npm install lwc-ui
Components
ui-attention
Attention - Attention danger text.
Slot | Components |
---|---|
left |
ui-icon |
default | Text |
right |
ui-icon |
ui-badge
Badge - Work in Progress...
Button with Badge 42
ui-button
Button - Account Button
Attribute | Default | Values |
---|---|---|
block |
false |
true , false |
onclick |
n/a | MouseEvent |
active |
null |
index or ui-button name |
onactive |
n/a | { detail: true } |
ui-button-group
ButtonGroup - Button 1 Button 2
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 foronactive
to trigger.
ui-card
Card - Cards can section content.
Header Hello! Footer
Attribute | Default | Values |
---|---|---|
shadow |
0 |
0 , 1 , 2 , 3 |
ui-context-menu
ContextMenu - Wrap any element to add a right click context menu.
Right Click Here Option 1
Attribute | Default | Values |
---|---|---|
placement |
bottom-start |
Popper Placement |
ui-dropdown
Dropdown - This works the same as ui-picker
but will display a caret on button elements that flips based on placement
.
Down Option 1
Attribute | Default | Values |
---|---|---|
placement |
bottom-start |
Popper Placement |
Note: The
menu
slot can be any element, but the most common will beui-menu
.
ui-flex
Flex - Flex layout helper tags.
Column 1 (flex=1) Column 2 (flex=2) Column 3 (flex=content)
Attribute | Default | Values |
---|---|---|
flex |
content |
Usually an integer |
column |
flex-direction: column |
|
row |
flex-direction: row |
ui-form
Form - The form shold wrap any elements you plan to use. It will handle simple things like validation.
Type Textarea Submit 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.
ui-icon
Icon - Use with the @mdi/js
package which contains thousands of icons.
;// ... mdiAccount: string = mdiAccount;
ui-list
List - List is often used with the ui-card
component.
Items Item 1 Additional Items Item 2
ui-menu
Menu - The menu can be used by itself or with ui-context-menu
, ui-dropdown
, and ui-picker
.
Option 1 Option 2 Option 3
ui-modal
Modal - Title Content Button
ui-picker
Picker - Exact same as ui-dropdown
, but does not cause a inner ui-button
to render a caret. Think date picker dropdown.
Down This can be absolutely anything.
Attribute | Default | Values |
---|---|---|
placement |
bottom-start |
Popper Placement |
ui-tab
Tab - The ui-tab
creates tabs using the existing ui-nav
and ui-nav-item
elements.
Basic Tab 1 Basic Tab 2 Basic Tab 1 content Basic Tab 2 content
ui-toast
Toast - To use the toast service you must include one ui-toast
component in the root of your app.
;// ...;showWarningToast'Ehh... could be worse', 3;showErrorToast'No good.', 3;showLoadingToast'Soon...', 3;// Remove a specific toastremoveToastid;// Or remove all toastsremoveAllToasts;
ui-tree
Tree - Item 1 Sub Item 1 Sub Item 2
Attribute | Default | Values |
---|---|---|
variant |
default |
default , chevron , folder |
Why?
Mostly using this to try out ideas in TypeScript.