SIP - UI Component Specifications - Mobile
From Emprise Wiki
Contents
- 1 Components
- 1.1 Checkboxes
- 1.2 Buttons
- 1.3 App Bar - Top
- 1.4 Lists
- 1.5 Tabs
- 1.6 Dialogs
- 1.7 Procedure
- 1.8 Widgets
- 1.8.1 Attachments
- 1.8.2 Checkbox
- 1.8.3 Date
- 1.8.4 Date & Time
- 1.8.5 Drop Down Text Selection
- 1.8.6 Feet Inch
- 1.8.7 Grid Layout Widget
- 1.8.8 Image
- 1.8.9 Major Section
- 1.8.10 Minor Section
- 1.8.11 Multi Line Text Entry
- 1.8.12 Numeric Value Entry
- 1.8.13 Procedure Header
- 1.8.14 Single Line Text Entry
- 1.8.15 Text
- 1.8.16 Time
- 1.9 Keyboards
Components
Checkboxes
Specification
Usage
| State | Description | Specification Details |
|---|---|---|
|
Checkbox Selected | Background: #3598DB Check: #FFFFFF |
|
Checkbox Not Selected | Stroke: #9A9EA3 Background: #FFFFFF |
|
Unchecked Focus State | Stroke: #3598DB Circular Background: 36dp #3598DB @12% |
|
Checked Focus State | Icon: #3598DB Circular Background: 36dp #3598DB @12% |
Buttons
Contained Button
Color of contained buttons may change based on area of usage. Commonly used colors are:
- Blue: #458FD5
- Orange: #FF8D00
Disabled Contained Button
Text Button
Disabled Text Button
App Bar - Top
Standard
Prominent
Lists
Single Line
Two Line
Three Line
Tabs
Dialogs
Alert Dialog
- Alert dialogs provide users with urgent information or actions that need to be taken.
Confirmation Dialog
- Confirmation dialogs allow users to make a choice before committing to a decision.
- Dialog sizes and content may change based on usage.
With Sub-Title
Full-screen Dialog
Note: For Single-line List Items, List Item Title will be vertically centered.
Procedure
Margins
Widgets
Attachments
Checkbox
Date
Date Picker
Date Picker Spec
Date & Time
See Date and Time Sections Separately for Picker Specifications.
Drop Down Text Selection
Feet Inch
Grid Layout Widget
Image
Major Section
- If a major section is added to a procedure, the content within the major section shall have a background color.
Minor Section
Multi Line Text Entry
Numeric Value Entry
Procedure Header
- If header is above a major section, then the background of the header will be white.
- If a header is within a major section, then the background will take on the major section content background color.
Header in Body
- If a header is within a major section, then the background will take on the major section content background color.
Single Line Text Entry
Text
Time
Time Picker
Time Picker Spec
Keyboards
Alpha/Numeric Keyboard
Lowercase
Lowercase Specification
Caps
Caps Specification
Caps Lock
Caps Lock Specification
Speech to Text
Speech to Text Listening
Speech to Text Specifications
Speech to Text Listening Specifications
Numeric Keyboard
Numeric Keyboard Specification
Symbol Keyboard
Symbol Keyboard Specification
