Как использовать Blueprint 3.0 Drawer для использования в качестве левой sidenav? - PullRequest
Новая
       21

Как использовать Blueprint 3.0 Drawer для использования в качестве левой sidenav?

0 голосов
/ 01 марта 2019

Мне удалось переместить ящик влево, установив стиль left: 0, но анимация закрытия и открытия происходит справа.Ниже приведен фрагмент кода.Помогите, пожалуйста, решить проблему с анимацией. 

<Drawer style={{ left: '0', transition: 'all 0.1s' }} 
isOpen={isDrawerOpen} 
size={'250px'} 
usePortal={true} 
hasBackdrop={true} 
canOutsideClickClose={true} 
onClose={() => toggleDrawer(false)} 
>

1 Ответ

0 голосов
/ 06 марта 2019

Если кто-то все еще ищет решение, то, как быстрое исправление, пока не выйдет этот реквизит, вы можете использовать «хак» CSS следующим образом: 

.your-custom-class-for-drawer.bp3-drawer:not(.bp3-vertical).bp3-overlay-enter, 
.your-custom-class-for-drawer.bp3-drawer:not(.bp3-vertical):not(.bp3-reversed).bp3-overlay-appear {
  transform: translateX(-100%);
}

.your-custom-class-for-drawer.bp3-drawer:not(.bp3-vertical).bp3-overlay-enter-active, 
.your-custom-class-for-drawer.bp3-drawer:not(.bp3-vertical):not(.bp3-reversed).bp3-overlay-appear-active {
  transform: translateX(0);
  transition-property: transform;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.4, 1, 0.75, 0.9);
  transition-delay: 0;
}

.your-custom-class-for-drawer.bp3-drawer:not(.bp3-vertical).bp3-overlay-exit {
  transform: translateX(0);
}

.your-custom-class-for-drawer.bp3-drawer:not(.bp3-vertical):not(.bp3-reversed).bp3-overlay-exit-active {
  transform: translateX(-100%);
  transition-property: transform;
  transition-duration: 100ms;
  transition-timing-function: cubic-bezier(0.4, 1, 0.75, 0.9);
  transition-delay: 0;
}

.your-custom-class-for-drawer.bp3-drawer:not(.bp3-vertical) {
  left: 0;
}

И просто замените .your-custom-class-for-drawer на некоторыеимя класса для вашего левого открывающегося ящика, если вам не нужен какой-либо пользовательский класс, вы можете написать все без него, но тогда все ящики будут отображаться слева направо, таким образом вы можете смоделировать обратное поведение с помощью простого имени класса.

...