带插件的角度材料输入答案

【问题标题】：angular-material input with an addon带插件的角度材料输入
【发布时间】：2015-09-10 13:55:15
【问题描述】：

我正在尝试使用angular-material 创建一个带有额外文本的输入。我想达到与bootstrap's .input-group-addon类似的效果：

我得到的最接近的是this：

<md-content layout-padding>
    <div layout="row" class="md-whiteframe-z1" style="width: 40%">
        <md-select placeholder="Type" ng-model="discount.type" flex="50" class="md-select-full-width">
            <md-option value="AMOUNT">Amount</md-option>
            <md-option value="PERCENT">Percent</md-option>
        </md-select>
        <div flex="50" layout="row" layout-align="center center">
            <md-input-container flex>
                <label>Value</label>
                <input ng-model="discount.value">
            </md-input-container>
            <span>%</span>
        </div>
    </div>
</md-content>

结果如下：

如您所见，这 2 个字段未对齐。

我也尝试在<span>%</span> 上使用vertical-align 而不是layout-align="center center"，但它似乎被忽略了。

【问题讨论】：

你能用你的代码创建 jsfiddle 吗？抱歉，除了主题之外，您似乎正在尝试结合 2 个不同的设计库-材料和引导程序，而您遇到的这个问题可能不是唯一的.. 可能有用，另一个库实现材料设计方法-@ 987654324@
@shershen 我创建了一个 codepen 条目：codepen.io/LukaszWiktor/pen/gpXXxW
@shershen 我只使用了材料，我提到 boostrap 只是作为一个例子来展示我想要实现的目标。

标签： css twitter-bootstrap-3 material-design angular-material

【解决方案1】：

我想出了一个使用<md-icon>的解决方案：

<md-content layout-padding>
    <div layout="row" class="md-whiteframe-z1" style="width: 40%">
        <md-select placeholder="Type" ng-model="discount.type" flex="50" class="md-select-full-width">
            <md-option value="AMOUNT">Amount</md-option>
            <md-option value="PERCENT">Percent</md-option>
        </md-select>
        <div flex="50" layout="row">
            <md-input-container flex>
                <label>Value</label>
                <input ng-model="discount.value">
            </md-input-container>
            <md-icon md-font-set="regular-font">%</md-icon>
        </div>
    </div>
</md-content>

"regular-font" 是一些不存在的图标字体库，以确保 <md-icon> 中的文本不会被解释为 Material 图标。

现在它已经很好地对齐了：

您可以在此处查看有效的解决方案：http://codepen.io/LukaszWiktor/pen/oXoqYg

【讨论】：

【解决方案2】：

当您希望插件包含多个字符而不是单个字符时，我也想出了一种方法来使用 flexbox。

<md-input-container flex>
    <label>Length</label>
    <input type="number" ng-model="length" flex="80">
    <span flex>seconds</span>
</md-input-container>

重要部分是input 元素上的flex="80" 和span 上的flex。这是告诉 input 占用 80% 的空间，并让 span 填充剩余空间（至少我是这么认为的——我还在学习 flexbox）。

最终结果如下所示：

【讨论】：

【解决方案3】：

我用这种方式让它看起来更像引导样式：

<md-input-container class="md-block">
     <label for="discount">Discount</label>
     <input style="text-align: right; padding-right: 15px;" type="text" id="discount" ng-model="discount" ng-change="updateDiscount()">
     <span style="margin-top: 5px; position: absolute; right: 0;">%</span>
</md-input-container>

供您查看的屏幕截图：

【讨论】：