# F NAV — Вкладки мобильной навигации

**URL:** https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277
**Category:** Theme component
**Tags:** mobile
**Created:** [13.Декабрь.2024 13:12:16 UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277 "2024-12-13T13:12:16Z")
**Posts on this page:** 1
**Showing post:** 1

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [13.Декабрь.2024 13:12:16 UTC](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277/1 "2024-12-13T13:12:16Z")

</div>

| | | |
| --- | --- | --- |
| ℹ | **Сводка** | F NAV - Мобильные вкладки навигации |
| 👓 | **Предпросмотр** | [Theme Creator](https://discourse.theme-creator.io/theme/Don/f-nav-component) |
| 🛠 | **Репозиторий** | [GitHub - VaperinaDEV/f-nav-for-mobile: F NAV - Mobile Navigation Tabs · GitHub](https://github.com/VaperinaDEV/f-nav-for-mobile) |
| ❤ | **Полезно?** | [\> ./support --coffee](https://meta.discourse.org/u/don) |
| ❓ | **Гид по установке** | [Как установить тему или компонент темы](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) |
| 📖 | **Новичок в темах Discourse?** | [Начальное руководство по использованию тем Discourse](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |

Установить этот компонент темы

Привет 👋

Ранее я создал #Development [тему](https://meta.discourse.org/t/f-nav-theme-component-concept/340226?u=don) для него как концепцию компонента темы, и теперь он готов стать #Customization > Theme component.

> ⚠ **Убедитесь, что протестировали его перед использованием в боевом режиме**.

Немного информации о компоненте: [F NAV - Theme component concept](https://meta.discourse.org/t/f-nav-theme-component-concept/340226?u=don)

* * *

**О компоненте темы.** Я прочитал множество постов о том, что было бы здорово сделать [Discourse Tab Bar for Mobile](https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696) более динамичной и добавить возможность управления, например, уведомлениями и т.д… F-NAV может сделать это и многое другое…

## Шапка

Она скрывает гамбургер, меню пользователя, поиск и чат и добавляет кнопку меню профиля (аватар), которая содержит содержимое вкладки профиля по умолчанию из меню пользователя.

 ![Screenshot 2024-12-13 at 13.14.51](https://global.discourse-cdn.com/meta/original/4X/9/5/f/95fc31244f92af9f4f0c95f4826dd04bd4b02cbe.png)

### Настройки

Также здесь есть настройка, позволяющая добавлять пользовательские элементы перед пунктом «Выйти».  
Там есть три поля, в которые можно легко добавить пользовательские элементы.

 ![Screenshot 2024-12-13 at 13.18.05](https://global.discourse-cdn.com/meta/original/4X/a/f/3/af3c13a3603d47cab3b56db3f6a277eb9d5d0248.png)

Есть несколько настроек для показа/скрытия иконок шапки по умолчанию, что полезно, если вы не хотите размещать конкретную вкладку в F NAV, чтобы она отображалась в шапке.

 ![Screenshot 2024-12-13 at 15.08.40](https://global.discourse-cdn.com/meta/original/4X/1/f/8/1f8a88db9c7cd1403715b22458808546eb38973f.png)

## Вкладки

Возможно связать разные функции с вкладками. Эти функции позволяют каждой вкладке динамически изменяться.

![Screenshot 2024-12-13 at 13.06.14](https://global.discourse-cdn.com/meta/original/4X/5/c/b/5cbc48694b352e0253c135e1142cc73f8131a1dd.png)

Такие изменения включают:

### Функции

**home**

- переключает иконку вкладки «Домой» на левую стрелку на маршрутах темы, добавляя функцию «назад»  
 ![Screenshot 2024-12-13 at 12.29.33](https://global.discourse-cdn.com/meta/original/4X/6/9/4/694299fc28bf6ea581c4676047bdfcc9e316cf64.png)
- добавляет индикатор-точку для новых или непрочитанных тем  
 ![Screenshot 2024-12-13 at 12.30.52](https://global.discourse-cdn.com/meta/original/4X/b/0/7/b071a89bdf7d5fb7e729457baecc1eb9d0891403.png)

* * *

**hamburger** (открывает гамбургер-меню)

* * *

**multi**

> **multi tab**
>
> Вкладка «multi» автоматически меняется на вкладку сообщений, если чат не включен или пользователь отключил его в  
> настройках пользователя.
> 
> Пузырь уведомлений меняется в зависимости от срочности.
> 
> Срочные уведомления вкладки «multi» зеленые и выглядят так. 🔽
> 
> ![Screenshot 2024-12-10 at 15.41.45](https://global.discourse-cdn.com/meta/original/4X/3/5/0/350d5d7c2ad42a908e6d52ca7905f74099ef3ca5.png)  
> Раскрыто  
> ![Screenshot 2024-12-10 at 15.41.59](https://global.discourse-cdn.com/meta/original/4X/2/d/b/2db8944bdfba7b8b192be31c3cbe34ff0633c196.png)
> 
> Личные сообщения всегда зеленые, но чат может быть синим, как в оригинале, например, для уведомления о непрочитанном сообщении в канале.
> 
> ![Screenshot 2024-12-10 at 15.42.41](https://global.discourse-cdn.com/meta/original/4X/5/5/5/555568bf6702595c24927f69dc4d0a9de4d9c693.png)
> 
> Раскрыто
> 
> ![Screenshot 2024-12-10 at 15.42.53](https://global.discourse-cdn.com/meta/original/4X/d/c/e/dcee214b56d58456e4bc82d5d93437b4bc706e19.png)
> 
> Одно уведомление
> 
> ![Screenshot 2024-12-10 at 15.43.25](https://global.discourse-cdn.com/meta/original/4X/9/2/1/92193ac9241400b37e10403bf4f55fa46aa23628.png)

* * *

**message**

- добавляет кнопку сообщений с уведомлениями, и при нажатии на нее открывается модальное окно сообщений для быстрого просмотра

* * *

**chat**

- добавляет кнопку чата с его функциями

* * *

**notificationToRoute**

- если активен режим «Не беспокоить», иконка колокольчика меняется на иконку «колокольчик со слэшем», и появляется время окончания режима «Не беспокоить»  
 ![Screenshot 2024-12-13 at 13.02.35](https://global.discourse-cdn.com/meta/original/4X/5/3/8/538dd387c83a0fd91c6f045f62d860e6d2a39560.png)

- перенаправляет на страницу уведомлений профиля, минуя меню уведомлений

* * *

**notificationMenu**

- если активен режим «Не беспокоить», иконка колокольчика меняется на иконку «колокольчик со слэшем», и появляется время окончания режима «Не беспокоить»  
 ![Screenshot 2024-12-13 at 13.02.35](https://global.discourse-cdn.com/meta/original/4X/5/3/8/538dd387c83a0fd91c6f045f62d860e6d2a39560.png)

- открывает меню уведомлений

* * *

**search**

- перенаправляет на контекстную страницу `/search`

* * *

### Настройки

Я старался сделать настройки максимально простыми.  
В них будет четыре поля.

- **name** : Это просто для более легкого определения вкладки в настройках.
- **icon** : Добавляет иконку на вкладку. Примечание: Если вы выберете функцию, могут быть иконки, которые нельзя переопределить с помощью этой настройки.
- **destination** : Добавляет назначение для вашей пользовательской вкладки. Примечание: Если вы выберете функцию, она будет обрабатывать назначение, поэтому вы можете оставить это поле пустым. Компонент автоматически преобразует назначения `/my/...` в `/u/username/...`, чтобы статус активности вкладок мог добавляться правильно.
- **function** : Выберите функцию для вкладки.

 ![Screenshot 2024-12-12 at 18.45.26](https://global.discourse-cdn.com/meta/original/4X/3/9/d/39d5b02b1611ccd642e78dc10ecb6c4334743546.png)

Администраторы могут просто создавать/удалять/изменять вкладки и выбирать одну из функций или добавлять пользовательское назначение для вкладки.  
Функции 🔽

 ![Screenshot 2024-12-12 at 18.46.05](https://global.discourse-cdn.com/meta/original/4X/8/7/a/87a5cba2bc9dd682ca907593962c2b53626a98da.png)

Например, добавление вкладки создания темы будет выглядеть просто так.

 ![Screenshot 2024-12-12 at 18.53.57](https://global.discourse-cdn.com/meta/original/4X/7/9/7/797e2a298cbf94448fa4a2961fcd0e4e4d59381d.png)  
 ![Screenshot 2024-12-12 at 18.55.50](https://global.discourse-cdn.com/meta/original/4X/2/d/1/2d1348ac9aca8239cfe6d82292ce1ca35f05ea6a.png)

* * *

**Кредиты** : [Discourse Tab Bar for Mobile](https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696) и спасибо всем за обратную связь в теме [F NAV - Theme component concept](https://meta.discourse.org/t/f-nav-theme-component-concept/340226). ❤

---

_[View the full topic](https://meta.discourse.org/t/f-nav-mobile-navigation-tabs/342277)._