Size

Set container width or height with rapid

How to apply size

You can apply width with the following pattern w-[range] or h-[range].

Size example

RapidContainer(
  styles: "w-10",
  child: MyWidget()
);

RapidContainer(
  styles: "h-8",
  child: MyWidget()
);

RapidContainer(
  styles: "w-10 h-10 rounded-full bg-grey-500", // full circle
  child: MyWidget()
);

Width symbols

• w-0
• w-1
• w-2
• w-3
• w-4
• w-5
• w-6
• w-7
• w-8
• w-9
• w-10
• w-11
• w-12
• w-14
• w-16
• w-20
• w-24
• w-28
• w-32
• w-36
• w-40
• w-44
• w-48
• w-52
• w-56
• w-60
• w-64
• w-72
• w-80
• w-96

Height symbols

• h-0
• h-1
• h-2
• h-3
• h-4
• h-5
• h-6
• h-7
• h-8
• h-9
• h-10
• h-11
• h-12
• h-14
• h-16
• h-20
• h-24
• h-28
• h-32
• h-36
• h-40
• h-44
• h-48
• h-52
• h-56
• h-60
• h-64
• h-72
• h-80
• h-96

Range to PX

• [symbol]-0 = 0px
• [symbol]-1 = 4px
• [symbol]-2 = 8px
• [symbol]-3 = 12px
• [symbol]-4 = 16px
• [symbol]-5 = 20px
• [symbol]-6 = 24px
• [symbol]-7 = 28px
• [symbol]-8 = 32px
• [symbol]-9 = 36px
• [symbol]-10 = 40px
• [symbol]-11 = 44px
• [symbol]-12 = 48px
• [symbol]-14 = 56px
• [symbol]-16 = 65px
• [symbol]-20 = 80px
• [symbol]-24 = 96px
• [symbol]-28 = 112px
• [symbol]-32 = 128px
• [symbol]-36 = 144px
• [symbol]-40 = 160px
• [symbol]-44 = 176px
• [symbol]-48 = 192px
• [symbol]-52 = 208px
• [symbol]-56 = 224px
• [symbol]-60 = 240px
• [symbol]-64 = 256px
• [symbol]-72 = 288px
• [symbol]-80 = 320px
• [symbol]-96 = 384px