Как изменить angular -материальные компоненты радио-кнопки? - PullRequest
Новая
       60

Как изменить angular -материальные компоненты радио-кнопки?

0 голосов
/ 09 июля 2020

Я попытался изменить переключатель компонента с помощью css в моем коде, но, похоже, это не работает.

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

Радиокомпозит в моем xxx.component. html выглядит так: 

<mat-radio-group
   class="radio-group"
   [(ngModel)]="model">
   <mat-radio-button class="radio-button" *ngFor="let element of list" [value]="element.Id">
        {{element.name}}
   </mat-radio-button>
</mat-radio-group>

Радиокомпонент в chrome выглядит так: 

<mat-radio-group class="mat-radio-group radio-group">
   <mat-radio-button class="mat-radio-button radio-button">
      <label class="mat-radio-label">
         <div class="mat-radio-container">...</div>
         <div class="mat-radio-label-content">...</div>
      </label>
   </mat-radio-button>
   ...
</mat-radio-group>

Я пытался изменить класс «mat-radio-container» и поставить «left: 100%! Important», но это не сработало . Кажется, что я не могу изменить поведение подклассов, если я изменяю радиогруппу классов или радиокнопку, которую я создал, я могу влиять на компонент, но я не могу изменить мат-радио-контейнер или мат -radio-label-content для примера.

Весь тест, который я сделал, был в xxx.component.s css

Кто-нибудь знает, как я могу разместить эту кнопку справа или как я могу изменить «подклассы» этого элемента только в этом компоненте?

редактировать: я хочу, чтобы метка была выровнена слева от родительского div, а кнопка выровнена по правому краю родительского div, а не ярлык слева и кнопка закрыта на ярлык.

Ответы [ 2 ]

0 голосов
/ 09 июля 2020

Итак, я нашел решение с помощью Санта:

HTML: 

          <mat-radio-group
            class="radio-group"
            [(ngModel)]="xxx">
                <div *ngFor="let element of list">
                    <div class="left-radio-button">
                        {{element.name}}
                    </div>
                    <div class="right-radio-button">
                        <mat-radio-button class="radio-button" [value]="element.id">                
                        </mat-radio-button>
                    </div>
                </div>
           </mat-radio-group>

CSS: 

.left-radio-button {
  width:95%;
  display: inline-block;
}

.right-radio-button {
  width:5%;
  display: inline-block;
}
0 голосов
/ 09 июля 2020

Так как "element.name" будет просто меткой для этого конкретного переключателя, можете ли вы поместить интерполяцию 

{{element.name}}

только слева в 

<mat-radio-button>

теги, похоже, работают, см. пример для справки,

Пример Stackblitz,

...