web-dev-qa-db-ja.com

マットラジオボタンとオプションを画面の右側に配置する-Angular 6

angularマテリアルラジオボタンを使用しているときに、2つの方向にそれらを作成したかった->画面の左側に2つ、画面の右端に2つ。マットラジオを使用しています-これを実現するためのボタン。以下のコード行を添付します。このコードを使用すると、左側にボタンがあります。以下に添付されている画像のように、右側にもう少し配置したいと思います。コードの説明-アコーディオン内に4つのラジオボタンがあります。左側に2つ、右側に2つ配置したいオプション。

<mat-accordion>
<mat-expansion-panel [expanded]="step === 0" (opened)="setStep(0)">
<mat-expansion-panel-header>
<h3 class="m-portlet__head-text">
        Basic Details
</h3>                                   
</mat-expansion-panel-header>
<div class="m-form m-form--fit m-form--label-align-right m-form--group-seperator">
<div class="m-portlet__body">
<div class="form-group m-form__group row">
<div class="m-radio-list">
<mat-radio-group class="example-radio-group" (change)="changeComboo($event)" [(ngModel)]="choosePolicyType">
<p>
<mat-radio-button class="example-radio-button" *ngFor="let pType of policyTypes" [value]="pType">
                        {{pType}}
</mat-radio-button>
</p>
</mat-radio-group>
</div>
</div>

<div *ngIf="choosePolicyType=='Individual'">


<div class="form-group m-form__group row" >
<div class="col-lg-6">
<mat-form-field appearance="outline">
                <mat-label>First Name</mat-label>
                <input matInput placeholder="">
            </mat-form-field>
            <label class="col-lg-2 col-form-label"></label>

            <mat-form-field appearance="outline">
                    <mat-label>Last Name</mat-label>
                    <input matInput placeholder="">
            </mat-form-field>
</div>

</div>

上記はhtml->テンプレートコードであり、以下はラジオボタンの内容が定義されているcomponent.tsコードの一部を添付しています。

    choosePolicyType: string;  
policyTypes: string[] = ['Individual','Business'];

ラジオボタンの配置：

enter image description here

cssangularradio-buttonangular6angular-material-6
4
anglrlearner

マットラジオボタンのスタイルは、次のようにカスタマイズできます。

mat-radio-button:nth-child(2){
  margin-right: 40px;
}

これにより、2つのボタングループの間にギャップが作成されます。

[〜＃〜]デモ[〜＃〜]

CSS：

.mat-radio-group{
  display:flex ;
  width:100%;
  font-size:0.5em;
  justify-content: space-between;
}

HTML：

<mat-radio-group class="myGroup">
    <span class="group1">
       <mat-radio-button value="1">Option 1</mat-radio-button>
       <mat-radio-button value="2">Option 2</mat-radio-button>
    </span>
    <span class="group2">
       <mat-radio-button value="3">Option 3</mat-radio-button>
       <mat-radio-button value="4">Option 4</mat-radio-button>
     </span>
</mat-radio-group>

[〜＃〜]デモ[〜＃〜]

3
Vega