Moon Liveview Library

Storybook
- Getting Started
- Actions
- Containers & layout
- Content display
  - Accordion
  - Avatar
  - Carousel
  - List
  - Table
- Forms & selection controls
- Indicators & status
- Messaging & feedback
- Navigation

Getting Started
Getting Started
Button
Actions Button
Icon Button
Actions Icon Button
Bottom Sheet
Containers & layout Bottom Sheet
Dialog
Containers & layout Dialog
Drawer
Containers & layout Drawer
Dropdown
Containers & layout Dropdown
Accordion
Content display Accordion
Avatar
Content display Avatar
Carousel
Content display Carousel
List
Content display List
Table
Content display Table
Authenticator
Forms & selection controls Authenticator
Checkbox
Forms & selection controls Checkbox
Chip
Forms & selection controls Chip
Input
Forms & selection controls Input
Radio
Forms & selection controls Radio
Segmented Control
Forms & selection controls Segmented Control
Select
Forms & selection controls Select
Switch
Forms & selection controls Switch
Textarea
Forms & selection controls Textarea
Badge
Indicators & status Badge
Circular Progress
Indicators & status Circular Progress
Linear Progress
Indicators & status Linear Progress
Loader
Indicators & status Loader
Placeholder
Indicators & status Placeholder
Tag
Indicators & status Tag
Alert
Messaging & feedback Alert
Snackbar
Messaging & feedback Snackbar
Tooltip
Messaging & feedback Tooltip
Breadcrumb
Navigation Breadcrumb
Menu
Navigation Menu
Pagination
Navigation Pagination
Tab List
Navigation Tab List

Table

Title	Title	Title
Cell	Cell	Cell
Cell	Cell	Cell
Cell	Cell	Cell

<.table >
  <:col>Title</:col>
  <:col>Title</:col>
  <:col>Title</:col>
  <:row>
    <.table_cell>Cell</.table_cell>
    <.table_cell>Cell</.table_cell>
    <.table_cell>Cell</.table_cell>
  </:row>
  <:row>
    <.table_cell>Cell</.table_cell>
    <.table_cell>Cell</.table_cell>
    <.table_cell>Cell</.table_cell>
  </:row>
  <:row>
    <.table_cell>Cell</.table_cell>
    <.table_cell>Cell</.table_cell>
    <.table_cell>Cell</.table_cell>
  </:row>
</.table>

More data Open in playground

Id	Username	Email	Is Unicorn?
#1	Alice Smith #1	[email protected]	false
#2	Carlos Rivera #2	[email protected]	true
#3	Eva Müller #3	[email protected]	false
#4	Tom Lee #4	[email protected]	true
#5	Nina Patel #5	[email protected]	false
#6	John Doe #6	[email protected]	true
#7	George Wang #7	[email protected]	false
#8	Lena Novak #8	[email protected]	true
#9	Omar Farah #9	[email protected]	false
#10	Sofia Rossi #10	[email protected]	true

<.table >
  <:col>Id</:col>
  <:col>Username</:col>
  <:col>Email</:col>
  <:col>Is Unicorn?</:col>
  <:row>
    <.table_cell>#1</.table_cell>
    <.table_cell>Alice Smith #1</.table_cell>
    <.table_cell>[email protected]</.table_cell>
    <.table_cell>false</.table_cell>
  </:row>
  <:row>
    <.table_cell>#2</.table_cell>
    <.table_cell>Carlos Rivera #2</.table_cell>
    <.table_cell>[email protected]</.table_cell>
    <.table_cell>true</.table_cell>
  </:row>
  <:row>
    <.table_cell>#3</.table_cell>
    <.table_cell>Eva Müller #3</.table_cell>
    <.table_cell>[email protected]</.table_cell>
    <.table_cell>false</.table_cell>
  </:row>
  <:row>
    <.table_cell>#4</.table_cell>
    <.table_cell>Tom Lee #4</.table_cell>
    <.table_cell>[email protected]</.table_cell>
    <.table_cell>true</.table_cell>
  </:row>
  <:row>
    <.table_cell>#5</.table_cell>
    <.table_cell>Nina Patel #5</.table_cell>
    <.table_cell>[email protected]</.table_cell>
    <.table_cell>false</.table_cell>
  </:row>
  <:row>
    <.table_cell>#6</.table_cell>
    <.table_cell>John Doe #6</.table_cell>
    <.table_cell>[email protected]</.table_cell>
    <.table_cell>true</.table_cell>
  </:row>
  <:row>
    <.table_cell>#7</.table_cell>
    <.table_cell>George Wang #7</.table_cell>
    <.table_cell>[email protected]</.table_cell>
    <.table_cell>false</.table_cell>
  </:row>
  <:row>
    <.table_cell>#8</.table_cell>
    <.table_cell>Lena Novak #8</.table_cell>
    <.table_cell>[email protected]</.table_cell>
    <.table_cell>true</.table_cell>
  </:row>
  <:row>
    <.table_cell>#9</.table_cell>
    <.table_cell>Omar Farah #9</.table_cell>
    <.table_cell>[email protected]</.table_cell>
    <.table_cell>false</.table_cell>
  </:row>
  <:row>
    <.table_cell>#10</.table_cell>
    <.table_cell>Sofia Rossi #10</.table_cell>
    <.table_cell>[email protected]</.table_cell>
    <.table_cell>true</.table_cell>
  </:row>
</.table>