Skip to content

Вкладки

AlexGyver edited this page Oct 5, 2022 · 1 revision

Динамические вкладки

Данный способ работает следующим образом: компоненты объединяются в блоки навигации (вкладки), видимость которых переключается в панели навигации, получаются своего рода вкладки - несколько страниц с разным набором компонентов физически расположены на одной странице, а переключение между ними происходит без перезагрузки или загрузки новой страницы.

В GP.NAV_TABS() передаётся список названий вкладок, разделённых запятой: GP.NAV_TABS("Home,Settings,Keks,End")

Далее нужно создать столько блоков, сколько указано названий. Блок начинается с GP.NAV_BLOCK_BEGIN() и заканчивается GP.NAV_BLOCK_END(). Между этими функциями можно вставлять любые другие компоненты.

GP.NAV_TABS("Home,Config");

// вкладка 1
GP.NAV_BLOCK_BEGIN();
// компоненты...
GP.NAV_BLOCK_END();

// вкладка 2
GP.NAV_BLOCK_BEGIN();
// компоненты...
GP.NAV_BLOCK_END();

Важно! Блоки (вкладки) принадлежат той панели навигации, которая объявлена над ними (выше по коду). Нельзя пересекать вкладки, принадлежащие разным панелям, это не будет работать. Данное допущение связано с довольно непростым механизмом генерации вкладок внутри библиотеки, которое позволяет упростить код в конструкторе уже в самом скетче.

Несколько панелей навигации на одной странице будут работать по следующей логике:

Панель_A
Вкладка_A1
Вкладка_A2
Вкладка_A3

Панель_B
Вкладка_B1
Вкладка_B2

Панель_C
Вкладка_C1
Вкладка_C2

А вот так уже не получится:

Панель_A
Вкладка_A1
Вкладка_A2

Панель_B
Вкладка_B1
Вкладка_B2
Вкладка_A3  <- так не получится

Панель_C
Вкладка_C1
Вкладка_C2
Вкладка_B3  <- так не получится

Пример

void build() {
  GP.BUILD_BEGIN();
  GP.THEME(GP_DARK);

  // первый блок навигации
  GP.NAV_TABS("Home,Settings,Keks,End");

  GP.NAV_BLOCK_BEGIN();
  GP.LABEL("Tab1");
  GP.NAV_BLOCK_END();

  GP.NAV_BLOCK_BEGIN();
  GP.LABEL("Tab2");
  GP.NAV_BLOCK_END();

  GP.NAV_BLOCK_BEGIN();
  GP.LABEL("Tab3");
  GP.NAV_BLOCK_END();

  GP.NAV_BLOCK_BEGIN();
  GP.LABEL("Tab4");
  GP.NAV_BLOCK_END();

  // второй блок навигации
  GP.NAV_TABS("KEK,PUK,4EBUREK", GP_RED);

  // эти блоки сделаем макросами
  GP_MAKE_NAV_BLOCK(
    GP.LABEL("block1");
    GP.BUTTON("", "Btn");
  );

  GP_MAKE_NAV_BLOCK(
    GP.LABEL("block2");
    GP.LED("");
  );

  GP_MAKE_NAV_BLOCK(
    GP.LABEL("block3");
    GP.BREAK();
    GP.TEXT("");
  );

  GP.BUILD_END();
}

См. пример multiPageTabs

Clone this wiki locally