Searchbar Svelte コンポーネント

Searchbar Svelte コンポーネントは、Framework7 の Searchbar コンポーネントを表します。

Searchbar コンポーネント

以下のコンポーネントが含まれています。

サーチバー

Searchbar プロパティ

すべての parameters を単一の params プロパティに渡すか、各 parameter の個別 prop を使用してコンポーネント属性で指定できます。

プロパティ	型	デフォルト	説明
<Searchbar> プロパティ
init	boolean	true	Searchbar を初期化します。
value	string number		Searchbar 入力の値を指定できます。`customSearch` が有効な場合に便利です。
form	boolean	true	メインのサーチバー要素を `div` ではなく `form` タグとして使用します。
placeholder	string	"Search"	入力プレースホルダーテキスト
disableButton	boolean	true	無効化ボタンを有効にします。
disableButtonText	string	Cancel	無効化ボタンテキスト
clearButton	boolean	true	サーチバー入力のクリアボタンを有効にします。
expandable	boolean	false	展開可能なサーチバーを有効にします。
inline	boolean	false	インラインサーチバーを有効にします。
spellcheck	boolean		入力要素に `spellcheck` 属性を設定します。
searchContainer	string object		検索するリストブロックの CSS セレクターまたは HTML 要素
searchIn	string	.item-title	検索する必要があるリストビュー要素のフィールドの CSS セレクター。通常は要素のタイトル（ '.item-title' ）を検索します。 `'.item-title, .item-text'` のように複数の要素を検索対象として指定することもできます。
searchItem	string	li	単一の検索アイテムの CSS セレクター。リストビューで検索を行う場合、単一のリスト要素 `li` でなければなりません。
searchGroup	string	.list-group	グループ要素の CSS セレクター。`hideGroups` が有効な場合、グループを非表示にするために使用します。リストビューで検索を行う場合、通常はリストグループです。
searchGroupTitle	string	.list-group-title	グループタイトルの CSS セレクター。`hideGroupTitles` が有効な場合、グループタイトルを非表示にするために使用します。リストビューで検索を行う場合、通常はリストグループタイトルです。
foundEl	string object	.searchbar-found	サーチバーの「見つかりました」要素の CSS セレクターまたは HTMLElement。指定されていない場合、サーチバーはページ上の `.searchbar-found` 要素を探します。
notFoundEl	string object	.searchbar-not-found	サーチバーの「見つかりませんでした」要素の CSS セレクターまたは HTMLElement。指定されていない場合、サーチバーはページ上の `.searchbar-not-found` 要素を探します。
backdrop	boolean		サーチバーのバックドロップ要素を有効にします。デフォルトでは、インラインサーチバーでは無効です。
backdropEl	string object		サーチバーのバックドロップ要素の CSS セレクターまたは HTMLElement。渡されておらず、`backdrop` パラメーターが true の場合、`.searchbar-backdrop` 要素を探します。見つからない場合は自動的に作成します。
ignore	string	.searchbar-ignore	サーチバーによって無視され、常に検索結果に表示されるアイテムの CSS セレクター
customSearch	boolean	false	有効にすると、サーチバーは `search-container` で指定されたリストブロックを検索せず、カスタム検索機能を使用できます。たとえば、外部APIを呼び出して検索結果を取得し、手動で表示する場合などです。
removeDiacritics	boolean	false	検索中にダイアクリティカルマーク（á、í、óなど）を削除/置換するには有効にします。
hideGroupTitles	boolean	true	有効にすると、検索はグループタイトルを考慮し、その直後に見つかったアイテムがない場合は非表示にします。
hideGroups	boolean	true	有効にすると、検索はリストビューのグループを考慮し、それらのグループ内に見つかったアイテムがない場合は非表示にします。
outline	boolean	true	iOS テーマにサーチバーの下部に細い枠線（ヘアリライン）を追加します。

Searchbar メソッド

<Searchbar> メソッド
.search(query)	サーチバーに渡されたクエリを強制的に検索させます。
.enable()	サーチバーを有効/アクティブ化します。
.disable()	サーチバーを無効/非アクティブ化します。
.toggle()	サーチバーを切り替えます。
.clear()	検索クエリをクリアし、結果を更新します。

Searchbar イベント

イベント	引数	説明
<Searchbar> イベント
searchbarSearch	(searchbar, query, previousQuery)	検索中（検索フィールドの変更）にトリガーされるイベントです。引数として、サーチバーインスタンス、検索クエリ、以前のクエリを受け取ります。
searchbarClear	(searchbar, previousQuery)	ユーザーがサーチバー入力の「クリア」ボタンをクリックしたときにトリガーされるイベントです。引数として、サーチバーインスタンスと以前のクエリを受け取ります。
searchbarEnable	(searchbar)	サーチバーがアクティブになったときにトリガーされるイベントです。
searchbarDisable	(searchbar)	サーチバーが無効/非アクティブになったときにトリガーされるイベントです。
change	(event)	サーチバー入力要素で「変更」イベントが発生したときにトリガーされるイベントです。
input	(event)	サーチバー入力要素で「入力」イベントが発生したときにトリガーされるイベントです。
focus	(event)	サーチバー入力要素で「フォーカス」イベントが発生したときにトリガーされるイベントです。
blur	(event)	サーチバー入力要素で「フォーカス外れ」イベントが発生したときにトリガーされるイベントです。
clickClear	(event)	ユーザーが入力「クリア」ボタンをクリックしたときにトリガーされるイベントです。
clickDisable	(event)	ユーザーがサーチバーの無効化ボタンをクリックしたときにトリガーされるイベントです。

Searchbar スロット

Searchbar 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>

このドキュメントを改善する

このページについて

Searchbar コンポーネント
Searchbar プロパティ
Searchbar メソッド
Searchbar イベント
Searchbar スロット
Searchbar インスタンスへのアクセス
例