Searchbar Svelte 元件
Searchbar Svelte 元件代表 Framework7 的 Searchbar 元件。
Searchbar 元件
包含下列元件
搜尋列
Searchbar 屬性
您可以將所有參數傳遞到單一 params 屬性，或使用個別屬性為每個參數指定元件屬性
| 屬性 | 類型 | 預設值 | 說明 |
|---|---|---|---|
| <Searchbar> 屬性 | |||
| init | 布林值 | true | 初始化 Searchbar |
| value | 字串 數字 | 允許指定 Searchbar 輸入值。當啟用 customSearch 時，這會很有用 | |
| form | 布林值 | true | 主要 searchbar 元素將用作 form 標籤，而不是 div |
| placeholder | 字串 | "搜尋" | 輸入 placeholder 文字 |
| disableButton | 布林值 | true | 啟用停用按鈕 |
| disableButtonText | 字串 | 取消 | 停用按鈕文字 |
| clearButton | 布林值 | true | 啟用 searchbar 輸入清除按鈕 |
| expandable | 布林值 | false | 啟用可擴充的 searchbar |
| inline | 布林值 | false | 啟用內嵌 searchbar |
| spellcheck | 布林值 | 設定輸入元素上的 spellcheck 屬性 | |
| searchContainer | 字串 物件 | 要搜尋的清單區塊的 CSS 選擇器或 HTML 元素 | |
| searchIn | 字串 | .item-title | 我們需要搜尋的清單檢視元素欄位的 CSS 選擇器。我們通常搜尋元素標題 ('.item-title')。也可以傳遞幾個元素進行搜尋，例如 '.item-title, .item-text' |
| searchItem | 字串 | li | 單一搜尋項目的 CSS 選擇器。如果我們在清單檢視中進行搜尋，則它必須是單一清單元素 li |
| searchGroup | 字串 | .list-group | 群組元素的 CSS 選擇器。在啟用 hideGroups 以隱藏群組時使用。如果我們在清單檢視中進行搜尋，則通常是清單群組。 |
| searchGroupTitle | 字串 | .list-group-title | 群組標題的 CSS 選擇器。在啟用 hideGroupTitles 以隱藏群組標題時使用。如果我們在清單檢視中進行搜尋，則通常是清單群組標題。 |
| foundEl | 字串 物件 | .searchbar-found | searchbar "found" 元素的 CSS 選擇器或 HTMLElement。如果未指定，searchbar 將在頁面上尋找 .searchbar-found 元素 |
| notFoundEl | 字串 物件 | .searchbar-not-found | searchbar "not-found" 元素的 CSS 選擇器或 HTMLElement。如果未指定，searchbar 將在頁面上尋找 .searchbar-not-found 元素 |
| backdrop | 布林值 | 啟用 searchbar 背景元素。預設情況下，內嵌 searchbar 已停用 | |
| backdropEl | 字串 物件 | 搜尋欄背景元素的 CSS 選擇器或 HTMLElement。如果未傳遞且 backdrop 參數為 true，則它會尋找 .searchbar-backdrop 元素。如果找不到，它將自動建立一個 | |
| 忽略 | 字串 | .searchbar-ignore | 要由搜尋欄忽略並始終顯示在搜尋結果中的項目 CSS 選擇器 |
| customSearch | 布林值 | false | 啟用時，搜尋欄不會搜尋 search-container 指定的任何清單區塊，而且您將可以使用自訂搜尋功能，例如，用於呼叫具有搜尋結果的外部 API 並手動顯示它們 |
| removeDiacritics | 布林值 | false | 啟用以在搜尋期間移除/取代變音符號 (á、í、ó 等) |
| hideGroupTitles | 布林值 | true | 如果啟用，則搜尋會考慮群組標題，並在它們後面沒有找到項目時將它們隱藏 |
| hideGroups | 布林值 | true | 如果啟用，則搜尋會考慮清單檢視群組，並在這些群組內沒有找到項目時將它們隱藏 |
| outline | 布林值 | true | 為 iOS 主題新增搜尋欄底部細邊框 (髮絲線) |
搜尋欄方法
| <Searchbar> 方法 | |
|---|---|
| .search(query) | 強制搜尋欄搜尋傳遞的查詢 |
| .enable() | 啟用/啟動搜尋欄 |
| .disable() | 停用/停用搜尋欄 |
| .toggle() | 切換搜尋欄 |
| .clear() | 清除搜尋查詢並更新結果 |
搜尋欄事件
| 事件 | 引數 | 說明 |
|---|---|---|
| <Searchbar> 事件 | ||
| searchbarSearch | (searchbar, query, previousQuery) | 事件會在搜尋期間觸發 (搜尋欄位變更)。事件會接收搜尋欄執行個體、搜尋查詢和前一個查詢作為引數 |
| searchbarClear | (searchbar, previousQuery) | 當使用者按一下搜尋欄輸入的「清除」按鈕時，事件會觸發。事件會接收搜尋欄執行個體和前一個查詢作為引數 |
| searchbarEnable | (searchbar) | 當搜尋欄變得活躍時，事件會觸發 |
| searchbarDisable | (searchbar) | 當搜尋欄變得不活躍/停用時，事件會觸發 |
| change | (event) | 當搜尋欄輸入元素上發生「變更」事件時，事件會觸發 |
| input | (event) | 當搜尋欄輸入元素上發生「輸入」事件時，事件會觸發 |
| focus | (event) | 當搜尋欄輸入元素上發生「焦點」事件時，事件會觸發 |
| blur | (event) | 當搜尋欄輸入元素上發生「模糊」事件時，事件會觸發 |
| clickClear | (event) | 當使用者按一下輸入的「清除」按鈕時，事件會觸發 |
| clickDisable | (event) | 當使用者按一下搜尋欄停用按鈕時，事件會觸發 |
搜尋欄插槽
搜尋欄 Svelte 元件有額外的插槽用於自訂元素
default- 元素將作為<div class="searchbar-inner">元素的子元素插入到最後。與inner-end插槽相同before-inner- 元素將插入在<div class="searchbar-inner">元素的正前方after-inner- 元素將插入在<div class="searchbar-inner">元素的正後方inner-start- 元素將作為<div class="searchbar-inner">元素的子元素插入到最前面inner-end- 元素將作為<div class="searchbar-inner">元素的子元素插入到最後面input-wrap-start- 元素將作為<div class="searchbar-input-wrap">元素的子元素插入到最前面input-wrap-end- 元素將作為<div class="searchbar-input-wrap">元素的子元素插入到最後面
無插槽
<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>有插槽
<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>
存取 Searchbar 實例
如果您使用自動初始化來初始化 Searchbar (使用 init={true} 屬性)，並且需要使用 Searchbar API，您可以透過呼叫 .instance() 元件的方法來存取其已初始化的實例。例如
<Searchbar bind:this={component}>...</Searchbar>
<script>
let component;
// to get instance in some method
component.instance()
</script>
範例
一般 Searchbar
searchbar.svelte
<script>
import { Navbar, Page, Searchbar, Subnavbar, List, ListItem } from 'framework7-svelte';
</script>
<Page>
<Navbar title="Searchbar">
<Subnavbar inner={false}>
<Searchbar searchContainer=".search-list" searchIn=".item-title" />
</Subnavbar>
</Navbar>
<List strongIos outlineIos dividersIos class="searchbar-not-found">
<ListItem title="Nothing found" />
</List>
<List strongIos outlineIos dividersIos 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>
可展開 Searchbar
searchbar-expandable.svelte
<script>
import { Navbar, Page, Searchbar, List, ListItem, Link, NavRight } from 'framework7-svelte';
</script>
<Page>
<Navbar title="Searchbar">
<NavRight>
<Link searchbarEnable=".searchbar-demo" iconIos="f7:search" iconMd="material:search" />
</NavRight>
<Searchbar
class="searchbar-demo"
expandable
searchContainer=".search-list"
searchIn=".item-title"
/>
</Navbar>
<List strongIos outlineIos dividersIos class="searchbar-not-found">
<ListItem title="Nothing found" />
</List>
<List strongIos outlineIos dividersIos 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>