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 */
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  classes?: any
  /** The style to apply to the option */
  style?: StyleValue
} & Record<string, unknown>

Props, Event & Slots

Props

Prop name	Description	Type	Values	Default
modelValue	`@model` The value of the selected option	union	-	undefined
options	The options to display	Array	-
name	The name of the radio group	string	-	'MazButtonsRadio'
color	The color of the selected radio buttons	Color	-	'primary'
elevation	Add elevation to the radio buttons	boolean	-	false
orientation	The orientation of the radio buttons `@values` 'row' \| 'col'	union	-	'row'
noWrap	Disable the wrap of the radio buttons	boolean	-	false
equalSize	Make all radio buttons the same size	boolean	-	false
selector	Display a selector icon	boolean	-	false
block	The component will be displayed in full width	boolean	-	false

Events

Event name	Properties	Description
update:model-value	value `mixed` - The value of the selected option	Emitted when the selected option change
change	value `mixed` - The value of the selected option	Emitted when the selected option change

Slots

Name	Description	Bindings
default	Label of the radio	option `string \| number \| boolean` - The value of the option selected `Boolean` - If the option is selected

MazRadioButtons ​

Basic usage ​

Custom slot template ​

Orientation - Column ​

Selector icon with options equal-size ​

Scores

Cotes

Types ​

options ​

Props, Event & Slots ​

Props ​

Events ​

Slots ​