Как настроить цвет фона кнопки отмены в b-модале? - PullRequest
Новая
       10

Как настроить цвет фона кнопки отмены в b-модале?

0 голосов
/ 01 октября 2019

Мне нужно изменить цвет фона кнопки отмены с помощью rgb. Единственный путь до сих пор - это изменение варианта отмены, например, на опасность. Тем не менее, мне нужно выбрать конкретный цвет RGB. Кто-нибудь знает решение моей проблемы? Спасибо 

<b-modal v-bind:id="'delete-modal-' + id" cancel-variant=info ok-variant=danger ok-title="delete" cancel-title="back" @ok="deleteModal" title="Caution">
  <p class="my-4">Are you sure?</p>
</b-modal>

1 Ответ

1 голос
/ 01 октября 2019

Если вы используете SASS, вы можете легко добавлять новые варианты в свой проект, добавляя их на карту $theme-colors. Они автоматически становятся доступными для использования с bootstrap-vue везде, где вы можете использовать вариант.

custom.scss

$theme-colors: (
  "cancel": rgb(139, 80, 80)
);

@import 'node_modules/bootstrap/scss/bootstrap';
@import 'node_modules/bootstrap-vue/src/index.scss';

Затем импортируйте custom.scss в точку входа ваших приложений.

Если вы хотите простое решение CSS, свойство cancel-variant просто добавляет класс btn-*, где * - указанная вами строка.

Это означает, что вы можете добавить приведенную ниже CSS в свою глобальную таблицу стилей,чтобы добавить новый вариант (однако, делая это таким образом, вам придется написать все: hover,: active stuff самостоятельно) 

.btn-cancel {
  color: #fff;
  background-color: rgb(213, 213, 213);
  border-color: rgb(213, 213, 213);
}

После добавления одного из вариантов выше у вас теперь будет возможность<b-modal cancel-variant="cancel"></b-modal> использовать ваш новый вариант.

...