Framework7 - Couleurs du thème des matériaux
La description
Framework7 fournit 22 thèmes de couleurs de matériaux différents, par défaut, pour l'application.
Exemple
L'exemple suivant montre l'utilisation de thèmes de couleurs de matériaux 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>Color Themes</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 = "left"> <a href = "#" class = "link icon-only"><i class = "icon icon-back"></i></a></div>
<div class = "center">Color Themes</div>
<div class = "right"> <a href = "#" class = "link icon-only"><i class = "icon icon-bars"></i></a></div>
</div>
</div>
<a href = "#" class = "floating-button"><i class = "icon icon-plus"></i></a>
<div class = "page-content">
<div class = "content-block">Lorem ipsum dolor sit amet,
<a href = "#">consectetur</a> adipiscing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo <a href = "#">consequat</a>.
</div>
<div class = "content-block">
<p class = "buttons-row">
<a href = "#tab1" class = "tab-link active button">Tab One</a>
<a href = "#tab2" class = "tab-link button">Tab Two</a>
<a href = "#tab3" class = "tab-link button">Tab Three</a>
</p>
<p class = "buttons-row">
<a href = "#" class = "button button-raised active">Button One</a>
<a href = "#" class = "button button-raised">Button Two</a>
<a href = "#" class = "button button-raised">Button Three</a>
</p>
<p class = "buttons-row">
<a href = "#" class = "button button-raised button-fill active">Button One</a>
<a href = "#" class = "button button-raised button-fill">Button Two</a>
<a href = "#" class = "button button-raised button-fill">Button Three</a>
</p>
</div>
<div class = "content-block-title">Select Your Theme Color</div>
<div class = "list-block">
<ul>
<li>
<label class = "label-radio item-content">
<input type = "radio" name = "color-radio" value = "red">
<div class = "item-inner">
<div class = "item-title">Red</div>
</div>
</label>
</li>
<li>
<label class = "label-radio item-content">
<input type = "radio" name = "color-radio" value = "pink">
<div class = "item-inner">
<div class = "item-title">Pink</div>
</div>
</label>
</li>
<li>
<label class = "label-radio item-content">
<input type = "radio" name = "color-radio" value = "blue">
<div class = "item-inner">
<div class = "item-title">Blue</div>
</div>
</label>
</li>
<li>
<label class = "label-radio item-content">
<input type = "radio" name = "color-radio" value = "lightblue">
<div class = "item-inner">
<div class = "item-title">Light Blue</div>
</div>
</label>
</li>
<li>
<label class = "label-radio item-content">
<input type = "radio" name = "color-radio" value = "cyan">
<div class = "item-inner">
<div class = "item-title">Cyan</div>
</div>
</label>
</li>
<li>
<label class = "label-radio item-content">
<input type = "radio" name = "color-radio" value = "green">
<div class = "item-inner">
<div class = "item-title">Green</div>
</div>
</label>
</li>
<li>
<label class = "label-radio item-content">
<input type = "radio" name = "color-radio" value = "lime">
<div class = "item-inner">
<div class = "item-title">Lime</div>
</div>
</label>
</li>
<li>
<label class = "label-radio item-content">
<input type = "radio" name = "color-radio" value = "amber">
<div class = "item-inner">
<div class = "item-title">Amber</div>
</div>
</label>
</li>
<li>
<label class = "label-radio item-content">
<input type = "radio" name = "color-radio" value = "orange">
<div class = "item-inner">
<div class = "item-title">Orange</div>
</div>
</label>
</li>
<li>
<label class = "label-radio item-content">
<input type = "radio" name = "color-radio" value = "brown">
<div class = "item-inner">
<div class = "item-title">Brown</div>
</div>
</label>
</li>
<li>
<label class = "label-radio item-content">
<input type = "radio" name = "color-radio" value = "gray">
<div class = "item-inner">
<div class = "item-title">Gray</div>
</div>
</label>
</li>
<li>
<label class = "label-radio item-content">
<input type = "radio" name = "color-radio" value = "bluegray">
<div class = "item-inner">
<div class = "item-title">Blue Gray</div>
</div>
</label>
</li>
<li>
<label class = "label-radio item-content">
<input type = "radio" name = "color-radio" value = "black" />
<div class = "item-inner">
<div class = "item-title">Black</div>
</div>
</label>
</li>
</ul>
</div>
<div class = "content-block-title">Select Your Default Layout Theme</div>
<div class = "list-block">
<ul>
<li>
<label class = "label-radio item-content">
<input type = "radio" name = "layout-radio" value = "" checked>
<div class = "item-inner">
<div class = "item-title">Default</div>
</div>
</label>
</li>
<li>
<label class = "label-radio item-content">
<input type = "radio" name = "layout-radio" value = "layout-dark">
<div class = "item-inner">
<div class = "item-title">Dark</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 ({
material: true
});
var $$ = Dom7;
$$('input[name = "color-radio"]').on('change', function () {
if (this.checked) {
var colors = 'theme-' + 'red pink blue lightblue cyan green lime amber orange brown gray bluegray black'.split(' ').join(' theme-');
$$('.view').removeClass(colors);
$$('.view').addClass('theme-' + $$(this).val());
}
});
$$('input[name = "layout-radio"]').on('change', function () {
if (this.checked) {
$$('.view').removeClass('layout-dark layout-white');
$$('.view').addClass(this.value);
}
});
</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 material_theme_colors.html fichier dans le dossier racine de votre serveur.
Ouvrez ce fichier HTML comme http: //localhost/material_theme_colors.html et la sortie s'affiche comme indiqué ci-dessous.
L'exemple fournit 22 thèmes de couleurs de matériau pour votre application. Ici, nous n'avons utilisé que certaines des couleurs pour montrer comment elles fonctionnent dans la mise en page du thème matériel. La couleur par défaut est le bleu.