Sveltestrap

To create a responsive Navbar that collapses on smaller screens, use the <NavbarToggler> and <Collapse> components. You must manage the visibility state (e.g., isOpen) manually in your Svelte component and listen for the on:update event from the <Collapse> component to keep your state in sync.

<script lang="ts">
  import {
    Collapse,
    NavbarToggler,
    NavbarBrand,
    Nav,
    Navbar,
    NavItem,
    NavLink
  } from '@sveltestrap/sveltestrap';

  let isOpen = false;

  function handleUpdate(event) {
    isOpen = event.detail.isOpen;
  }
</script>

<Navbar color="light" light expand="md" container="md">
  <NavbarBrand href="/">NavBar with md container</NavbarBrand>
  <NavbarToggler on:click={() => (isOpen = !isOpen)} />
  <Collapse {isOpen} navbar expand="md" on:update={handleUpdate}>
    <Nav class="ms-auto" navbar>
      <NavItem>
        <NavLink href="#components/">Components</NavLink>
      </NavItem>
      <NavItem>
        <NavLink href="https://github.com/sveltestrap/sveltestrap">GitHub</NavLink>
      </NavItem>
    </Nav>
  </Collapse>
</Navbar>

The <Accordion> component manages a collection of <AccordionItem> components to present content in a compact, organized manner.

Basic Usage

To create a standard accordion, wrap several <AccordionItem> components inside an <Accordion> component. You can use the active prop on an <AccordionItem> to have it open by default.

Customizing Headers with Slots

While <AccordionItem> accepts a header prop for simple text, you can use the slot="header" on any element inside an <AccordionItem> to provide complex HTML or custom components as the header.

<script lang="ts">
  import { Accordion, AccordionItem } from '@sveltestrap/sveltestrap';
</script>

<Accordion>
  <AccordionItem active>
    <h4 class="m-0" slot="header">Home</h4>
    Fallbrook
  </AccordionItem>
  <AccordionItem>
    <h4 class="m-0" slot="header">School</h4>
    <a href="#home">Buena Vista Elementary</a>
  </AccordionItem>
</Accordion>

The <Pagination> component provides navigation for breaking content into manageable segments. It is used in conjunction with <PaginationItem> and <PaginationLink> to create a complete navigation bar.

To build a pagination bar, wrap <PaginationItem> components inside <Pagination>. Each item should contain a <PaginationLink> to handle the actual navigation or interaction.

<script lang="ts">
  import { Pagination, PaginationItem, PaginationLink } from '@sveltestrap/sveltestrap';
</script>

<Pagination ariaLabel="Page navigation example">
  <PaginationItem>
    <PaginationLink first href="#" />
  </PaginationItem>
  <PaginationItem>
    <PaginationLink previous href="#" />
  </PaginationItem>
  <PaginationItem>
    <PaginationLink href="#">1</PaginationLink>
  </PaginationItem>
  <PaginationItem active>
    <PaginationLink href="#">2</PaginationLink>
  </PaginationItem>
  <PaginationItem>
    <PaginationLink next href="#" />
  </PaginationItem>
  <PaginationItem>
    <PaginationLink last href="#" />
  </PaginationItem>
</Pagination>

The <Carousel> component allows you to navigate through a series of images or text slides. It works by managing an activeIndex and a list of items. You can compose it with <CarouselItem> for the slides, <CarouselControl> for navigation arrows, and <CarouselIndicators> for position dots.

To control the carousel, use bind:activeIndex on the <Carousel> component and pass the same activeIndex and items props to its sub-components.

<script lang="ts">
  import { Carousel, CarouselItem } from '@sveltestrap/sveltestrap';
  const items = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
  let activeIndex = 0;
</script>

<Carousel {items} bind:activeIndex>
  <div class="carousel-inner">
    {#each items as item, index}
      <CarouselItem bind:activeIndex itemIndex={index}>
        <img src={item} class="d-block w-100" alt="Slide {index + 1}" />
      </CarouselItem>
    {/each}
  </div>
</Carousel>