html 使用无线电输入创建的按钮组。

Posted 2021-05-11

/////////////////////////////////////////////
//
// Button group
//
// Structure:
//   <div>
//     <input:radio.buttonGroup__radio>
//     <label>
//     ...
@mixin button__group(
  $selected_bg: $color_off_white,
  $selected_color: $color_secondary,
  $border_radius: .15em
) {
  display: flex;
  flex-flow: row nowrap;

  &-radio {
    display: none;

    &:checked {
      + label {
        background-color: $selected_bg;
        color: $selected_color;
      }
    }
  }

  &-label {
    @include custom_transition();
    border: 1px solid $selected_bg;
    color: $selected_bg;
    cursor: pointer;
    padding: .6em .6em .5em;
    text-align: center;

    &:not(:last-of-type) {
      border-right: 0;
    }

    &:first-of-type {
      border-radius: $border_radius 0 0 $border_radius;
    }

    &:last-of-type {
      border-radius: 0 $border_radius $border_radius 0;
    }
  }
}


.types {
  &__prices {
    @include button__group();
    font-size: 1.4rem;
    margin: 1rem auto 2rem;
  }
}

<div class="types__prices">

  <input
    class="types__prices-radio"
    type="radio"
    id="{{ child._id }}"
    data-ng-repeat-start="child in vm.type.children | orderBy:'priority' track by child._id"
    data-ng-model="vm.selectedChild"
    data-ng-value="child"
  >

  <label
    class="types__prices-label"
    for="{{ child._id }}"
    data-ng-repeat-end
  >
    {{ ::child.price.totalCost | dollars:0 }}
  </label>
</div>