Skip to content

Latest commit

 

History

History
58 lines (48 loc) · 1.88 KB

BRICK_SECTION.md

File metadata and controls

58 lines (48 loc) · 1.88 KB
Raw

BrickSection

A BrickSection groups bricks together. The height of the section is calculated based on the bricks inside of it plus the edge insets.

A BrickSection has the following properties:

  • bricks: An array of bricks that needs to be displayed on screen
  • inset: The distance (in pixels) between the bricks
  • edgeInsets: The top/left/bottom/right distances that are around the edges of the sections

Examples

let section = BrickSection(bricks: [
	LabelBrick(text: "Hello"),
	LabelBrick(text: "World")
], inset: 10, edgeInsets: UIEdgeInsets(top: 20, left: 20, bottom: 20, right: 20))

 --------------------------------
 |             20px             |
 |                              |
 |       ---------------        |
 | 20px  |    HELLO     |  20px |
 |       ---------------        |
 |             10px             |
 |       ---------------        |
 | 20px  |    WORLD     |  20px |
 |       ---------------        |
 |                              |
 |             20px             |
 --------------------------------

Nested BrickSections

As a BrickSection is a subclass of Brick, you can nest the sections.

If you define a .Ratio width for a brick, it will always be a fraction of the BrickSection the brick is in. So a brick with a .Ratio(ratio: 1/2) width, contained in a section that has a .Fixed(size: 50) width, will result in the Brick being 25px

Examples

let section = BrickSection(bricks: [
	LabelBrick(width: .Ratio(ratio: 1/2), text: "Hello"),
	BrickSection(width: .Ratio(ratio: 1/2), bricks: [
		LabelBrick(width: .Ratio(ratio: 1), text: "World"),
		LabelBrick(width: .Ratio(ratio: 1/2), text: "World"),
		LabelBrick(width: .Ratio(ratio: 1/2), text: "World")
	])
])

 ---------------------------------------
 |      HELLO      |       WORLD       |
 |                 |  WORLD  |  WORLD  |
 ---------------------------------------