MazRadioButtons

MazRadioButtons is a standalone component to select a value in a list. Made with native HTMLInputElement type radio

INFO

Before you have to import the global css files in your project, follow instructions in Getting Started

Basic usage

Custom slot template

Orientation - Column

vue

<template>
  <MazRadioButtons
    v-model="selectedCompetition"
    :options="competitions"
    orientation="col | row"
    v-slot="{ option, selected }"
  >
    <div style="display: flex;">
      <MazAvatar
        v-if="option.areaEnsignUrl"
        :src="option.areaEnsignUrl"
        style="margin-right: 16px;"
        size="0.8rem"
      />
      <div style="display: flex; flex-direction: column;">
        <span>
          {{ option.label }}
        </span>
        <span :class="{ 'maz-text-muted': !selected }">
          {{ option.areaName }}
        </span>
      </div>
    </div>
  </MazRadioButtons>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'

  import MazRadioButtons from 'maz-ui/components/MazRadioButtons'
  import MazAvatar from 'maz-ui/components/MazAvatar'

  const selectedCompetition = ref<string>()

  const competitions = [
    {
      value: "1",
      label: "Ligue 1",
      areaName: "France",
      areaEnsignUrl: "https://upload.wikimedia.org/wikipedia/en/c/c3/Flag_of_France.svg",
    },
    {
      value: "2",
      label: "Premier League",
      areaName: "England",
      areaEnsignUrl: "https://crests.football-data.org/770.svg",
    },
    {
      value: "3",
      label: "Bundesliga",
      areaName: "Germany",
      areaEnsignUrl: "https://upload.wikimedia.org/wikipedia/commons/b/ba/Flag_of_Germany.svg",
    },
    {
      value: "4",
      label: "Eredivisie",
      areaName: "Netherlands",
      areaEnsignUrl: "https://upload.wikimedia.org/wikipedia/commons/2/20/Flag_of_the_Netherlands.svg",
    },
    {
      value: "5",
      label: "Serie A",
      areaName: "Italy",
      areaEnsignUrl: "https://upload.wikimedia.org/wikipedia/en/0/03/Flag_of_Italy.svg",
    },
    {
      value: "6",
      label: "Primera Division",
      areaName: "Spain",
      areaEnsignUrl: "https://upload.wikimedia.org/wikipedia/en/9/9a/Flag_of_Spain.svg",
    },
    {
      value: "7",
      label: "Primeira Liga",
      areaName: "Portugal",
      areaEnsignUrl: "https://upload.wikimedia.org/wikipedia/commons/5/5c/Flag_of_Portugal.svg",
    },
    {
      value: "8",
      label: "UEFA Champions League",
      areaName: "Europe",
      areaEnsignUrl: "https://crests.football-data.org/EUR.svg",
    }
  ]
</script>

Selector icon with options equal-size

This option will display a select icon on the left of the label

Scores

Predict the score of matches. If you find the outcome of the match you win 5 points, if you get the perfect score you double your score!

Cotes

Predict with match odds. If you find the correct winner of the match you earn the points associated with the rating, if you have the perfect score you double your score.

Types

options

The options prop is an array of ButtonsRadioOption type

export type ButtonsRadioOption = {
  /** The label of the option */
  label: string
  /** The value of the option */
  value: string | number | boolean
  /** The classes to apply to the option */
  classes?: any
  /** The style to apply to the option */
  style?: StyleValue
} & Record<string, unknown>

MazRadioButtons ​

Basic usage ​

Custom slot template ​

Orientation - Column ​

Selector icon with options equal-size ​