or
h" />

Angular Material在中间用单词制作水平线的方法

css angularjs angular-material

13639 观看

3回复

使用Angular Material,我正在尝试创建一个水平线,中间有一个单词。与此处显示的非常相似的东西。

我试过这个并且它很接近,但我希望这些线垂直对齐到单词的中间

<div layout="row" layout-align="center start">
  <md-divider flex></md-divider>
  <div style="flex: 0 1 auto;">or</div>
  <md-divider flex></md-divider>
</div>

http://jsfiddle.net/devotis/a7m6xrwy/

我猜,我需要左右风格<hr>。如何改进此代码并保持Angular Material的方式?

作者: Christiaan Westerbeek 的来源 发布者: 2019 年 8 月 25 日

回应 (3)


9

决定

一个很好的方法是使用layout =“row”和flex。

<span layout="row"><hr flex/>or<hr flex/></span>

JS小提琴将这个想法应用于按钮文本:http//jsfiddle.net/a7m6xrwy/1/

您可以使用css设置hr属性的样式。md-divider指令不应该以这种方式使用,因此没有理由尝试强制它。如果您希望使用指令来解决此问题,则必须编写自己的md-divider指令,该指令将显示文本作为参数。

作者: soote 发布者: 25.05.2015 09:06

2

对于使用角度材料2和flex-layout的人来说,这是我的解决方案。不完全令人满意,但它确实有效。

<div fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="5px">
  <mat-divider fxFlex="1 0"></mat-divider>
  <div>or</div>
  <mat-divider fxFlex="1 0"></mat-divider>
</div>
作者: David Bulté 发布者: 06.02.2019 10:53

0

这是使用材料的解决方案mat-divider

<div class="container">
  <div class="line"><mat-divider></mat-divider></div>
  <div class="text mat-typography">Hey there</div>
  <div class="line"><mat-divider></mat-divider></div>
</div>
.container {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.line {
  flex: 1;
}

.text {
  padding-left: 10px;
  padding-right: 10px;
}

结果将如下所示:

在此输入图像描述

作者: rkrishnan 发布者: 18.08.2019 06:11
32x32