Framework7 - Couleurs du thème iOS
La description
Vous pouvez utiliser 10 thèmes de couleurs iOS par défaut différents pour l'application.
Exemple
L'exemple suivant montre l'utilisation des thèmes de couleurs iOS 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.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 toolbar-fixed">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left"> <a href = "#" class = "link"><i class = "icon icon-back"></i><span>Back</span></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>
<div class = "toolbar">
<div class = "toolbar-inner">
<a href = "#" class = "link">Left</a>
<a href = "#" class = "link">Right</a>
</div>
</div>
<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>
</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 = "blue" checked>
<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 = "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 = "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 = "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 = "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 = "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 = "red">
<div class = "item-inner">
<div class = "item-title">Red</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>
<li>
</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();
var $$ = Dom7;
$$('input[name = "color-radio"]').on('change', function () {
if (this.checked) {
$$('.view').removeClass('theme-pink theme-blue theme-red theme-gray theme-orange theme-lightblue theme-green');
$$('.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 ios_theme_colors.html fichier dans le dossier racine de votre serveur.
Ouvrez ce fichier HTML en tant que http: //localhost/ios_theme_colors.html et la sortie s'affiche comme indiqué ci-dessous.
L'exemple fournit 10 thèmes de couleurs iOS pour votre application. La couleur par défaut est le bleu.