材质2个按钮Css造型角度5

Question

在Angular 5项目中，我对material2的按钮使用得非常满意。

我在为按钮设置样式时遇到麻烦，该按钮的旋转角度为90°。

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

我的问题是material2的按钮的悬停和波纹比原始按钮的div宽，而不是外部按钮div的宽。

我可以将其“ hack”到提交中，这很好，我已经为文本完成了此操作，但是我无法选择或影响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>

css：

  .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

我设法解决了这个困惑，这是在我对无范围的样式感到满意的范围内。

不受范围限制的样式是您访问非您自己样式的组件（ 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导致从视口边界偏移。

::ng-deep允许取消作用域。

🚨小心this

请注意，我将其包装在自己的类名中，以便仅在该类名禁止的那个垂直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填充的。 这就是为什么它将被覆盖的原因。