Pulsanti del tema del materiale
Descrizione
Il tema del materiale fornisce molti pulsanti da utilizzare nell'applicazione utilizzando classi appropriate. La tabella seguente elenca i pulsanti del tema del materiale utilizzati in Framework7 -
| S.No | Tipi e descrizione |
|---|---|
| 1 | Usual/Flat Buttons Per utilizzare i pulsanti piatti, utilizza la classe del pulsante per il pulsante di input. |
| 2 | Buttons Row Per usarlo, avvolgi i pulsanti con l'elemento con la riga dei pulsanti di classe . |
| 3 | Raised Buttons Aggiungi una classe con pulsante rialzato per ottenere pulsanti in stile pulsante rialzato. |
| 4 | Raised Fill Buttons È possibile aggiungere una classe di riempimento del pulsante al pulsante di input. |
| 5 | Color Buttons È possibile utilizzare 20 temi colore dei materiali predefiniti per colorare i pulsanti. |
| 6 | Color Fill Buttons È possibile utilizzare i pulsanti di riempimento colore applicando il riempimento pulsante e le classi di colore. |
| 7 | Color Raised Fill Buttons È possibile utilizzare il colore sollevato pulsanti di riempimento mediante l'applicazione di bottoni in rilievo , button-fill classi ea colori. |
| 8 | Color Ripple Buttons È possibile aggiungere effetti di increspatura di colore diverso al pulsante utilizzando la classe [colore] increspatura . |
| 9 | Big Buttons Il pulsante può essere trasformato in un pulsante grande aggiungendo la classe button-big . |
| 10 | List Block Buttons È possibile utilizzare pulsanti con visualizzazioni elenco . |
Esempio
L'esempio seguente mostra i diversi tipi di pulsanti come pulsanti colorati, pulsanti piatti, pulsanti di riempimento colore, pulsanti grandi ecc. Utilizzando i pulsanti del tema del materiale in 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>Produzione
Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra indicato:
Salva il codice HTML sopra indicato come buttons_material.html file nella cartella principale del server.
Apri questo file HTML come http: //localhost/buttons_material.html e l'output viene visualizzato come mostrato di seguito.
L'esempio fornisce diversi tipi di pulsanti del tema del materiale come pulsanti piatti, pulsanti grandi, pulsanti riga, pulsanti colorati, pulsanti di riempimento colore ecc.