Framework7 - Diseño completo
Descripción
El tipo de diseño completo se utiliza para mostrar todo el elemento del formulario.
Ejemplo
El siguiente ejemplo demuestra el diseño completo del formulario, incluidos todos los campos del 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>Full Layout</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.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 = "left"> </div>
<div class = "center">Form Elements</div>
<div class = "right"> </div>
</div>
</div>
<div class = "page-content">
<div class = "content-block-title">Full Layout</div>
<div class = "list-block">
<ul>
<li>
<div class = "item-content">
<div class = "item-media"><i class = "icon icon-form-name"></i></div>
<div class = "item-inner">
<div class = "item-title label">Name</div>
<div class = "item-input">
<input type = "text" placeholder = "Enter your name">
</div>
</div>
</div>
</li>
<li>
<div class = "item-content">
<div class = "item-media"><i class = "icon icon-form-email"></i></div>
<div class = "item-inner">
<div class = "item-title label">E-mail</div>
<div class = "item-input">
<input type = "email" placeholder = "Enter your e-mail">
</div>
</div>
</div>
</li>
<li>
<div class = "item-content">
<div class = "item-media"><i class = "icon icon-form-password"></i></div>
<div class = "item-inner">
<div class = "item-title label">Password</div>
<div class = "item-input">
<input type = "password" placeholder = "Enter your password">
</div>
</div>
</div>
</li>
<li>
<div class = "item-content">
<div class = "item-media"><i class = "icon icon-form-tel"></i></div>
<div class = "item-inner">
<div class = "item-title label">Phone</div>
<div class = "item-input">
<input type = "tel" placeholder = "Enter your phone number">
</div>
</div>
</div>
</li>
<li>
<div class = "item-content">
<div class = "item-media"><i class = "icon icon-form-gender"></i></div>
<div class = "item-inner">
<div class = "item-title label">Gender</div>
<div class = "item-input">
<select>
<option>Male</option>
<option>Female</option>
</select>
</div>
</div>
</div>
</li>
<li>
<div class = "item-content">
<div class = "item-media"><i class = "icon icon-form-calendar"></i></div>
<div class = "item-inner">
<div class = "item-title label">Birth date</div>
<div class = "item-input">
<input type = "date" placeholder = "Birth day" value = "2014-04-30">
</div>
</div>
</div>
</li>
<li>
<div class = "item-content">
<div class = "item-media"><i class = "icon icon-form-calendar"></i></div>
<div class = "item-inner">
<div class = "item-title label">Date time</div>
<div class = "item-input">
<input type = "datetime-local">
</div>
</div>
</div>
</li>
<li>
<div class = "item-content">
<div class = "item-media"><i class = "icon icon-form-toggle"></i></div>
<div class = "item-inner">
<div class = "item-title label">Switch</div>
<div class = "item-input">
<label class = "label-switch">
<input type = "checkbox">
<div class = "checkbox"></div>
</label>
</div>
</div>
</div>
</li>
<li class = "align-top">
<div class = "item-content">
<div class = "item-media"><i class = "icon icon-form-comment"></i></div>
<div class = "item-inner">
<div class = "item-title label">Textarea</div>
<div class = "item-input">
<textarea></textarea>
</div>
</div>
</div>
</li>
<li class = "align-top">
<div class = "item-content">
<div class = "item-media"><i class = "icon icon-form-comment"></i></div>
<div class = "item-inner">
<div class = "item-title label">Resizable</div>
<div class = "item-input">
<textarea class = "resizable"></textarea>
</div>
</div>
</div>
</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>
// here initialize the app
var myApp = new Framework7();
// If your using custom DOM library, then save it to $$ variable
var $$ = Dom7;
// Add the view
var mainView = myApp.addView('.view-main', {
// enable the dynamic navbar for this view
dynamicNavbar: true
});
</script>
</body>
</html>Salida
Realicemos los siguientes pasos para ver cómo funciona el código dado anteriormente:
Guarde el código HTML proporcionado anteriormente como form_element_full_layout.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/form_element_full_layout.html y el resultado se muestra como se muestra a continuación.
El usuario puede ingresar todos los detalles en el formulario para mostrar todo el elemento del formulario.
El usuario puede seleccionar cualquiera de las dos opciones de género. Los valores se pueden configurar para la fecha de nacimiento y la fecha y hora haciendo clic en las flechas y puede usar un interruptor para alternar entre encendido y apagado.