137 lines
5.2 KiB
HTML
137 lines
5.2 KiB
HTML
<!DOCTYPE html>
|
|
<html dir="ltr">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Menu Button - Basic</title>
|
|
<meta name="viewport"
|
|
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
|
|
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
|
|
<script src="../../../../../scripts/testing/scripts.js"></script>
|
|
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
|
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
|
|
</head>
|
|
|
|
<body>
|
|
<ion-app>
|
|
<ion-content>
|
|
<h1>Default</h1>
|
|
<ion-menu-button auto-hide="false"></ion-menu-button>
|
|
<ion-menu-button disabled auto-hide="false"></ion-menu-button>
|
|
<ion-menu-button auto-hide="false" class="ion-focused"></ion-menu-button>
|
|
<ion-menu-button disabled auto-hide="false" class="ion-focused"></ion-menu-button>
|
|
|
|
<h1>Custom</h1>
|
|
<ion-menu-button auto-hide="false" class="custom"></ion-menu-button>
|
|
<ion-menu-button auto-hide="false" color="secondary" class="custom"></ion-menu-button>
|
|
<ion-menu-button auto-hide="false" class="custom ion-focused"></ion-menu-button>
|
|
<ion-menu-button auto-hide="false" color="secondary" class="custom ion-focused"></ion-menu-button>
|
|
<ion-menu-button auto-hide="false" class="custom-large"></ion-menu-button>
|
|
<ion-menu-button auto-hide="false" class="custom-large ion-focused"></ion-menu-button>
|
|
|
|
<h1>Colors</h1>
|
|
<ion-menu-button auto-hide="false" color="primary"></ion-menu-button>
|
|
<ion-menu-button auto-hide="false" color="secondary"></ion-menu-button>
|
|
<ion-menu-button auto-hide="false" color="tertiary"></ion-menu-button>
|
|
<ion-menu-button auto-hide="false" color="success"></ion-menu-button>
|
|
<ion-menu-button auto-hide="false" color="warning"></ion-menu-button>
|
|
<ion-menu-button auto-hide="false" color="danger"></ion-menu-button>
|
|
<ion-menu-button auto-hide="false" color="light"></ion-menu-button>
|
|
<ion-menu-button auto-hide="false" color="medium"></ion-menu-button>
|
|
<ion-menu-button auto-hide="false" color="dark"></ion-menu-button>
|
|
|
|
<br>
|
|
|
|
<ion-menu-button auto-hide="false" color="primary" class="ion-focused"></ion-menu-button>
|
|
<ion-menu-button auto-hide="false" color="secondary" class="ion-focused"></ion-menu-button>
|
|
<ion-menu-button auto-hide="false" color="tertiary" class="ion-focused"></ion-menu-button>
|
|
<ion-menu-button auto-hide="false" color="success" class="ion-focused"></ion-menu-button>
|
|
<ion-menu-button auto-hide="false" color="warning" class="ion-focused"></ion-menu-button>
|
|
<ion-menu-button auto-hide="false" color="danger" class="ion-focused"></ion-menu-button>
|
|
<ion-menu-button auto-hide="false" color="light" class="ion-focused"></ion-menu-button>
|
|
<ion-menu-button auto-hide="false" color="medium" class="ion-focused"></ion-menu-button>
|
|
<ion-menu-button auto-hide="false" color="dark" class="ion-focused"></ion-menu-button>
|
|
|
|
<ion-toolbar>
|
|
<ion-buttons slot="start">
|
|
<ion-menu-button auto-hide="false"></ion-menu-button>
|
|
<ion-menu-button auto-hide="false" class="ion-focused"></ion-menu-button>
|
|
</ion-buttons>
|
|
<ion-title>Default</ion-title>
|
|
</ion-toolbar>
|
|
|
|
<ion-toolbar color="primary">
|
|
<ion-buttons slot="start">
|
|
<ion-menu-button auto-hide="false"></ion-menu-button>
|
|
<ion-menu-button auto-hide="false" class="ion-focused"></ion-menu-button>
|
|
</ion-buttons>
|
|
<ion-title>Primary</ion-title>
|
|
</ion-toolbar>
|
|
|
|
<ion-toolbar color="light">
|
|
<ion-buttons slot="start">
|
|
<ion-menu-button auto-hide="false"></ion-menu-button>
|
|
<ion-menu-button auto-hide="false" class="ion-focused"></ion-menu-button>
|
|
</ion-buttons>
|
|
<ion-title>Light</ion-title>
|
|
</ion-toolbar>
|
|
|
|
<ion-toolbar color="success">
|
|
<ion-buttons slot="start">
|
|
<ion-menu-button auto-hide="false"></ion-menu-button>
|
|
<ion-menu-button auto-hide="false" class="ion-focused"></ion-menu-button>
|
|
</ion-buttons>
|
|
<ion-title>Success</ion-title>
|
|
</ion-toolbar>
|
|
|
|
<ion-toolbar class="themed">
|
|
<ion-buttons slot="start">
|
|
<ion-menu-button auto-hide="false"></ion-menu-button>
|
|
<ion-menu-button auto-hide="false" class="ion-focused"></ion-menu-button>
|
|
</ion-buttons>
|
|
<ion-title>Themed</ion-title>
|
|
</ion-toolbar>
|
|
|
|
<ion-toolbar color="dark">
|
|
<ion-buttons slot="start">
|
|
<ion-menu-button></ion-menu-button>
|
|
</ion-buttons>
|
|
<ion-title>Hidden</ion-title>
|
|
</ion-toolbar>
|
|
</ion-content>
|
|
</ion-app>
|
|
|
|
<style>
|
|
h1 {
|
|
padding-left: 16px;
|
|
}
|
|
|
|
ion-menu-button[auto-hide="false"] {
|
|
display: inline-block;
|
|
}
|
|
|
|
.themed {
|
|
--ion-toolbar-background: #222;
|
|
--ion-toolbar-color: #ddd;
|
|
}
|
|
|
|
.custom {
|
|
--color: hotpink;
|
|
}
|
|
|
|
.custom.md {
|
|
--background-hover: #ff69b4;
|
|
--background-focused: #ff69b4;
|
|
}
|
|
|
|
.custom-large {
|
|
width: 84px;
|
|
height: 84px;
|
|
font-size: 44px;
|
|
}
|
|
</style>
|
|
</body>
|
|
|
|
</html>
|