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