角度材料输入与插件

Question

我正在尝试使用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个字段未对齐。

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

Answer 1

我找到了使用<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>是一些不存在的图标字体库，以确保data holidays; format holiday_date date9.; informat holiday_date date9.; input holiday_date; datalines; 01JAN2015 19JAn2015 16FEB2015 03APR2015 25MAY2015 03JUL2015 07SEP2015 26NOV2015 25DEC2015 ; data _dates; firstday = intnx('month',today(),0); format firstday date date9.; do date=firstday to firstday+5; if 1 < weekday(date) < 7 then output; end; run; proc sql noprint; delete from _dates where date in (select holiday_date from holidays); quit; data _null_; set _dates(firstobs=2); call symput("secondWorkDay",put(date,date9.)); stop; run; %put &secondWorkDay; 内的文字不会被解释为材质图标。

现在它很好地对齐了：

您可以在此处查看有效的解决方案：Cookbook For R

Answer 2

我只想找到一种方法来实现这一点，因为当你希望附加组件包含多于一个字符的东西时，使用flexbox。

flex="80"

重要部分是input元素上的flex和span上的input。这告诉span占用80％的空间，而{{1}}填补剩余空间（至少我认为是这样 - 我还在学习flexbox）。

最终结果如下：

endl

Answer 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>

您的评论的屏幕截图：