вход углового материала с аддоном

Я пытаюсь создать ввод с дополнительным текстом после него, используя angular-material. Я хочу, чтобы достичь такого же эффекта, как с bootstrap's .input-group-addon: enter image description here вход углового материала с аддоном

Ближайший я получил это 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>

Что дает следующий результат: enter image description here

Как вы можете видеть 2 поля перекос.

Я также пытался использовать vertical-align на <span>%</span> вместо layout-align="center center", но он, кажется, игнорируется.

источник

2015-06-24 Lukasz Wiktor

Вы можете создать jsfiddle с помощью код? извините за оффтоп, помимо темы, кажется, что вы пытаетесь объединить две разные дизайнерские библиотеки - материал и бутстрап, и эта проблема у вас может быть не единственной. Возможно, может быть полезно, другая библиотека, реализующая подход к материальному дизайну - http : //materializecss.com/forms.html – shershen

@shershen Я создал запись codepen: http://codepen.io/LukaszWiktor/pen/gpXXxW –

@shershen Я использую только материал, и я упомянул boostrap так же, как например, чтобы показать, чего я хочу достичь. –

я понял, решение с помощью <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> не будет истолкован как материал значок.

Теперь это хорошо выровнены:

enter image description here

Вы можете увидеть здесь рабочий раствор: http://codepen.io/LukaszWiktor/pen/oXoqYg

источник

2015-06-24 15:26:06

Я просто понял, способ сделать это тоже, когда вы хотели бы, add- чтобы содержать нечто большее, чем один символ, используя flexbox.

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

важные детали flex="80" на input элемента и flex на span. Это говорит о том, что input занимает 80% пространства, а для span, чтобы заполнить остаток (по крайней мере, я так думаю, я все еще изучаю flexbox).

Конечный результат выглядит следующим образом:

источник

2016-02-09 09:29:39 surfitscrollit

Я сделал это выглядит немного более похожий стиль самозагрузки таким образом:

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

Скриншот для обзора:

источник

2017-05-07 20:28:55 vipa

вход углового материала с аддоном

ответ

Смежные вопросы