html - Material 2 按钮 Css 样式 Angular 5

Question

我在我的 Angular 5 元素中对 material2 的按钮的使用非常满意。

我在设计按钮样式时遇到了问题，该按钮应该带有 90° 旋转文本。

为了干净地做事，我正在旋转包含文本的内部 div，而不是整个外部 div。

我的问题是 material2 按钮的悬停和波纹比外部按钮 div 的宽度更适合原始文本的宽度。

我可以接受必须将其“修改”为提交，我已经为文本完成了此操作，但我无法设法选择或影响 mat-button-focus-overlay或 mat-button-ripple。

另外，如果我想要屏幕右侧边缘的那个按钮，这会变得更加棘手:

我是不是用错了方法？

html:

<button class="my-button with-round-borders" mat-button>
  <div class="inner-text">
    Valider
  </div>
</button>
<button class="curvy-button-left absolute-postition" mat-button>
  <div class="inner-text rotate-left rectify-inner-text">
    Filtres
  </div>
</button>

样式:

  .my-button{
    margin: 2px 0 0 18px;
    width: 160px;
    line-height: 38px;
    border: 1px solid $transparent;
    background-color: $col;
    color: white;
    &:focus{
      outline: none;
    }
  }
.absolute-postition{
  position: absolute;
  top: 70px;
  height: 160px;
}
.rectify-inner-text{
  margin-left: -61px;
}
  .inner-text{
    @extend %ellipsis;
    color: white;
  }
  .with-round-borders{
    border-radius: 50px;
  }
  .rotate-left {
    display:inline-block;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    -webkit-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
  }
  .curvy-button-left{
    background-image:
      radial-gradient(circle at bottom right,transparent 50%, $col 55%),
      radial-gradient(circle at bottom left,$col 50%,transparent 55%),
      radial-gradient(circle at top left,$col 50%,transparent 55%),
      radial-gradient(circle at top right,transparent 50%,$col 55%),
      linear-gradient($col,$col),
      linear-gradient($col,$col);
    background-position:0 150px,20px 10px,20px 140px,0 0,0px 10px,20px 20px;
    background-size:16px 10px,16px 10px,16px 10px,16px 10px,20px 140px,10px 120px;
    background-repeat:no-repeat;
  }

Answer 1

我在对无范围样式的满意范围内设法解决了这个谜题。

Unscoped Styling 是您访问非您自己样式的组件的地方 (https://angular.io/guide/component-styles):

.special{
  ::ng-deep .mat-button-ripple, ::ng-deep .mat-button-focus-overlay{
    width: 36px !important;
    height: 160px !important;
  }
}

比 36px 厚导致溢出到“另一侧”或“其他页面”，因为这两个按钮背靠背。比 36px 更薄导致从视口(viewport)边界偏移。

::ng-deep 允许取消范围。

🚨 小心这个 🚨

请注意，我将其包装在我自己的类名中，以便仅在特定 div 的上下文中取消作用域，禁止该类名而不是其他(例如，没有更高的):

  <button class="curvy-button-left absolute-postition special" mat-button>
    <div class="inner-text rotate-left rectify-inner-text">Filtres</div>
  </button>

注意那里添加的 special 类。这就是我以受控方式使用 ::ng-deep 的方式。

对于必须与右屏幕边缘对齐的按钮，黑客数量更多:

.rectify-inner-text{
  height: 48px;
  margin-right: 12px;
  color: white;
}

.absolute-postition{
  position: absolute;
  top: 70px;
  height: 160px;
  right: -52px;
}

不要忘记:

outline: 0 !important;

处理单击后删除添加的选择边框。这必须与按钮元素放置在同一级别。

结果如下:

我尝试像设置按钮一样设置背景形状，但它被忽略了。

我的预期和我猜测的一样，我猜我们看到的波纹和颜色是通过 js 填充的，而不是通过 css 填充的。这就是为什么它将被覆盖。