CodeTea.io
Properties panel

Properties panel

The properties panel edits the selected component: Flexbox direction and alignment, width and height, padding and margin, background and border colors, component type and text style. The Export tab shows the generated code.

1. Set layout flex box

Properties panel – Set layout flex box: screenshot with numbered callouts
Numbers in the screenshot match the list below.
  1. Tab design
  2. Tab export - result
  3. Set flex direction: View horizontal or view vertical
  4. Set justify content: flex-start, center, flex-end, space-between, space-around
  5. Set alignItems: flex-start, center, flex-end
  6. Ex: current view A, click to add parent view B
  7. Ex: current view A, click to remove view A (not remove views children of A)
  8. Ex: current view A, click to remove parent view B
  9. Ex: current view A, click to add above friend view B
  10. Ex: current view A, click to add children view B
  11. Ex: current view A, click to add under friend view B

2. Set layout width, height, border

Properties panel – Set layout width, height, border: screenshot with numbered callouts
Numbers in the screenshot match the list below.
  1. Set width
  2. Set height
  3. Set auto full width
  4. Set auto full height
  5. Set auto wrap width content of children view
  6. Set auto wrap height content of children view
  7. Set border radius, click to set each corner

3. Set layout padding/margin

Properties panel – Set layout padding/margin: screenshot with numbered callouts
Numbers in the screenshot match the list below.
  1. Set padding: top, bottom, left, right
  2. Set margin: top, bottom, left, right
  3. Set full padding

4. Set background color, border color

Properties panel – Set background color, border color: screenshot with numbered callouts
Numbers in the screenshot match the list below.
  1. Background color
  2. Click to add color gradient
  3. Input hex color
  4. Input opacity color
  5. Custom vector color gradient
  6. Input image background
  7. Border color
  8. Input border color
  9. Border width
  10. Border type: solid, dash, dot
  11. Remove gradient color

5. Change component

Properties panel – Change component: screenshot with numbered callouts
Numbers in the screenshot match the list below.
  1. Convert from view to button
  2. Set layout position absolute

6. Set text

Properties panel – Set text: screenshot with numbered callouts
Numbers in the screenshot match the list below.
  1. Set content text
  2. Set color text
  3. Set fontsize text
  4. Set style text: normal, italic, bold, italic-bold
  5. Set decoration: none, underline, through, underline-through
  6. Set width text, allow text enter and create new line
  7. Set full width
  8. Set text align: left, center, right