Botones de tema material
Descripción
El tema material proporciona muchos botones para usar en su aplicación mediante el uso de las clases adecuadas. La siguiente tabla enumera los botones de temas de material utilizados en Framework7:
| S. No | Tipos y descripción |
|---|---|
| 1 | Usual/Flat Buttons Para usar botones planos, use la clase de botón para su botón de entrada. |
| 2 | Buttons Row Para usar esto, envuelva los botones con el elemento con la clase botones-fila . |
| 3 | Raised Buttons Agregue una clase de botón elevado para obtener botones con estilo de botón elevado. |
| 4 | Raised Fill Buttons Puede agregar una clase de relleno de botón a su botón de entrada. |
| 5 | Color Buttons Puede utilizar 20 temas de color de material predeterminados para colorear sus botones. |
| 6 | Color Fill Buttons Puede usar botones de relleno de color aplicando clases de color y relleno de botón . |
| 7 | Color Raised Fill Buttons Puede utilizar los botones en relieve de color de relleno mediante la aplicación de botón planteado , botón de llenado en las clases y colores. |
| 8 | Color Ripple Buttons Se pueden agregar diferentes efectos de ondulación de color a su botón utilizando la clase de ondulación [color] . |
| 9 | Big Buttons El botón se puede hacer como un botón grande agregando una clase de botón grande . |
| 10 | List Block Buttons Es posible utilizar botones con vistas de lista . |
Ejemplo
El siguiente ejemplo muestra los diferentes tipos de botones, como botones de color, botones planos, botones de relleno de color, botones grandes, etc., utilizando los botones de tema de material 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.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">Buttons</div>
</div>
</div>
<div class = "page-content">
<div class = "content-block-title">Usual/Flat Buttons</div>
<div class = "content-block">
<p><a href = "#" class = "button">Button</a></p>
</div>
<div class = "content-block-title">Buttons Row</div>
<div class = "content-block">
<p class = "buttons-row">
<a href = "#" class = "button">Button</a>
<a href = "#" class = "button">Button</a>
</p>
</div>
<div class = "content-block-title">Raised Buttons</div>
<div class = "content-block">
<p class = "buttons-row">
<a href = "#" class = "button button-raised">Button</a>
<a href = "#" class = "button button-raised">Button</a>
<a href = "#" class = "button button-raised">Button</a>
<a href = "#" class = "button button-raised">Button</a>
</p>
</div>
<div class = "content-block-title">Raised Fill Buttons</div>
<div class = "content-block">
<p class = "buttons-row">
<a href = "#" class = "button button-fill button-raised">Button</a>
<a href = "#" class = "button button-fill button-raised">Button</a>
<a href = "#" class = "button button-fill button-raised">Button</a>
<a href = "#" class = "button button-fill button-raised">Button</a>
</p>
</div>
<div class = "content-block-title">Color Buttons</div>
<div class = "content-block">
<p class = "buttons-row">
<a href = "#" class = "button color-pink">Pink</a>
<a href = "#" class = "button color-indigo">Indigo</a>
<a href = "#" class = "button color-blue">Blue</a>
</p>
<p class = "buttons-row">
<a href = "#" class = "button color-cyan">Cyan</a>
<a href = "#" class = "button color-green">Green</a>
<a href = "#" class = "button color-purple">Purple</a>
</p>
<p class = "buttons-row">
<a href = "#" class = "button color-orange">Orange</a>
<a href = "#" class = "button color-teal">Teal</a>
<a href = "#" class = "button color-red">Red</a>
</p>
</div>
<div class = "content-block-title">Color Fill Buttons</div>
<div class = "content-block">
<p class = "buttons-row">
<a href = "#" class = "button button-fill color-pink">Pink</a>
<a href = "#" class = "button button-fill color-indigo">Indigo</a>
<a href = "#" class = "button button-fill color-blue">Blue</a>
</p>
<p class = "buttons-row">
<a href = "#" class = "button button-fill color-cyan">Cyan</a>
<a href = "#" class = "button button-fill color-green">Green</a>
<a href = "#" class = "button button-fill color-purple">Purple</a>
</p>
<p class = "buttons-row">
<a href = "#" class = "button button-fill color-orange">Orange</a>
<a href = "#" class = "button button-fill color-teal">Teal</a>
<a href = "#" class = "button button-fill color-red">Red</a>
</p>
</div>
<div class = "content-block-title">Color Raised Fill Buttons</div>
<div class = "content-block">
<p class = "buttons-row">
<a href = "#" class = "button button-fill button-raised color-pink">Pink</a>
<a href = "#" class = "button button-fill button-raised color-indigo">Indigo</a>
<a href = "#" class = "button button-fill button-raised color-blue">Blue</a>
</p>
<p class = "buttons-row">
<a href = "#" class = "button button-fill button-raised color-cyan">Cyan</a>
<a href = "#" class = "button button-fill button-raised color-green">Green</a>
<a href = "#" class = "button button-fill button-raised color-purple">Purple</a>
</p>
<p class = "buttons-row">
<a href = "#" class = "button button-fill button-raised color-orange">Orange</a>
<a href = "#" class = "button button-fill button-raised color-teal">Teal</a>
<a href = "#" class = "button button-fill button-raised color-red">Red</a>
</p>
</div>
<div class = "content-block-title">Color Ripple Buttons</div>
<div class = "content-block">
<p class = "buttons-row">
<a href = "#" class = "button ripple-blue">Button</a>
<a href = "#" class = "button color-cyan ripple-green">Button with green ripple</a>
<a href = "#" class = "button color-red ripple-gray">Button with gray ripple</a>
</p>
<p class = "buttons-row">
<a href = "#" class = "button button-raised button-fill color-yellow ripple-green">Button</a>
<a href = "#" class = "button button-raised button-fill color-purple ripple-teal">Button</a>
<a href = "#" class = "button button-raised button-fill color-pink ripple-orange">Button</a>
</p>
</div>
<div class = "content-block-title">Big Buttons</div>
<div class = "content-block">
<p class = "buttons-row">
<a href = "#" class = "button button-big color-pink">Button</a>
<a href = "#" class = "button button-big color-blue">Button</a>
</p>
<p class = "buttons-row">
<a href = "#" class = "button button-big button-fill button-raised color-green">Button</a>
<a href = "#" class = "button button-big button-fill button-raised color-gray">Button</a>
</p>
</div>
<div class = "content-block-title">List Block Buttons</div>
<div class = "card">
<div class = "list-block">
<ul>
<li><a href = "#" class = "list-button item-link">List Button 1</a></li>
<li><a href = "#" class = "list-button item-link">List Button 2</a></li>
<li><a href = "#" class = "list-button item-link">List Button 3</a></li>
<li><a href = "#" class = "list-button item-link">List Button 4</a></li>
</ul>
</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({
material: 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 buttons_material.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/buttons_material.html y la salida se muestra como se muestra a continuación.
El ejemplo proporciona diferentes tipos de botones de tema de material, como botones planos, botones grandes, botones de fila, botones de color, botones de relleno de color, etc.