Products · Components
View
A box that lays out what it holds in a column or a row, and can look like a card.
Every page has one View around the rest. Nest more Views to group content into rows, columns and cards.
Children: Components
Example
<View variant="card" direction="row" align="center" justify="between">
<Text weight="medium">Balance</Text>
<Text weight="bold" numeric>SLE 1,250.00</Text>
</View>Props
| Prop | Type | What it is |
|---|---|---|
id | string | A name for this.captureView, which makes a picture of this View. |
hidden | boolean | Takes the View off the screen and keeps what's inside alive, such as a Scroll's position. An <If> removes what's inside, so it starts afresh when it comes back. |
disabled | boolean | Dims the View, and nothing in it takes a tap. Screen readers skip it, so say why outside it. |
gap | spacing | |
direction | column, row | |
align | stretch, start, center, end | Across direction. |
justify | start, center, end, between | Along direction. between puts the first and last child at the ends. |
wrap | boolean | Lets children that don't fit flow onto another line. |
grow | boolean | Fills the space the parent has left, along the parent's direction. |
padding, paddingTop, paddingStart, paddingEnd, paddingBottom | spacing | Space inside its edges, all round or on one side. |
variant | plain, card | card is a surface with a hairline and rounded corners. The box props change any of those. Default: plain. |
elevation | none, low, high | A shadow under the box, so it seems to sit above the page. high is for what floats over others. |
background | background, or a custom color | |
border | border | |
radius | corner radius | |
width | fill, or a number of points | |
height | fill, or a number of points | |
minHeight | number | |
maxWidth | number | |
aspect | aspect ratio |
Events
| Event | Sends | Notes |
|---|---|---|
onTap | Nothing |