HxPlaceholder

Bootstrap 5 Placeholder component, aka Skeleton.
Use loading placeholders for your components or pages to indicate something may still be loading.

Example

Grey area
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Grey area

<div class="row">
	<div class="col-md-6">
		<HxCard ImageAlt="Grey area"
				ImageSrc="data:image/gif;base64,R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=="
				ImageHeight="180"
				CssClass="mb-3"
				style="max-width: 18rem;">
			<BodyTemplate>
				<HxCardTitle>Card title</HxCardTitle>
				<HxCardText>Some quick example text to build on the card title and make up the bulk of the card's content.</HxCardText>
				<HxButton Color="ThemeColor.Primary">Go somewhere</HxButton>
			</BodyTemplate>
		</HxCard>
	</div>
	<div class="col-md-6">
		<HxCard ImageAlt="Grey area"
				ImageSrc="data:image/gif;base64,R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=="
				ImageHeight="180"
				style="max-width: 18rem;">
			<BodyTemplate>
				<HxCardTitle>
					<HxPlaceholderContainer Animation="PlaceholderAnimation.Glow">
						<HxPlaceholder Columns="6" />
					</HxPlaceholderContainer>
				</HxCardTitle>
				<HxCardText>
					<HxPlaceholderContainer Animation="PlaceholderAnimation.Glow">
						<HxPlaceholder Columns="7" />
						<HxPlaceholder Columns="4" />
						<HxPlaceholder Columns="4" />
						<HxPlaceholder Columns="6" />
						<HxPlaceholder Columns="8" />
					</HxPlaceholderContainer>
				</HxCardText>
				<HxPlaceholderButton Color="ThemeColor.Primary" Columns="6" />
			</BodyTemplate>
		</HxCard>
	</div>
</div>

Width

You can change the width through the Columns parameter (+ responsive variants with breakpoints).

<HxPlaceholderContainer>
    <HxPlaceholder Columns="6" />
    <HxPlaceholder Columns="10" />
    <HxPlaceholder Columns="4" />
</HxPlaceholderContainer>

Color

Sizing

<HxPlaceholderContainer>
    <HxPlaceholder Columns="12" Size="PlaceholderSize.Large" />
    <HxPlaceholder Columns="12" Size="PlaceholderSize.Regular" />
    <HxPlaceholder Columns="12" Size="PlaceholderSize.Small" />
    <HxPlaceholder Columns="12" Size="PlaceholderSize.ExtraSmall" />
</HxPlaceholderContainer>

Animation

Use animations to better convey the perception of something being actively loaded.

<HxPlaceholderContainer Animation="PlaceholderAnimation.Glow">
    <HxPlaceholder Columns="12" />
</HxPlaceholderContainer>

<HxPlaceholderContainer Animation="PlaceholderAnimation.Wave">
    <HxPlaceholder Columns="12" />
</HxPlaceholderContainer>

API

Parameters

Name Type Description
Columns string Number of template columns to span. Responsive setting for all devices including the extra-small ones (XS) bellow "small" breakpoint (576px).
The value can be any integer number between 1 and 12 (.col-1), auto (.col-auto) or true (.col).
ColumnsSmallUp string Number of template columns to span for viewports above "small" breakpoint (576px).
The value can be any integer number between 1 and 12, auto or true.
ColumnsMediumUp string Number of template columns to span for viewports above "medium" breakpoint (768px).
The value can be any integer number between 1 and 12, auto or true.
ColumnsLargeUp string Number of template columns to span for viewports above "large" breakpoint (992px).
The value can be any integer number between 1 and 12, auto or true.
ColumnsExtraLargeUp string Number of template columns to span for viewports above "large" breakpoint (1200px).
The value can be any integer number between 1 and 12, auto or true.
ColumnsXxlUp string Number of template columns to span for viewports above "XXL" breakpoint (1400px).
The value can be any integer number between 1 and 12, auto or true.
Size PlaceholderSize? Size of the placeholder.
Color ThemeColor? Color of the placeholder.
ChildContent RenderFragment Optional content of the placeholder (usualy not used).
CssClass string Additional CSS class.
AdditionalAttributes Dictionary<string, object> Additional attributes to be splatted onto an underlying HTML element.

Static properties

Property Type Description
Defaults PlaceholderDefaults Application-wide defaults for HxPlaceholder.

HxPlaceholderContainer

Optional container for the HxPlaceholder components where you can set the animation and some common properties for all placeholders contained.

API

Parameters

Name Type Description
Animation PlaceholderAnimation? Animation of the placeholders in container.
Size PlaceholderSize? Size of the placeholder.
Color ThemeColor? Color of the placeholder.
ChildContent RenderFragment Content of the placeholder container (put your HxPlaceholders here).
CssClass string Additional CSS class.
AdditionalAttributes Dictionary<string, object> Additional attributes to be splatted onto an underlying HTML element.

Static properties

Property Type Description
Defaults PlaceholderContainerDefaults Application-wide defaults for HxPlaceholderContainer.

HxPlaceholderButton

Bootstrap 5 placeholder in form of a button.
Derives from HxButton (adds placeholder class and changes Enabled default to false).
Set the size of the button by using the HxPlaceholderButton.Columns parameter.

API

Parameters

Name Type Description
Columns string Number of template columns to span. Responsive setting for all devices including the extra-small ones (XS) bellow "small" breakpoint (576px).
The value can be any integer number between 1 and 12 (.col-1), auto (.col-auto) or true (.col).
ColumnsSmallUp string Number of template columns to span for viewports above "small" breakpoint (576px).
The value can be any integer number between 1 and 12, auto or true.
ColumnsMediumUp string Number of template columns to span for viewports above "medium" breakpoint (768px).
The value can be any integer number between 1 and 12, auto or true.
ColumnsLargeUp string Number of template columns to span for viewports above "large" breakpoint (992px).
The value can be any integer number between 1 and 12, auto or true.
ColumnsExtraLargeUp string Number of template columns to span for viewports above "large" breakpoint (1200px).
The value can be any integer number between 1 and 12, auto or true.
ColumnsXxlUp string Number of template columns to span for viewports above "XXL" breakpoint (1400px).
The value can be any integer number between 1 and 12, auto or true.
Text string Text of the button.
ChildContent RenderFragment Button content.
Icon IconBase Icon to render into the button.
Color ThemeColor? Bootstrap button style - theme color.
Default is taken from HxButton.Defaults (ThemeColor.None if not customized).
Size ButtonSize? Button size. Default is ButtonSize.Regular.
Outline bool? Bootstrap "outline" button style.
CssClass string Custom CSS class to render with the <button />.
When using Tooltip you might want to use TooltipWrapperCssClass instead of CssClass to get the desired result.
Enabled bool?
EditContext EditContext Associated EditContext.
FormId string Specifies the form the button belongs to.
Tooltip string Tooltip text.
If set, a span wrapper will be rendered around the <button />. For most scenarios you will then use TooltipWrapperCssClass instead of CssClass.
TooltipPlacement TooltipPlacement Tooltip placement.
TooltipCssClass string Custom CSS class to render with the tooltip.
TooltipWrapperCssClass string Custom CSS class to render with the tooltip span wrapper of the <button />.
If set, the span wrapper will be rendered no matter the Tooltip text is set or not.
OnClickStopPropagation bool Stop onClick-event propagation. Deafult is true.
OnClickPreventDefault bool Prevents the default action for the onclick event. Deafult is false.
Spinner bool? Set state of the embedded HxSpinner. Leave null if you want automated spinner when any of the OnClick handlers is running. You can set an explicit false constant to disable (override) the spinner automation.
SingleClickProtection bool Set false if you want to allow multiple OnClick handlers in parallel. Default is true.
AdditionalAttributes Dictionary<string, object> Additional attributes to be splatted onto an underlying <button> element.

Event Callbacks

Name Type Description
OnClick EventCallback<MouseEventArgs> Raised after the button is clicked.
OnValidClick EventCallback<MouseEventArgs> Raised after the button is clicked and EditContext validation succeeds.
OnInvalidClick EventCallback<MouseEventArgs> Raised after the button is clicked and EditContext validation fails.
An unhandled error has occurred. Reload 🗙