Documentation

Overview

    Package flex provides a container widget that lays out its children following the CSS flexbox algorithm.

    As the shiny widget model does not provide all of the layout features of CSS, the flex package diverges in several ways. There is no item inline-axis, no item margins or padding to be accounted for, and the container size provided by the outer widget is taken as gospel and never expanded.

    Index

    Constants

    This section is empty.

    Variables

    This section is empty.

    Functions

    This section is empty.

    Types

    type AlignContent

    type AlignContent uint8

      AlignContent is the 'align-content' property. It aligns container lines when there is extra space on the cross-axis.

      https://www.w3.org/TR/css-flexbox-1/#align-content-property

      const (
      	AlignContentStretch AlignContent = iota
      	AlignContentStart
      	AlignContentEnd
      	AlignContentCenter
      	AlignContentSpaceBetween
      	AlignContentSpaceAround
      )

      type AlignItem

      type AlignItem uint8

        AlignItem aligns items along the cross axis.

        It is the 'align-items' property when applied to a Flex container, and the 'align-self' property when applied to an item in LayoutData.

        https://www.w3.org/TR/css-flexbox-1/#align-items-property https://www.w3.org/TR/css-flexbox-1/#propdef-align-self

        const (
        	AlignItemAuto AlignItem = iota
        	AlignItemStart
        	AlignItemEnd
        	AlignItemCenter
        	AlignItemBaseline // TODO requires introducing inline-axis concept
        	AlignItemStretch
        )

        type Basis

        type Basis uint8

          Basis sets the base size of a flex item.

          A default basis of Auto means the flex container uses the MeasuredSize of an item. Otherwise a Definite Basis will override the MeasuredSize with BasisPx.

          TODO: do we (or will we )have a useful notion of Content in the widget layout model that is separate from MeasuredSize? If not, we could consider completely removing this concept from this flex implementation.

          const (
          	Auto Basis = iota
          	Definite
          )

          type Direction

          type Direction uint8

            Direction is the direction in which flex items are laid out.

            https://www.w3.org/TR/css-flexbox-1/#flex-direction-property

            const (
            	Row Direction = iota
            	RowReverse
            	Column
            	ColumnReverse
            )

            type Flex

            type Flex struct {
            	node.ContainerEmbed
            
            	Direction    Direction
            	Wrap         FlexWrap
            	Justify      Justify
            	AlignItems   AlignItem
            	AlignContent AlignContent
            }

              Flex is a container widget that lays out its children following the CSS flexbox algorithm.

              func NewFlex

              func NewFlex(children ...node.Node) *Flex

                NewFlex returns a new Flex widget containing the given children.

                func (*Flex) Layout

                func (w *Flex) Layout(t *theme.Theme)

                func (*Flex) Measure

                func (w *Flex) Measure(t *theme.Theme, widthHint, heightHint int)

                type FlexWrap

                type FlexWrap uint8

                  FlexWrap controls whether the container is single- or multi-line, and the direction in which the lines are laid out.

                  https://www.w3.org/TR/css-flexbox-1/#flex-wrap-property

                  const (
                  	NoWrap FlexWrap = iota
                  	Wrap
                  	WrapReverse
                  )

                  type Justify

                  type Justify uint8

                    Justify aligns items along the main axis.

                    https://www.w3.org/TR/css-flexbox-1/#justify-content-property

                    const (
                    	JustifyStart        Justify = iota // pack to start of line
                    	JustifyEnd                         // pack to end of line
                    	JustifyCenter                      // pack to center of line
                    	JustifySpaceBetween                // even spacing
                    	JustifySpaceAround                 // even spacing, half-size on each end
                    )

                    type LayoutData

                    type LayoutData struct {
                    	MinSize image.Point  // TODO use unit.Value
                    	MaxSize *image.Point // TODO use unit.Value
                    
                    	// Grow determines how much a node will grow relative to its siblings.
                    	Grow float64
                    
                    	// Shrink is the flex shrink factor which determines how much a node
                    	// will shrink relative to its siblings. If nil, a default shrink
                    	// factor of 1 is used.
                    	Shrink *float64
                    
                    	// Basis determines the initial size of the node in the direction
                    	// of the flex container (the main axis).
                    	//
                    	// If set to Definite, the value stored in BasisPx is used.
                    	Basis   Basis
                    	BasisPx int // TODO use unit package?
                    
                    	Align AlignItem
                    
                    	// BreakAfter forces the next node onto the next flex line.
                    	BreakAfter bool
                    }

                      LayoutData is the node LayoutData type for a Flex's children.

                      Source Files