Skip to content

Home

Jump to bottom
Xaviju edited this page Dec 15, 2015 · 29 revisions

Polymux documentation

Set of components and its status

Colors

A default set of colors palette for apps

  • Primary color
  • Secondary color
  • Text color
  • Success color
  • Warning color
  • Error color

Container polymux-container

A container is a content wrapper. It allows to set the basic structure.

Block polymux-block

A block is a section wrapper. It wraps a content section and allows to set a section structure. Its commonly used as a child of a polymux-container

Dialog polymux-dialog

A floating container, similar to the polymux-block

[Navigation bar](Navigation Bar) polymux-navigation-bar

Its a special container that contains a navigation bar. It requires a tab child item

  • Tab A child component of the navigation, it accepts a tab name and a link address

Headers

Its a set of titles and subtitles in different sizes in order to create hierarchy. It should be able to be set in colors and weights.

Buttons polymux-button

A button can set its color and should have a link address. States

  • Normal: its normal status
  • Focused: When hover
  • Pressed: When the element is pressed
  • Disabled: A disabled button

Paragraphs polymux-paragraph

A paragraph component is the default component for adding text. It that can link anywhere.

Unordered List

An unordered list component.

  • Item A child component of the list

Ordered List

An ordered list component.

  • Item A child component of the list

Form

A container for for elements, it can have a title

Input Field

Its a common text field, it should show an error message on error. States

  • Normal: default status
  • Focused: When user is focusing
  • Disabled: When disabled
  • Password: A password input
  • Email: An email input

Checkbox

A checkbox button with a label.

  • Default: Unchecked
  • Checked
  • Disabled
  • Focused: On hover
  • Pressed

Switch

  • Default: Unchecked
  • Checked
  • Disabled
  • Focused: On hover
  • Pressed

Radio

A radio button with a label. Radio buttons should interact amongst themselves (id?, name?)

  • Default: Unchecked
  • Checked
  • Disabled
  • Focused: On hover
  • Pressed

Radio

A radio button with a label. Radio buttons should interact amongst themselves (id?, name?)

  • Default: Unchecked
  • Checked
  • Disabled
  • Focused: On hover
  • Pressed

Range

A range selector. It should be able to edit the default range.

Spinner

A loading component for elements with a long loading times

Progress bar

Shows a progress bar, its loading value should be editable

Notification

A notification for fast messages to the users

  • Success
  • Warning
  • Error

Logo

A component for logo or project title

Icons

A component for icons set

  • Icon should be editable
  • Icon set should be included in SVG

Images

A component for random images

Clone this wiki locally