Botones de tema de iOS
Descripción
Framework7 proporciona muchos botones de tema de iOS, que se pueden usar aplicando las clases apropiadas. La siguiente tabla muestra los botones de tema de iOS:
| S. No | Tipos y descripción |
|---|---|
| 1 | Usual Buttons Puede usarse usando la clase de botón para cualquier enlace o botón de entrada. |
| 2 | Active State Puede activar el botón agregando clase activa a su botón. |
| 3 | Round Buttons La clase de botón redondo se utiliza para agregar botones redondos. |
| 4 | Big Buttons Puede usar el botón grande agregando la clase button-big a su botón de entrada. |
| 5 | Buttons Row / Segmented Control Para obtener una fila de botones segmentada, envuelva los botones con la clase de fila de botones . Cada botón tendrá el mismo ancho. |
| 6 | Fill Buttons Tiene el mismo aspecto que el botón activo, pero está diseñado para usarse como un solo botón. |
| 7 | Color Buttons Puede utilizar 10 temas de color predeterminados para colorear sus botones. |
| 8 | List Block Buttons Es posible utilizar botones con vistas de lista . |
| 9 | Using Grid También puede colocar sus botones en cuadrícula. |
Ejemplo
El siguiente ejemplo demuestra el uso de botones en Framework7:
<!DOCTYPE html>
<html class = "with-statusbar-overlay">
<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>iOS Theme Buttons</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" />
<link rel = "stylesheet"
href = "custom.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">Buttons</div>
<div class = "right"> </div>
</div>
</div>
<div class = "page-content">
<div class = "content-block-title">Usual Buttons</div>
<div class = "content-block">
<p> <a href = "#" class = "button">Usual Button</a></p>
</div>
<div class = "content-block-title">Active Button</div>
<div class = "content-block">
<p> <a href = "#" class = "button active">Active Button</a></p>
</div>
<div class = "content-block-title">Round Buttons</div>
<div class = "content-block">
<p> <a href = "#" class = "button button-round">Round Button</a></p>
<p> <a href = "#" class = "button button-round active">Round Button With Active</a></p>
</div>
<div class = "content-block-title">Big Buttons</div>
<div class = "content-block">
<p> <a href = "#" class = "button button-big">Big Button </a></p>
<p> <a href = "#" class = "button button-big button-round">Rounded Big Button </a></p>
<p> <a href = "#" class = "button button-big button-round active">Rounded Big Button and Active</a></p>
</div>
<div class = "content-block-title">Buttons Row / Segmented Controller</div>
<div class = "content-block">
<p class = "buttons-row"> <a href = "#" class = "button">Button 1</a><a href = "#" class = "button">Button 2</a><a href = "#" class = "button">Button 3</a></p>
<p class = "buttons-row"> <a href = "#" class = "button button-round">Button 1</a><a href = "#" class = "button button-round">Button 2</a></p>
</div>
<div class = "content-block-title">Fill buttons </div>
<div class = "content-block">
<p><a href = "#" class = "button button-fill">Fill Button</a></p>
<p><a href = "#" class = "button button-big button-fill">Big Fill Button </a></p>
</div>
<div class = "content-block-title">Color buttons</div>
<div class = "content-block">
<p class = "buttons-row theme-blue">
<a href = "#" class = "button active">Button 1</a><a href = "#" class = "button">Button 2</a><a href = "#" class = "button">Button 3</a>
</p>
<p class = "buttons-row theme-yellow">
<a href = "#" class = "button">Button 1</a><a href = "#" class = "button active">Button 2</a><a href = "#" class = "button">Button 3</a>
</p>
<p><a href = "#" class = "button button-fill color-green">Green</a></p>
<p><a href = "#" class = "button button-big button-fill color-pink">Big Pink</a></p>
<p><a href = "#" class = "button button-fill button-big color-gray">Big Gray Button</a></p>
</div>
<div class = "content-block-title">List block buttons</div>
<div class = "list-block">
<ul>
<li><a href = "#" class = "item-link list-button">List Button 1</a></li>
<li><a href = "#" class = "item-link list-button">List Button 2</a></li>
<li><a href = "#" class = "item-link list-button">List Button 3</a></li>
<li><a href = "#" class = "item-link list-button">List Button 4</a></li>
</ul>
</div>
<div class = "content-block-title">Inset list block buttons</div>
<div class = "list-block inset">
<ul>
<li><a href = "#" class = "item-link list-button">List Button 1</a></li>
<li><a href = "#" class = "item-link list-button">List Button 2</a></li>
<li><a href = "#" class = "item-link list-button">List Button 3</a></li>
<li><a href = "#" class = "item-link list-button">List Button 4</a></li>
</ul>
</div>
<div class = "content-block-title">Using Grid</div>
<div class = "content-block">
<div class = "row">
<div class = "col-50"><a href = "#" class = "button button-big button-fill color-blue">Submit</a></div>
<div class = "col-50"><a href = "#" class = "button button-big button-fill color-red">Cancel</a></div>
</div>
</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>Salida
Realicemos los siguientes pasos para ver cómo funciona el código dado anteriormente:
Guarde el código HTML proporcionado anteriormente como buttons_iostheme.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/buttons_iostheme.html y el resultado se muestra como se muestra a continuación.
El ejemplo proporciona diferentes tipos de botones de tema de iOS, como botones redondos, botones grandes, botones de fila, botones de color, etc.