Angular Material word中间横线的方法

Question

使用 Angular Material, I'm trying to create a horizontal line with a word in the middle. Something pretty similar to the one displayed here.

我试过了，效果很接近，但我希望线条垂直对齐到单词的中间或。

<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 的方式之内？

Answer 1

一个很好的方法是使用 layout="row" 和 flex.

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

JS fiddle 将此想法应用于按钮文本：http://jsfiddle.net/a7m6xrwy/1/

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

Answer 2

对于使用 angular material 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>

Answer 3

这是一个使用 material 的 mat-divider 的解决方案：

<h1>Divider with text</h1>

<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;
}

结果将如下所示：

Answer 4

这会很有效。

<mat-divider style="width: 40%; display: inline-block;"></mat-divider>
<span style="padding: 20px; font-weight: 500;">Or</span>
<mat-divider style="width: 40%; display: inline-block;"></mat-divider>

PS：您可以将内联样式提取为有意义的 CSS 类。为简洁起见，此处省略。

输出：

Angular Material word中间横线的方法

Angular Material way of making a horizontal line with word in the middle

css

angularjs

angular-material