Skip to content

Home

Jump to bottom
Xavier Julián edited this page Dec 17, 2015 · 29 revisions

Polymux documentation

Set of components and its status

Theming

Application theme can be edited

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 form container for form fields. It can link to result pages

Input polymux-input

The polymux-input is used to create interactive controls for forms in order to accept data from the user.

Checkbox polymux-checkbox

A form component that can be turned on and off. The user can switch the state of the checkbox.

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