如何在 Angular 8 中为我的按钮创建 container/palette？

Question

我想为我网页中的一些按钮创建一个 container/palette（我真的不知道该怎么称呼它），以便将它们放入其中并更改它们的背景颜色和一些其他效果。

您可以在下图中看到我的意思，页面左侧栏中有 3 个按钮（问题、操作、输出）：

Answer 1

did you mean that you want to apply some style to each button(Question, Action, Output)?

<button>Question</button>
<button>Action</button>
<button>Output</button>

button{
    background-color: rgb(2, 70, 70);
    border-radius: 10px;
    padding: 5px;
    color: #fff;
    border: 1px solid rgb(2, 70, 70);
    width: 10%;
  }

Answer 2

您可以将按钮放在标签（父标签）中，并对父标签应用一些样式，例如：

.button-box {
 height: 100vh;
 background: #3a8484;
 width: 10vw;
 padding: 10px;
 border-radius: 3px;
}

button {
 background-color: rgb(2, 70, 70);
 border-radius: 10px;
 padding: 5px;
 color: #fff;
 border: 1px solid rgb(2, 70, 70);
 width: 100%;
 display: block;
 margin-bottom: 5px;
}

<div class="button-box">
   <button>Question</button>
   <button>Action</button>
   <button>Output</button>
</div>

如何在 Angular 8 中为我的按钮创建 container/palette？

How to create a container/palette for my buttons in Angular 8?

html

containers

palette

angular-material

angular