Edit on Github

ListGroupLink

in namespace DotVVM.Bootstrap5.Controls

Represents a link item in the ListGroup control.

Usage & Scenarios

Represents an item in ListGroup.

This control share some properties with ListGroupButtonItem and ListGroupTextItem, but has some additional ones:

Color specifies the Bootstrap color to be used for the list item.
Properties with a Badge prefix allow to specify a Badge control inside the list item to render additional content.

https://getbootstrap.com/docs/5.2/components/list-group/#links-and-buttons

Sample 1: ListGroupLinkItem static items

With ListGroupLinkItem more advanced UI with Badge control can be generated. ItemType of a parent ListGroup control shall be set to Link. Visit ListGroup to see some examples with the DataSource property.

page.dothtml
ViewModel.cs

<bs:ListGroup ItemType="Link">
    <bs:ListGroupLink>
        <Template>
            <div class="d-flex w-100 justify-content-between">
                <h5 class="mb-1">List group item heading</h5>
                <small>3 days ago</small>
            </div>
            <h5 class="mb-1">List group item heading</h5>
            <p class="mb-1">Some placeholder content in a paragraph.</p>
            <small>And some small print.</small>
        </Template>
    </bs:ListGroupLink>
    <bs:ListGroupLink Events.Click="{command: ChangeListGroup()}" Color="Danger" IsJustified="true">
        <BadgeTemplate>
            {{value: Text}}
        </BadgeTemplate>
        <Template>
            <span>{{value: Text}}</span>
        </Template>
    </bs:ListGroupLink>
    <bs:ListGroupLink Color="Success" Enabled="{value: Enabled}" Text="{value: Text}" />
    <bs:ListGroupLink Color="Success" Selected="{value: IsSelected}" Text="{value: Text}" />
</bs:ListGroup>

public class ViewModel : DotvvmViewModelBase
{
    public string Text { get; set; } = "Data-bound text of the item.";
    public bool Enabled { get; set; }
    public bool IsSelected { get; set; }
    public void ChangeListGroup()
    {
        Enabled = !Enabled;
        IsSelected = !IsSelected;
        Text = "Changed";
    }

}

Show all inherited properties

Properties

Name	Type	Description	Notes	Default Value
BadgeTemplate	ITemplate	Gets or sets a custom template for a Badge control inside a ListGroupItem.	attribute inner element static value bindable default	null
BadgeText	String	Gets or sets a plain text for a Badge control inside a ListGroupItem.	attribute inner element static value bindable default	null
BadgeType	BadgeColor	Gets or sets a badge color.	attribute inner element static value bindable default	Primary
BadgeVisualStyle	BadgeVisualStyle	Gets or sets a badge visual style. Possible values are `Default` Badge control or `Pill`.	attribute inner element static value bindable default	Default
ClientIDMode	ClientIDMode	Gets or sets the client ID generation algorithm.	attribute inner element static value bindable default	Static
Color	ListGroupItemColor	Gets or sets a ListGroupItem color.	attribute inner element static value bindable default	Default
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 inner element static value bindable default	null
Enabled	Boolean	Gets or sets a ListGroupItem disabled state.	attribute inner element static value bindable default	True
ID	String	Gets or sets the control client ID within its naming container.	attribute inner element static value bindable default	null
IncludeInPage	Boolean	Gets or sets whether the control is included in the DOM of the page.	attribute inner element static value bindable default	True
IsJustified	Boolean	When DataSource is set, adds `justify-content-between` and `align-items-center` CSS classes.	attribute inner element static value bindable default	False
NavigateUrl	String	Gets or sets a navigation URL for Link ListGroupItem.	attribute inner element static value bindable default	null
RouteName	String	Gets or sets a route name.	attribute inner element static value bindable default	null
Selected	Boolean	Gets or sets if ListGroupItem control is selected.	attribute inner element static value bindable default	null
Template	ITemplate	Gets or sets a custom template for a ListGroupItem control.	attribute inner element static value bindable default	null
Text	String	Gets or sets a plain text for a ListGroupItem control.	attribute inner element static value bindable default	null
UrlSuffix	String	Gets or sets a URL suffix for a Link ListGroupItem control.	attribute inner element static value bindable default	null
Visible	Boolean	Gets or sets whether the control is visible. When set to false, `style="display: none"` will be added to this control.	attribute inner element static value bindable default	True

Edit on Github

ListGroupLink

Usage & Scenarios

Sample 1: ListGroupLinkItem static items

Properties

HTML produced by the control

On this page