Отключить кнопку в SemanticUI, но не заставить ее выглядеть отключенной? - PullRequest
Новая
       23

Отключить кнопку в SemanticUI, но не заставить ее выглядеть отключенной?

0 голосов
/ 10 июля 2019 

document.getElementById("b1").disabled = true;
body {
  padding: 1em;
}
<link href="https://semantic-ui.com/dist/semantic.css" rel="stylesheet"/>
<div class="ui container">
  <button id="b1" class="ui red button">Red</button>
  <button id="b2" class="ui yellow button">Orange</button>
</div>

У меня есть кнопка SemanticUI, и я хочу отключить кнопку (поэтому нажатие на нее ничего не дает), но я не хочусделать его блеклым (кнопка должна выглядеть так же, включена или отключена).

Есть ли простой способ сделать это в SemanticUI?

Ответы [ 2 ]

0 голосов
/ 10 июля 2019

Существует 3 основных различия с состоянием css для :disabled, которые вы можете проверить в инспекторе элементов инструментов разработчика

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

.ui.red.button:disabled {
   opacity:1!important;
   cursor:pointer!important;// not sure if you want these 2
   pointer-events:auto!important;
}
0 голосов
/ 10 июля 2019

Семантический пользовательский интерфейс использует это конкретное правило CSS, чтобы оно выглядело блеклым: 

.ui.button:disabled {
    opacity: 0.45 !important;
}

Вы можете просто установить прозрачность кнопки на 1: 

let btn = document.getElementById("b1");
btn.disabled = true;
btn.style = 'opacity: 1 !important';


let btn = document.getElementById("b1");
btn.disabled = true;
btn.style = 'opacity: 1 !important';
body {
  padding: 1em;
}
<link href="https://semantic-ui.com/dist/semantic.css" rel="stylesheet"/>
<div class="ui container">
  <button id="b1" class="ui red button">Red</button>
  <button id="b2" class="ui yellow button">Orange</button>
</div>
...