Semantic UI es un marco de código abierto que utiliza CSS y jQuery para crear excelentes interfaces de usuario. Es lo mismo que Bootstrap para su uso y tiene diferentes elementos para hacer que su sitio web se vea más increíble.
La interfaz de usuario semántica tiene un montón de componentes para el diseño de la interfaz de usuario. Uno de ellos es «Casillas de verificación». Las casillas de verificación se utilizan para mostrar diferentes opciones para que los usuarios elijan. Los usuarios pueden seleccionar entre ellos según su elección. Hay diferentes tipos de casillas de verificación según su forma y estilo. Uno de ellos es el tipo de radio.
El tipo de radio de casilla de verificación de IU semántica se usa para hacer que la casilla de verificación tenga la forma de un botón de opción que el usuario puede usar para seleccionar un valor verdadero o falso. Agrega un aspecto diferente al de la casilla de verificación predeterminada.
Clase de tipo de radio de casilla de verificación de interfaz de usuario semántica:
- radio: esta clase se utiliza para mostrar la casilla de verificación en forma de radio.
Sintaxis:
<div class="ui radio checkbox"> <input type="checkbox"> <label>...</label> </div>
Ejemplo 1: Este ejemplo muestra un tipo de radio de casilla de verificación con una sola opción usando la clase de radio .
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body> <div class="ui container"> <br /><br /> <h2 style="color:green"> GeeksforGeeks </h2> <b> <p>Semantic UI Checkbox Radio Type</p> </b> <hr> <br /> <strong>Radio Checkboxes:</strong> <br /><br /> <div class="ui radio checkbox"> <input type="checkbox" name="public"> <label> Subscribe to GFG weekly newsletters . </label> </div> </div> </body> </html>
Producción:
Casilla de radio
Ejemplo 2: Este ejemplo muestra un tipo de radio de casilla de verificación con múltiples opciones usando la clase de radio .
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body> <div class="ui container"> <br /><br /> <h2 style="color:green"> GeeksforGeeks </h2> <b> <p>Semantic UI Checkbox Radio Type</p> </b> <hr> <br /> <strong>Radio Checkboxes:</strong> <br /><br /> <div class="ui form"> <div class="grouped fields"> <label>How often do you visit Geeks for Geeks?</label> <div class="field"> <div class="ui radio checkbox"> <input type="radio" name="frequency" checked="checked"> <label>Once a day .</label> </div> </div> <div class="field"> <div class="ui radio checkbox"> <input type="radio" name="frequency"> <label>Twice a day .</label> </div> </div> <div class="field"> <div class="ui radio checkbox"> <input type="radio" name="frequency"> <label>2-3 times a week .</label> </div> </div> <div class="field"> <div class="ui radio checkbox"> <input type="radio" name="frequency"> <label>Once a week .</label> </div> </div> </div> </div> </div> </body> </html>
Producción:
Casillas de radio
Referencia: https://semantic-ui.com/modules/checkbox.html#radio
Publicación traducida automáticamente
Artículo escrito por namankedia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA