Framework7 - Matériel du groupe Radios
La description
Le groupe Radios est également pris en charge par le thème Matériel et vous devez ajouter des icônes supplémentaires pour les radios.
Exemple
L'exemple suivant illustre l'utilisation du matériel de groupe de radios dans Framework7 -
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>Radios group Material</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.colors.min.css" />
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "pages">
<div data-page = "home" class = "page navbar-fixed">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "center">Radios Group</div>
</div>
</div>
<div class = "page-content">
<div class = "content-block-title">Radios group</div>
<div class = "list-block">
<ul>
<li>
<label class = "label-radio item-content">
<input type = "radio" name = "ks-radio" value = "Pants" checked>
<div class = "item-media"><i class = "icon icon-form-radio"></i></div>
<div class = "item-inner">
<div class = "item-title">Pants</div>
</div>
</label>
</li>
<li>
<label class = "label-radio item-content">
<input type = "radio" name = "ks-radio" value = "Shirts">
<div class = "item-media"><i class = "icon icon-form-radio"></i></div>
<div class = "item-inner">
<div class = "item-title">Shirts</div>
</div>
</label>
</li>
<li>
<label class = "label-radio item-content">
<input type = "radio" name = "ks-radio" value = "Jeans">
<div class = "item-media"><i class = "icon icon-form-radio"></i></div>
<div class = "item-inner">
<div class = "item-title">Jeans</div>
</div>
</label>
</li>
<li>
<label class = "label-radio item-content">
<input type = "radio" name = "ks-radio" value = "Sarees">
<div class = "item-media"><i class = "icon icon-form-radio"></i></div>
<div class = "item-inner">
<div class = "item-title">Sarees</div>
</div>
</label>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
var myApp = new Framework7();
</script>
</body>
</html>Production
Exécutons les étapes suivantes pour voir comment fonctionne le code donné ci-dessus -
Enregistrez le code HTML ci-dessus sous forms_radio_material.html fichier dans le dossier racine de votre serveur.
Ouvrez ce fichier HTML en tant que http: //localhost/forms_radio_material.html et la sortie s'affiche comme indiqué ci-dessous.
La mise en page du formulaire montre le groupe radio avec la liste des options, ce qui vous permet de ne cocher qu'une seule option de la liste.