Status UI components

From Status Wiki
This is the approved revision of this page, as well as being the most recent.
Jump to: navigation, search

List

List item separator

List renderers

Action button

Action button

Action button separator

Action button container

Sticky button

Forms

List form

List form header

Contacts

Contact list item

Text input with label

List

List item separator

Android iOS
Image14.png Image9.png

No separator on android

Component: status-im.components.common.common.list-separator

Renderers: status-im.components.renderers.renderers.list-separator-renderer

List renderers

Renderers:

status-im.components.renderers.renderers.list-separator-renderer

status-im.components.renderers.renderers.list-header-renderer

status-im.components.renderers.renderers.llist-footer-renderer

Action button

Action button

Android iOS
Image4.png Image1.png

No background circle, black label

Background circle, blue label

Component: status-im.components.action-button.action-button.action-button

Action button separator

Android iOS
Image4.png Image1.png

No separator on android

Component: status-im.components.action-button.action-button.action-separator

Action button container

Android iOS
Image10.png Image15.png

Padding top 8

Padding bottom 8

Style: status-im.components.action-button.styles.actions-list

Sticky button

Android iOS
Image3.png Image13.png

Uppercase

Component: status-im.components.sticky-button.sticky-button

Forms

List form

Android iOS
Image6.png Image7.png

shadows[a]

Padding top 8

Padding bottom 8

Gap between forms 16

Gap between forms 16

Component:

Form spacer: status-im.components.common.common.form-spacer

Shadows: status-im.components.common.common.top-shaddow

status-im.components.common.common.bottom-shaddow

List form header

Android iOS
Image5.png Image11.png

Height 56

margin top 10

Height 53

margin top 16

Component: status-im.components.common.common.form-title

Contacts

Contact list item

Android iOS
Image12.png Image2.png

Components:

status-im.components.contact.contact.contact-view

status-im.components.contact.contact.toogle-contact-view

Text input with label

Android iOS
Image8.png Image16.png

Components: status-im.components.text-input-with-label.view.text-input-with-label

[a]now we have gradient rectangles