v6.3.3
Support Framework7
logo_github stars forks
logo_applelogo_androiddevice_desktop
スポンサー
Support Framework7

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

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

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

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

    • f7-searchbar

    サーチバーのプロパティ

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

    PropTypeDefaultDescription
    <f7-searchbar> properties
    initbooleantrueサーチバーの初期化
    valuestring
    number    		サーチバーの入力値を指定することができます。custom-search`を有効にして使用すると便利です。
    formbooleantrueメインのサーチバー要素は div ではなく form タグとして使用されます。
    placeholderstring"Search"入力プレースホルダーテキスト
    disable-buttonbooleantrue無効化ボタンを有効にする
    disable-button-textstringCancel無効化ボタンのテキスト
    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, .item-dividerグループのタイトルやディバイダのCSSセレクタです。hide-dividers`が有効な場合に、グループのタイトルとディバイダを隠すために使用されます。リストビューで検索した場合、通常はリストグループのタイトルやリストアイテムのディバイダーが表示されます。
    found-elstring
    object    		.searchbar-foundsearchbar の "found" 要素の CSS セレクタまたは HTML 要素です。指定されていない場合、サーチバーはページ上の .searchbar-found 要素を探します。
    not-found-elstring
    object    		.searchbar-not-found検索バーの "not-found" 要素の CSS セレクタまたは HTML 要素。指定されない場合、searchbarはページ上の .searchbar-not-found 要素を探します。
    backdropbooleansearchbar の背景要素を有効にします。デフォルトでは、オーロラテーマやインラインサーチバーでは無効です。
    backdrop-elstring
    object    		searchbar backdrop 要素の CSS セレクタまたは HTML 要素です。もし渡されず、backdropパラメータがtrueであれば、.searchbar-backdrop要素を探します。見つからない場合には、自動的に作成されます。
    ignorestring.searchbar-ignoresearchbarが無視し、検索結果に常に表示するアイテムのためのCSSセレクタです。
    custom-searchbooleanfalseこの機能を有効にすると、サーチバーは search-container で指定されたリストブロックを検索しないので、カスタム検索機能を使用することができます。
    remove-diacriticsbooleanfalse検索時に発音記号(á, í, óなど)の削除/置換を有効にする
    hide-dividersbooleantrue有効にすると、検索はアイテムの仕切りとグループのタイトルを考慮し、その直後に見つかったアイテムがない場合はそれらを非表示にする
    hide-groupsbooleantrue有効にすると、検索はリストビューのグループを考慮し、これらのグループ内に発見されたアイテムがない場合、それらを隠します。
    no-shadowbooleanfalseMDテーマのシャドウレンダリングを無効にする
    no-hairlinebooleanfalseiOS テーマで検索バーの下の細いボーダー（ヘアライン）を無効にする

    サーチバーメソッド

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

    サーチバーのイベント

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

    サーチバーのスロット

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

    • 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"> 要素の子として挿入されます。

    スロットなし。

    <f7-searchbar
  disable-button-text="Cancel"
  placeholder="Search in items"
  :clear-button="true"
></f7-searchbar>

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

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

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

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

    サーチバーのVモデル

    f7-searchbar コンポーネントは value プロップに対して v-model をサポートします。

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

    例

    Usual Searchbar

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

  export default {
    data() {
      return {
        theme,
      };
    }
  }
</script>

    Expandable Searchbar

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

  export default {
    data() {
      return {
        theme,
      };
    }
  }
</script>