Bootstrap 5 Placeholder component, aka Skeleton.
Use loading placeholders for your components or pages to indicate something may still be loading.
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>
You can change the width through the Columns
parameter (+ responsive variants with breakpoints).
<HxPlaceholderContainer>
<HxPlaceholder Columns="6" />
<HxPlaceholder Columns="10" />
<HxPlaceholder Columns="4" />
</HxPlaceholderContainer>
<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>
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>
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) bellow "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 "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 "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 "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 "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 "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 HxPlaceholder.Defaults , overridden by individual parameters). |
Size | PlaceholderSize? |
Size of the placeholder. |
Property | Type | Description |
---|---|---|
Defaults | PlaceholderSettings |
Application-wide defaults for the HxPlaceholder and derived components. |
Optional container for the HxPlaceholder
components where you can set the animation and some common properties
for all placeholders contained.
Name | Type | Description |
---|---|---|
AdditionalAttributes | Dictionary<string, object> |
Additional attributes to be splatted onto an underlying HTML element. |
Animation | PlaceholderAnimation? |
Animation of the placeholders in 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 HxPlaceholderContainer.Defaults , overridden by individual parameters). |
Size | PlaceholderSize? |
Size of the placeholders (propagated to the child HxPlaceholder s). |
Property | Type | Description |
---|---|---|
Defaults | PlaceholderContainerSettings |
Application-wide defaults for HxPlaceholderContainer and derived components. |
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.
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. Default is taken from HxButton.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) bellow "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 "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 "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 "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 "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 "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. Default is ButtonIconPlacement.Start (configurable through HxButton.Defaults ). |
OnClick | EventCallback<MouseEventArgs> |
Raised after the button is clicked. |
OnClickPreventDefault | bool |
Prevents the default action for the onclick event. Default is false . |
OnClickStopPropagation | bool |
Stop onClick-event propagation. Default is true . |
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. |
Outline | bool? |
Bootstrap "outline" button style. |
Settings | ButtonSettings |
Set of settings to be applied to the component instance (overrides HxButton.Defaults , overridden by individual parameters). |
SingleClickProtection | bool |
Set false if you want to allow multiple OnClick handlers in parallel. Default is true . |
Size | ButtonSize? |
Button size. Default is ButtonSize.Regular . |
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. |
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 the Tooltip text is set or not. |
Property | Type | Description |
---|---|---|
Defaults | ButtonSettings |
Application-wide defaults for HxButton and derived components. |