Как выровнять кнопки управления горизонтально-снизу вместо вертикально-правого NgxImageViewer - PullRequest
Новая
       9

Как выровнять кнопки управления горизонтально-снизу вместо вертикально-правого NgxImageViewer

0 голосов
/ 28 августа 2018

Я использую NgxImageViewer и хочу отображать элементы управления горизонтально-внизу экрана вместо вертикально-вправо

Html 

<ngx-image-viewer  [src]="images" [(index)]="imageIndex"></ngx-image-viewer>

Ts 

config = {
    btnClass: 'default', // The CSS class(es) that will apply to the buttons
    zoomFactor: 0.1, // The amount that the scale will be increased by
    containerBackgroundColor: '#ccc', // The color to use for the background. This can provided in hex, or rgb(a).
    wheelZoom: true, // If true, the mouse wheel can be used to zoom in
    allowFullscreen: true, // If true, the fullscreen button will be shown, allowing the user to entr fullscreen mode
    allowKeyboardNavigation: false, // If true, the left / right arrow keys can be used for navigation
    btnIcons: { // The icon classes that will apply to the buttons. By default, font-awesome is used.
      zoomIn: 'fa fa-plus',
      zoomOut: 'fa fa-minus',
      rotateClockwise: 'fa fa-repeat',
      rotateCounterClockwise: 'fa fa-undo',
      next: 'fa fa-arrow-right',
      prev: 'fa fa-arrow-left',
      fullscreen: 'fa fa-arrows-alt',
    },
    btnShow: {
      zoomIn: true,
      zoomOut: true,
      rotateClockwise: true,
      rotateCounterClockwise: true,
      next: false,
      prev: false
    }

URL-адрес Stackbliz

Ответы [ 2 ]

0 голосов
/ 28 августа 2018

попробуйте добавить каждую кнопку одинаковые bottom и разные right или left что-то вроде: 

.img-container button.default{
    bottom: 15px !important;
    display: inline;
}

button.default:nth-of-type(1){
    left: 0px;
}
button.default:nth-of-type(2){
    left: 45px;
}
button.default:nth-of-type(3){
    left: 90px;
}
button.default:nth-of-type(4){
    left: 135px;
}

Примечание : рассмотрите возможность добавления стилей в файл styles.css. рабочая ДЕМО

0 голосов
/ 28 августа 2018

Попробуйте этот CSS. Надеюсь, это работает. По сути, вы перемещаете все кнопки вниз и затем размещаете их слева направо. 

.img-container button.default{
    bottom: 15px;
}
.img-container > button.default:nth-of-type(2):not(#ngx-fs-btn){
    left: 45px;
}
.img-container > button.default:nth-of-type(3):not(#ngx-fs-btn){
    left: 90px;
}
.img-container > button.default:nth-of-type(4):not(#ngx-fs-btn){
    left: 135px;
}
...