Question

我正在尝试使按钮组的宽度恒定，不应受其中按钮数量的影响。我正在粘贴我的stackblitz链接和想要的结果图像。

https://stackblitz.com/edit/angular-r9zyb9?file=styles.css

如您在图像中所见，按钮的宽度由于其数量而改变，但是按钮组的宽度是恒定/相同

Answer 1

我知道来晚了，但是我找不到问题的答案，因为我遇到了山姆问题。

与此同时，MaterialDesigns 1.2.0-alpha01已更新

在扩展RelativeLayout之前。现在，材质切换组正在扩展LiniearLayout，因此您可以使用android：layout_weight =“”来适应父视图中childViews的百分比。这是一个代码示例。

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.button.MaterialButtonToggleGroup
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toggle_button_group"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:singleSelection="true"
    app:checkedButton="@+id/toggle_button_2"
    >

    <com.google.android.material.button.MaterialButton
        android:id="@+id/toggle_button_1"
        style="?attr/materialButtonOutlinedStyle"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="1"/>

    <com.google.android.material.button.MaterialButton
        android:id="@+id/toggle_button_2"
        style="?attr/materialButtonOutlinedStyle"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="2"/>

    <com.google.android.material.button.MaterialButton
        android:id="@+id/toggle_button_3"
        style="?attr/materialButtonOutlinedStyle"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="3"/>

</com.google.android.material.button.MaterialButtonToggleGroup>

看起来像这样。

希望这会有所帮助。快乐编码???

Answer 2

使用Bootstrap可以实现这一目标。

<mat-button-toggle-group name="fontStyle" aria-label="Font Style" class="row">
  <mat-button-toggle value="bold" class="col-sm">Bold</mat-button-toggle>
  <mat-button-toggle value="italic" class="col-sm">Italic</mat-button-toggle>
  <mat-button-toggle value="underline" class="col-sm">Underline</mat-button-toggle
</mat-button-toggle-group>

有效的堆叠闪电战https://stackblitz.com/edit/angular-r9zyb9-uholwy

谢谢。

Answer 3

您可以应用一些CSS来完成此操作，出于演示目的，我通过HTML中的内联样式对其进行了应用，以便可以看到它的作用，但是可以根据需要使用自定义类。

您首先设置组的宽度和边距...在这里，我做的是视口宽度的80％。

<mat-button-toggle-group name="fontStyle" aria-label="Font Style" style="width:80vw; margin:1%">

然后将您按钮的全部宽度设置为100％，这将平均整个容器在按钮数量上的总宽度。

<mat-button-toggle value="bold" style="width:100%">Bold</mat-button-toggle>

Stackblitz

https://stackblitz.com/edit/angular-r9zyb9-j6nu3j?embed=1&file=app/button-toggle-overview-example.html

按钮组的角材料恒定宽度

3 个答案: