Web Components Radio y Grupo de Radio

El componente Radio Ignite UI for Web Components permite al usuario seleccionar una sola opción de un conjunto de opciones disponibles que se enumeran una al lado de la otra.

Ejemplo de Ignite UI for Web Components radio

import {defineComponents, IgcRadioComponent, IgcRadioGroupComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcRadioComponent, IgcRadioGroupComponent);
export class RadioGroup {
  constructor() {
  }
}

new RadioGroup();
ts

<!DOCTYPE html>
<html>
    <head>
        <title>Radio Group</title>
        <meta charset="UTF-8" />

        <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
        <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
    </head>

    <body>
        <div id="root">
            <div class="container sample">
                <div style="width: 400px; border: 1px solid gainsboro">
                    <igc-radio-group>
                        <igc-radio name="fruit" value="apple">Apple</igc-radio>
                        <igc-radio name="fruit" value="banana" checked>Banana</igc-radio>
                        <igc-radio name="fruit" value="mango">Mango</igc-radio>
                        <igc-radio name="fruit" value="orange">Orange</igc-radio>
                    </igc-radio-group>
                </div>
            </div>
        </div>
        <!-- This script is needed only for parcel and it will be excluded for webpack -->
        <% if (false) { %>
        <script src="src/index.ts"></script>
        <% } %>
    </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Web Components completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

Uso

En primer lugar, debe instalar el Ignite UI for Web Components ejecutando el siguiente comando:

npm install igniteui-webcomponents
cmd

Antes de utilizar IgcRadioComponent e IgcRadioGroupComponent, debe registrarlos de la siguiente manera:

import { defineComponents, IgcRadioComponent, IgcRadioGroupComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcRadioComponent, IgcRadioGroupComponent);
ts

Para obtener una introducción completa a Ignite UI for Web Components, lea el tema Primeros pasos.

La forma más sencilla de empezar a utilizarlo IgcRadioComponent es la siguiente:

<igc-radio-group>
  <igc-radio>Apple</igc-radio>
  <igc-radio>Banana</igc-radio>
  <igc-radio>Mango</igc-radio>
  <igc-radio>Orange</igc-radio>
</igc-radio-group>
html

El componente IgcRadioComponent no funciona con el elemento <form> estándar. En su lugar, utilice Formulario.

Ejemplos

Etiqueta

Para proporcionar una etiqueta significativa para IgcRadioComponent, simplemente coloque algo de texto entre las etiquetas de apertura y cierre:

<igc-radio>Apple</igc-radio>
html

Puede especificar si la etiqueta debe colocarse antes o después del botón IgcRadioComponent configurando el atributo label-position. Los valores permitidos son before y after (predeterminado):

<igc-radio label-position="before">Apple</igc-radio>
html

El IgcRadioComponent también puede ser etiquetado por elementos externos al mismo. En este caso, el usuario tiene control total para colocar y diseñar la etiqueta de acuerdo con sus necesidades.

<span id="radio-label">Label</span>
<igc-radio aria-labelledby="radio-label"></igc-radio>
html

import {defineComponents, IgcRadioComponent, IgcRadioGroupComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcRadioComponent, IgcRadioGroupComponent);
export class RadioLabel {
  constructor() {
  }
}

new RadioLabel();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Radio Group</title>
    <meta charset="UTF-8" />

    <link
      rel="shortcut icon"
      href="https://static.infragistics.com/xplatform/images/browsers/wc.png"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Kanit&display=swap"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Titillium Web"
    />
    <link
      rel="stylesheet"
      href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"
      type="text/css"
    />
  </head>

  <body>
    <div id="root">
      <div class="container sample">
        <div style="width: 400px; border: 1px solid gainsboro">
          <igc-radio-group>
            <igc-radio name="fruit" label-position="before" value="apple">Apple</igc-radio>
            <div style="display: flex; align-items: center">
              <span id="radio-label">Label</span>
              <igc-radio
                name="fruit"
                label-position="before"
                aria-labelledby="radio-label"
                value="orange"
              ></igc-radio>
            </div>
          </igc-radio-group>
        </div>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>
  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Comprobado

Puede utilizar el atributo checked para activar la radio.

<igc-radio-group>
  <igc-radio>Apple</igc-radio>
  <igc-radio checked>Banana</igc-radio>
  <igc-radio>Mango</igc-radio>
  <igc-radio>Orange</igc-radio>
</igc-radio-group>
html

import {defineComponents, IgcRadioComponent, IgcRadioGroupComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcRadioComponent, IgcRadioGroupComponent);
export class RadioGroup {
  constructor() {
  }
}

new RadioGroup();
ts

<!DOCTYPE html>
<html>
    <head>
        <title>Radio Group</title>
        <meta charset="UTF-8" />

        <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
        <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
    </head>

    <body>
        <div id="root">
            <div class="container sample">
                <div style="width: 400px; border: 1px solid gainsboro">
                    <igc-radio-group>
                        <igc-radio name="fruit" value="apple">Apple</igc-radio>
                        <igc-radio name="fruit" value="banana" checked>Banana</igc-radio>
                        <igc-radio name="fruit" value="mango">Mango</igc-radio>
                        <igc-radio name="fruit" value="orange">Orange</igc-radio>
                    </igc-radio-group>
                </div>
            </div>
        </div>
        <!-- This script is needed only for parcel and it will be excluded for webpack -->
        <% if (false) { %>
        <script src="src/index.ts"></script>
        <% } %>
    </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Inválido

Puede utilizar el atributo invalid para marcar la radio como no válida.

<igc-radio invalid></igc-radio>
html

import {defineComponents, IgcRadioComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcRadioComponent);
export class RadioInvalid {
  constructor() {
  }
}

new RadioInvalid();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Radio Group</title>
    <meta charset="UTF-8" />

    <link
      rel="shortcut icon"
      href="https://static.infragistics.com/xplatform/images/browsers/wc.png"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Kanit&display=swap"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Titillium Web"
    />
    <link
      rel="stylesheet"
      href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"
      type="text/css"
    />
  </head>

  <body>
    <div id="root">
      <div class="container sample">
        <div style="width: 400px; border: 1px solid gainsboro">
          <igc-radio invalid>Invalid</igc-radio>
        </div>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>
  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Desactivado

Puede utilizar el atributo disabled para desactivar la radio.

<igc-radio-group>
  <igc-radio>Apple</igc-radio>
  <igc-radio disabled>Banana</igc-radio>
  <igc-radio>Mango</igc-radio>
  <igc-radio>Orange</igc-radio>
</igc-radio-group>
html

import {defineComponents, IgcRadioComponent, IgcRadioGroupComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcRadioComponent, IgcRadioGroupComponent);
export class RadioDisabled {
  constructor() {
  }
}

new RadioDisabled();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Radio Disabled</title>
    <meta charset="UTF-8" />

    <link
      rel="shortcut icon"
      href="https://static.infragistics.com/xplatform/images/browsers/wc.png"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Kanit&display=swap"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Titillium Web"
    />
    <link
      rel="stylesheet"
      href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"
      type="text/css"
    />
  </head>

  <body>
    <div id="root">
      <div class="container sample">
        <div style="width: 400px; border: 1px solid gainsboro">
          <igc-radio-group>
            <igc-radio name="fruit">Apple</igc-radio>
            <igc-radio name="fruit" disabled>Banana</igc-radio>
            <igc-radio name="fruit">Mango</igc-radio>
            <igc-radio name="fruit">Orange</igc-radio>
          </igc-radio-group>
        </div>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>
  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Alineación de grupo

IgcRadioGroupComponent le permite cambiar fácilmente la direccionalidad de ubicación de los botones de opción que contiene utilizando el atributo alignment. Los valores permitidos son vertical (predeterminado) y horizontal.

<igc-radio-group alignment="horizontal">
  <igc-radio>Apple</igc-radio>
  <igc-radio>Banana</igc-radio>
  <igc-radio>Mango</igc-radio>
  <igc-radio>Orange</igc-radio>
</igc-radio-group>
html

import {defineComponents, IgcRadioComponent, IgcRadioGroupComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcRadioComponent, IgcRadioGroupComponent);
export class RadioGroupAlignment {
  constructor() {
  }
}

new RadioGroupAlignment();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Radio Group Alignment</title>
    <meta charset="UTF-8" />

    <link
      rel="shortcut icon"
      href="https://static.infragistics.com/xplatform/images/browsers/wc.png"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Kanit&display=swap"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Titillium Web"
    />
    <link
      rel="stylesheet"
      href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"
      type="text/css"
    />
  </head>

  <body>
    <div id="root">
      <div class="container sample">
        <div style="width: 430px; border: 1px solid gainsboro">
          <igc-radio-group alignment="horizontal">
            <igc-radio name="fruit">Apple</igc-radio>
            <igc-radio name="fruit" checked>Banana</igc-radio>
            <igc-radio name="fruit">Mango</igc-radio>
            <igc-radio name="fruit">Orange</igc-radio>
          </igc-radio-group>
        </div>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>
  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Formularios

Puede usar los name atributos y value cuando use la radio con Form.

<igc-radio-group>
  <igc-radio name="fruit" value="apple">Apple</igc-radio>
  <igc-radio name="fruit" value="banana">Banana</igc-radio>
  <igc-radio name="fruit" value="mango">Mango</igc-radio>
  <igc-radio name="fruit" value="banana">Orange</igc-radio>
</igc-radio-group>
html

Estilo

The IgcRadioComponent component exposes several CSS parts (base, control, and label) to give you full control over its styling.

igc-radio::part(control) {
  --size: 18px;
}

igc-radio-group {
  padding: 12px;
}

igc-radio::part(checked)::after {
  background-color: var(--ig-success-500);
}

igc-radio::part(label) {
  color: var(--ig-secondary-800);
}
css

import {defineComponents, IgcRadioComponent, IgcRadioGroupComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import "./index.css";

defineComponents(IgcRadioComponent, IgcRadioGroupComponent);
export class RadioStyling {
  constructor() {
  }
}

new RadioStyling();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Radio Group</title>
    <meta charset="UTF-8" />

    <link
      rel="shortcut icon"
      href="https://static.infragistics.com/xplatform/images/browsers/wc.png"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Kanit&display=swap"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Titillium Web"
    />
    <link
      rel="stylesheet"
      href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"
      type="text/css"
    />
  </head>

  <body>
    <div id="root">
      <div class="container sample">
        <div style="width: 400px; border: 1px solid gainsboro">
          <igc-radio-group>
            <igc-radio name="fruit">Apple</igc-radio>
            <igc-radio name="fruit" checked>Banana</igc-radio>
            <igc-radio name="fruit">Mango</igc-radio>
            <igc-radio name="fruit">Orange</igc-radio>
          </igc-radio-group>
        </div>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>
  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
:root {
    --ig-primary-h: 60deg;
    --ig-primary-s: 100%;
    --ig-primary-l: 25%;
}

igc-radio::part(control) {
    --size: 18px;
}css