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

Searchbar Reactコンポーネントは、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のReactコンポーネントには、カスタム要素用の追加スロットがあります。

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

{/* 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>

例

Usual Searchbar

import React from 'react';
import {
  Page,
  Navbar,
  Subnavbar,
  Searchbar,
  List,
  ListItem,
  theme,
} from 'framework7-react';

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

Expandable Searchbar

import React from 'react';
import {
  Page,
  Navbar,
  NavRight,
  Link,
  Searchbar,
  List,
  ListItem,
  theme,
} from 'framework7-react';

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