BulletedList Component Samples

Basic BulletedList with Static Items (Text Mode)

  • Apple
  • Banana
  • Cherry
  • Date
<BulletedList TItem="object" StaticItems="discItems" BulletStyle="BulletStyle.Disc" />

@code {
    private ListItemCollection discItems = new() {
        new ListItem("Apple", "1"),
        new ListItem("Banana", "2"),
        new ListItem("Cherry", "3"),
        new ListItem("Date", "4")
    };
}

Bullet Style: Numbered

  1. First
  2. Second
  3. Third
<BulletedList TItem="object" StaticItems="numberedItems" BulletStyle="BulletStyle.Numbered" />

Bullet Style: Square with HyperLinks

<BulletedList TItem="object" StaticItems="squareLinkItems" BulletStyle="BulletStyle.Square" DisplayMode="BulletedListDisplayMode.HyperLink" />

Bullet Style: Square

  • Item One
  • Item Two
  • Item Three
  • Item Four
<BulletedList TItem="object" StaticItems="bulletItems" BulletStyle="BulletStyle.Square" />

Bullet Style: Numbered

  1. Item One
  2. Item Two
  3. Item Three
  4. Item Four
<BulletedList TItem="object" StaticItems="bulletItems" BulletStyle="BulletStyle.Numbered" />

Bullet Style: Lower Alpha (a, b, c...)

  1. Item One
  2. Item Two
  3. Item Three
  4. Item Four
<BulletedList TItem="object" StaticItems="bulletItems" BulletStyle="BulletStyle.LowerAlpha" />

Bullet Style: Upper Alpha (A, B, C...)

  1. Item One
  2. Item Two
  3. Item Three
  4. Item Four
<BulletedList TItem="object" StaticItems="bulletItems" BulletStyle="BulletStyle.UpperAlpha" />

Bullet Style: Lower Roman (i, ii, iii...)

  1. Item One
  2. Item Two
  3. Item Three
  4. Item Four
<BulletedList TItem="object" StaticItems="bulletItems" BulletStyle="BulletStyle.LowerRoman" />

Bullet Style: Upper Roman (I, II, III...)

  1. Item One
  2. Item Two
  3. Item Three
  4. Item Four
<BulletedList TItem="object" StaticItems="bulletItems" BulletStyle="BulletStyle.UpperRoman" />

Numbered List Starting at 5

  1. Item One
  2. Item Two
  3. Item Three
  4. Item Four
<BulletedList TItem="object" StaticItems="bulletItems" BulletStyle="BulletStyle.Numbered" FirstBulletNumber="5" />

Display Mode: HyperLink

<BulletedList TItem="object" StaticItems="linkItems" DisplayMode="BulletedListDisplayMode.HyperLink" />

@code {
    private ListItemCollection linkItems = new() {
        new ListItem("Microsoft", "https://microsoft.com"),
        new ListItem("GitHub", "https://github.com"),
        new ListItem("Azure", "https://azure.com")
    };
}

Display Mode: HyperLink with Target="_blank"

<BulletedList TItem="object" StaticItems="linkItems" DisplayMode="BulletedListDisplayMode.HyperLink" Target="_blank" />

Display Mode: LinkButton (Clickable)

Click an item above to see the result.

<BulletedList TItem="object" 
              StaticItems="clickItems" 
              DisplayMode="BulletedListDisplayMode.LinkButton" 
              OnClick="HandleItemClick" />

@code {
    private void HandleItemClick(BulletedListEventArgs e) {
        clickMessage = $"You clicked item at index {e.Index}";
    }
}

Data-Bound BulletedList

<BulletedList TItem="Product" 
              Items="products" 
              DataTextField="Name" 
              DataValueField="Url"
              DisplayMode="BulletedListDisplayMode.HyperLink" />

@code {
    private List<Product> products = new() {
        new Product { Name = "Laptop", Url = "/products/laptop" },
        new Product { Name = "Phone", Url = "/products/phone" }
    };
}

With Styling

  • Item One
  • Item Two
  • Item Three
  • Item Four
<BulletedList TItem="object" 
              StaticItems="bulletItems" 
              CssClass="styled-list"
              BackColor="new WebColor(System.Drawing.Color.LightYellow)"
              ForeColor="new WebColor(System.Drawing.Color.DarkGreen)"
              BorderStyle="BorderStyle.Dashed"
              BorderWidth="Unit.Pixel(2)"
              Width="Unit.Pixel(300)" />

Disabled Item in List

<BulletedList TItem="object" 
              StaticItems="disabledItems" 
              DisplayMode="BulletedListDisplayMode.HyperLink" />

@code {
    private ListItemCollection disabledItems = new() {
        new ListItem("Enabled Link", "https://example.com"),
        new ListItem("Disabled Link", "https://blocked.com") { Enabled = false },
        new ListItem("Another Enabled", "https://another.com")
    };
}

Entire List Disabled

  • Microsoft
  • GitHub
  • Azure

(Entire BulletedList is disabled - items render as text)

<BulletedList TItem="object" 
              StaticItems="linkItems" 
              DisplayMode="BulletedListDisplayMode.LinkButton"
              Enabled="false" />