List

This component is a generic element that can be used for dropdowns, inline lists, and menus.

import {
  List,
  ListDescription,
  ListDetails,
  ListItem,
  ListLabel,
} from "@qui/react-vscode"

Guidelines

Every item should have a ListLabel.
The rest of the elements are optional.

Examples

Inline

Use the List component to render an inline list.

Theme:

Dark Modern

import {ReactNode} from "react"

import {
  List,
  ListDescription,
  ListDetails,
  ListItem,
  ListLabel,
} from "@qui/react-vscode"

export default function Inline(): ReactNode {
  return (
    <List>
      <ListItem startIcon="remote-explorer" value="microsoft/vscode">
        <ListLabel>microsoft/vscode</ListLabel>
      </ListItem>
      <ListItem startIcon="remote-explorer" value="microsoft/vscode-codicons">
        <ListLabel>microsoft/vscode-codicons</ListLabel>
        <ListDescription>Last used 2 days ago</ListDescription>
        <ListDetails>main • 4 cores, 8GB RAM, 32GB storage</ListDetails>
      </ListItem>
      <ListItem startIcon="remote-explorer" value="microsoft/vscode-docs">
        <ListLabel>microsoft/vscode-docs</ListLabel>
        <ListDescription>Last used 3 days ago</ListDescription>
        <ListDetails>main • 8 cores, 16GB RAM, 32GB storage</ListDetails>
      </ListItem>
    </List>
  )
}

ListItems also work as children of our Dropdown component.

Theme:

Dark Modern

import {ReactNode} from "react"

import {
  Dropdown,
  DropdownInput,
  ListDescription,
  ListDetails,
  ListItem,
  ListLabel,
} from "@qui/react-vscode"

export default function DropdownDemo(): ReactNode {
  return (
    <Dropdown anchor={<DropdownInput defaultValue="Select an option" />}>
      <ListItem startIcon="remote-explorer" value="microsoft/vscode">
        <ListLabel>microsoft/vscode</ListLabel>
      </ListItem>
      <ListItem startIcon="remote-explorer" value="microsoft/vscode-codicons">
        <ListLabel>microsoft/vscode-codicons</ListLabel>
        <ListDescription>Last used 2 days ago</ListDescription>
        <ListDetails>main • 4 cores, 8GB RAM, 32GB storage</ListDetails>
      </ListItem>
      <ListItem startIcon="remote-explorer" value="microsoft/vscode-docs">
        <ListLabel>microsoft/vscode-docs</ListLabel>
        <ListDescription>Last used 3 days ago</ListDescription>
        <ListDetails>main • 8 cores, 16GB RAM, 32GB storage</ListDetails>
      </ListItem>
    </Dropdown>
  )
}

Name & Description	Option(s)	Default
as The component used for the root node. It can be a React component or element.	\| ElementType \| ComponentType	'div'
children React children prop.	ReactNode

Name & Description	Option(s)	Default
as The component used for the root node. It can be a React component or element.	\| ElementType \| ComponentType	'div'
children React children prop.	ReactNode
endIcon Icon positioned at the end of the list. If supplied as a `string`, the vscode codicon will be applied. Supply as a `ReactElement` for additional customization.	\| string \| ReactElement
startIcon Icon positioned at the start of the list. If supplied as a `string`, the vscode codicon will be applied. Supply as a `ReactElement` for additional customization.	\| string \| ReactElement
value A unique value for this item. If no value is provided, it will be inferred from `children` or the rendered `textContent`. If your `textContent` changes between renders, you _must_ provide a stable, unique `value`.	\| string \| number \| readonly string[]

A unique value for this item. If no value is provided, it will be inferred from children or the rendered textContent. If your textContent changes between renders, you _must_ provide a stable, unique value.

Keybinding

List

Guidelines

Examples

Inline

API

ListProps

ListItemProps