CardListGroup
in namespace DotVVM.Bootstrap5.Controls
Renders list group inside the card component.
Usage & Scenarios
A special version of the ListGroup control that can be used in Card.
See ListGroup for more info on how to use this control.
https://getbootstrap.com/docs/5.2/components/card/#list-groups
Sample 2: Card with images and lists
The card can contain images or lists. Use any combination of CardBody, CardImage and CardListGroup controls.
<bs:Card>
<bs:CardListGroup DataSource="{value: Texts}" ItemText="{value: _this}" />
<bs:CardListGroup class="mb-1">
<bs:ListGroupText Text="Item 1" />
<bs:ListGroupText Text="Item 2" />
<bs:ListGroupText Text="Item 3" />
<bs:ListGroupText Text="Item 4" />
</bs:CardListGroup>
</bs:Card>public class ViewModel : DotvvmViewModelBase
{
public string[] Texts { get; } = new[] { "red", "green", "blue" };
public void DoSomething()
{
}
}Properties
| Name | Type | Description | Notes | Default Value | |
|---|---|---|---|---|---|
 |
ClientIDMode | ClientIDMode | Gets or sets the client ID generation algorithm. |
attribute
static value
|
Static |
|
DataContext | Object | Gets or sets a data context for the control and its children. All value and command bindings are evaluated in context of this value. The DataContext is null in client-side templates. |
attribute
bindable
|
null |
|
DataSource | IValueBinding<IEnumerable<Object>> | Gets or sets a data-source object from which the child controls will be generated. |
attribute
bindable
|
null |
|
ForceVerticalOrientationBreakpoint | ResponsiveBreakpoints | Sets a breakpoint when ListGroup is changed from horizontal to vertical. |
attribute
static value
|
None |
|
GroupTypes | ListGroupType[] | Gets or sets the types of the ListGroup. Possible values are `Numbered` or `Flush` or both. |
attribute
static value
|
null |
|
ID | String | Gets or sets the control client ID within its naming container. |
attribute
static value
bindable
|
null |
|
IncludeInPage | Boolean | Gets or sets whether the control is included in the DOM of the page. |
attribute
bindable
|
True |
|
ItemBadgeTemplate | ITemplate | Gets or sets a custom template for a Badge control inside a ListGroupItem when DataSource is set. |
inner element
static value
|
null |
|
ItemBadgeText | String | Gets or sets a plain text for a Badge control inside a ListGroupItem when DataSource is set. |
attribute
static value
bindable
|
null |
|
ItemBadgeType | BadgeColor | Gets or sets a badge color when DataSource is set. |
attribute
static value
bindable
|
Primary |
|
ItemBadgeVisualStyle | BadgeVisualStyle | Gets or sets a badge visual style when DataSource is set. Possible values are `Default` or `Pill`. |
attribute
static value
|
Default |
|
ItemColor | ListGroupItemColor | Gets or sets a ListGroupItem color when DataSource is set. |
attribute
static value
bindable
|
Default |
|
ItemEnabled | Boolean | Gets or sets a ListGroupItem disabled state when DataSource is set. |
attribute
static value
bindable
|
True |
|
ItemIsJustified | Boolean | When DataSource is set, adds `justify-content-between` and `align-items-center` CSS classes when DataSource is set. |
attribute
static value
|
False |
|
ItemNavigateUrl | String | Gets or sets a navigation URL for `Link` ListGroupItem when DataSource is set. |
attribute
static value
bindable
|
null |
|
ItemRouteName | String | Gets or sets a route name when DataSource is set. |
attribute
static value
|
null |
|
Items | List<IListGroupItem> | Gets or sets the items inside the control. |
inner element
static value
default
|
null |
|
ItemSelected | Boolean | Gets or sets whether ListGroupItem control is selected when DataSource is set. |
attribute
static value
bindable
|
null |
|
ItemTemplate | ITemplate | Gets or sets a custom template for a ListGroupItem control when DataSource is set. |
inner element
static value
|
null |
|
ItemText | String | Gets or sets a plain text for a ListGroupItem control when DataSource is set. |
attribute
static value
bindable
|
null |
|
ItemType | ListGroupItemType | Gets or sets a type for a ListGroupItem control when DataSource is set. |
attribute
static value
|
Default |
|
ItemUrlSuffix | String | Gets or sets a URL suffix for a `Link` ListGroupItem control when DataSource is set. |
attribute
static value
bindable
|
null |
|
Orientation | ListGroupOrientation | Gets or sets a ListGroup orientation. |
attribute
static value
|
Vertical |
|
Visible | Boolean | Gets or sets whether the control is visible. When set to false, `style="display: none"` will be added to this control. |
attribute
static value
bindable
|
True |
Events
| Name | Type | Description | |
|---|---|---|---|
 |
ItemClick | ICommandBinding | Gets or sets the command that will be triggered when a `Button` ListGroupItem is clicked. DataSource must be is set. |