Вставка «Информации о профиле пользователя» в панель навигации React
9 ноября 2022 г.Введение
В этой статье показано, как вставить информацию о профиле любого пользователя в панель навигации React, чтобы она знала о входе в систему. Он покажет вам, как вставить и настроить изображение профиля & меню, как повторно использовать кнопку входа, как обрабатывать обратные вызовы, а затем мы обсудим стиль.
Предпосылки
В этой статье предполагается, что вы ознакомились с предыдущими руководствами по панели навигации. Если вы этого не сделали, вы найдете сводный список в разделе справочных ссылок. В этой статье предполагается, что вы установили библиотеку Superflows, панель навигации по умолчанию запущена и работает, добавили информацию о своем бренде, также настроили меню, добавили ввод для поиска, а также настроили кнопку входа. В этом руководстве мы продвигаемся вперед.
Шаг 1. Вставьте изображение профиля
Чтобы отобразить изображение профиля, задайте для свойства showProfile значение true, а для строки URL-адреса изображения профиля укажите значение свойства profilePicture.
return (
<div>
<SfNav showProfile={true} profilePicture='https://i.pinimg.com/736x/7f/79/6d/7f796d57218d9cd81a92d9e6e8e51ce4--free-avatars-online-profile.jpg' />
</div>
);
Это выглядит следующим образом:
Шаг 2. Заполните меню профиля
Меню профиля можно заполнить, передав необходимый объект массива json в свойство profileMenu. Я показываю пример здесь. Вы можете посмотреть, как был составлен объект массива json.
return (
<div>
<SfNav
showProfile={true}
profilePicture='https://i.pinimg.com/736x/7f/79/6d/7f796d57218d9cd81a92d9e6e8e51ce4--free-avatars-online-profile.jpg'
profileMenu={[{caption: "Profile", link: "profile"}, [{caption: "Settings", link: "support"}, {caption: "Notifications", link: "notifications"}, {caption: "Privacy", link: "privacy"}], {caption: "Support", link: "support"}, {caption: 'Upgrade', link: "upgrade"}]}
/>
</div>
);
Это выглядит следующим образом:
Шаг 3. Расширьте функциональность: используйте преамбулу профиля
Панель навигации предоставляет вам контейнер над меню профиля, куда вы можете вставить свой собственный разработанный компонент. Это называется преамбулой профиля. Как его использовать, полностью зависит от вашего воображения. В приведенном ниже примере он предоставляет пользователю некоторый контекст профиля.
return (
<div>
<SfNav
showProfile={true}
profilePicture='https://i.pinimg.com/736x/7f/79/6d/7f796d57218d9cd81a92d9e6e8e51ce4--free-avatars-online-profile.jpg'
profileMenu={[{caption: "Profile", link: "profile"}, [{caption: "Settings", link: "support"}, {caption: "Notifications", link: "notifications"}, {caption: "Privacy", link: "privacy"}], {caption: "Support", link: "support"}, {caption: 'Upgrade', link: "upgrade"}]}
profilePreamble={<div style={{width: '100%', paddingTop: '10px', paddingBottom: '10px', paddingLeft: '10px', paddingRight: '10px'}}><small>Hi Hrushi!</small><br /><small><small><i>Welcome to Superflows!</i></small></small></div>}
/>
</div>
);
Это выглядит следующим образом:
Шаг 4. Расширьте функциональность: используйте компонент профиля
Панель навигации предоставляет вам второй контейнер, чуть ниже меню профиля, куда вы можете вставить другой разработанный пользователем компонент. Он называется компонентом профиля. Как его использовать, полностью зависит от вашего воображения. В приведенном ниже примере показана кнопка выхода.
return (
<div>
<SfNav
showProfile={true}
profilePicture='https://i.pinimg.com/736x/7f/79/6d/7f796d57218d9cd81a92d9e6e8e51ce4--free-avatars-online-profile.jpg'
profileMenu={[{caption: "Profile", link: "profile"}, [{caption: "Settings", link: "support"}, {caption: "Notifications", link: "notifications"}, {caption: "Privacy", link: "privacy"}], {caption: "Support", link: "support"}, {caption: 'Upgrade', link: "upgrade"}]}
profilePreamble={<div style={{width: '100%', paddingTop: '10px', paddingBottom: '10px', paddingLeft: '10px', paddingRight: '10px'}}><small>Hi Hrushi!</small><br /><small><small><i>Welcome to Superflows!</i></small></small></div>}
profileComponent={<div style={{width: '100%', paddingTop: '10px', paddingBottom: '10px', paddingLeft: '10px', paddingRight: '10px'}}><small>Sign Out</small></div>}
/>
</div>
);
Это выглядит следующим образом:
Шаг 5. Скройте или повторно используйте кнопку входа
Информация о профиле пользователя обычно отображается только для вошедшего в систему пользователя. В таком случае кнопка входа не нужна. Вы можете либо скрыть его, либо использовать повторно. В следующем примере она повторно используется как кнопка подписки.
return (
<div>
<SfNav
showProfile={true}
profilePicture='https://i.pinimg.com/736x/7f/79/6d/7f796d57218d9cd81a92d9e6e8e51ce4--free-avatars-online-profile.jpg'
profileMenu={[{caption: "Profile", link: "profile"}, [{caption: "Settings", link: "support"}, {caption: "Notifications", link: "notifications"}, {caption: "Privacy", link: "privacy"}], {caption: "Support", link: "support"}, {caption: 'Upgrade', link: "upgrade"}]}
profilePreamble={<div style={{width: '100%', paddingTop: '10px', paddingBottom: '10px', paddingLeft: '10px', paddingRight: '10px'}}><small>Hi Hrushi!</small><br /><small><small><i>Welcome to Superflows!</i></small></small></div>}
profileComponent={<div style={{width: '100%', paddingTop: '10px', paddingBottom: '10px', paddingLeft: '10px', paddingRight: '10px'}}><small>Sign Out</small></div>}
signInCaption="Subscribe"
/>
</div>
);
Это выглядит следующим образом:
Шаг 6. Обработка обратных вызовов
Чтобы прослушивать событие клика в меню профиля, подпишитесь на реквизит onMenuClicked, как показано ниже. Чтобы прослушивать событие нажатия на кнопку подписки (повторное использование входа), подпишитесь на свойство onSignInPressed, как показано ниже:
return (
<div>
<SfNav
showProfile={true}
profilePicture='https://i.pinimg.com/736x/7f/79/6d/7f796d57218d9cd81a92d9e6e8e51ce4--free-avatars-online-profile.jpg'
profileMenu={[{caption: "Profile", link: "profile"}, [{caption: "Settings", link: "support"}, {caption: "Notifications", link: "notifications"}, {caption: "Privacy", link: "privacy"}], {caption: "Support", link: "support"}, {caption: 'Upgrade', link: "upgrade"}]}
profilePreamble={<div style={{width: '100%', paddingTop: '10px', paddingBottom: '10px', paddingLeft: '10px', paddingRight: '10px'}}><small>Hi Hrushi!</small><br /><small><small><i>Welcome to Superflows!</i></small></small></div>}
profileComponent={<div style={{width: '100%', paddingTop: '10px', paddingBottom: '10px', paddingLeft: '10px', paddingRight: '10px'}}><small>Sign Out</small></div>}
signInCaption="Subscribe"
onMenuClicked={(value)=>{alert(value)}}
onSignInPressed={()=>{alert('Subscribe pressed!')}}
/>
</div>
);
Шаг 7. Оформление
Затем вы можете настроить внешний вид с помощью встроенного CSS или имен классов. Панель навигации Superflows предоставляет реквизиты, облегчающие настройку. Пример показан ниже:
return (
<div>
<SfNav
showProfile={true}
profilePicture='https://i.pinimg.com/736x/7f/79/6d/7f796d57218d9cd81a92d9e6e8e51ce4--free-avatars-online-profile.jpg'
profileMenu={[{caption: "Profile", link: "profile"}, [{caption: "Settings", link: "support"}, {caption: "Notifications", link: "notifications"}, {caption: "Privacy", link: "privacy"}], {caption: "Support", link: "support"}, {caption: 'Upgrade', link: "upgrade"}]}
profilePreamble={<div style={{width: '100%', paddingTop: '10px', paddingBottom: '10px', paddingLeft: '10px', paddingRight: '10px'}}><small>Hi Hrushi!</small><br /><small><small><i>Welcome to Superflows!</i></small></small></div>}
profileComponent={<div style={{width: '100%', paddingTop: '10px', paddingBottom: '10px', paddingLeft: '10px', paddingRight: '10px'}}><small>Sign Out</small></div>}
signInCaption="Subscribe"
onMenuClicked={(value)=>{alert(value)}}
onSignInPressed={()=>{alert('Subscribe pressed!')}}
stylesProfilePictureContainer={
{backgroundColor: 'black', padding: '2px', color: 'white', borderRadius: '5px'}
}
stylesProfilePreamble={
{backgroundColor: 'white', color: 'black'}} stylesProfileComponent={{backgroundColor: 'white', color: 'black'}
}
stylesMenu={
{backgroundColor: 'black', color: 'white', paddingTop: '3px', paddingBottom: '3px', paddingLeft: '10px', paddingRight: '10px', borderRadius: '5px'}
}
stylesSubMenu={
{backgroundColor: 'black', color: 'white', paddingLeft: '5px', paddingRight: '5px', border: 'solid 1px gray'}
}
stylesMenuMobile={
{backgroundColor: 'black', color: 'white', paddingLeft: '5px', paddingRight: '5px', borderRadius: '5px', border: 'solid 1px gray'}
}
stylesMenuMobileSelected={
{backgroundColor: 'white', color: 'black', paddingLeft: '5px', paddingRight: '5px', borderRadius: '5px', border: 'solid 1px gray'}
}
stylesSubMenuMobile={
{backgroundColor: 'black', color: 'white', paddingLeft: '5px', paddingRight: '5px', borderRadius: '5px', border: 'solid 1px gray'}
}
/>
</div>
);
Это выглядит следующим образом:
Справочные ссылки
Документация
Пример проекта для этого руководства
Предыдущие руководства по панели навигации
- T1: Начало работы С панелью навигации
- T2: Вставьте информацию о бренде< /сильный>
- T3: Настройка меню
- T4: добавление функции поиска< /li>
- T5: Добавить кнопку входа
Канал YouTube
Сообщество Discord
Коллекция примеров проектов
Видеоруководство
https://www.youtube.com/watch?v=8uXgtEb9Ucw?embedable=true
Дополнительная литература
Вы уже видели, как начать работу с панелью навигации, как вставить в нее информацию о бренде, как настроить меню и теперь, как настроить поисковый ввод, как использовать кнопку входа и теперь, как чтобы вставить в него информацию о профиле.
Заключение
В этой статье показано, как вставить информацию профиля в панель навигации React, как настроить меню профиля, как расширить функциональные возможности, добавив собственные настраиваемые компоненты, и как затем стилизовать раздел профиля. п
:::информация Также опубликовано здесь.
:::
Оригинал