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 #

Card title

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

<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 `HxPlaceholder`s here).
Color	`ThemeColor?`	Color of the placeholders (propagated to the child `HxPlaceholder`s).
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 `HxPlaceholder`s).

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.