BottomBar

import { BottomBar } from '@megafon/ui-lk-vas';

Примеры и код

Свойства и методы

Особенности использования

Компонент BottomBar закреплен в нижней части экрана. Для компонента установлено фиксированное позиционирование относительно контентной области Layout.

Показать код

<div style={{ height: "150px", translate: "0", backgroundColor: "var(--spbSky0)" }}>
      <BottomBar
          actionButtonTitle="Далее"
          onActionButtonClick={handleClick}
          onBackButtonClick={handleClick}
      />
  </div>

Кнопка действия в состоянии загрузки

Показать код

<div style={{ height: "150px", translate: "0", backgroundColor: "var(--spbSky0)" }}>
      <BottomBar
          actionButtonTitle="Далее"
          showActionButtonLoader
          onActionButtonClick={handleClick}
          onBackButtonClick={handleClick}
      />
  </div>

Отключение кнопки действия

Показать код

<div style={{ height: "150px", translate: "0", backgroundColor: "var(--spbSky0)" }}>
      <BottomBar
          actionButtonTitle="Далее"
          disableActionButton
          onActionButtonClick={handleClick}
          onBackButtonClick={handleClick}
      />
  </div>

Prop name	Type	Default	Description
className	string \| undefined		Дополнительный класс корневого элемента
actionButtonType	"button" \| "reset" \| "submit" \| undefined	button	Поведение кнопки
actionButtonTitle*	string		Название кнопки действия
showActionButtonLoader	boolean \| undefined	false	Показать кнопку действия в состоянии загрузки
disableActionButton	boolean \| undefined	false	Отключение кнопки действия
onActionButtonClick*	(e: SyntheticEvent<EventTarget, Event>) => void		Обработчик клика кнопки действия
backButtonTitle	string \| undefined	Назад	Название кнопки возврата
onBackButtonClick*	(e: SyntheticEvent<EventTarget, Event>) => void		Обработчик клика кнопки возврата
dataAttrs	{ root?: Record<string, string> \| undefined; actionButton?: Record<string, string> \| undefined; backButton?: Record<string, string> \| undefined; } \| undefined		Дополнительные data атрибуты к внутренним элементам