Top / Right / Bottom / Left
Control element offsets from any side.
Import​
src/screens/Component.js
import { pos } from "nativeflowcss";
Properties​
| Object | Native Properties |
|---|---|
| pos.t_px | { top: 1 } |
| pos.r_px | { right: 1 } |
| pos.b_px | { bottom: 1 } |
| pos.l_px | { left: 1 } |
| pos.t_0 | { top: 0 } |
| pos.r_0 | { right: 0 } |
| pos.b_0 | { bottom: 0 } |
| pos.l_0 | { left: 0 } |
| pos.t_1 | { top: 4 } |
| pos.r_1 | { right: 4 } |
| pos.b_1 | { bottom: 4 } |
| pos.l_1 | { left: 4 } |
| pos.t_2 | { top: 8 } |
| pos.r_2 | { right: 8 } |
| pos.b_2 | { bottom: 8 } |
| pos.l_2 | { left: 8 } |
| pos.t_3 | { top: 12 } |
| pos.r_3 | { right: 12 } |
| pos.b_3 | { bottom: 12 } |
| pos.l_3 | { left: 12 } |
| pos.t_4 | { top: 16 } |
| pos.r_4 | { right: 16 } |
| pos.b_4 | { bottom: 16 } |
| pos.l_4 | { left: 16 } |
| pos.t_5 | { top: 20 } |
| pos.r_5 | { right: 20 } |
| pos.b_5 | { bottom: 20 } |
| pos.l_5 | { left: 20 } |
| pos.t_6 | { top: 24 } |
| pos.r_6 | { right: 24 } |
| pos.b_6 | { bottom: 24 } |
| pos.l_6 | { left: 24 } |
| pos.t_7 | { top: 28 } |
| pos.r_7 | { right: 28 } |
| pos.b_7 | { bottom: 28 } |
| pos.l_7 | { left: 28 } |
| pos.t_8 | { top: 32 } |
| pos.r_8 | { right: 32 } |
| pos.b_8 | { bottom: 32 } |
| pos.l_8 | { left: 32 } |
| pos.t_9 | { top: 36 } |
| pos.r_9 | { right: 36 } |
| pos.b_9 | { bottom: 36 } |
| pos.l_9 | { left: 36 } |
| pos.t_10 | { top: 40 } |
| pos.r_10 | { right: 40 } |
| pos.b_10 | { bottom: 40 } |
| pos.l_10 | { left: 40 } |
| pos.t_11 | { top: 44 } |
| pos.r_11 | { right: 44 } |
| pos.b_11 | { bottom: 44 } |
| pos.l_11 | { left: 44 } |
| pos.t_12 | { top: 48 } |
| pos.r_12 | { right: 48 } |
| pos.b_12 | { bottom: 48 } |
| pos.l_12 | { left: 48 } |
| pos.t_14 | { top: 56 } |
| pos.r_14 | { right: 56 } |
| pos.b_14 | { bottom: 56 } |
| pos.l_14 | { left: 56 } |
| pos.t_16 | { top: 64 } |
| pos.r_16 | { right: 64 } |
| pos.b_16 | { bottom: 64 } |
| pos.l_16 | { left: 64 } |
| pos.t_20 | { top: 80 } |
| pos.r_20 | { right: 80 } |
| pos.b_20 | { bottom: 80 } |
| pos.l_20 | { left: 80 } |
| pos.t_24 | { top: 96 } |
| pos.r_24 | { right: 96 } |
| pos.b_24 | { bottom: 96 } |
| pos.l_24 | { left: 96 } |
| pos.t_28 | { top: 112 } |
| pos.r_28 | { right: 112 } |
| pos.b_28 | { bottom: 112 } |
| pos.l_28 | { left: 112 } |
| pos.t_32 | { top: 128 } |
| pos.r_32 | { right: 128 } |
| pos.b_32 | { bottom: 128 } |
| pos.l_32 | { left: 128 } |
| pos.t_36 | { top: 144 } |
| pos.r_36 | { right: 144 } |
| pos.b_36 | { bottom: 144 } |
| pos.l_36 | { left: 144 } |
| pos.t_40 | { top: 160 } |
| pos.r_40 | { right: 160 } |
| pos.b_40 | { bottom: 160 } |
| pos.l_40 | { left: 160 } |
| pos.t_44 | { top: 176 } |
| pos.r_44 | { right: 176 } |
| pos.b_44 | { bottom: 176 } |
| pos.l_44 | { left: 176 } |
| pos.t_48 | { top: 192 } |
| pos.r_48 | { right: 192 } |
| pos.b_48 | { bottom: 192 } |
| pos.l_48 | { left: 192 } |
| pos.t_52 | { top: 208 } |
| pos.r_52 | { right: 208 } |
| pos.b_52 | { bottom: 208 } |
| pos.l_52 | { left: 208 } |
| pos.t_56 | { top: 224 } |
| pos.r_56 | { right: 224 } |
| pos.b_56 | { bottom: 224 } |
| pos.l_56 | { left: 224 } |
| pos.t_60 | { top: 240 } |
| pos.r_60 | { right: 240 } |
| pos.b_60 | { bottom: 240 } |
| pos.l_60 | { left: 240 } |
| pos.t_64 | { top: 256 } |
| pos.r_64 | { right: 256 } |
| pos.b_64 | { bottom: 256 } |
| pos.l_64 | { left: 256 } |
| pos.t_72 | { top: 288 } |
| pos.r_72 | { right: 288 } |
| pos.b_72 | { bottom: 288 } |
| pos.l_72 | { left: 288 } |
| pos.t_80 | { top: 320 } |
| pos.r_80 | { right: 320 } |
| pos.b_80 | { bottom: 320 } |
| pos.l_80 | { left: 320 } |
| pos.t_96 | { top: 384 } |
| pos.r_96 | { right: 384 } |
| pos.b_96 | { bottom: 384 } |
| pos.l_96 | { left: 384 } |
Custom Aspect Ratios​
Custom properties are usually rendered using _(customValue)
| Object | Native Properties |
|---|---|
| pos.t_(customValue) | { top: customValue } |
| pos.r_(customValue) | { right: customValue } |
| pos.b_(customValue) | { bottom: customValue } |
| pos.l_(customValue) | { left: customValue } |