Table of Contents

Class TwFlex

Namespace
TwBlazor.Components
Assembly
TwBlazor.dll

Lays out its children in a row or a column with CSS flexbox: direction (changing at any breakpoint), wrapping, alignment, gaps and dividers between children.

public class TwFlex : TwLayoutComponentBase, IComponent, IHandleEvent, IHandleAfterRender, ITwComponent
Inheritance
TwFlex
Implements
Inherited Members

Remarks

Reversing the direction changes only where children are drawn. Screen readers and the Tab key still follow the markup, so keep the markup in reading order.

Constructors

TwFlex() 

public TwFlex()

Properties

Align

Gets or sets how children are aligned on the cross axis.

[Parameter]
public AlignItems? Align { get; set; }

Property Value

AlignItems?

AlignContent

Gets or sets how wrapped lines are spaced on the cross axis. Only has an effect when children wrap.

[Parameter]
public AlignContent? AlignContent { get; set; }

Property Value

AlignContent?

ColGap

Gets or sets the space between columns as a step on Tailwind's spacing scale, such as 5 for gap-x-5. It takes the place of Gap between columns.

[Parameter]
public double? ColGap { get; set; }

Property Value

double?

Direction

Gets or sets the direction at every width. Leave it unset for the browser default, a row.

[Parameter]
public FlexDirection? Direction { get; set; }

Property Value

FlexDirection?

DirectionLg

Gets or sets the direction from the lg breakpoint (64rem) upwards.

[Parameter]
public FlexDirection? DirectionLg { get; set; }

Property Value

FlexDirection?

DirectionMd

Gets or sets the direction from the md breakpoint (48rem) upwards.

[Parameter]
public FlexDirection? DirectionMd { get; set; }

Property Value

FlexDirection?

DirectionSm

Gets or sets the direction from the sm breakpoint (40rem) upwards.

[Parameter]
public FlexDirection? DirectionSm { get; set; }

Property Value

FlexDirection?

DirectionXl

Gets or sets the direction from the xl breakpoint (80rem) upwards.

[Parameter]
public FlexDirection? DirectionXl { get; set; }

Property Value

FlexDirection?

DirectionXl2

Gets or sets the direction from the 2xl breakpoint (96rem) upwards.

[Parameter]
public FlexDirection? DirectionXl2 { get; set; }

Property Value

FlexDirection?

Divided

Gets or sets whether a line is drawn between children: across a column, or down a row. The line follows Direction, not the responsive directions.

[Parameter]
public bool Divided { get; set; }

Property Value

bool

FullHeight

Gets or sets whether the layout fills its parent's height, for example to push a button to the bottom of a card.

[Parameter]
public bool FullHeight { get; set; }

Property Value

bool

FullWidth

Gets or sets whether the layout fills its parent's width.

[Parameter]
public bool FullWidth { get; set; }

Property Value

bool

Gap

Gets or sets the space between children as a step on Tailwind's spacing scale, such as 4 for gap-4.

[Parameter]
public double? Gap { get; set; }

Property Value

double?

Inline

Gets or sets whether the layout is inline, sitting in a line of text instead of taking a line of its own.

[Parameter]
public bool Inline { get; set; }

Property Value

bool

Justify

Gets or sets how children are spaced along the main axis.

[Parameter]
public JustifyContent? Justify { get; set; }

Property Value

JustifyContent?

RowGap

Gets or sets the space between rows as a step on Tailwind's spacing scale, such as 1 for gap-y-1. It takes the place of Gap between rows.

[Parameter]
public double? RowGap { get; set; }

Property Value

double?

Wrap

Gets or sets whether children wrap onto new lines. Leave it unset for the browser default, no wrapping.

[Parameter]
public FlexWrap? Wrap { get; set; }

Property Value

FlexWrap?

rootClasses

Gets the classes for the rendered element, with Class merged last.

protected override string rootClasses { get; }

Property Value

string

Methods

BuildContent(RenderTreeBuilder)

Renders the content inside the element. Override it to wrap ChildContent, for example in a cascading value; sequence numbers from 8 upwards are free.

protected override void BuildContent(RenderTreeBuilder builder)

Parameters

builder RenderTreeBuilder

The render tree builder, positioned inside the element.

Edit this page