Bài 44 : Searchbar Tìm hiểu ion-searchbar

Bài 44 : Searchbar Tìm hiểu ion-searchbar

codersulution Thứ Tư, tháng 8 24, 2022

  

ion-searchbar

Searchbar đại diện cho một trường văn bản có thể được sử dụng để tìm kiếm trong một bộ sưu tập. Chúng có thể được hiển thị bên trong thanh công cụ hoặc nội dung chính.

Searchbar nên được sử dụng thay vì một đầu vào cho search lists. Một nút rõ ràng được hiển thị khi nhập đầu vào trong trường văn bản của searchbar's. Nhấp vào nút xóa sẽ xóa trường văn bản và đầu vào sẽ vẫn được tập trung. Có thể bật nút hủy để xóa đầu vào và làm mất tiêu điểm khi nhấp chuột.


 Keyboard Display

android

Theo mặc định, việc nhấn vào mục nhập sẽ khiến bàn phím xuất hiện với biểu tượng kính lúp trên nút gửi. Bạn có thể tùy chọn đặt thuộc tính inputmode  thành "search", điều này sẽ thay đổi biểu tượng từ kính lúp thành dấu xuống dòng.

IOS

Theo mặc định, việc nhấn vào mục nhập sẽ khiến bàn phím xuất hiện với văn bản "quay lại" trên nút gửi màu xám. Bạn có thể tùy chọn đặt thuộc tính inputmode thành "search", thuộc tính này sẽ thay đổi văn bản "return" thành "go"  và thay đổi màu nút từ xám sang xanh lam. Ngoài ra, bạn có thể bọc phần tử ion-searchbar trong một phần tử form bằng một thuộc tính action. Điều này sẽ làm cho bàn phím xuất hiện với nút gửi màu xanh lam có nội dung "search".

Usage

<!-- Default Searchbar -->
<ion-searchbar></ion-searchbar>

<!-- Searchbar with cancel button always shown -->
<ion-searchbar showCancelButton="always"></ion-searchbar>

<!-- Searchbar with cancel button never shown -->
<ion-searchbar showCancelButton="never"></ion-searchbar>

<!-- Searchbar with cancel button shown on focus -->
<ion-searchbar showCancelButton="focus"></ion-searchbar>

<!-- Searchbar with danger color -->
<ion-searchbar color="danger"></ion-searchbar>

<!-- Searchbar with value -->
<ion-searchbar value="Ionic"></ion-searchbar>

<!-- Searchbar with telephone type -->
<ion-searchbar type="tel"></ion-searchbar>

<!-- Searchbar with numeric inputmode -->
<ion-searchbar inputmode="numeric"></ion-searchbar>

<!-- Searchbar disabled -->
<ion-searchbar disabled="true"></ion-searchbar>

<!-- Searchbar with a cancel button and custom cancel button text -->
<ion-searchbar showCancelButton="focus" cancelButtonText="Custom Cancel"></ion-searchbar>

<!-- Searchbar with a custom debounce -->
<ion-searchbar debounce="500"></ion-searchbar>

<!-- Animated Searchbar -->
<ion-searchbar animated></ion-searchbar>

<!-- Searchbar with a placeholder -->
<ion-searchbar placeholder="Filter Schedules"></ion-searchbar>

<!-- Searchbar in a Toolbar -->
<ion-toolbar>
  <ion-searchbar></ion-searchbar>
</ion-toolbar>
<!-- Default Searchbar -->
<ion-searchbar></ion-searchbar>

<!-- Searchbar with cancel button always shown -->
<ion-searchbar show-cancel-button="always"></ion-searchbar>

<!-- Searchbar with cancel button never shown -->
<ion-searchbar show-cancel-button="never"></ion-searchbar>

<!-- Searchbar with cancel button shown on focus -->
<ion-searchbar show-cancel-button="focus"></ion-searchbar>

<!-- Searchbar with danger color -->
<ion-searchbar color="danger"></ion-searchbar>

<!-- Searchbar with value -->
<ion-searchbar value="Ionic"></ion-searchbar>

<!-- Searchbar with telephone type -->
<ion-searchbar type="tel"></ion-searchbar>

<!-- Searchbar with numeric inputmode -->
<ion-searchbar inputmode="numeric"></ion-searchbar>

<!-- Searchbar disabled -->
<ion-searchbar disabled="true"></ion-searchbar>

<!-- Searchbar with a cancel button and custom cancel button text -->
<ion-searchbar show-cancel-button="focus" cancel-button-text="Custom Cancel"></ion-searchbar>

<!-- Searchbar with a custom debounce -->
<ion-searchbar debounce="500"></ion-searchbar>

<!-- Animated Searchbar -->
<ion-searchbar animated></ion-searchbar>

<!-- Searchbar with a placeholder -->
<ion-searchbar placeholder="Filter Schedules"></ion-searchbar>

<!-- Searchbar in a Toolbar -->
<ion-toolbar>
  <ion-searchbar></ion-searchbar>
</ion-toolbar>
import React, { useState } from 'react';
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonSearchbar, IonFooter } from '@ionic/react';

export const SearchBarExamples: React.FC = () => {
  const [searchText, setSearchText] = useState('');
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>IonSearchBar Examples</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <p>Default Searchbar</p>
        <IonSearchbar value={searchText} onIonChange={e => setSearchText(e.detail.value!)}></IonSearchbar>

        <p>Searchbar with cancel button always shown</p>
        <IonSearchbar value={searchText} onIonChange={e => setSearchText(e.detail.value!)} showCancelButton="always"></IonSearchbar>

        <p>Searchbar with cancel button never shown</p>
        <IonSearchbar value={searchText} onIonChange={e => setSearchText(e.detail.value!)} showCancelButton="never"></IonSearchbar>

        <p>Searchbar with cancel button shown on focus</p>
        <IonSearchbar value={searchText} onIonChange={e => setSearchText(e.detail.value!)} showCancelButton="focus"></IonSearchbar>

        <p>Searchbar with danger color</p>
        <IonSearchbar value={searchText} onIonChange={e => setSearchText(e.detail.value!)} color="danger"></IonSearchbar>

        <p>Searchbar with telephone type</p>
        <IonSearchbar value={searchText} onIonChange={e => setSearchText(e.detail.value!)} type="tel"></IonSearchbar>

        <p>Searchbar with numeric inputmode</p>
        <IonSearchbar value={searchText} onIonChange={e => setSearchText(e.detail.value!)} inputmode="numeric"></IonSearchbar>

        <p>Searchbar disabled </p>
        <IonSearchbar value={searchText} onIonChange={e => setSearchText(e.detail.value!)} disabled={true}></IonSearchbar>

        <p>Searchbar with a cancel button and custom cancel button text</p>
        <IonSearchbar value={searchText} onIonChange={e => setSearchText(e.detail.value!)} showCancelButton="focus" cancelButtonText="Custom Cancel"></IonSearchbar>

        <p>Searchbar with a custom debounce - Note: debounce only works on onIonChange event</p>
        <IonSearchbar value={searchText} onIonChange={e => setSearchText(e.detail.value!)} debounce={1000}></IonSearchbar>

        <p>Animated Searchbar</p>
        <IonSearchbar value={searchText} onIonChange={e => setSearchText(e.detail.value!)} animated></IonSearchbar>

        <p>Searchbar with a placeholder</p>
        <IonSearchbar value={searchText} onIonChange={e => setSearchText(e.detail.value!)} placeholder="Filter Schedules"></IonSearchbar>

        <p>Searchbar in a Toolbar</p>
        <IonToolbar>
          <IonSearchbar value={searchText} onIonChange={e => setSearchText(e.detail.value!)}></IonSearchbar>
        </IonToolbar>

      </IonContent>
      <IonFooter>
        <IonToolbar>
          Search Text: {searchText ?? '(none)'}
        </IonToolbar>
      </IonFooter>
    </IonPage>
  );
};
import { Component, h } from '@stencil/core';

@Component({
  tag: 'searchbar-example',
  styleUrl: 'searchbar-example.css'
})
export class SearchbarExample {
  render() {
    return [
       // Default Searchbar
      <ion-searchbar></ion-searchbar>,

      // Searchbar with cancel button always shown
      <ion-searchbar showCancelButton="always"></ion-searchbar>,

      // Searchbar with cancel button never shown
      <ion-searchbar showCancelButton="never"></ion-searchbar>,

      // Searchbar with cancel button shown on focus
      <ion-searchbar showCancelButton="focus"></ion-searchbar>,

      // Searchbar with danger color
      <ion-searchbar color="danger"></ion-searchbar>,

      // Searchbar with value
      <ion-searchbar value="Ionic"></ion-searchbar>,

      // Searchbar with telephone type
      <ion-searchbar type="tel"></ion-searchbar>,

      // Searchbar with numeric inputmode
      <ion-searchbar inputmode="numeric"></ion-searchbar>,

      // Searchbar disabled
      <ion-searchbar disabled={true}></ion-searchbar>,

      // Searchbar with a cancel button and custom cancel button text
      <ion-searchbar showCancelButton="focus" cancelButtonText="Custom Cancel"></ion-searchbar>,

      // Searchbar with a custom debounce
      <ion-searchbar debounce={500}></ion-searchbar>,

      // Animated Searchbar
      <ion-searchbar animated={true}></ion-searchbar>,

      // Searchbar with a placeholder
      <ion-searchbar placeholder="Filter Schedules"></ion-searchbar>,

      // Searchbar in a Toolbar
      <ion-toolbar>
        <ion-searchbar></ion-searchbar>
      </ion-toolbar>
    ];
  }
}

<template>
  <!-- Default Searchbar -->
  <ion-searchbar></ion-searchbar>

  <!-- Searchbar with cancel button always shown -->
  <ion-searchbar show-cancel-button="always"></ion-searchbar>

  <!-- Searchbar with cancel button never shown -->
  <ion-searchbar show-cancel-button="never"></ion-searchbar>

  <!-- Searchbar with cancel button shown on focus -->
  <ion-searchbar show-cancel-button="focus"></ion-searchbar>

  <!-- Searchbar with danger color -->
  <ion-searchbar color="danger"></ion-searchbar>

  <!-- Searchbar with value -->
  <ion-searchbar value="Ionic"></ion-searchbar>

  <!-- Searchbar with telephone type -->
  <ion-searchbar type="tel"></ion-searchbar>

  <!-- Searchbar with numeric inputmode -->
  <ion-searchbar inputmode="numeric"></ion-searchbar>

  <!-- Searchbar disabled -->
  <ion-searchbar disabled="true"></ion-searchbar>

  <!-- Searchbar with a cancel button and custom cancel button text -->
  <ion-searchbar show-cancel-button="focus" cancel-button-text="Custom Cancel"></ion-searchbar>

  <!-- Searchbar with a custom debounce -->
  <ion-searchbar debounce="500"></ion-searchbar>

  <!-- Animated Searchbar -->
  <ion-searchbar animated></ion-searchbar>

  <!-- Searchbar with a placeholder -->
  <ion-searchbar placeholder="Filter Schedules"></ion-searchbar>

  <!-- Searchbar in a Toolbar -->
  <ion-toolbar>
    <ion-searchbar></ion-searchbar>
  </ion-toolbar>
</template>

<script>
import { IonSearchbar, IonToolbar } from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
  components: { IonSearchbar, IonToolbar }
});
</script>

Properties

animated

Description

If true, enable searchbar animation.

Attributeanimated
Typeboolean
Defaultfalse

autocomplete

Description

Set the input's autocomplete property.

Attributeautocomplete
Type"on" | "off" | "name" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "email" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "url" | "photo"
Default'off'

autocorrect

Description

Set the input's autocorrect property.

Attributeautocorrect
Type"off" | "on"
Default'off'

cancelButtonIcon

Description

Set the cancel button icon. Only applies to md mode. Defaults to "arrow-back-sharp".

Attributecancel-button-icon
Typestring
Defaultconfig.get('backButtonIcon', 'arrow-back-sharp') as string

cancelButtonText

Description

Set the the cancel button text. Only applies to ios mode.

Attributecancel-button-text
Typestring
Default'Cancel'

clearIcon

Description

Set the clear icon. Defaults to "close-circle" for ios and "close-sharp" for md.

Attributeclear-icon
Typestring | undefined

color

Description

The color to use from your application's color palette. Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark". For more information on colors, see theming.

Attributecolor
Typestring | undefined

debounce

Description

Đặt lượng thời gian, tính bằng mili giây, đợi để kích hoạt ionChangesự kiện sau mỗi lần nhấn phím. Điều này cũng tác động đến các ràng buộc hình thức chẳng hạn như ngModelhoặc v-model.

Attributedebounce
Typenumber
Default250

disabled

Description

If true, the user cannot interact with the input.

Attributedisabled
Typeboolean
Defaultfalse

enterkeyhint

Description

A hint to the browser for which enter key to display. Possible values: "enter", "done", "go", "next", "previous", "search", and "send".

Attributeenterkeyhint
Type"done" | "enter" | "go" | "next" | "previous" | "search" | "send" | undefined

inputmode

Description

A hint to the browser for which keyboard to display. Possible values: "none", "text", "tel", "url", "email", "numeric", "decimal", and "search".

Attributeinputmode
Type"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url" | undefined

mode

Description

The mode determines which platform styles to use.

Attributemode
Type"ios" | "md"

placeholder

Description

Đặt trình giữ chỗ của đầu vào. placeholdercó thể chấp nhận bản rõ hoặc HTML dưới dạng một chuỗi. Để hiển thị các ký tự thường được dành riêng cho HTML, chúng phải được thoát ra. Ví dụ <Ionic>sẽ trở thành &lt;Ionic&gt;

Attributeplaceholder
Typestring
Default'Search'

searchIcon

Description

Biểu tượng để sử dụng làm biểu tượng tìm kiếm. Mặc định "search-outline"ở ioschế độ và "search-sharp"ở mdchế độ.

Attributesearch-icon
Typestring | undefined

showCancelButton

Description

Đặt hành vi cho nút hủy. Mặc định là "never". Cài đặt để "focus"hiển thị nút hủy trên tiêu điểm. Cài đặt "never"ẩn nút hủy. Cài đặt "always"hiển thị nút hủy bất kể trạng thái tiêu điểm.

Attributeshow-cancel-button
Type"always" | "focus" | "never"
Default'never'

showClearButton

Description

Đặt hành vi cho nút xóa. Mặc định là "focus". Cài đặt để "focus"hiển thị nút rõ ràng trên tiêu điểm nếu đầu vào không trống. Cài đặt "never"ẩn nút xóa. Cài đặt để "always"hiển thị nút rõ ràng bất kể trạng thái tiêu điểm, nhưng chỉ khi đầu vào không trống.

Attributeshow-clear-button
Type"always" | "focus" | "never"
Default'focus'

spellcheck

Description

If true, enable spellcheck on the input.

Attributespellcheck
Typeboolean
Defaultfalse

type

Description

Set the type of the input.

Attributetype
Type"email" | "number" | "password" | "search" | "tel" | "text" | "url"
Default'search'

value

Description

the value of the searchbar.

Attributevalue
Typenull | string | undefined
Default''

Events

NameDescription
ionBlurEmitted khi đầu vào mất tiêu điểm.
ionCancelEmitted  khi nhấp vào nút hủy.
ionChangeEmitted  khi giá trị đã thay đổi.
ionClearEmitted khi nhấp vào nút đầu vào rõ ràng.
ionFocusEmitted khi đầu vào có tiêu điểm..
ionInputEmitted khi nhập bằng bàn phím.

Methods

getInputElement

Description

Trả về <input>phần tử gốc được sử dụng bên dưới.

SignaturegetInputElement() => Promise<HTMLInputElement>

setFocus

Description

Đặt tiêu điểm vào mục đã chỉ định ion-searchbar. Sử dụng phương pháp này thay vì toàn cục input.focus().

SignaturesetFocus() => Promise<void>

CSS Cusstom Properties

NameDescription
--backgroundNền của đầu vào thanh tìm kiếm
--border-radiusBorder radius của đầu vào thanh tìm kiếm
--box-shadowBox shadow của đầu vào thanh tìm kiếm
--cancel-button-colorColor nút hủy thanh tìm kiếm
--clear-button-colorColor của nút xóa trên thanh tìm kiếm
--colorColor của văn bản trên thanh tìm kiếm
--icon-colorColor  của biểu tượng thanh tìm kiếm
--placeholder-colorColorcủa trình giữ chỗ trên thanh tìm kiếm 
--placeholder-font-styleFont style của trình giữ chỗ trên thanh tìm kiếm
--placeholder-font-weightFont weight của trình giữ chỗ trên thanh tìm kiếm
--placeholder-opacityOpacity của trình giữ chỗ trên thanh tìm kiếm

codersulution

Người đăng: codersulution

Chúa dùng những kẻ thất bại - vì chẳng còn loại người nào khác. Thành công không có dấu chân của kẻ lười biếng!! Đúng vậy! vi lười biếng thì chỉ muốn đi những phương tiện hiện đại. Học hành là không sợ hãi, không biết là hỏi. Chúng ta là người đi học kia mà. Mạnh mẽ và học cho tốt !!!

Đăng nhận xét

0 Nhận xét

myadcash