No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

Svelte Bootstrap List Group
 
Svelte List Group - Bootstrap 4 & Material Design
 
Svelte Bootstrap list group is a flexible component which displays not only simple list of
  elements but complex custom content.
 
 
Basic example
 
   
  • Cras justo odio
    •  
  • Dapibus ac facilisis in
    •  
  • Morbi leo risus
    •  
  • Porta ac consectetur ac
    •  
  • Vestibulum at eros
 
 
<script>
  import {MDBListGroup, MDBListGroupItem, MDBContainer} from "mdbsvelte";
</script>
<MDBContainer>
  <MDBListGroup style="width: 22rem">
    <MDBListGroupItem>Cras justo odio</MDBListGroupItem>
    <MDBListGroupItem>Dapibus ac facilisis in</MDBListGroupItem>
    <MDBListGroupItem>Morbi leo risus</MDBListGroupItem>
    <MDBListGroupItem>Porta ac consectetur ac</MDBListGroupItem>
    <MDBListGroupItem>Vestibulum at eros</MDBListGroupItem>
  </MDBListGroup>
</MDBContainer>

 
Labels
 
Add labels to any list group item to show unread counts, activity, etc.
 
   
  • Cras justo odio
      14
    •  
  • Dapibus ac facilisis in
      2
    •  
  • Morbi leo risus
      1
 
 
<script>
  import {MDBListGroup, MDBListGroupItem, MDBContainer, MDBBadge} from "mdbsvelte";
</script>
<MDBContainer>
  <MDBListGroup style="width: 22rem">
    <MDBListGroupItem class="d-flex justify-content-between align-items-center">Cras justo odio
      <MDBBadge color="primary"
                pill>14
      </MDBBadge>
    </MDBListGroupItem>
    <MDBListGroupItem class="d-flex justify-content-between align-items-center">Dapibus ac facilisis in
      <MDBBadge
        color="primary" pill>2
      </MDBBadge>
    </MDBListGroupItem>
    <MDBListGroupItem class="d-flex justify-content-between align-items-center">Morbi leo risus
      <MDBBadge color="primary"
                pill>1
      </MDBBadge>
    </MDBListGroupItem>
  </MDBListGroup>
</MDBContainer>

 
Linked items
 
Linkify list group items using the href prop and an optional active
  prop.

 
   
 
 
<script>
  import {MDBListGroup, MDBListGroupItem, MDBContainer} from "mdbsvelte";
</script>
<MDBContainer>
  <MDBListGroup style="width: 22rem">
    <MDBListGroupItem href="#" active>Cras justo odio</MDBListGroupItem>
    <MDBListGroupItem href="#">Dapibus ac facilisis in</MDBListGroupItem>
    <MDBListGroupItem href="#">Morbi leo risus</MDBListGroupItem>
    <MDBListGroupItem href="#">Porta ac consectetur ac</MDBListGroupItem>
    <MDBListGroupItem href="#">Vestibulum at eros</MDBListGroupItem>
  </MDBListGroup>
</MDBContainer>

 
Links and buttons
 

  To create actionable list group items with hover or disabled states use appropriate attributes, namely
  disabled .

 
   
 
 
<script>
  import {MDBListGroup, MDBListGroupItem, MDBContainer} from "mdbsvelte";
</script>
<MDBContainer>
  <MDBListGroup style="width: 22rem">
    <MDBListGroupItem href="#" active>Cras justo odio</MDBListGroupItem>
    <MDBListGroupItem href="#">Dapibus ac facilisis in</MDBListGroupItem>
    <MDBListGroupItem href="#">Morbi leo risus</MDBListGroupItem>
    <MDBListGroupItem href="#">Porta ac consectetur ac</MDBListGroupItem>
    <MDBListGroupItem href="#" disabled>Vestibulum at eros</MDBListGroupItem>
  </MDBListGroup>
</MDBContainer>

 
Contextual classes
 
Use color prop to style list items.
 
   
  • Cras justo odio
    •  
  • Dapibus ac facilisis in
    •  
  • Morbi leo risus
    •  
  • Porta ac consectetur ac
    •  
  • Vestibulum at eros
    •  
  • Vestibulum at eros
    •  
  • Vestibulum at eros
 
 
<script>
  import {MDBListGroup, MDBListGroupItem, MDBContainer} from "mdbsvelte";
</script>
<MDBContainer>
  <MDBListGroup class="my-4 mx-4" style="width:22rem">
    <MDBListGroupItem color="primary">Cras justo odio</MDBListGroupItem>
    <MDBListGroupItem color="secondary">Dapibus ac facilisis in</MDBListGroupItem>
    <MDBListGroupItem color="danger">Morbi leo risus</MDBListGroupItem>
    <MDBListGroupItem color="warning">Porta ac consectetur ac</MDBListGroupItem>
    <MDBListGroupItem color="info">Vestibulum at eros</MDBListGroupItem>
    <MDBListGroupItem color="light">Vestibulum at eros</MDBListGroupItem>
    <MDBListGroupItem color="dark">Vestibulum at eros</MDBListGroupItem>
  </MDBListGroup>
</MDBContainer>

 
Custom content
 
Add nearly any HTML within, even for linked list groups like the one below.
 
   
 
 
<script>
  import {MDBListGroup, MDBListGroupItem, MDBContainer} from "mdbsvelte";
</script>
<MDBContainer>
  <MDBListGroup style="width: 22rem">
    <MDBListGroupItem active href="#">
      <div class="d-flex w-100 justify-content-between">
        <h5 class="mb-1">List group item heading</h5>
        <small>3 days ago</small>
      </div>
      <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius
        blandit.</p>
      <small>Donec id elit non mi porta.</small>
    </MDBListGroupItem>
    <MDBListGroupItem hover href="#">
      <div class="d-flex w-100 justify-content-between">
        <h5 class="mb-1">List group item heading</h5>
        <small class="text-muted">3 days ago</small>
      </div>
      <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius
        blandit.</p>
      <small class="text-muted">Donec id elit non mi porta.</small>
    </MDBListGroupItem>
    <MDBListGroupItem hover href="#">
      <div class="d-flex w-100 justify-content-between">
        <h5 class="mb-1">List group item heading</h5>
        <small class="text-muted">3 days ago</small>
      </div>
      <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius
        blandit.</p>
      <small class="text-muted">Donec id elit non mi porta.</small>
    </MDBListGroupItem>
  </MDBListGroup>
</MDBContainer>