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.

Index

Package Files

flex.go

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.

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

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

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
    AlignItemStart
    AlignItemEnd
    AlignItemCenter
    AlignItemBaseline // TODO requires introducing inline-axis concept
    AlignItemStretch
)

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
    Definite
)

type Direction Uses

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 Uses

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 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.

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

const (
    NoWrap FlexWrap = iota
    Wrap
    WrapReverse
)

type Justify Uses

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 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 2017-07-08. Refresh now. Tools for package owners.