如何在屏幕的左侧和右侧放置 Angular Material 单选按钮？

Posted 2023-03-05

【中文标题】如何在屏幕的左侧和右侧放置 Angular Material 单选按钮？

【英文标题】：How to position Angular Material radio buttons at the left and the right of the screen?

【发布时间】：2019-05-06 14:47:30

【问题描述】：

在使用 Angular Material 单选按钮时，我想在 2 个方向上制作它们 -> 屏幕左侧的 2 个和屏幕最右侧的 2 个。

在手风琴内，我有 4 个单选按钮选项，我想将其中 2 个放在左侧，2 个放在最右侧。

我正在使用mat-radio-button 来完成此操作。 在下面的代码中，我在左侧找到了按钮，但想在右侧放置更多按钮，如下图所示。

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

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

component.ts，其中定义了单选按钮的内容：

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

单选按钮定位：

【问题讨论】：

您忘记附加图片了。无论如何，也许可以查看 Bootstrap 的 flexbox 实用程序类。

@JonathanWilson，谢谢现在附上图片

@JonathanWilson，我可以使用带有角度材料的引导 flex 类吗？

是的，为什么不呢？您已经在混合这两个库

你也可以只使用float-right Bootstrap 类

【参考方案1】：

您可以尝试使用 flexbox 并将两个按钮组合在一起。像这样的：

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>

DEMO

---

您可以自定义 mat-radio-button 样式如下：

mat-radio-button:nth-child(3)
   float:right


mat-radio-button:nth-child(4)
   float:right

这会将选项 3 和 4 向右推，并在两组按钮之间创建一个间隙。

DEMO

---

【讨论】：

我在手机上看不到演示，但我想justify-content: space-between 会产生一个不错的安排。

@Vega，嘿，我一直在使用此 flex 对齐的模板不起作用，关于可能的问题的任何想法

@Vega，我一直在我的项目文件夹中使用相同的 html、css 和 ts 文件，没有进行任何更改，还没有工作，不太确定如何更新演示，会不会与模板或什么有关？我怎么能和你分享呢。

@Vega，非常感谢您的帮助，但在我的模板中仍然无法正常工作，它只是影响单选按钮对齐的 css 还是其他东西？

@Vega，非常感谢您会检查它，如果有任何疑问，请回复您。