Цветная кнопка в Google AppScript - PullRequest
Новая
       1

Цветная кнопка в Google AppScript

0 голосов
/ 07 мая 2019

Как я могу изменить цвет кнопки, которая находится на персонализированной боковой панели?

это мои HTML-файлы, и я не знаю, как я могу изменить цвет каждой кнопки, у меня есть цветовой код каждого цвета, который я хочу 

<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<!DOCTYPE html>
<html>
  <head>
    <base target="_top"> 

  </head>

  <body>
    Hello, dear I-Care's member!<br/><br/>
    Ajouter des jours Inexistants!<br/>
    <input type="button" value="Inexistants" onclick="google.script.run.JoursInexistants()" /><br/><br/>
    Ajouter des jours Mensuel!<br/>   
    <input type="button" value="Mensuel" onclick="google.script.run.JoursMensuel()" /><br/><br/>
    Ajouter des jours Férié!<br/>    
    <input type="button" value="Férié" onclick="google.script.run.JoursFerie()" /><br/><br/>
    Ajouter des jours de Congé!<br/>    
    <input type="button" value="Congé" onclick="google.script.run.JoursConge()" /><br/><br/>
    Ajouter des jours Possible!<br/>    
    <input type="button" value="Possible" onclick="google.script.run.JoursPossible()" /><br/><br/>
    Ajouter des jours en Plus!<br/>    
    <input type="button" value="Plus" onclick="google.script.run.JoursEnPlus()"/><br/><br/>
    Ajouter des jours Weekend!<br/>    
    <input type="button" value="Weekend" onclick="google.script.run.JoursWeekend()" /><br/><br/>
    Remettre à zéro!<br/>    
    <input type="button" value="Blanc" onclick="google.script.run.JoursBlanc()" /><br/><br/><br/>
    <input type="button" value="Close" onclick="google.script.host.close()" />
    <button class="share">Share</button>
    <button>Close</button>
  </body>
</html>

Ответы [ 2 ]

1 голос
/ 07 мая 2019

Ну, вы могли бы использовать CSS, чтобы раскрасить свои кнопки.

Предполагая, что вы поместите класс на каждую кнопку, названную нужным вам цветом. 

<input type="button" class="red" value="Inexistants" onclick="google.script.run.JoursInexistants()" />
    <p>Ajouter des jours Mensuel!</p> 
<input type="button" class="blue" value="Mensuel" onclick="google.script.run.JoursMensuel()" />
    <p>Ajouter des jours Férié!</p>    
<input type="button" class="yellow" value="Férié" onclick="google.script.run.JoursFerie()" />
    <p>Ajouter des jours de Congé!</p>    

...

input {
    display: block;
}

.red {
    background-color: red;
}

.blue {
    background-color: blue;
}

.yellow {
    background-color: yellow;
}

Вы также можете сделатьнекоторые другие улучшения с CSS.Например, я поставил display: block и <p></p> вместо большого количества <br/>.

Вы также можете использовать <for></for> вместо <p></p> в форме.

0 голосов
/ 07 мая 2019

Используйте встроенный CSS , чтобы указать background-color .

<input style="background-color:#4CAF50" type="button" value="Inexistants" onclick="google.script.run.JoursInexistants()" />

Вы могли бы также рассмотреть некоторые другие способы указания стилей, которые могут быть более полезными, например, если вы хотите, чтобы несколько кнопок имели одинаковый цвет.(На самом деле это очень рекомендуется. Однако это не требуется, особенно если вы не очень хорошо знакомы с понятиями. Иногда лучше просто заставить его выглядеть так, как вы хотите, а затем сделать его «правильным».)

https://www.w3schools.com/css/css_howto.asp

Я думаю, вам также нужно переместить тег ссылки в самом верху вашего документа в теги <head></head>, как показано ниже. 

<!DOCTYPE html>
<html>
  <head>
    <base target="_top"> 
    <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
  </head>

  <body>
    Hello, dear I-Care's member!<br/><br/>
    Ajouter des jours Inexistants!<br/>
    <input type="button" value="Inexistants" onclick="google.script.run.JoursInexistants()" /><br/><br/>
    Ajouter des jours Mensuel!<br/>   
    <input type="button" value="Mensuel" onclick="google.script.run.JoursMensuel()" /><br/><br/>
    Ajouter des jours Férié!<br/>    
    <input type="button" value="Férié" onclick="google.script.run.JoursFerie()" /><br/><br/>
    Ajouter des jours de Congé!<br/>    
    <input type="button" value="Congé" onclick="google.script.run.JoursConge()" /><br/><br/>
    Ajouter des jours Possible!<br/>    
    <input type="button" value="Possible" onclick="google.script.run.JoursPossible()" /><br/><br/>
    Ajouter des jours en Plus!<br/>    
    <input type="button" value="Plus" onclick="google.script.run.JoursEnPlus()"/><br/><br/>
    Ajouter des jours Weekend!<br/>    
    <input type="button" value="Weekend" onclick="google.script.run.JoursWeekend()" /><br/><br/>
    Remettre à zéro!<br/>    
    <input type="button" value="Blanc" onclick="google.script.run.JoursBlanc()" /><br/><br/><br/>
    <input type="button" value="Close" onclick="google.script.host.close()" />
    <button class="share">Share</button>
    <button>Close</button>
  </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...