Skip to content

Home

Jump to bottom
Xavier Julián edited this page Dec 16, 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 can include text and link anywhere. Its the default component for text blocks.

Images polymux-image

Adds a simple image component. We can set our own image or use an image placeholder.

List polymux-list

An unordered list component.

  • Item A child component of the list

Form polymux-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 polimux-notification

A notification message component on the top of the screen. Is commonly used for flash messaging the users about the status of an action.

Logo polimux-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
Clone this wiki locally