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

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