Table of Contents

Class TwLayoutComponentBase

Namespace
TwBlazor
Assembly
TwBlazor.dll

The base for the layout components (TwContainer, TwFlex, TwFlexItem, TwGrid and TwGridItem): renders a single element of the chosen Element type around the child content.

public abstract class TwLayoutComponentBase : TwBlazorComponentBase, IComponent, IHandleEvent, IHandleAfterRender, ITwComponent
Inheritance
TwLayoutComponentBase
Implements
Derived
Inherited Members

Remarks

A layout component adds no keyboard behaviour and no ARIA role of its own, except role="list" on a ul or ol: Safari stops announcing a list once its bullets are removed, which Tailwind's base styles always do. Shadow and Rounded apply only when set, so a plain layout never picks up the theme's default card shadow or corners.

Constructors

TwLayoutComponentBase() 

protected TwLayoutComponentBase()

Properties

ChildContent

Gets or sets the content laid out inside the element.

[Parameter]
public RenderFragment? ChildContent { get; set; }

Property Value

RenderFragment

Element

Gets or sets the HTML element to render. Defaults to Div.

[Parameter]
public LayoutElement Element { get; set; }

Property Value

LayoutElement

Remarks

Pick the element that says what the content is, such as Ul for a list of products or Section for a band of the page, so screen readers can describe it.

decorationClasses

Gets the shadow and corner classes, present only when Shadow or Rounded is set.

protected string decorationClasses { get; }

Property Value

string

flexbox

Gets the shared flexbox utilities from the theme.

protected TwBlazorFlexbox flexbox { get; }

Property Value

TwBlazorFlexbox

grid

Gets the shared grid utilities from the theme.

protected TwBlazorGrid grid { get; }

Property Value

TwBlazorGrid

rootClasses

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

protected abstract string rootClasses { get; }

Property Value

string

rootStyle

Gets the inline style for the rendered element. Defaults to Style.

protected virtual string? rootStyle { get; }

Property Value

string

spacing

Gets the shared spacing scales from the theme.

protected TwBlazorSpacing spacing { get; }

Property Value

TwBlazorSpacing

Methods

AlignContentClass(AlignContent?)

Gets the class for a distribution of lines or tracks on the cross axis.

protected string AlignContentClass(AlignContent? value)

Parameters

value AlignContent?

The distribution, or null for none.

Returns

string

The class, or an empty string.

AlignItemsClass(AlignItems?)

Gets the class for a cross-axis alignment.

protected string AlignItemsClass(AlignItems? value)

Parameters

value AlignItems?

The alignment, or null for none.

Returns

string

The class, or an empty string.

AlignSelfClass(AlignSelf?)

Gets the class for one item's cross-axis alignment.

protected string AlignSelfClass(AlignSelf? value)

Parameters

value AlignSelf?

The alignment, or null for none.

Returns

string

The class, or an empty string.

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 virtual void BuildContent(RenderTreeBuilder builder)

Parameters

builder RenderTreeBuilder

The render tree builder, positioned inside the element.

BuildRenderTree(RenderTreeBuilder)

Renders the component to the supplied RenderTreeBuilder.

protected override void BuildRenderTree(RenderTreeBuilder builder)

Parameters

builder RenderTreeBuilder

A RenderTreeBuilder that will receive the render output.

CssValue(string)

Removes the characters that could end a CSS declaration early, so a value passed by a parameter stays inside its own declaration.

protected static string CssValue(string value)

Parameters

value string

The value.

Returns

string

The value without semicolons, braces or quotes, trimmed.

JoinClasses(params string?[])

Joins classes with single spaces, leaving out empty ones.

protected static string JoinClasses(params string?[] classes)

Parameters

classes string[]

The classes to join.

Returns

string

The joined classes.

JoinStyles(params string?[])

Joins CSS declarations with semicolons, leaving out empty ones.

protected static string? JoinStyles(params string?[] declarations)

Parameters

declarations string[]

The declarations to join, such as grid-area: main.

Returns

string

The joined declarations, or null when there are none.

JustifyContentClass(JustifyContent?)

Gets the class for a main-axis distribution.

protected string JustifyContentClass(JustifyContent? value)

Parameters

value JustifyContent?

The distribution, or null for none.

Returns

string

The class, or an empty string.

OrderClass(int?)

Gets the class for an item's visual order.

protected string OrderClass(int? order)

Parameters

order int?

The position, First, Last, or null for none.

Returns

string

The class, or an empty string when the position is not on the theme's scale.

ResponsiveClasses(TwResponsiveScale, int?, int?, int?, int?, int?, int?)

Gets the classes of a numbered responsive scale for each breakpoint that has a value.

protected static string ResponsiveClasses(TwResponsiveScale scale, int? baseValue, int? sm, int? md, int? lg, int? xl, int? xl2)

Parameters

scale TwResponsiveScale

The scale.

baseValue int?

The value at every width.

sm int?

The value from the sm breakpoint.

md int?

The value from the md breakpoint.

lg int?

The value from the lg breakpoint.

xl int?

The value from the xl breakpoint.

xl2 int?

The value from the 2xl breakpoint.

Returns

string

The joined classes.

Edit this page