List
in namespace DotVVM.Controls.Tailwind.Controls
Usage & Scenarios
Documents the Tailwind list built with <t:ListGroup> and <t:ListItem>. The control supports hardcoded items or DataSource mode, and each row can use text, a template, a badge, and click or navigation behavior.
Sample 1: Hardcoded Items
Use <t:ListGroup> with hardcoded <t:ListItem> children for a fixed list. This sample shows Text, Icon, BadgeText, BadgeColor, and NavigateUrl.
<t:ListGroup>
<t:ListItem Icon="User" Text="Team overview" BadgeText="Open" BadgeColor="Info" NavigateUrl="#team" />
<t:ListItem Icon="Bell" Text="Notifications" BadgeText="3" BadgeColor="Warning" NavigateUrl="#notifications" />
<t:ListItem Icon="CheckCircle" Text="Finished tasks" BadgeText="12" BadgeColor="Success" NavigateUrl="#tasks" />
</t:ListGroup>
<h3 id="team">Team</h3>
<p>This section is reached using `NavigateUrl`.</p>
<h3 id="notifications">Notifications</h3>
<p>Use anchor links when you want to stay on the same page.</p>
<h3 id="tasks">Tasks</h3>
<p>The entire list row is clickable.</p>
Sample 2: DataSource, ItemTemplate, Click, and NavigateUrl
In DataSource mode, map row properties with Item* attributes. This sample shows ItemText, ItemBadgeText, ItemBadgeColor, ItemIcon, ItemClick, ItemTemplate, and ItemNavigateUrl.
<t:ListGroup DataSource="{value: Tasks}"
ItemText="{value: Title}"
ItemBadgeText="{value: StatusText}"
ItemBadgeColor="{value: StatusColor}"
ItemIcon="CheckCircle"
ItemClick="{command: _parent.SelectTask(Title)}" />
<p>Selected task: {{value: SelectedTask}}</p>
<t:ListGroup DataSource="{value: Sections}"
ItemNavigateUrl="{value: Url}">
<ItemTemplate>
<span class="list-row-title">{{value: Title}}</span>
<span class="list-row-text">{{value: Description}}</span>
</ItemTemplate>
</t:ListGroup>
<h3 id="backlog">Backlog</h3>
<p>This section is linked from the templated list.</p>
<h3 id="release">Release</h3>
<p>`ItemTemplate` is useful when one text field is not enough.</p>
using System.Collections.Generic;
using DotVVM.Controls.Tailwind;
using DotVVM.Controls.Tailwind.Controls;
using DotVVM.Framework.ViewModel;
namespace DotvvmWeb.Views.Docs.Controls.tailwind.List.sample2
{
public class ViewModel : DotvvmViewModelBase
{
public string SelectedTask { get; set; } = "(none)";
public List<TaskRow> Tasks { get; set; } = new List<TaskRow>
{
new TaskRow { Title = "Review pull request", StatusText = "Ready", StatusColor = TailwindColor.Info },
new TaskRow { Title = "Deploy release", StatusText = "Blocked", StatusColor = TailwindColor.Warning },
new TaskRow { Title = "Verify metrics", StatusText = "Done", StatusColor = TailwindColor.Success }
};
public List<SectionRow> Sections { get; set; } = new List<SectionRow>
{
new SectionRow { Title = "Backlog", Description = "Open the backlog section.", Url = "#backlog" },
new SectionRow { Title = "Release", Description = "Jump to the release notes section.", Url = "#release" }
};
public void SelectTask(string taskName)
{
SelectedTask = taskName;
}
}
public class TaskRow
{
public string Title { get; set; }
public string StatusText { get; set; }
public TailwindColor StatusColor { get; set; }
}
public class SectionRow
{
public string Title { get; set; }
public string Description { get; set; }
public string Url { get; set; }
}
}
Sample 3: Custom Item Content and RouteName
Use the paired <t:ListItem> form when you need custom row markup. The sample also uses RouteName so the list navigates between pages inside the generated sample app.
@masterPage master.dotmaster
<dot:Content ContentPlaceHolderID="Main">
<t:ListGroup>
<t:ListItem Icon="BookOpen" RouteName="SampleA">
<span class="list-row-title">Overview</span>
<span class="list-row-text">Stay on the overview page.</span>
</t:ListItem>
<t:ListItem Icon="DocumentText" RouteName="SampleB" BadgeText="New" BadgeColor="Info">
<span class="list-row-title">Details</span>
<span class="list-row-text">Open another page inside the sample.</span>
</t:ListItem>
</t:ListGroup>
<p>Current page: Sample A</p>
</dot:Content>
@masterPage master.dotmaster
<dot:Content ContentPlaceHolderID="Main">
<t:ListGroup>
<t:ListItem Icon="ArrowLeft" RouteName="SampleA">
<span class="list-row-title">Back to overview</span>
<span class="list-row-text">Route-based navigation works on the whole list row.</span>
</t:ListItem>
</t:ListGroup>
<p>Current page: Sample B</p>
</dot:Content>
<dot:ContentPlaceHolder ID="Main" />
using DotVVM.Framework.Configuration;
namespace DotvvmWeb.Views.Docs.Controls.tailwind.List.sample3
{
public class Startup : IDotvvmStartup
{
public void Configure(DotvvmConfiguration config, string applicationPath)
{
config.RouteTable.Add("SampleA", "", "SampleA.dothtml", null);
config.RouteTable.Add("SampleB", "details", "SampleB.dothtml", null);
}
}
}