Cell
Cell component is the most commonly used component of UI. It consists of several other components — Image or Icon, Title or Body and Suffix. Both, Suffix and Body has a possibility accepts other components or combinations of components.
We align Badges placed in cell-image according to the widest badge in remaining cells. For this reason iOS and Android by default has size — width/height and alignment — vertical/horizontal properties built-in in all components. You can apply these to properties to extend the cell-image width.
For Web, however, we need to use additional wrapper to handle these properties.
Style
Cell has three different styles — standard, compact and edge, while standard is default one. Each of these corresponds to spacing given around the Cell.
Navigating
Navigating cell is used when intentions it to navigate somewhere after user clicks on the cell. In most cases, this leads to another screen.
Divider
Cell by default has bottom divider, which starts from the cell content (next element after Cell Image, if it’s available) and goes till the edge of Cell container. You can also disable it with divider property.
Rounded
Rounded cell has rounded corners and is mainly used for Disruptions display.
Documentation
Specifications
// Base
$cell-background-color : palette(cb1);
$cell-divider-color : $divider-color-default;
$cell-divider-thickness : $divider-thickness;
$cell-roundness : unit(1.5); // 6px
// Text
$cell-title-text-type : 'title';
$cell-body-text-type : 'body';
$cell-suffix-text-type : 'body';
// Sizes
$cell-spacing : unit(2); // 8px
$cell-suffix-spacing : $cell-spacing;
$cell-title-padding-right : $cell-spacing;
$cell-padding : unit(4); // 16px
$cell-padding-compact : unit(3); // 12px
$cell-padding-edge : unit(0); // 0px
// States
$cell-focused-darkness-unit : 0.02; // 0.02
$cell-clicked-darkness-unit : ($cell-focused-darkness-unit * 2); // 0.04
API
| Name | Values | Default |
|---|---|---|
| image / icon | component | nil |
| title | string | ’’ |
| body | component | nil |
| suffix | component | nil |
| style | standard / compact / edge | standard |
| background_color | string | CB1 |
| navigating | true / false | true |
| divider | true / false | true |
| rounded | true / false | false |