Konsta UI Svelte

https://konstaui.com/svelte/
Admin
Konsta UI Svelte is a free and open-source mobile UI components framework built with Tailwind CSS,...
Tokens:77,925
Snippets:496
Trust Score:8.1
Update:5 months ago
Show doc for...
Tokens:
Raw
### ListButton Examples

Source: https://konstaui.com/svelte/list-button

Examples demonstrating the usage of the ListButton component in different configurations.

```APIDOC
## Examples

### Basic Usage

```svelte
<script>
  import { Page, Navbar, NavbarBackLink, List, ListButton } from 'konsta/svelte';
</script>

<Page>
  <Navbar title="List Button"></Navbar>
  <List strong>
    <ListButton>Button 1</ListButton>
    <ListButton>Button 2</ListButton>
    <ListButton>Button 3</ListButton>
  </List>
</Page>
```

### Inset List

```svelte
<script>
  import { Page, Navbar, NavbarBackLink, List, ListButton } from 'konsta/svelte';
</script>

<Page>
  <Navbar title="List Button"></Navbar>
  <List strong inset>
    <ListButton>Button 1</ListButton>
    <ListButton>Button 2</ListButton>
    <ListButton>Button 3</ListButton>
  </List>
</Page>
```

### Custom Color

```svelte
<script>
  import { Page, Navbar, NavbarBackLink, List, ListButton } from 'konsta/svelte';
</script>

<Page>
  <Navbar title="List Button"></Navbar>
  <List strong inset>
    <ListButton class="k-color-brand-red">Red Button</ListButton>
  </List>
</Page>
```
```

--------------------------------

### Searchbar Example

Source: https://konstaui.com/svelte/searchbar

Example of how to use the Searchbar component in a Svelte application with a list of items.

```APIDOC
## Searchbar.svelte Example

```svelte
<script>
  import {
    Page,
    Navbar,
    NavbarBackLink,
    Searchbar,
    List,
    ListItem,
  } from 'konsta/svelte';


  let searchQuery = $state('');
  let items = [
    { title: 'FC Ajax' },
    { title: 'FC Arsenal' },
    { title: 'FC Athletic' },
    { title: 'FC Barcelona' },
    { title: 'FC Bayern München' },
    { title: 'FC Bordeaux' },
    { title: 'FC Borussia Dortmund' },
    { title: 'FC Chelsea' },
    { title: 'FC Galatasaray' },
    { title: 'FC Juventus' },
    { title: 'FC Liverpool' },
    { title: 'FC Manchester City' },
    { title: 'FC Manchester United' },
    { title: 'FC Paris Saint-Germain' },
    { title: 'FC Real Madrid' },
    { title: 'FC Tottenham Hotspur' },
    { title: 'FC Valencia' },
    { title: 'FC West Ham United' },
  ];


  function handleSearch(e) {
    searchQuery = e.target.value;
  }


  function handleClear() {
    searchQuery = '';
  }


  function handleDisable() {
    console.log('Disable');
  }


  let filteredItems = $derived.by(() =>
    searchQuery
      ? items.filter((item) =>
          item.title.toLowerCase().includes(searchQuery.toLowerCase())
        )
      : items
  );
</script>


<Page>
  <Navbar title="Searchbar">
    {#snippet left()}
      {#if !isPreview}
        <NavbarBackLink onclick={() => history.back()} />
      {/if}
    {/snippet}
    {#snippet subnavbar()}
      <Searchbar
        onInput={handleSearch}
        value={searchQuery}
        onClear={handleClear}
        disableButton
        disableButtonText="Cancel"
        onDisable={handleDisable}
      />
    {/snippet}
  </Navbar>
  <List strong inset>
    {#if filteredItems.length === 0}
      <ListItem title="Nothing found" />
    {/if}
    {#each filteredItems as item (item.title)}
      <ListItem key={item.title} title={item.title} />
    {/each}
  </List>
</Page>
```
```

--------------------------------

### Basic ListInput Examples

Source: https://konstaui.com/svelte/list-input

Demonstrates basic ListInput components with different input types and labels.

```svelte
<ListInput label="Name" type="text" placeholder="Your name" />


<ListInput label="Password" type="password" placeholder="Your password" />


<ListInput label="E-mail" type="email" placeholder="Your e-mail" />


<ListInput label="URL" type="url" placeholder="URL" />
```

--------------------------------

### Example SvelteKit Page with Konsta UI Components

Source: https://konstaui.com/svelte/svelte-kit

An example of a SvelteKit page (`src/routes/index.svelte`) demonstrating the usage of various Konsta UI Svelte components like Page, Navbar, Block, List, and ListItem.

```svelte
<script>
  import {
    Page,
    Navbar,
    Block,
    Button,
    List,
    ListItem,
    BlockTitle,
  } from 'konsta/svelte';
</script>

<Page>
  <Navbar title="My App" />

  <Block strong>
    <p>Here is your SvelteKit & Konsta UI app. Let's see what we have here.</p>
  </Block>
  <BlockTitle>Navigation</BlockTitle>
  <List>
    <ListItem href="/about/" title="About" />
    <ListItem href="/form/" title="Form" />
  </List>

  <Block strong class="flex space-x-4">
    <button>Button 1</button>
    <button>Button 2</button>
  </Block>
</Page>
```

--------------------------------

### Install Konsta UI Library

Source: https://konstaui.com/svelte/installation

Use this command to install the Konsta UI library in your Svelte project. Assumes you have a configured Svelte and Tailwind CSS project.

```bash
npm i konsta
```

--------------------------------

### Install Dependencies - npm

Source: https://konstaui.com/svelte/kitchen-sink

Install required dependencies for the Konsta UI Svelte Kitchen Sink by running this command in your terminal.

```bash
npm install
```

--------------------------------

### KonstaProvider Usage Example

Source: https://konstaui.com/svelte/konsta-provider

This example demonstrates how to wrap your Svelte application with KonstaProvider and configure theme settings. It also shows the necessary addition of theme classes to the root element when using with Framework7.

```APIDOC
## KonstaProvider

### Description

If you use Konsta UI with other frameworks (like Framework7), we still should specify Konsta UI's globals (like theme) with the help of `KonstaProvider`. We also need to add `k-ios` or `k-material` class to the app's root element.

### Usage

```svelte
<!-- App.svelte -->
<script>
  // we use main App and Router components from Framework7
  import { App, View, Page, Navbar } from 'framework7-svelte';
  // we use KonstaProvider instead
  import { KonstaProvider, Block, Button } from 'konsta/svelte';
</script>

<!-- Wrap our app with KonstaProvider -->
<KonstaProvider theme="ios">
  <!-- We add extra `k-ios` class to the app root element -->
  <App theme="ios" class="k-ios">
    <View>
      <Page>
        <Navbar title="My App" />
        <!--  Konsta UI components -->
        <Block>
          <p>Here comes my app</p>
        </Block>
        <Block class="space-y-4">
          <p>Here comes the button</p>
          <button>Action</button>
        </Block>
      </Page>
    </View>
  </App>
</KonstaProvider>
```

### KonstaProvider Props

#### Parameters

- **theme** (string) - Optional - App theme. If set to `'parent'` it will look for `ios` or `md` class on root `<html>` element, useful to use with parent framework like Framework7. Possible values: `'ios'`, `'material'`, `'parent'`.
- **dark** (boolean) - Optional - Include `dark:` variants (if dark theme is in use). Default: `false`.
- **touchRipple** (boolean) - Optional - Enables touch ripple effect in Material theme. Allows to globally disable touch ripple for all components. Default: `true`.
```

--------------------------------

### Navigation Link Example

Source: https://konstaui.com/svelte/link

Example of using the Link component for internal navigation within a Svelte application.

```APIDOC
## Navigation Link

```svelte
<Link href="/about">About</Link>
```
```

--------------------------------

### Link in Toolbar Example

Source: https://konstaui.com/svelte/link

Shows how to use Link components within a Konsta UI Toolbar for various actions.

```APIDOC
## Link In Toolbar

```svelte
<script>
  import { Toolbar, Link } from 'konsta/svelte';
  function action1() {
    // Action 1 logic
  }
  function action2() {
    // Action 2 logic
  }
</script>

<Toolbar>
  <Link toolbar onClick={action1}>
    Action 1
  </Link>
  <Link toolbar onClick={action2}>
    Action 2
  </Link>
</Toolbar>
```
```

--------------------------------

### Implement Sheet Modal in Svelte

Source: https://konstaui.com/svelte/sheet

This example demonstrates how to use the `Sheet` component to create a modal that slides up from the bottom. It includes basic setup with `Page`, `Navbar`, `Block`, and `Button` to trigger the modal, and shows how to control its `opened` state and handle backdrop clicks.

```svelte
<script>
  import CloseIcon from '../components/CloseIcon.svelte';
  import {
    Page,
    Navbar,
    NavbarBackLink,
    Sheet,
    Block,
    Button,
    Toolbar,
    ToolbarPane,
    Link,
  } from 'konsta/svelte';


  let sheetOpened = $state(false);
</script>


<Page>
  <Navbar title="Sheet Modal">
    {#snippet left()} 
      {#if !isPreview}
        <NavbarBackLink onclick={() => history.back()} />
      {/if}
    {/snippet}
  </Navbar>


  <Block strong inset class="space-y-4">
    <p>
      Sheet Modals slide up from the bottom of the screen to reveal more
      content. Such modals allow to create custom overlays with custom content.
    </p>
    <p>
      <Button rounded onclick={() => (sheetOpened = true)}>Open Sheet</Button>
    </p>
  </Block>


  <Sheet
    class="pb-safe"
    opened={sheetOpened}
    onBackdropClick={() => (sheetOpened = false)}
  >
    <Toolbar top class="justify-end ios:pt-4">
      <div class="ios:hidden"></div>
      <ToolbarPane>
        <Link iconOnly onClick={() => (sheetOpened = false)}><CloseIcon /></Link>
        >
      </ToolbarPane>
    </Toolbar>
    <Block>
      <p>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum ad
        excepturi nesciunt nobis aliquam. Quibusdam ducimus neque
        necessitatibus, molestias cupiditate velit nihil alias incidunt,
        excepturi voluptatem dolore itaque sapiente dolores!
      </p>
      <div class="mt-4">
        <Button large rounded onclick={() => (sheetOpened = false)}
          >Action</Button
        >
      </div>
    </Block>
  </Sheet>
</Page>

```

--------------------------------

### Basic Breadcrumbs Example

Source: https://konstaui.com/svelte/breadcrumbs

Demonstrates the fundamental usage of the Breadcrumbs component with static links. Ensure all necessary Konsta UI components are imported.

```svelte
<script>
  import {
    Page,
    Navbar,
    NavbarBackLink,
    BlockTitle,
    BlockHeader,
    Block,
    Breadcrumbs,
    BreadcrumbsItem,
    BreadcrumbsSeparator,
    BreadcrumbsCollapsed,
    Popover,
    List,
    ListItem,
    Link,
  } from 'konsta/svelte';


  let popoverOpened = false;


</script>


<Page>
  <Navbar title="Breadcrumbs">
    {#snippet left()}
      {#if !isPreview}
        <NavbarBackLink onclick={() => history.back()} />
      {/if}
    {/snippet}
  </Navbar>


  <Block strong inset>
    <p>
      Breadcrumbs allow users to keep track and maintain awareness of their
      locations within the app or website. They should be used for large sites
      and apps with hierarchically arranged pages.
    </p>
  </Block>


  <BlockTitle>Basic</BlockTitle>
  <Block strongIos outlineIos>
    <Breadcrumbs>
      <BreadcrumbsItem>
        <Link>Home</Link>
      </BreadcrumbsItem>
      <BreadcrumbsSeparator />
      <BreadcrumbsItem>
        <Link>Catalog</Link>
      </BreadcrumbsItem>
      <BreadcrumbsSeparator />
      <BreadcrumbsItem active>Phones</BreadcrumbsItem>
    </Breadcrumbs>
  </Block>


  <BlockTitle>Scrollable</BlockTitle>
  <BlockHeader
    >Breadcrumbs will be scrollable if they don't fit the screen</BlockHeader
  >
  <Block strongIos outlineIos>
    <Breadcrumbs>
      <BreadcrumbsItem>
        <Link>Home</Link>
      </BreadcrumbsItem>
      <BreadcrumbsSeparator />
      <BreadcrumbsItem>
        <Link>Catalog</Link>
      </BreadcrumbsItem>
      <BreadcrumbsSeparator />
      <BreadcrumbsItem>
        <Link>Phones</Link>
      </BreadcrumbsItem>
      <BreadcrumbsSeparator />
      <BreadcrumbsItem>
        <Link>Apple</Link>
      </BreadcrumbsItem>
      <BreadcrumbsSeparator />
      <BreadcrumbsItem active>iPhone 12</BreadcrumbsItem>
    </Breadcrumbs>
  </Block>


  <BlockTitle>Collapsed</BlockTitle>
  <Block strongIos outlineIos>
    <Breadcrumbs>
      <BreadcrumbsItem>
        <Link>Home</Link>
      </BreadcrumbsItem>
      <BreadcrumbsSeparator />
      <BreadcrumbsCollapsed
        class="breadcrumbs-popover-link"
        onClick={() => (popoverOpened = true)}
      />
      <BreadcrumbsSeparator />
      <BreadcrumbsItem active>iPhone 12</BreadcrumbsItem>
    </Breadcrumbs>
    <Popover
      target=".breadcrumbs-popover-link"
      style="width: 120px"
      onBackdropClick={() => (popoverOpened = false)}
      opened={popoverOpened}
    >
      <List nested>
        <ListItem
          link
          title="Catalog"
          onClick={() => (popoverOpened = false)}
        />
        <ListItem link title="Phones" onClick={() => (popoverOpened = false)} />
        <ListItem link title="Apple" onClick={() => (popoverOpened = false)} />
      </List>
    </Popover>
  </Block>
</Page>

```

--------------------------------

### Simple List Example

Source: https://konstaui.com/svelte/list

A basic list with three items. Use for straightforward content presentation.

```svelte
<List>
    <ListItem title="Item 1" />
    <ListItem title="Item 2" />
    <ListItem title="Item 3" />
  </List>
```

--------------------------------

### ListButton Svelte Component Example

Source: https://konstaui.com/svelte/list-button

Demonstrates basic usage of the ListButton component within a Page and List structure. Includes examples for standard buttons, inset lists, and custom colored buttons.

```svelte
<script>
  import {
    Page,
    Navbar,
    NavbarBackLink,
    List,
    ListButton,
  } from 'konsta/svelte';


</script>


<Page>
  <Navbar title="List Button">
    {#snippet left()} 
      {#if !isPreview}
        <NavbarBackLink onclick={() => history.back()} />
      {/if}
    {/snippet}
  </Navbar>


  <List strong>
    <ListButton>Button 1</ListButton>
    <ListButton>Button 2</ListButton>
    <ListButton>Button 3</ListButton>
  </List>


  <List strong inset>
    <ListButton>Button 1</ListButton>
    <ListButton>Button 2</ListButton>
    <ListButton>Button 3</ListButton>
  </List>
  <List strong inset>
    <ListButton class="k-color-brand-red">Red Button</ListButton>
  </List>
</Page>
```

--------------------------------

### Link in Navbar Example

Source: https://konstaui.com/svelte/link

Demonstrates how to place a Link component within a Konsta UI Navbar for actions like opening a menu.

```APIDOC
## Link In Navbar

```svelte
<script>
  import { Navbar, Link } from 'konsta/svelte';
  function openMenu() {
    // Menu opening logic
  }
</script>

<Navbar title="My App">
  {#snippet right()}
  <Link navbar onClick={openMenu}>
    Menu
  </Link>
  {/snippet}
</Navbar>
```
```

--------------------------------

### Basic Navbar Example

Source: https://konstaui.com/svelte/navbar

A simple Navbar with a title. Use this for standard page headers.

```svelte
<script>
  import {
    Page,
    Navbar,
    NavbarBackLink,
    Block,
    Segmented,
    SegmentedButton,
  } from 'konsta/svelte';


</script>


<Page>
  <Navbar title="Subnavbar">
    {#snippet left()}
      {#if !isPreview}
        <NavbarBackLink onclick={() => history.back()} />
      {/if}
    {/snippet}
    {#snippet subnavbar()}
      <Segmented strong rounded>
        <SegmentedButton active>Button</SegmentedButton>
        <SegmentedButton>Button</SegmentedButton>
        <SegmentedButton>Button</SegmentedButton>
      </Segmented>
    {/snippet}
  </Navbar>
  <div class="relative">
    <Block strong inset>
      <p>
        Subnavbar is useful when you need to put any additional elements into
        Navbar, like Tab Links or Search Bar. It also remains visible when
        Navbar hidden.
      </p>
    </Block>
    <Block strong inset class="space-y-4">
      <p>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione
        consequuntur numquam quia labore eligendi asperiores obcaecati neque
        sapiente fugit vel praesentium accusantium, earum corporis officiis
        tempora est delectus fugiat laudantium?
      </p>
      <p>
        possimus autem nostrum libero sapiente. Corporis quo cum iusto
        exercitationem velit. Non beatae eveniet asperiores ipsa consequuntur
        temporibus sapiente earum!
      </p>
      </Block>
  </div>
</Page>
```

--------------------------------

### Svelte Router Link Example

Source: https://konstaui.com/svelte/link

Example of integrating the Link component with Svelte Router for declarative routing.

```APIDOC
## Svelte Router Link

```svelte
<script>
  import RouterLink from 'svelte-routing'; // Assuming svelte-routing is used
</script>

<Link linkProps={{ to: '/about' }} component={RouterLink}>
  About
</Link>
```
```

--------------------------------

### Basic Konsta UI Svelte App Structure

Source: https://konstaui.com/svelte

This is a basic example of how to set up a Konsta UI Svelte application. It demonstrates the core structure using App, Page, Navbar, and Block components.

```svelte
<script>
  import { App, Page, Navbar, Block } from 'konsta/svelte';
</script>
<App theme="ios">
  <Page>
    <Navbar title="My App" />

    <Block strong>Hello world!</Block>
  </Page>
</App>
```

--------------------------------

### External Link Example

Source: https://konstaui.com/svelte/link

Example of using the Link component to link to an external website, opening in a new tab.

```APIDOC
## External Link

```svelte
<Link href="https://google.com" target="_blank"> Google </Link>
```
```

--------------------------------

### Run Konsta UI Svelte Kitchen Sink - npm

Source: https://konstaui.com/svelte/kitchen-sink

Launch the Konsta UI Svelte Kitchen Sink locally by executing this command in your terminal after installing dependencies.

```bash
npm run svelte
```

--------------------------------

### Simple Card Example

Source: https://konstaui.com/svelte/card

A basic card component with a link. Useful for displaying content with a call to action.

```svelte
<Card>
  <div class="flex flex-col">
    <div class="text-lg font-bold">Card title</div>
    <div class="text-sm">Card subtitle</div>
    <div class="mt-2">This is a simple card with plain text, but cards can also contain their own header, footer, list view, image, or any other element.</div>
    <Link href="#">Read more</Link>
  </div>
</Card>
```

--------------------------------

### Radio in List Example

Source: https://konstaui.com/svelte/radio

Demonstrates how to use the Radio component within a Konsta UI List and ListItem to create a list of selectable options.

```APIDOC
## Radios List

Radios List is not a separate component, but just a particular case of using `List` and `ListItem` components.
```html
<List>
  <ListItem label title="Books">
    {#snippet media()}
    <Radio component="div" name="my-checkbox" />
    {/snippet}
  </ListItem>
  <ListItem label title="Movies">
    {#snippet media()}
    <Radio component="div" name="my-checkbox" />
    {/snippet}
  </ListItem>
</List>
```
```

--------------------------------

### Basic DataTable Example in Svelte

Source: https://konstaui.com/svelte/data-table

This snippet shows a basic implementation of a data table using Konsta UI components. Ensure all necessary components are imported from 'konsta/svelte'.

```svelte
<script>
  import {
    Page,
    Navbar,
    Block,
    NavbarBackLink,
    BlockTitle,
    Card,
    Table,
    TableHead,
    TableBody,
    TableCell,
    TableRow,
  } from 'konsta/svelte';


</script>


<Page>
  <Navbar title="Data Table">
    {#snippet left()} 
      {#if !isPreview}
        <NavbarBackLink onclick={() => history.back()} />
      {/if}
    {/snippet}
  </Navbar>
  <BlockTitle>Plain table</BlockTitle>
  <Block class="overflow-x-auto !pl-safe !pr-safe">
    <Table>
      <TableHead>
        <TableRow header>
          <TableCell header>Dessert (100g serving)</TableCell>
          <TableCell header class="text-right">Calories</TableCell>
          <TableCell header class="text-right">Fat (g)</TableCell>
          <TableCell header class="text-right">Carbs</TableCell>
          <TableCell header class="text-right">Protein (g)</TableCell>
        </TableRow>
      </TableHead>
      <TableBody>
        <TableRow>
          <TableCell>Frozen yogurt</TableCell>
          <TableCell class="text-right">159</TableCell>
          <TableCell class="text-right">6.0</TableCell>
          <TableCell class="text-right">24</TableCell>
          <TableCell class="text-right">4.0</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>Ice cream sandwich</TableCell>
          <TableCell class="text-right">237</TableCell>
          <TableCell class="text-right">9.0</TableCell>
          <TableCell class="text-right">37</TableCell>
          <TableCell class="text-right">4.4</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>Eclair</TableCell>
          <TableCell class="text-right">262</TableCell>
          <TableCell class="text-right">16.0</TableCell>
          <TableCell class="text-right">24</TableCell>
          <TableCell class="text-right">6.0</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>Cupcake</TableCell>
          <TableCell class="text-right">305</TableCell>
          <TableCell class="text-right">3.7</TableCell>
          <TableCell class="text-right">67</TableCell>
          <TableCell class="text-right">4.3</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  </Block>
  <BlockTitle>Within card</BlockTitle>
  <Card class="overflow-x-auto" contentWrap={false}>
    <Table>
      <TableHead>
        <TableRow header>
          <TableCell header>Dessert (100g serving)</TableCell>
          <TableCell header class="text-right">Calories</TableCell>
          <TableCell header class="text-right">Fat (g)</TableCell>
          <TableCell header class="text-right">Carbs</TableCell>
          <TableCell header class="text-right">Protein (g)</TableCell>
        </TableRow>
      </TableHead>
      <TableBody>
        <TableRow>
          <TableCell>Frozen yogurt</TableCell>
          <TableCell class="text-right">159</TableCell>
          <TableCell class="text-right">6.0</TableCell>
          <TableCell class="text-right">24</TableCell>
          <TableCell class="text-right">4.0</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>Ice cream sandwich</TableCell>
          <TableCell class="text-right">237</TableCell>
          <TableCell class="text-right">9.0</TableCell>
          <TableCell class="text-right">37</TableCell>
          <TableCell class="text-right">4.4</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>Eclair</TableCell>
          <TableCell class="text-right">262</TableCell>
          <TableCell class="text-right">16.0</TableCell>
          <TableCell class="text-right">24</TableCell>
          <TableCell class="text-right">6.0</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>Cupcake</TableCell>
          <TableCell class="text-right">305</TableCell>
          <TableCell class="text-right">3.7</TableCell>
          <TableCell class="text-right">67</TableCell>
          <TableCell class="text-right">4.3</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  </Card>
</Page>
```

--------------------------------

### Notification Component Examples

Source: https://konstaui.com/svelte/notification

Demonstrates various configurations of the Notification component, including full layout, with a close button, click-to-close behavior, and callback on close. Requires importing necessary components from 'konsta/svelte'.

```svelte
<script>
  import {
    Page,
    Navbar,
    NavbarBackLink,
    Block,
    Notification,
    Button,
    Dialog,
    DialogButton,
  } from 'konsta/svelte';
  import DemoIcon from '../components/DemoIcon.svelte';




  let notificationFull = $state(false);
  let notificationWithButton = $state(false);
  let notificationCloseOnClick = $state(false);
  let notificationCallbackOnClose = $state(false);
  let alertOpened = $state(false);


  const openNotification = (setter) => {
    notificationFull = false;
    notificationWithButton = false;
    notificationCloseOnClick = false;
    notificationCallbackOnClose = false;
    setter();


    if (notificationFull) {
      setTimeout(() => {
        notificationFull = false;
      }, 3000);
    }
  };
</script>


<Page>
  <Navbar title="Notification">
    {#snippet left()} 
      {#if !isPreview}
        <NavbarBackLink onclick={() => history.back()} />
      {/if}
    {/snippet}
  </Navbar>


  <Notification
    opened={notificationFull}
    title="Konsta UI"
    titleRightText="now"
    subtitle="This is a subtitle"
    text="This is a simple notification message"
  >
    {#snippet icon()} 
      <DemoIcon />
    {/snippet}
  </Notification>


  <Notification
    opened={notificationWithButton}
    title="Konsta UI"
    subtitle="Notification with close button"
    text="Click (x) button to close me"
    button
    onClose={() => (notificationWithButton = false)}
  >
    {#snippet icon()} 
      <DemoIcon />
    {/snippet}
  </Notification>


  <Notification
    opened={notificationCloseOnClick}
    title="Konsta UI"
    titleRightText="now"
    subtitle="Notification with close on click"
    text="Click me to close"
    onclick={() => (notificationCloseOnClick = false)}
  >
    {#snippet icon()} 
      <DemoIcon />
    {/snippet}
  </Notification>


  <Notification
    opened={notificationCallbackOnClose}
    title="Konsta UI"
    titleRightText="now"
    subtitle="Notification with close on click"
    text="Click me to close"
    onclick={() => {
      notificationCallbackOnClose = false;
      alertOpened = true;
    }}
  >
    {#snippet icon()} 
      <DemoIcon />
    {/snippet}
  </Notification>
  <Dialog opened={alertOpened} onBackdropClick={() => (alertOpened = false)}>
    {#snippet title()} 
      Konsta UI
    {/snippet}
    Notification closed


    {#snippet buttons()} 
      <DialogButton onclick={() => (alertOpened = false)}>Ок</DialogButton>
    {/snippet}
  </Dialog>
  <Block strong inset class="space-y-4">
    <p>
      Konsta UI comes with simple Notifications component that allows you to
      show some useful messages to user and request basic actions.
    </p>
    <p>
      <Button
        rounded
        onclick={() => openNotification(() => (notificationFull = true))}
      >
        Full layout notification
      </Button>
    </p>
    <p>
      <Button
        rounded
        onclick={() => openNotification(() => (notificationWithButton = true))}
      >
        With Close Button
      </Button>
    </p>
    <p>
      <Button
        rounded
        onclick={() =>
          openNotification(() => (notificationCloseOnClick = true))}
      >
        Click to Close
      </Button>
    </p>
    <p>
      <Button
        rounded
        onclick={() =>
          openNotification(() => (notificationCallbackOnClose = true))}
      >
        Callback on Close
      </Button>
    </p>
  </Block>
</Page>
```

--------------------------------

### Svelte Konsta UI Radio Component Setup

Source: https://konstaui.com/svelte/radio

Imports necessary components from 'konsta/svelte' for building the UI. Initializes state variables for different radio button selections.

```svelte
import {
  Page,
  Navbar,
  NavbarBackLink,
  Radio,
  BlockTitle,
  Block,
  List,
  ListItem,
} from 'konsta/svelte';


let inlineValue = $state('inline-1');
let groupValue = $state('Books');
let mediaValue = $state('Item 1');
```

--------------------------------

### Simple Card Example

Source: https://konstaui.com/svelte/card

Use for basic content display. Cards can contain text, headers, footers, lists, images, or any other elements.

```svelte
<script>
  import {
    Page,
    Navbar,
    NavbarBackLink,
    Card,
    BlockTitle,
    List,
    ListItem,
    Link,
    Button,
  } from 'konsta/svelte';


</script>


<Page>
  <Navbar title="Cards">
    {#snippet left()}
      {#if !isPreview}
        <NavbarBackLink onclick={() => history.back()} />
      {/if}
    {/snippet}
  </Navbar>


  <BlockTitle>Simple Cards</BlockTitle>
  <Card>
    This is a simple card with plain text, but cards can also contain their own
    header, footer, list view, image, or any other element.
  </Card>
  <Card>
    {#snippet header()}
      Card header
    {/snippet}
    {#snippet footer()}
      Card footer
    {/snippet}
    Card with header and footer. Card headers are used to display card titles and
    footers for additional information or just for custom actions.
  </Card>
  <Card>
    Another card. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet. Mauris
    aliquet magna justo.
  </Card>

  <BlockTitle>Outline Cards</BlockTitle>
  <Card outline>
    This is a simple card with plain text, but cards can also contain their own
    header, footer, list view, image, or any other element.
  </Card>
  <Card outline>
    {#snippet header()}
      Card header
    {/snippet}
    {#snippet footer()}
      Card footer
    {/snippet}
    Card with header and footer. Card headers are used to display card titles and
    footers for additional information or just for custom actions.
  </Card>
  <Card outline>
    Another card. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet. Mauris
    aliquet magna justo. {' '}
  </Card>


  <BlockTitle>Outline With Dividers</BlockTitle>
  <Card outline headerDivider footerDivider>
    {#snippet header()}
      Card header
    {/snippet}
    {#snippet footer()}
      Card footer
    {/snippet}
    Card with header and footer. Card headers are used to display card titles and
    footers for additional information or just for custom actions.
  </Card>


  <BlockTitle>Raised Cards</BlockTitle>
  <Card raised>
    This is a simple card with plain text, but cards can also contain their own
    header, footer, list view, image, or any other element.
  </Card>
  <Card raised>
    {#snippet header()}
      Card header
    {/snippet}
    {#snippet footer()}
      Card footer
    {/snippet}
    Card with header and footer. Card headers are used to display card titles and
    footers for additional information or just for custom actions.
  </Card>
  <Card raised>
    Another card. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet. Mauris
    aliquet magna justo. {' '}
  </Card>


  <BlockTitle>Card With List View</BlockTitle>
  <Card>
    <List nested class="-m-4">
      <ListItem href title="Link 1" />
      <ListItem href title="Link 2" />
      <ListItem href title="Link 3" />
      <ListItem href title="Link 4" />
      <ListItem href title="Link 5" />
    </List>
  </Card>


  <BlockTitle>Styled Cards</BlockTitle>
  <div class="lg:grid lg:grid-cols-2">
    <Card outline>
      <div
        class="ios:-mx-4 ios:-mt-4 h-48 p-4 flex items-end text-white ios:font-bold bg-cover bg-center material:rounded-xl mb-4 material:text-[22px]"
        style="background-image: url(https://cdn.framework7.io/placeholder/nature-1000x600-3.jpg)"
      >
        Journey To Mountains
      </div>
      <div class="text-gray-500 mb-3">Posted on January 21, 2021</div>
      <p>
        Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies
        efficitur vitae non felis. Phasellus quis nibh hendrerit...
      </p>
      {#snippet footer()}
        <div class="flex justify-between material:hidden">
          <Link>Like</Link>
          <Link>Read more</Link>
        </div>
        <div
          class="flex justify-start ios:hidden space-x-2 rtl:space-x-reverse"
        >
          <Button rounded inline>Like</Button>
          <Button rounded inline outline>Read more</Button>
        </div>
      {/snippet}
    </Card>
    <Card>
      {#snippet header()}
        <div
          class="ios:-mx-4 ios:-mt-4 h-48 p-4 flex items-end text-white ios:font-bold bg-cover bg-center material:rounded-xl mb-4 material:text-[22px]"
          style="background-image: url(https://cdn.framework7.io/placeholder/people-1000x600-6.jpg)"
        >
          Lorem Ipsum
        </div>
      {/snippet}
      <div class="text-gray-500 mb-3">Posted on January 21, 2021</div>
      <p>
        Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies
        efficitur vitae non felis. Phasellus quis nibh hendrerit...
      </p>
      {#snippet footer()}
        <div class="flex justify-between material:hidden">
          <Link>Like</Link>

```

--------------------------------

### Strong Outline Inset List Example

Source: https://konstaui.com/svelte/list

Uses 'strong', 'outline', and 'inset' props for a visually distinct list with borders and rounded corners. Best for highlighting key information.

```svelte
<List strong outline inset>
    <ListItem title="Item 1" />
    <ListItem title="Item 2" />
    <ListItem title="Item 3" />
  </List>
```

--------------------------------

### Media List Example

Source: https://konstaui.com/svelte/list

A list designed for richer content visualization, similar to data lists but with more flexible layout options. Use for displaying products, services, or detailed user information.

```svelte
<List strongIos outlineIos>
    <ListItem
      chevronMaterial={false}
      link
      title="Yellow Submarine"
      after="$15"
      subtitle="Beatles"
    >
```

--------------------------------

### Strong Inset List Example

Source: https://konstaui.com/svelte/list

Applies 'strong' and 'inset' props to create a list with rounded corners and internal padding. Ideal for contained content blocks.

```svelte
<List strong inset>
    <ListItem title="Item 1" />
    <ListItem title="Item 2" />
    <ListItem title="Item 3" />
  </List>
```

--------------------------------

### Import Konsta UI Theme CSS

Source: https://konstaui.com/svelte/installation

Import the Konsta UI theme file into your main CSS file after installing the library. This ensures the UI components are styled correctly.

```css
@import 'tailwindcss';
/* import Konsta UI theme */
@import 'konsta/svelte/theme.css';
```

--------------------------------

### Basic Popover Implementation

Source: https://konstaui.com/svelte/popover

This example demonstrates how to implement a basic popover that can be triggered by clicking a button or a link. It shows the necessary imports, state management for popover visibility, and how to target elements for the popover to attach to.

```svelte
<script>
  import {
    Page,
    Navbar,
    NavbarBackLink,
    Popover,
    Block,
    Link,
    Button,
    List,
    ListItem,
  } from 'konsta/svelte';


  let popoverOpened = false;
  let popoverTargetEl = null;


  const openPopover = (targetEl) => {
    popoverTargetEl = targetEl;
    popoverOpened = true;
  };
</script>


<Page>
  <Navbar title="Popover">
    {#snippet left()}
      {#if !isPreview}
        <NavbarBackLink onclick={() => history.back()} />
      {/if}
    {/snippet}
    {#snippet right()}
      <Link
        class="popover-navbar-link"
        navbar
        onclick={() => openPopover('.popover-navbar-link')}
      >
        Popover
      </Link>
    {/snippet}
  </Navbar>
  <Block strong inset class="space-y-4">
    <p>
      <Button
        rounded
        class="popover-button"
        onclick={() => openPopover('.popover-button')}
      >
        Open popover on me
      </Button>
    </p>
  </Block>
  <Block strong inset class="space-y-4">
    <p>
      Mauris fermentum neque et luctus venenatis. Vivamus a sem rhoncus, ornare
      tellus eu, euismod mauris. In porta turpis at semper convallis. Duis
      adipiscing leo eu nulla lacinia, quis rhoncus metus condimentum. Etiam nec
      malesuada nibh. Maecenas quis lacinia nisl, vel posuere dolor. Vestibulum
      condimentum, nisl ac vulputate egestas, neque enim dignissim elit, rhoncus
      volutpat magna enim a est. Aenean sit amet ligula neque. Cras suscipit
      rutrum enim. Nam a odio facilisis, elementum tellus non,
      <Link
        class="popover-link-1"
        onclick={() => openPopover('.popover-link-1')}
      >
        popover
      </Link>
      tortor. Pellentesque felis eros, dictum vitae lacinia quis, lobortis vitae
      ipsum. Cras vehicula bibendum lorem quis imperdiet.
    </p>
    <p>
      In hac habitasse platea dictumst. Etiam varius, ante vel ornare facilisis,
      velit massa rutrum dolor, ac porta magna magna lacinia nunc. Curabitur
      <Link
        class="popover-link-2"
        onclick={() => openPopover('.popover-link-2')}
      >
        popover!
      </Link>
      cursus laoreet. Aenean vel tempus augue. Pellentesque in imperdiet nibh. Mauris
      rhoncus nulla id sem suscipit volutpat. Pellentesque ac arcu in nisi viverra
      pulvinar. Nullam nulla orci, bibendum sed ligula non, ullamcorper iaculis mi.
      In hac habitasse platea dictumst. Praesent varius at nisl eu luctus. Cras aliquet
      porta est. Quisque elementum quis dui et consectetur. Cum sociis natoque penatibus
      et magnis dis parturient montes, nascetur ridiculus mus. Sed sed laoreet purus.
      Pellentesque eget ante ante.
    </p>
    <p>
      Duis et ultricies nibh. Sed facilisis turpis urna, ac imperdiet erat
      venenatis eu. Proin sit amet faucibus tortor, et varius sem. Etiam vitae
      lacinia neque. Aliquam nisi purus, interdum in arcu sed, ultrices rutrum
      arcu. Nulla mi turpis, consectetur vel enim quis, facilisis viverra dui.
      Aliquam quis convallis tortor, quis semper ligula. Morbi ullamcorper
      <Link
        class="popover-link-3"
        onclick={() => openPopover('.popover-link-3')}
      >
        one more popover
      </Link>
      massa at accumsan. Etiam purus odio, posuere in ligula vitae, viverra ultricies
      justo. Vestibulum nec interdum nisi. Aenean ac consectetur velit, non malesuada
      magna. Sed pharetra vehicula augue, vel venenatis lectus gravida eget. Curabitur
      lacus tellus, venenatis eu arcu in, interdum auctor nunc. Nunc non metus neque.
      Suspendisse viverra lectus sed risus aliquet, vel accumsan dolor feugiat.
    </p>
  </Block>


  <Popover
    opened={popoverOpened}
    target={popoverTargetEl}
    onBackdropClick={() => (popoverOpened = false)}
  >
    <List nested>
      <ListItem title="Item 1" link onClick={() => (popoverOpened = false)} />
      <ListItem
        title="List Item 2"
        link
        onclick={() => (popoverOpened = false)}
      />
      <ListItem title="Item 3" link onclick={() => (popoverOpened = false)} />
      <ListItem
        title="List Item 4"
        link
        onclick={() => (popoverOpened = false)}
      />
      <ListItem title="Item 5" link onclick={() => (popoverOpened = false)} />
    </List>
  </Popover>
</Page>
```

--------------------------------

### Basic Menu List Example - Svelte

Source: https://konstaui.com/svelte/menu-list

Demonstrates a basic Menu List with items for Home, Profile, and Settings. Use this for simple navigation where only titles are needed. The 'active' prop highlights the current selection.

```svelte
<script>
  import {
    Page,
    Navbar,
    NavbarBackLink,
    Block,
    MenuList,
    MenuListItem,
  } from 'konsta/svelte';
  import DemoIcon from '../components/DemoIcon.svelte';


  let selected = 'home';
  let selectedMedia = 'home';
</script>


<Page>
  <Navbar title="Menu List">
    {#snippet left()} 
      {#if !isPreview}
        <NavbarBackLink onclick={() => history.back()} />
      {/if}
    {/snippet}
  </Navbar>

  <Block strong>
    <p>
      Menu list unlike usual links list is designed to indicate currently active
      screen (or section) of your app. Think about it like a Tabbar but in a
      form of a list.
    </p>
  </Block>
  <MenuList strongIos outlineIos>
    <MenuListItem
      title="Home"
      active={selected === 'home'}
      onClick={() => (selected = 'home')}
    >
      {#snippet media()} 
        <DemoIcon />
      {/snippet}
    </MenuListItem>
    <MenuListItem
      title="Profile"
      active={selected === 'profile'}
      onClick={() => (selected = 'profile')}
    >
      {#snippet media()} 
        <DemoIcon />
      {/snippet}
    </MenuListItem>
    <MenuListItem
      title="Settings"
      active={selected === 'settings'}
      onClick={() => (selected = 'settings')}
    >
      {#snippet media()} 
        <DemoIcon />
      {/snippet}
    </MenuListItem>
  </MenuList>

  <MenuList strongIos outlineIos>
    <MenuListItem
      title="Home"
      subtitle="Home subtitle"
      active={selectedMedia === 'home'}
      onClick={() => (selectedMedia = 'home')}
    >
      {#snippet media()} 
        <DemoIcon />
      {/snippet}
    </MenuListItem>
    <MenuListItem
      title="Profile"
      subtitle="Profile subtitle"
      active={selectedMedia === 'profile'}
      onClick={() => (selectedMedia = 'profile')}
    >
      {#snippet media()} 
        <DemoIcon />
      {/snippet}
    </MenuListItem>
    <MenuListItem
      title="Settings"
      subtitle="Settings subtitle"
      active={selectedMedia === 'settings'}
      onClick={() => (selectedMedia = 'settings')}
    >
      {#snippet media()} 
        <DemoIcon />
      {/snippet}
    </MenuListItem>
  </MenuList>
</Page>
```
Tokens:
Raw