List View component

List views are a flexible and powerful component for displaying a series of content in a contained scrollable view by providing a data source.

List views use ListGroup behind the covers, so you may make use of the ListGroup underlying APIs.

Examples

Basic

  • Antarctica
  • United Arab Emirates
  • Afghanistan
  • Albania
  • Armenia
  • Curacao
  • Sint Maarten
  • Netherlands Antilles
  • Angola
  • Argentina
  • Australia
  • Cocos Islands
  • Christmas Island
  • Heard Island and McDonald Islands
  • Kiribati
  • Norfolk Island
  • Nauru
  • Tuvalu
  • Aruba
  • Azerbaijan
  • Bosnia and Herzegovina
  • Barbados
  • Bangladesh
  • Bulgaria
  • Bahrain
  • Burundi
  • Bermuda
  • Brunei
  • Bolivia
  • Brazil
  • Bahamas
  • Bhutan
  • Botswana
  • Belarus
  • Belize
  • Canada
  • Democratic Republic of the Congo
  • Switzerland
  • Liechtenstein
  • Chile
  • China
  • Colombia
  • Costa Rica
  • Cuba
  • Cape Verde
  • Czech Republic
  • Djibouti
  • Denmark
  • Faroe Islands
  • Greenland
  • Dominican Republic
  • Algeria
  • Egypt
  • Eritrea
  • Ethiopia
  • Andorra
  • Austria
  • Aland Islands
  • Belgium
  • Saint Barthelemy
  • Cyprus
  • Germany
  • Estonia
  • Spain
  • Finland
  • France
  • French Guiana
  • Guadeloupe
  • Greece
  • Ireland
  • Italy
  • Kosovo
  • Luxembourg
  • Monaco
  • Montenegro
  • Saint Martin
  • Martinique
  • Malta
  • Netherlands
  • Saint Pierre and Miquelon
  • Portugal
  • Reunion
  • Slovenia
  • Slovakia
  • San Marino
  • French Southern Territories
  • Vatican
  • Mayotte
  • Fiji
  • Falkland Islands
  • United Kingdom
  • Guernsey
  • South Georgia and the South Sandwich Islands
  • Isle of Man
  • Jersey
  • Georgia
  • Ghana
  • Gibraltar
  • Gambia
  • Guinea
  • Guatemala
  • Guyana
  • Hong Kong
  • Honduras
  • Croatia
  • Haiti
  • Hungary
  • Indonesia
  • Israel
  • Palestinian Territory
  • India
  • Iraq
  • Iran
  • Iceland
  • Jamaica
  • Jordan
  • Japan
  • Kenya
  • Kyrgyzstan
  • Cambodia
  • Comoros
  • North Korea
  • South Korea
  • Kuwait
  • Cayman Islands
  • Kazakhstan
  • Laos
  • Lebanon
  • Sri Lanka
  • Liberia
  • Lesotho
  • Lithuania
  • Latvia
  • Libya
  • Western Sahara
  • Morocco
  • Moldova
  • Madagascar
  • Macedonia
  • Myanmar
  • Mongolia
  • Macao
  • Mauritania
  • Mauritius
  • Maldives
  • Malawi
  • Mexico
  • Malaysia
  • Mozambique
  • Namibia
  • Nigeria
  • Nicaragua
  • Bouvet Island
  • Norway
  • Svalbard and Jan Mayen
  • Nepal
  • Cook Islands
  • Niue
  • New Zealand
  • Pitcairn
  • Tokelau
  • Oman
  • Panama
  • Peru
  • Papua New Guinea
  • Philippines
  • Pakistan
  • Poland
  • Paraguay
  • Qatar
  • Romania
  • Serbia
  • Serbia and Montenegro
  • Russia
  • Rwanda
  • Saudi Arabia
  • Solomon Islands
  • Seychelles
  • Sudan
  • Sweden
  • Singapore
  • Saint Helena
  • Sierra Leone
  • Somalia
  • Suriname
  • South Sudan
  • Sao Tome and Principe
  • Syria
  • Swaziland
  • Thailand
  • Tajikistan
  • Turkmenistan
  • Tunisia
  • Tonga
  • Turkey
  • Trinidad and Tobago
  • Taiwan
  • Tanzania
  • Ukraine
  • Uganda
  • American Samoa
  • Bonaire, Saint Eustatius and Saba
  • Ecuador
  • Micronesia
  • Guam
  • British Indian Ocean Territory
  • Marshall Islands
  • Northern Mariana Islands
  • Puerto Rico
  • Palau
  • El Salvador
  • Turks and Caicos Islands
  • East Timor
  • United States Minor Outlying Islands
  • United States
  • British Virgin Islands
  • U.S. Virgin Islands
  • Uruguay
  • Uzbekistan
  • Venezuela
  • Vietnam
  • Vanuatu
  • Samoa
  • Central African Republic
  • Republic of the Congo
  • Cameroon
  • Gabon
  • Equatorial Guinea
  • Chad
  • Antigua and Barbuda
  • Anguilla
  • Dominica
  • Grenada
  • Saint Kitts and Nevis
  • Saint Lucia
  • Montserrat
  • Saint Vincent and the Grenadines
  • Burkina Faso
  • Benin
  • Ivory Coast
  • Guinea-Bissau
  • Mali
  • Niger
  • Senegal
  • Togo
  • New Caledonia
  • French Polynesia
  • Wallis and Futuna
  • Yemen
  • South Africa
  • Zambia
  • Zimbabwe
<ListView TItem="Country"
            Data="Countries"
            TextField="(item) => item.Name"
            Mode="ListGroupMode.Static"
            MaxHeight="300px">
</ListView>
@code{
    [Inject]
    public CountryData CountryData { get; set; }
    public IEnumerable<Country> Countries;

    protected override async Task OnInitializedAsync()
    {
        Countries = await CountryData.GetDataAsync();
        await base.OnInitializedAsync();
    }
}

Selectable items

Add SelectedItem and provide TextField to indicate the current active selection.
  • Antarctica
  • United Arab Emirates
  • Afghanistan
  • Albania
  • Armenia
  • Curacao
  • Sint Maarten
  • Netherlands Antilles
  • Angola
  • Argentina
  • Australia
  • Cocos Islands
  • Christmas Island
  • Heard Island and McDonald Islands
  • Kiribati
  • Norfolk Island
  • Nauru
  • Tuvalu
  • Aruba
  • Azerbaijan
  • Bosnia and Herzegovina
  • Barbados
  • Bangladesh
  • Bulgaria
  • Bahrain
  • Burundi
  • Bermuda
  • Brunei
  • Bolivia
  • Brazil
  • Bahamas
  • Bhutan
  • Botswana
  • Belarus
  • Belize
  • Canada
  • Democratic Republic of the Congo
  • Switzerland
  • Liechtenstein
  • Chile
  • China
  • Colombia
  • Costa Rica
  • Cuba
  • Cape Verde
  • Czech Republic
  • Djibouti
  • Denmark
  • Faroe Islands
  • Greenland
  • Dominican Republic
  • Algeria
  • Egypt
  • Eritrea
  • Ethiopia
  • Andorra
  • Austria
  • Aland Islands
  • Belgium
  • Saint Barthelemy
  • Cyprus
  • Germany
  • Estonia
  • Spain
  • Finland
  • France
  • French Guiana
  • Guadeloupe
  • Greece
  • Ireland
  • Italy
  • Kosovo
  • Luxembourg
  • Monaco
  • Montenegro
  • Saint Martin
  • Martinique
  • Malta
  • Netherlands
  • Saint Pierre and Miquelon
  • Portugal
  • Reunion
  • Slovenia
  • Slovakia
  • San Marino
  • French Southern Territories
  • Vatican
  • Mayotte
  • Fiji
  • Falkland Islands
  • United Kingdom
  • Guernsey
  • South Georgia and the South Sandwich Islands
  • Isle of Man
  • Jersey
  • Georgia
  • Ghana
  • Gibraltar
  • Gambia
  • Guinea
  • Guatemala
  • Guyana
  • Hong Kong
  • Honduras
  • Croatia
  • Haiti
  • Hungary
  • Indonesia
  • Israel
  • Palestinian Territory
  • India
  • Iraq
  • Iran
  • Iceland
  • Jamaica
  • Jordan
  • Japan
  • Kenya
  • Kyrgyzstan
  • Cambodia
  • Comoros
  • North Korea
  • South Korea
  • Kuwait
  • Cayman Islands
  • Kazakhstan
  • Laos
  • Lebanon
  • Sri Lanka
  • Liberia
  • Lesotho
  • Lithuania
  • Latvia
  • Libya
  • Western Sahara
  • Morocco
  • Moldova
  • Madagascar
  • Macedonia
  • Myanmar
  • Mongolia
  • Macao
  • Mauritania
  • Mauritius
  • Maldives
  • Malawi
  • Mexico
  • Malaysia
  • Mozambique
  • Namibia
  • Nigeria
  • Nicaragua
  • Bouvet Island
  • Norway
  • Svalbard and Jan Mayen
  • Nepal
  • Cook Islands
  • Niue
  • New Zealand
  • Pitcairn
  • Tokelau
  • Oman
  • Panama
  • Peru
  • Papua New Guinea
  • Philippines
  • Pakistan
  • Poland
  • Paraguay
  • Qatar
  • Romania
  • Serbia
  • Serbia and Montenegro
  • Russia
  • Rwanda
  • Saudi Arabia
  • Solomon Islands
  • Seychelles
  • Sudan
  • Sweden
  • Singapore
  • Saint Helena
  • Sierra Leone
  • Somalia
  • Suriname
  • South Sudan
  • Sao Tome and Principe
  • Syria
  • Swaziland
  • Thailand
  • Tajikistan
  • Turkmenistan
  • Tunisia
  • Tonga
  • Turkey
  • Trinidad and Tobago
  • Taiwan
  • Tanzania
  • Ukraine
  • Uganda
  • American Samoa
  • Bonaire, Saint Eustatius and Saba
  • Ecuador
  • Micronesia
  • Guam
  • British Indian Ocean Territory
  • Marshall Islands
  • Northern Mariana Islands
  • Puerto Rico
  • Palau
  • El Salvador
  • Turks and Caicos Islands
  • East Timor
  • United States Minor Outlying Islands
  • United States
  • British Virgin Islands
  • U.S. Virgin Islands
  • Uruguay
  • Uzbekistan
  • Venezuela
  • Vietnam
  • Vanuatu
  • Samoa
  • Central African Republic
  • Republic of the Congo
  • Cameroon
  • Gabon
  • Equatorial Guinea
  • Chad
  • Antigua and Barbuda
  • Anguilla
  • Dominica
  • Grenada
  • Saint Kitts and Nevis
  • Saint Lucia
  • Montserrat
  • Saint Vincent and the Grenadines
  • Burkina Faso
  • Benin
  • Ivory Coast
  • Guinea-Bissau
  • Mali
  • Niger
  • Senegal
  • Togo
  • New Caledonia
  • French Polynesia
  • Wallis and Futuna
  • Yemen
  • South Africa
  • Zambia
  • Zimbabwe
Selected Item Text:
<ListView TItem="Country"
            Data="Countries"
            TextField="(item) => item.Name"
            Mode="ListGroupMode.Selectable"
            MaxHeight="300px"
            @bind-SelectedItem="@selectedListViewItem">
</ListView>

<Field Horizontal="true">
    <FieldBody ColumnSize="ColumnSize.Is12">
        Selected Item Text: @selectedListViewItem?.Name
    </FieldBody>
</Field>
@code{
    [Inject]
    public CountryData CountryData { get; set; }
    public IEnumerable<Country> Countries;

    private Country selectedListViewItem;

    protected override async Task OnInitializedAsync()
    {
        Countries = await CountryData.GetDataAsync();
        await base.OnInitializedAsync();
    }
}

Attributes

ListView

Name Description Type Default
Data Gets or sets the items data-source. IEnumerable<TItem>
SelectedItem Gets or sets currently selected item. TItem
SelectedItemChanged Occurs after the selected item has changed. EventCallback<TItem>
TextField Method used to get the display field from the supplied data source. Func<TItem, string>
Class Custom css class-names. string
Style Custom styles. string
Height Sets the ListView Height. string
MaxHeight Sets the ListView MaxHeight. string 250px
Flush Remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards). bool false
Mode Defines the list-group behavior mode. ListGroupMode Static
Attributes Captures all the custom attribute that are not part of Blazorise component. Dictionary<string, object>
ChildContent Specifies the content to be rendered inside the ListView. RenderFragment