MOSS-UI

This component uses vue-agile.

Basic usage

Tag Chip

Contact Chip

Link Chip

Colored Chip

Custom close event

Default usage

Specifying position

middle-right

top-right

Hook on 'close' event

Default

Accordion

• accordion one

  accordion1

  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  nested

  Nested

  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

• accordion two

  accordion2

  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

• accordion three

  accordion3

  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Horizontal Collapse

with Grid

Collapse Toggle

This component is built on Popper.js

Toggle Dropdown

Hover Dropdown

Content Placements

Content Offset

With arrow

It is experimental feature yet.

Flip and PreventOverflow mode

Header and Divider

Disabled item

Append icon into dropdown button

Button tag as dropdown-item

Basic

With status color

Message Box

Basic

Close when another clicked

with Actions

Custom header

Icon close button

Transition Effects

Nested Modal

Basic

Multiple Navs

Dropdownlink 1link 2link 3

It's the navigation drawer that using horizontal-collapse.

Simple search component that fuzzy search given collection data such like json.

default

Example Search

Set Suggestions (Ajax Simulation)

• id: 1 name: James age: 35 Edit Delete
  id: 1 Name: Age: Cancel Edit
  Are you sure? Remove this model? Delete Cancel
• id: 2 name: Karen age: 24 Edit Delete
  id: 2 Name: Age: Cancel Edit
  Are you sure? Remove this model? Delete Cancel
• id: 3 name: Bob age: 30 Edit Delete
  id: 3 Name: Age: Cancel Edit
  Are you sure? Remove this model? Delete Cancel

Default Tab

Tab with Fade Effect

Tab Tip based by Color-set

Specifying container size of tab content.

Basic

Model name as html

Set icon