Как добавить в React Navbar функцию поиска

Введение

В этой статье показано, как реализовать функцию поиска на панели навигации React. В нем показано, как настроить поисковый ввод, прослушать обратный вызов ввода пользовательских данных, а затем, как его стилизовать.

Предпосылки

В этой статье предполагается, что вы ознакомились с предыдущими руководствами по панели навигации. Если вы этого не сделали, вы найдете сводный список в разделе справочных ссылок в конце статьи. В этой статье предполагается, что вы установили библиотеку Superflows, у вас запущена и работает панель навигации по умолчанию, добавлена ​​информация о вашем бренде, а также настроено меню. В этом руководстве мы продвигаемся вперед.

Шаг 1. Показать/скрыть поле поиска

Чтобы отобразить входные данные поиска, установите для свойства showSearch значение true, как показано ниже:

return (
        <div>
                <SfNav showSearch={true}/>
        </div>
);

Это выглядит следующим образом:

Чтобы скрыть поисковый ввод, установите для параметра showSearch значение false, как показано ниже:

return (
        <div>
                <SfNav showSearch={false} />
        </div>
);

Это выглядит следующим образом:

Шаг 2. Установите заголовок ввода для поиска

Чтобы изменить заголовок поиска, установите свойство searchCaption в соответствующее строковое значение, как показано ниже:

return (
        <div>
                <SfNav searchCaption="Find" />
        </div>
);

Это выглядит следующим образом:

Шаг 3. Установите значок ввода для поиска

Вы также можете добавить значок в поле поиска. Просто установите свойство searchIcon для объекта значка. Объект значка можно взять из любой библиотеки. В приведенном ниже примере я использовал библиотеку значков начальной загрузки.

Чтобы изменить заголовок поиска, установите свойство searchCaption в соответствующее строковое значение, как показано ниже:

npm install react-bootstrap-icons

import {Search} from 'react-bootstrap-icons';

return (
        <div>
                <SfNav searchIcon={<Search />} />
        </div>
);

Это выглядит следующим образом:

Шаг 4. Обработка обратного вызова

Панель навигации возвращает обратный вызов, если пользователь вводит какой-либо текст в поле поиска и нажимает клавишу ввода. Вы можете подписаться на этот обратный вызов, подписавшись на реквизит onSearchPressed, как показано ниже:

return (
        <div>
              <SfNav onSearchPressed={(value) => {alert(value)}}/>
        </div>
);

Шаг 5. Оформление

Затем вы можете настроить внешний вид с помощью встроенного CSS или имен классов. Панель навигации Superflows предоставляет реквизиты, облегчающие настройку. Пример показан ниже:

return (
        <div>
              <SfNav 
                  stylesSearchContainer={{backgroundColor: 'black', color: 'white', border: 'solid 1px gray'}}
                  stylesSearchInput={{backgroundColor: '#444', borderRadius: '10px', color: '#efefef', paddingTop: '5px', paddingBottom: '5px'}}
              />
        </div>
);

Это выглядит следующим образом:

Справочные ссылки

Документация

Эта ссылка

Код

Эта ссылка

Предыдущие руководства по панели навигации

• T1: Начало работы С панелью навигации
• T2: Вставьте информацию о бренде< /сильный>
• T3: Настройка меню

Видеоруководство

https://www.youtube.com/watch?v=2mnL8fSgS80?embedable=true

Дополнительная литература

Вы уже видели, как начать работу с навигационной панелью, как вставить в нее информацию о бренде, как настроить меню, а теперь как настроить поисковый ввод. В следующем руководстве показано, как использовать и настраивать кнопку входа.

Заключение

В этой статье показано, как настроить поисковый ввод. Как показать/скрыть его, как изменить заголовок, как добавить значок, как обрабатывать обратный вызов, а также как его настроить и оформить.

Также опубликовано здесь