flex

README

Flex

Check a guide to flexbox to understand the details.

Currently support:

• row and column directions on a container
• grow, shrink and basis properties on a box
• minsize and maxsize on a box

Examples

You can run examples under ./examples like cd ./examples/flex-row/ && go run .

Tutorial

Setup

Create a container and add boxes:

layout := flex.NewContainer(flex.Row).
  AddBox(boxOne, flex.NewStyle().Flex(1)).
  AddBox(boxTwo, flex.NewStyle().Flex(2)).
  AddBox(boxThree, flex.NewStyle().Flex(4))

The view you are putting in the container need to implement Box interface:

type Box interface {
 SetSize(int, int)
 View() string
}

Invoke SetSize on Container

Call layout.SetSize(w, h) when you receive an Update with tea.WindowSizeMsg message. This triggers the flex calculation on all children on the container and they are assigned appropriate size by invoking box.SetSize(w,h) method. This is where you should assign size to your view.

Invoke View on Container

Call layout.View() to render all the boxes.

How does it work?

A Container is created with a direction. This decides the direction in which flex behaviour will be applied:

• Direction: row or column

A Box has following properties:

• grow: This influence the proportion in which the box will grow as compared to other boxes. For example, if there are three boxes with grow as 1,6,3 and there are 100 units of free space available, they will be assigned 10, 60 and 30 units respectively.
• basis: the base size of the container. When flex behaviour is applied, the calculation for a box start with basis and then free space (or negative space) is applied on top of the basis based on grow or shrink properties of the box.
• shrink: This influence the proportion in which the box will shrink as compared to other boxes. The shrink only happen if there is negative space i.e. the total basis of all the boxes is bigger than assigned width on the container.
• maxSize: a container can not grow beyond maxSize
• minSize: a container can not shrink beyond minSize

Potential Roadmap

Container

• add row and column direction properties
• support style on container
• add flex-wrap property
• add justify-content property
• add align-items property
• add align-content property
• add gap, row-gap and column-gap properties
• add row-reverse and column-reverse properties

Box

• add flex grow property
• add flex shrink property
• add flex basis property
• add order property
• add alignment property

Documentation

Index

• Constants
• type Box
• type BoxStyle
  • func NewStyle() *BoxStyle
  • func (b *BoxStyle) Flex(grow float64) *BoxStyle
  • func (b *BoxStyle) FlexAuto(basis int) *BoxStyle
  • func (b *BoxStyle) FlexCustom(grow float64, shrink float64, basis int) *BoxStyle
  • func (b *BoxStyle) FlexDefault() *BoxStyle
  • func (b *BoxStyle) FlexNone(basis int) *BoxStyle
  • func (b *BoxStyle) MaxSize(maxSize int) *BoxStyle
  • func (b *BoxStyle) MinSize(minSize int) *BoxStyle
• type Container
  • func NewContainer(direction Direction) *Container
  • func (c *Container) AddBox(box Box, style *BoxStyle) *Container
  • func (c *Container) SetSize(width int, height int)
  • func (c *Container) View() string
• type Direction

Constants

const None = 0

Types

type Box

type Box interface {
	SetSize(int, int)
	View() string
}

Box is placed in a Container along with other boxes. On calculating flex width or height, SetSize is invoked on the Box. View is called just before rendering to get the string that need to be rendered.

type BoxStyle

type BoxStyle struct {
	// contains filtered or unexported fields
}

BoxStyle is used to set properties which influence the flex behaviour of a box

func NewStyle

func NewStyle() *BoxStyle

NewStyle returns a BoxStyle with default values.

func (*BoxStyle) Flex

func (b *BoxStyle) Flex(grow float64) *BoxStyle

Flex is expected to be the most commonly used method and only allows setting a grow value. It defaults shrink and basis to 1, 0.

func (*BoxStyle) FlexAuto

func (b *BoxStyle) FlexAuto(basis int) *BoxStyle

FlexAuto can be used to set only the basis and defaults grow and shrink to 1, 1.

func (*BoxStyle) FlexCustom

func (b *BoxStyle) FlexCustom(grow float64, shrink float64, basis int) *BoxStyle

FlexCustom can be used to set all three values, grow, shrink and basis.

func (*BoxStyle) FlexDefault

func (b *BoxStyle) FlexDefault() *BoxStyle

FlexDefault set the default value for grow, shrink and basis. The default values are 1, 1, 0. This means that the box will have no starting basis and will start from 0 size. It will then grow with a proportion of 1. Shrink will have no effect as there is no basis to start with.

func (*BoxStyle) FlexNone

func (b *BoxStyle) FlexNone(basis int) *BoxStyle

FlexNone can be used to set only the basis and defaults grow and shrink to 0, 0. This is a way to disable the flex behaviour on a box.

func (*BoxStyle) MaxSize

func (b *BoxStyle) MaxSize(maxSize int) *BoxStyle

MaxSize set the maximum allowed size for the box. A view can not grow beyond maxSize. If value is less than minSize, it is shifted to minSize

func (*BoxStyle) MinSize

func (b *BoxStyle) MinSize(minSize int) *BoxStyle

MinSize set the minimum allowed size for the box. A view can not shrink beyond the minSize If value is provided outside 0 - maxSize range, it is shifted to either 0 or maxSize.

type Container

type Container struct {
	// contains filtered or unexported fields
}

Container holds the boxes and calculate their size when SetSize is called. The size is influenced by BoxStyle assigned to a Box

func NewContainer

func NewContainer(direction Direction) *Container

NewContainer create a new container with a given Direction. Direction can row or column. This influence in what direction the flex behaviour will work.

func (*Container) AddBox

func (c *Container) AddBox(box Box, style *BoxStyle) *Container

AddBox adds a box to the container. Pass BoxStyle to set flex properties on the box.

func (*Container) SetSize

func (c *Container) SetSize(width int, height int)

SetSize set the size of the container. This should be invoked on every size update, for example when you receive tea.WindowSizeMsg. Calling this method triggers the flex calculation on all child boxes.

func (*Container) View

func (c *Container) View() string

View returns the rendered boxes. Use this in your View method to get the the styled string.

type Direction

type Direction int8

Direction is the direction in which flex behaviour is applied

const (
	Row Direction = iota
	Column
)