スポンサースポンサーになる

Searchbar Vueコンポーネント

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

Searchbarコンポーネント

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

Searchbarのプロパティ

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

Prop型デフォルト説明
<f7-searchbar>のプロパティ
initbooleantrueSearchbarを初期化します
valuestring
number		Searchbar入力の値の指定を許可します。custom-searchが有効な場合に使用すると便利です。
formbooleantrueメインの検索バー要素がdivの代わりにformタグとして使用されます。
placeholderstring"検索"入力のプレースホルダーテキスト
disable-buttonbooleantrue無効化ボタンを有効にします
disable-button-textstringキャンセル無効化ボタンのテキスト
clear-buttonbooleantrue検索バー入力のクリアボタンを有効にします
expandablebooleanfalse拡張可能な検索バーを有効にします
inlinebooleanfalseインライン検索バーを有効にします
spellcheckboolean入力要素にspellcheck属性を設定します
search-containerstring
object		検索するリストブロックのCSSセレクターまたはHTML要素
search-instring.item-titleリストビュー要素のフィールドで検索する必要があるCSSセレクター。通常、要素のタイトル（'.item-title'）で検索します。'.item-title, .item-text'のように、検索用にいくつかの要素を渡すこともできます。
search-itemstringli単一の検索アイテムのCSSセレクター。リストビューで検索する場合、単一のリスト要素liである必要があります。
search-groupstring.list-groupグループ要素のCSSセレクター。グループを非表示にするためにhide-groupsを有効にした場合に使用します。リストビューで検索する場合は、通常リストグループです。
search-group-titlestring.list-group-titleグループタイトルのCSSセレクター。グループタイトルを非表示にするためにhide-group-titlesを有効にした場合に使用します。リストビューで検索する場合は、通常リストグループタイトルです。
found-elstring
object		.searchbar-found検索バーの「見つかりました」要素のCSSセレクターまたはHTMLElement。指定しない場合、検索バーはページ上の.searchbar-found要素を探します。
not-found-elstring
object		.searchbar-not-found検索バーの「見つかりません」要素のCSSセレクターまたはHTMLElement。指定しない場合、検索バーはページ上の.searchbar-not-found要素を探します。
backdropboolean検索バーの背景要素を有効にします。デフォルトでは、インライン検索バーでは無効になっています
backdrop-elstring
object		検索バーの背景要素のCSSセレクターまたはHTMLElement。渡されず、backdropパラメータがtrueの場合、.searchbar-backdrop要素を探します。見つからない場合は、自動的に作成します。
ignorestring.searchbar-ignore検索バーで無視され、常に検索結果に表示されるアイテムのCSSセレクター
custom-searchbooleanfalse有効にすると、検索バーはsearch-containerで指定されたリストブロックを検索せず、カスタム検索機能を使用できるようになります。たとえば、検索結果で外部APIを呼び出したり、手動で表示したりする場合に使用できます。
remove-diacriticsbooleanfalse検索中にダイアクリティカルマーク（á、í、óなど）を削除/置換できるようにします
hide-group-titlesbooleantrue有効にすると、検索はグループタイトルを考慮し、直後に検索されたアイテムがない場合は非表示にします
hide-groupsbooleantrue有効にすると、検索はリストビューグループを考慮し、これらのグループ内に検索されたアイテムがない場合は非表示にします
outlinebooleantrueiOSテーマで検索バーの下部に細い境界線（ヘアライン）を追加します

Searchbarのメソッド

<f7-searchbar>のメソッド
.search(query)渡されたクエリを検索するように検索バーを強制します
.enable()検索バーを有効/アクティブにします
.disable()検索バーを無効/非アクティブにします
.toggle()検索バーを切り替えます
.clear()検索クエリをクリアし、結果を更新します

Searchbarのイベント

イベント引数説明
<f7-searchbar>のイベント
searchbar:search(searchbar, query, previousQuery)検索中にトリガーされるイベント（検索フィールドの変更）。引数として、イベントは検索バーインスタンス、検索クエリ、前のクエリを受け取ります
searchbar:clear(searchbar, previousQuery)ユーザーが検索バー入力の「クリア」ボタンをクリックしたときにトリガーされるイベント。引数として、イベントは検索バーインスタンスと前のクエリを受け取ります。
searchbar:enable(searchbar)検索バーがアクティブになったときにトリガーされるイベント
searchbar:disable(searchbar)検索バーが非アクティブ/無効になったときにトリガーされるイベント
change(event)検索バー入力要素で「change」イベントが発生したときにトリガーされるイベント
input(event)検索バー入力要素で「input」イベントが発生したときにトリガーされるイベント
focus(event)検索バー入力要素で「focus」イベントが発生したときにトリガーされるイベント
blur(event)検索バー入力要素で「blur」イベントが発生したときにトリガーされるイベント
click:clear(event)ユーザーが入力の「クリア」ボタンをクリックしたときにトリガーされるイベント
click:disable(event)ユーザーが検索バーの無効化ボタンをクリックしたときにトリガーされるイベント

Searchbarのスロット

Searchbar Vueコンポーネントには、カスタム要素用の追加スロットがあります

スロットなし

<f7-searchbar
  disable-button-text="Cancel"
  placeholder="Search in items"
  :clear-button="true"
></f7-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>

スロットあり

<f7-searchbar
  disable-button-text="Cancel"
  placeholder="Search in items"
  :clear-button="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>
</f7-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 v-model

f7-searchbarコンポーネントは、valueプロパティでv-modelをサポートしています

<template>
  ...
  <f7-searchbar
    search-container=".search-list"
    v-model:value="searchQuery"
  />
  ...
</template>
<script>
  export default {
    data() {
      searchQuery: '',
    },
    ...
  };
</script>

例

通常の検索バー

searchbar.vue
<template>
  <f7-page>
    <f7-navbar title="Searchbar">
      <f7-subnavbar :inner="false">
        <f7-searchbar search-container=".search-list" search-in=".item-title"></f7-searchbar>
      </f7-subnavbar>
    </f7-navbar>
    <f7-list strong-ios outline-ios dividers-ios class="searchbar-not-found">
      <f7-list-item title="Nothing found" />
    </f7-list>
    <f7-list strong-ios outline-ios dividers-ios class="search-list searchbar-found">
      <f7-list-item title="Acura" />
      <f7-list-item title="Audi" />
      <f7-list-item title="BMW" />
      <f7-list-item title="Cadillac" />
      <f7-list-item title="Chevrolet" />
      <f7-list-item title="Chrysler" />
      <f7-list-item title="Dodge" />
      <f7-list-item title="Ferrari" />
      <f7-list-item title="Ford" />
      <f7-list-item title="GMC" />
      <f7-list-item title="Honda" />
      <f7-list-item title="Hummer" />
      <f7-list-item title="Hyundai" />
      <f7-list-item title="Infiniti" />
      <f7-list-item title="Isuzu" />
      <f7-list-item title="Jaguar" />
      <f7-list-item title="Jeep" />
      <f7-list-item title="Kia" />
      <f7-list-item title="Lamborghini" />
      <f7-list-item title="Land Rover" />
      <f7-list-item title="Lexus" />
      <f7-list-item title="Lincoln" />
      <f7-list-item title="Lotus" />
      <f7-list-item title="Mazda" />
      <f7-list-item title="Mercedes-Benz" />
      <f7-list-item title="Mercury" />
      <f7-list-item title="Mitsubishi" />
      <f7-list-item title="Nissan" />
      <f7-list-item title="Oldsmobile" />
      <f7-list-item title="Peugeot" />
      <f7-list-item title="Pontiac" />
      <f7-list-item title="Porsche" />
      <f7-list-item title="Regal" />
      <f7-list-item title="Saab" />
      <f7-list-item title="Saturn" />
      <f7-list-item title="Subaru" />
      <f7-list-item title="Suzuki" />
      <f7-list-item title="Toyota" />
      <f7-list-item title="Volkswagen" />
      <f7-list-item title="Volvo" />
    </f7-list>
  </f7-page>
</template>
<script>
import {
  f7Navbar,
  f7Page,
  f7Searchbar,
  f7Subnavbar,
  f7List,
  f7ListItem,
  theme,
} from 'framework7-vue';

export default {
  components: {
    f7Navbar,
    f7Page,
    f7Searchbar,
    f7Subnavbar,
    f7List,
    f7ListItem,
  },
  data() {
    return {
      theme,
    };
  },
};
</script>

拡張可能な検索バー

searchbar-expandable.vue
<template>
  <f7-page>
    <f7-navbar title="Searchbar">
      <f7-nav-right>
        <f7-link
          class="searchbar-enable"
          data-searchbar=".searchbar-demo"
          icon-ios="f7:search"
          icon-md="material:search"
        />
      </f7-nav-right>
      <f7-searchbar
        class="searchbar-demo"
        expandable
        search-container=".search-list"
        search-in=".item-title"
      />
    </f7-navbar>
    <f7-list strong-ios outline-ios dividers-ios class="searchbar-not-found">
      <f7-list-item title="Nothing found" />
    </f7-list>
    <f7-list strong-ios outline-ios dividers-ios class="search-list searchbar-found">
      <f7-list-item title="Acura" />
      <f7-list-item title="Audi" />
      <f7-list-item title="BMW" />
      <f7-list-item title="Cadillac " />
      <f7-list-item title="Chevrolet " />
      <f7-list-item title="Chrysler " />
      <f7-list-item title="Dodge " />
      <f7-list-item title="Ferrari " />
      <f7-list-item title="Ford " />
      <f7-list-item title="GMC " />
      <f7-list-item title="Honda" />
      <f7-list-item title="Hummer" />
      <f7-list-item title="Hyundai" />
      <f7-list-item title="Infiniti " />
      <f7-list-item title="Isuzu " />
      <f7-list-item title="Jaguar " />
      <f7-list-item title="Jeep " />
      <f7-list-item title="Kia" />
      <f7-list-item title="Lamborghini " />
      <f7-list-item title="Land Rover" />
      <f7-list-item title="Lexus " />
      <f7-list-item title="Lincoln " />
      <f7-list-item title="Lotus " />
      <f7-list-item title="Mazda" />
      <f7-list-item title="Mercedes-Benz" />
      <f7-list-item title="Mercury " />
      <f7-list-item title="Mitsubishi" />
      <f7-list-item title="Nissan " />
      <f7-list-item title="Oldsmobile " />
      <f7-list-item title="Peugeot " />
      <f7-list-item title="Pontiac " />
      <f7-list-item title="Porsche" />
      <f7-list-item title="Regal" />
      <f7-list-item title="Saab " />
      <f7-list-item title="Saturn " />
      <f7-list-item title="Subaru " />
      <f7-list-item title="Suzuki " />
      <f7-list-item title="Toyota" />
      <f7-list-item title="Volkswagen" />
      <f7-list-item title="Volvo" />
    </f7-list>
  </f7-page>
</template>
<script>
import {
  f7Navbar,
  f7Page,
  f7Searchbar,
  f7List,
  f7ListItem,
  f7Link,
  f7NavRight,
  theme,
} from 'framework7-vue';

export default {
  components: {
    f7Navbar,
    f7Page,
    f7Searchbar,
    f7List,
    f7ListItem,
    f7Link,
    f7NavRight,
  },
  data() {
    return {
      theme,
    };
  },
};
</script>
このドキュメントを改善
このページで