Searchbar Svelte Component

Searchbar Svelte component represents Framework7’s Searchbar component.

Searchbar Components

There are following components included:

• Searchbar

Searchbar Properties

You can pass all parameters in single params property or use separate props for each parameter to specify them via component attributes:

Searchbar Methods

Searchbar Events

Searchbar Slots

Searchbar Svelte component has additional slots for custom elements:

• default - element will be inserted as a child of <div class="searchbar-inner"> element in the end. Same as inner-end slot
• before-inner - element will be inserted right before <div class="searchbar-inner"> element
• after-inner - element will be inserted right after <div class="searchbar-inner"> element
• inner-start - element will be inserted as a child of <div class="searchbar-inner"> element in the beginning
• inner-end - element will be inserted as a child of <div class="searchbar-inner"> element in the end
• input-wrap-start - element will be inserted as a child of <div class="searchbar-input-wrap"> element in the beginning
• input-wrap-end - element will be inserted as a child of <div class="searchbar-input-wrap"> element in the end

Without Slots:

<Searchbar
  disableButtonText="Cancel"
  placeholder="Search in items"
  clearButton={true}
/>
<!-- Renders to: -->
<form class="searchbar">
  <div class="searchbar-inner">
    <div class="searchbar-input-wrap">
      <input type="search" placeholder="Search">
      <i class="searchbar-icon"></i>
      <span class="input-clear-button"></span>
    </div>
    <span class="searchbar-disable-button">Cancel</span>
  </div>
</form>

With Slots:

<Searchbar
  disableButtonText="Cancel"
  placeholder="Search in items"
  clearButton={true}
>
  <div slot="inner-start">Inner Start</div>
  <div slot="inner-end">Inner End</div>
  <div slot="input-wrap-start">Input Wrap Start</div>
  <div slot="input-wrap-end">Input Wrap End</div>
  <div slot="before-inner">Before Inner</div>
  <div slot="after-inner">After Inner</div>
</Searchbar>
<!-- Renders to: -->
<form class="searchbar">
  <div slot="before-inner">Before Inner</div>
  <div class="searchbar-inner">
    <div slot="inner-start">Inner Start</div>
    <div class="searchbar-input-wrap">
      <div slot="input-wrap-start">Input Wrap Start</div>
      <input type="search" placeholder="Search">
      <i class="searchbar-icon"></i>
      <span class="input-clear-button"></span>
      <div slot="input-wrap-end">Input Wrap End</div>
    </div>
    <span class="searchbar-disable-button">Cancel</span>
    <div slot="inner-end">Inner End</div>
  </div>
  <div slot="after-inner">After Inner</div>
</form>

Access To Searchbar Instance

If you use automatic initalization to init Searchbar (with init={true} prop) and need to use Searchbar API you can access its initialized instance by calling .instance() component’s method. For example:

<Searchbar bind:this={component}>...</Searchbar>
<script>
  let component;
  // to get instance in some method
  component.instance()
</script>

Examples

Usual Searchbar

<Page withSubnavbar>
  <Navbar title="Searchbar">
    <Subnavbar inner={false}>
      <Searchbar
        searchContainer=".search-list"
        searchIn=".item-title"
        disableButton={!theme.aurora}
      />
    </Subnavbar>
  </Navbar>
  <List class="searchbar-not-found">
    <ListItem title="Nothing found"></ListItem>
  </List>
  <List class="search-list searchbar-found">
    <ListItem title="Acura" />
    <ListItem title="Audi" />
    <ListItem title="BMW" />
    <ListItem title="Cadillac " />
    <ListItem title="Chevrolet " />
    <ListItem title="Chrysler " />
    <ListItem title="Dodge " />
    <ListItem title="Ferrari " />
    <ListItem title="Ford " />
    <ListItem title="GMC " />
    <ListItem title="Honda" />
    <ListItem title="Hummer" />
    <ListItem title="Hyundai" />
    <ListItem title="Infiniti " />
    <ListItem title="Isuzu " />
    <ListItem title="Jaguar " />
    <ListItem title="Jeep " />
    <ListItem title="Kia" />
    <ListItem title="Lamborghini " />
    <ListItem title="Land Rover" />
    <ListItem title="Lexus " />
    <ListItem title="Lincoln " />
    <ListItem title="Lotus " />
    <ListItem title="Mazda" />
    <ListItem title="Mercedes-Benz" />
    <ListItem title="Mercury " />
    <ListItem title="Mitsubishi" />
    <ListItem title="Nissan " />
    <ListItem title="Oldsmobile " />
    <ListItem title="Peugeot " />
    <ListItem title="Pontiac " />
    <ListItem title="Porsche" />
    <ListItem title="Regal" />
    <ListItem title="Saab " />
    <ListItem title="Saturn " />
    <ListItem title="Subaru " />
    <ListItem title="Suzuki " />
    <ListItem title="Toyota" />
    <ListItem title="Volkswagen" />
    <ListItem title="Volvo" />
  </List>
</Page>
<script>
  import {theme, Page, Navbar, Subnavbar, Searchbar, List, ListItem} from 'framework7-svelte';
</script>

Expandable Searchbar

<Page>
  <Navbar title="Searchbar">
    <NavRight>
      <Link searchbarEnable=".searchbar-demo" iconIos="f7:search" iconAurora="f7:search" iconMd="material:search"></Link>
    </NavRight>
    <Searchbar
      class="searchbar-demo"
      expandable
      searchContainer=".search-list"
      searchIn=".item-title"
      disableButton={!theme.aurora}
    />
  </Navbar>
  <List class="searchbar-not-found">
    <ListItem title="Nothing found"></ListItem>
  </List>
  <List class="search-list searchbar-found">
    <ListItem title="Acura" />
    <ListItem title="Audi" />
    <ListItem title="BMW" />
    <ListItem title="Cadillac " />
    <ListItem title="Chevrolet " />
    <ListItem title="Chrysler " />
    <ListItem title="Dodge " />
    <ListItem title="Ferrari " />
    <ListItem title="Ford " />
    <ListItem title="GMC " />
    <ListItem title="Honda" />
    <ListItem title="Hummer" />
    <ListItem title="Hyundai" />
    <ListItem title="Infiniti " />
    <ListItem title="Isuzu " />
    <ListItem title="Jaguar " />
    <ListItem title="Jeep " />
    <ListItem title="Kia" />
    <ListItem title="Lamborghini " />
    <ListItem title="Land Rover" />
    <ListItem title="Lexus " />
    <ListItem title="Lincoln " />
    <ListItem title="Lotus " />
    <ListItem title="Mazda" />
    <ListItem title="Mercedes-Benz" />
    <ListItem title="Mercury " />
    <ListItem title="Mitsubishi" />
    <ListItem title="Nissan " />
    <ListItem title="Oldsmobile " />
    <ListItem title="Peugeot " />
    <ListItem title="Pontiac " />
    <ListItem title="Porsche" />
    <ListItem title="Regal" />
    <ListItem title="Saab " />
    <ListItem title="Saturn " />
    <ListItem title="Subaru " />
    <ListItem title="Suzuki " />
    <ListItem title="Toyota" />
    <ListItem title="Volkswagen" />
    <ListItem title="Volvo" />
  </List>
</Page>
<script>
  import {theme, Page, Navbar, NavRight, Link, Subnavbar, Searchbar, List, ListItem} from 'framework7-svelte';
</script>

← Range Slider

Sheet Modal →