List Group

To use the List Group component, import it from the theui-svelte library. Below is a simple example demonstrating how to use the List Group:

<script>
  import { ListGroup, ListItem } from "theui-svelte";
</script>

<ListGroup>
  <ListItem>First Item</ListItem>
  <ListItem>Second Item</ListItem>
  <ListItem>Third Item</ListItem>
</ListGroup>

The variant prop in the List Group component allows you to control the overall style of the list. It provides two options:

• bordered: This style adds borders around each list item, giving a defined and structured look to the list. It is useful when you want to visually separate items clearly.
• flat: This style removes borders, resulting in a clean, minimalist design. It's ideal for cases where a simple and unobtrusive list presentation is preferred.

By default, the variant is set to "bordered". You can easily switch between these styles to match the design needs of your application.

<ListGroup variant="flat">
  <ListItem>First Item</ListItem>
  <ListItem>Second Item</ListItem>
  <ListItem>Third Item</ListItem>
</ListGroup>

The type prop in the List Group component determines the HTML element used to render the list. This allows you to customize the structure of the list based on your needs. The available options are:

• ul (default): Renders the list as an unordered list (<ul>), which is ideal for general list items or navigation. Each ListItem will be a <li> in that case.
• div: Setting type="div" renders each ListItem as a <div> by default. If the ListItem has an href, it becomes an <a>. Without href, it stays as a <div>. This allows a mix of static and clickable content.

<ListGroup type="div">
  <ListItem>Non-clickable item</ListItem>
  <ListItem href="/link">Clickable link item</ListItem>
</ListGroup>

List Group

List Item