HxPlaceholder #

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

Basic usage #

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 using 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
AdditionalAttributes Dictionary<string, object> Additional attributes to be splatted onto an underlying HTML element.
ChildContent RenderFragment Optional content of the placeholder (usually not used).
Color ThemeColor? Color of the placeholder.
Columns string Number of template columns to span. Responsive setting for all devices including the extra-small ones (XS) below "small" breakpoint (576px).
The value can be any integer number between 1 and 12 (.col-1), auto (.col-auto) or true (.col).
ColumnsExtraLargeUp string Number of template columns to span for viewports above the "extra-large" breakpoint (1200px).
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 the "large" breakpoint (992px).
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 the "medium" breakpoint (768px).
The value can be any integer number between 1 and 12, auto, or true.
ColumnsSmallUp string Number of template columns to span for viewports above the "small" breakpoint (576px).
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 the "XXL" breakpoint (1400px).
The value can be any integer number between 1 and 12, auto, or true.
CssClass string Additional CSS class.
Settings PlaceholderSettings Set of settings to be applied to the component instance (overrides Defaults, overridden by individual parameters).
Size PlaceholderSize? Size of the placeholder.

Static properties #

Property Type Description
Defaults PlaceholderSettings Application-wide defaults for the HxPlaceholder and derived components.

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
AdditionalAttributes Dictionary<string, object> Additional attributes to be splatted onto an underlying HTML element.
Animation PlaceholderAnimation? Animation of the placeholders in the container.
ChildContent RenderFragment Content of the placeholder container (put your HxPlaceholders here).
Color ThemeColor? Color of the placeholders (propagated to the child HxPlaceholders).
CssClass string Additional CSS class.
Settings PlaceholderContainerSettings Set of settings to be applied to the component instance (overrides Defaults, overridden by individual parameters).
Size PlaceholderSize? Size of the placeholders (propagated to the child HxPlaceholders).

Static properties #

Property Type Description
Defaults PlaceholderContainerSettings Application-wide defaults for HxPlaceholderContainer and derived components.

HxPlaceholderButton #

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

API #

Parameters #

Name Type Description
AdditionalAttributes Dictionary<string, object> Additional attributes to be splatted onto an underlying <button> element.
ChildContent RenderFragment Button content.
Color ThemeColor? Bootstrap button style - theme color.
The default is taken from Defaults (ThemeColor.None if not customized).
Columns string Number of template columns to span. Responsive setting for all devices including the extra-small ones (XS) below "small" breakpoint (576px).
The value can be any integer number between 1 and 12 (.col-1), auto (.col-auto) or true (.col).
ColumnsExtraLargeUp string Number of template columns to span for viewports above the "extra-large" breakpoint (1200px).
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 the "large" breakpoint (992px).
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 the "medium" breakpoint (768px).
The value can be any integer number between 1 and 12, auto, or true.
ColumnsSmallUp string Number of template columns to span for viewports above the "small" breakpoint (576px).
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 the "XXL" breakpoint (1400px).
The value can be any integer number between 1 and 12, auto, or true.
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.
EditContext EditContext Associated EditContext.
Enabled bool? When null (default), the Enabled value is received from cascading FormState. When value is false, input is rendered as disabled. To set multiple controls as disabled use HxFormState.
FormId string Specifies the form the button belongs to.
Icon IconBase Icon to render into the button.
IconCssClass string CSS class to be rendered with the button icon.
IconPlacement ButtonIconPlacement? Position of the icon within the button. The default is ButtonIconPlacement.Start (configurable through Defaults).
OnClickPreventDefault bool Prevents the default action for the onclick event. Default is false.
OnClickStopPropagation bool Stops onClick-event propagation. Default is true.
Outline bool? Bootstrap "outline" button style.
Settings ButtonSettings Set of settings to be applied to the component instance (overrides Defaults, overridden by individual parameters).
SingleClickProtection bool Sets false if you want to allow multiple OnClick handlers in parallel. Default is true.
Size ButtonSize? Button size. The default is ButtonSize.Regular.
Spinner bool? Sets the 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.
Text string Text of the button.
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.
TooltipCssClass string Custom CSS class to render with the tooltip.
TooltipPlacement TooltipPlacement Tooltip placement.
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 whether the Tooltip text is set or not.

Event callbacks #

Name Type Description
OnClick EventCallback<MouseEventArgs> Raised after the button is clicked.
OnInvalidClick EventCallback<MouseEventArgs> Raised after the button is clicked and EditContext validation fails.
OnValidClick EventCallback<MouseEventArgs> Raised after the button is clicked and EditContext validation succeeds.

Static properties #

Property Type Description
Defaults ButtonSettings Application-wide defaults for HxButton and derived components.
An unhandled error has occurred. Reload 🗙