ListContainer

A list is any enumeration of a set of items. The simple list is for continuous vertical indexes of text or icons+text. The content of these lists must be simple: ideally simples fields. This pattern is ideal for selections. It should be used inside an HvPanel.

Source Code

uikit-react-core

Icons

Icons can be added to HvListItem using the startAdornment or endAdornment props.

SQLite
PostgreSQL
MySQL
MongoDB
MariaDB

<HvPanel className="w-300px">
  <HvListContainer interactive>
    <HvListItem startAdornment={<DataStore />}>SQLite</HvListItem>
    <HvListItem startAdornment={<DataStore />}>PostgreSQL</HvListItem>
    <HvListItem startAdornment={<DataStore />}>MySQL</HvListItem>
    <HvListItem startAdornment={<DataStore />}>MongoDB</HvListItem>
    <HvListItem startAdornment={<DataStore />}>MariaDB</HvListItem>
  </HvListContainer>
</HvPanel>

<HvPanel className="w-300px">
  <HvListContainer interactive>
    <HvListItem startAdornment={<DataStore />}>SQLite</HvListItem>
    <HvListItem startAdornment={<DataStore />}>PostgreSQL</HvListItem>
    <HvListItem startAdornment={<DataStore />}>MySQL</HvListItem>
    <HvListItem startAdornment={<DataStore />}>MongoDB</HvListItem>
    <HvListItem startAdornment={<DataStore />}>MariaDB</HvListItem>
  </HvListContainer>
</HvPanel>

HvSelectionList

ListContainer

Icons

Related components