exp: golang.org/x/exp/shiny/widget/flex Index | Files

package flex

import "golang.org/x/exp/shiny/widget/flex"

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.


Package Files


type AlignContent Uses

type AlignContent uint8

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


const (
    AlignContentStretch AlignContent = iota

type AlignItem Uses

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
    AlignItemBaseline // TODO requires introducing inline-axis concept

type Basis Uses

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

type Direction Uses

type Direction uint8

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


const (
    Row Direction = iota

type Flex Uses

type Flex struct {

    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 Uses

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

NewFlex returns a new Flex widget containing the given children.

func (*Flex) Layout Uses

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

func (*Flex) Measure Uses

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

type FlexWrap Uses

type FlexWrap uint8

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


const (
    NoWrap FlexWrap = iota

type Justify Uses

type Justify uint8

Justify aligns items along the main axis.


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 Uses

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.

Package flex imports 5 packages (graph). Updated 2020-12-30. Refresh now. Tools for package owners.