Design patterns

Components

Mono UI Components

Introduction

Mono UI components is an Ember components framework created by Mono Design.

It provides several base components to build app-like in an easy manner, with a clear and consistent component API.

Every component is documented. Its available arguments are listed clearly in an arguments table. Every component has namespaced CSS to its own name, so you can easily pick and choose components. If you want to use Mono components in full or only part of it, the choice is yours.

The CSS is purposefully kept simple, as bare CSS with no dependencies.

Design patterns

Components

Alert skins

The available alert skins.

This is a default alert.

This is a success alert.

This is an error alert.

Alert types

The available alert types.

Todo

Avatar

JR
<Avatar @initials="JR" />

Badge

Default badge
Success badge
Error badge 
<Badge>Default badge</Badge>
<Badge @skin="success">Success badge</Badge>
<Badge @skin="error">Error badge</Badge>

Buttons

<Button @skin="primary">Primary button</Button>
<Button>Regular button</Button>

Button toolbar

<ButtonToolbar>
  <Button>Button 1</Button>
  <Button>Button 2</Button>
</ButtonToolbar>

Inputs

Text

Color

Icons

The available icons.

Toolbar

I am a toolbar title.

Panels

Body only

Body only.

<Panel>
<Panel::Body>
  <p>Body only.</p>
</Panel::Body>
</Panel>

Regular panel

Panel header
Body content 
<Panel>
<Panel::Header>
  Panel header
</Panel::Header>
<Panel::Body>
  Body content
</Panel::Body>
</Panel>

Rich text

Renders text as rich text.

Hello world.

This is rich text.

  • List item 1
  • List item 2
  • List item 3
<RichText>
<p>Hello world.</p>
<p>This is rich text.</p>
<ul>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>
</RichText>