サーチバー・Svelte・コンポーネント

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

サーチバーコンポーネント

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

Searchbar

サーチバーのプロパティ

すべてのパラメータを単一の params プロパティに渡すこともできますし、パラメータごとに個別のプロップを使用して、コンポーネントの属性でパラメータを指定することもできます。

Prop	Type	Default	Description
<Searchbar> properties
init	boolean	true	サーチバーの初期化
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, .item-divider	グループのタイトルやディバイダのCSSセレクタです。hideDividers`が有効な場合に、グループのタイトルとディバイダーを隠すために使用されます。リストビューで検索を行うと、通常はリストグループのタイトルやリストアイテムのディバイダーが表示されます。
foundEl	string object	.searchbar-found	searchbar の "found" 要素の CSS セレクタまたは HTML 要素です。指定されていない場合、サーチバーはページ上の `.searchbar-found` 要素を探します。
notFoundEl	string object	.searchbar-not-found	検索バーの "not-found" 要素の CSS セレクタまたは HTML 要素。指定されない場合、searchbarはページ上の `.searchbar-not-found` 要素を探します。
backdrop	boolean		searchbar の背景要素を有効にします。デフォルトでは、オーロラテーマやインラインサーチバーでは無効です。
backdropEl	string object		searchbar backdrop 要素の CSS セレクタまたは HTML 要素です。もし渡されず、`backdrop`パラメータがtrueであれば、`.searchbar-backdrop`要素を探します。見つからない場合には、自動的に作成されます。
ignore	string	.searchbar-ignore	searchbarが無視し、検索結果に常に表示するアイテムのためのCSSセレクタです。
customSearch	boolean	false	この機能を有効にすると、サーチバーは `search-container` で指定されたリストブロックを検索しないので、カスタム検索機能を使用することができます。
removeDiacritics	boolean	false	検索時に発音記号(á, í, óなど)の削除/置換を有効にする
hideDividers	boolean	true	有効にすると、検索はアイテムの仕切りとグループのタイトルを考慮し、その直後に見つかったアイテムがない場合はそれらを非表示にする
hideGroups	boolean	true	有効にすると、検索はリストビューのグループを考慮し、これらのグループ内に発見されたアイテムがない場合、それらを隠します。
noShadow	boolean	false	MDテーマのシャドウレンダリングを無効にする
noHairline	boolean	false	iOS テーマで検索バーの下の細いボーダー（ヘアライン）を無効にする

サーチバーメソッド

<Searchbar> methods
.search(query)	サーチバーに渡されたクエリを強制的に検索させる
.enable()	サーチバーの有効化/有効化
.disable()	サーチバーを無効にする／しない
.toggle()	検索バーの切り替え
.clear()	検索クエリのクリアと検索結果の更新

サーチバーのイベント

Event	Arguments	Description
<Searchbar> events
searchbarSearch	(searchbar, query, previousQuery)	イベントは、検索中（検索フィールドの変更）にトリガされます。引数イベントとして、サーチバー・インスタンス、検索クエリ、前のクエリを受け取ります。
searchbarClear	(searchbar, previousQuery)	イベントは、ユーザーが検索バーの入力「クリア」ボタンをクリックしたときにトリガされます。As an arguments event receive searchbar instance and previous query サーチバーのインスタンスと前のクエリを受け取るイベント。
searchbarEnable	(searchbar)	イベントは、サーチバーがアクティブになったときにトリガされます。
searchbarDisable	(searchbar)	サーチバーが非アクティブ/無効になるとイベントが発生します。
change	(event)	イベントはサーチバーの入力要素に "change "イベントが発生した時に発生します。
input	(event)	サーチバーの入力要素で "input "イベントが発生するとイベントが発生します。
focus	(event)	searchbarの入力要素に "focus "イベントが発生するとイベントが発生する
blur	(event)	searchbar input要素で "blur "イベントが発生するとイベントが発生する
clickClear	(event)	入力の "clear "ボタンをクリックするとイベントが発生する
clickDisable	(event)	サーチバーの無効ボタンをクリックするとイベントが発生します。

サーチバースロット

Searchbar Svelte コンポーネントには、カスタムエレメント用の追加スロットがあります。

default - 要素は最後に <div class="searchbar-inner"> 要素の子として挿入されます。inner-end` スロットと同じです。
before-inner - 要素は <div class="searchbar-inner"> 要素の直前に挿入されます。
after-inner - 要素は <div class="searchbar-inner"> 要素の直後に挿入されます。
inner-start - 要素は先頭の
`要素の子として挿入されます。
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}
/>

<!-- にレンダリングされます。 -->

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

<!-- レンダリングされます。 -->

<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を初期化するために自動初期化を使用し（init={true}プロパティーを使用）、Searchbar APIを使用する必要がある場合、.instance()コンポーネントのメソッドを呼び出すことで、初期化されたインスタンスにアクセスできます。例えば、以下のようになります。

<Searchbar bind:this={component}>...</Searchbar>

<script>
  let component;

  // あるメソッドでインスタンスを取得する
  component.instance()
</script>

例

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>