搜尋欄 Svelte 組件

搜尋欄組件
搜尋欄屬性
範例

搜尋欄允許使用者搜尋清單檢視元素。或者，它可以作為您自訂搜尋實現的可視化 UI 組件。

搜尋欄組件

包含以下組件

搜尋欄

搜尋欄屬性

名稱	類型	預設值	描述
clearButton	布林值	true	新增輸入清除按鈕
colors	物件		具有 Tailwind CSS 顏色類別的物件
colors.inputBgIos	字串	''
colors.inputBgMaterial	字串	'bg-md-light-secondary-container dark:bg-md-dark-secondary-container'
colors.placeholderIos	字串	''
colors.placeholderMaterial	字串	'placeholder-md-light-on-surface-variant dark:placeholder-md-dark-on-surface-variant'
disableButton	布林值	false	新增用於取消搜尋的按鈕，並設定其初始狀態
disableButtonText	字串	'取消'	停用按鈕文字
inputId	字串		輸入 id 屬性
inputStyle	CSSProperties		其他輸入類別
placeholder	字串 \| 數字	'搜尋'	搜尋欄預留位置文字
value	任何		搜尋欄值
onBlur	函式(e)		`blur` 事件處理器
onChange	函式(e)		`change` 事件處理器
onClear	函式(e)		在點擊清除按鈕時觸發
onDisable	函式(e)		在停用搜尋欄時觸發
onFocus	函式(e)		`focus` 事件處理器
onInput	函式(e)		`input` 事件處理器

範例

Searchbar.svelte

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

  let searchQuery = '';
  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 = [];
  /* eslint-disable */
  $: {
    filteredItems = searchQuery
      ? items.filter((item) =>
          item.title.toLowerCase().includes(searchQuery.toLowerCase())
        )
      : items;
  }
  /* eslint-enable */
</script>

<Page>
  <Navbar title="Searchbar">    <Searchbar
      slot="subnavbar"
      onInput={handleSearch}
      value={searchQuery}
      onClear={handleClear}
      disableButton
      disableButtonText="Cancel"
      onDisable={handleDisable}
    />
  </Navbar>
  <List strong insetMaterial outlineIos>
    {#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>