Кнопка перемещения в левом среднем экране - PullRequest
Новая
       130

Кнопка перемещения в левом среднем экране

0 голосов
/ 19 июня 2020

Я пытаюсь переместить кнопку посередине левого экрана, но когда я что-то меняю, все движется. например, я использую карточки, когда перемещаю кнопку вниз, карточки тоже перемещаются, что мне не нужно.

Ссылка на песочницу: щелкните здесь

Я просто хотите отображать кнопку с эффектом расширения при наведении на нее, но она должна оставаться с левой стороны пользовательского интерфейса и посередине.

Текущее:

enter image description here

Ожидается:

enter image description here

1 Ответ

0 голосов
/ 20 июня 2020

Демо: https://codesandbox.io/s/muddy-cache-nwl0c?file= / App. vue

Я добавил расширяемую кнопку для вас и разместил ее там, где вы хотели, не перемещая ее в html. Я сделал это, настроив его margin-bottom . Для анимации при наведении курсора на кнопку я использовал переход свойств css, о котором вы можете прочитать немного здесь , если вам интересно узнать больше. Я также добавил к кнопке идентификатор runAll.

Код: 

<style>
#runAll {
  width: 100px;
  transition: width 0.2s ease-in;
}

#runAll:hover {
  width: 500px;
}
</style>
<template>
  <div>
    <b-button id="runAll" class="runAll" style="margin-bottom: -425px">Run All</b-button>
    <b-card-group deck>
      <b-card border-variant="info" header="Info" align="center">
        <b-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b-card-text>
      </b-card>

      <b-card
        border-variant="warning"
        header="Warning"
        header-bg-variant="transparent"
        align="center"
      >
        <b-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b-card-text>
      </b-card>

      <b-card
        border-variant="danger"
        header="Danger"
        header-border-variant="danger"
        header-text-variant="danger"
        align="center"
      >
        <b-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b-card-text>
      </b-card>
    </b-card-group>
  </div>
</template>

<script>
export default {};
</script>
...