110 lines
5.2 KiB
HTML
110 lines
5.2 KiB
HTML
<!DOCTYPE html>
|
|
<html dir="ltr">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Floating Action Button - Standalone</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/core.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>
|
|
|
|
<body>
|
|
<h3>Default</h3>
|
|
<p>
|
|
<ion-fab-button>Default</ion-fab-button>
|
|
<ion-fab-button><ion-icon name="star"></ion-icon></ion-fab-button>
|
|
<ion-fab-button size="small">Mini</ion-fab-button>
|
|
<ion-fab-button size="small"><ion-icon name="star"></ion-icon></ion-fab-button>
|
|
<ion-fab-button class="fab-button-in-list">In List</ion-fab-button>
|
|
<ion-fab-button class="fab-button-in-list"><ion-icon name="heart"></ion-icon></ion-fab-button>
|
|
<ion-fab-button size="small" class="fab-button-in-list"><ion-icon name="star"></ion-icon></ion-fab-button>
|
|
<ion-fab-button class="fab-button-in-list ion-activated"><ion-icon name="heart"></ion-icon></ion-fab-button>
|
|
<ion-fab-button size="small" class="fab-button-in-list ion-activated"><ion-icon name="star"></ion-icon></ion-fab-button>
|
|
</p>
|
|
|
|
<h3>Colors</h3>
|
|
<p>
|
|
<ion-fab-button color="primary"><ion-icon name="heart"></ion-icon></ion-fab-button>
|
|
<ion-fab-button color="secondary"><ion-icon name="heart"></ion-icon></ion-fab-button>
|
|
<ion-fab-button color="tertiary"><ion-icon name="heart"></ion-icon></ion-fab-button>
|
|
<ion-fab-button color="success"><ion-icon name="heart"></ion-icon></ion-fab-button>
|
|
<ion-fab-button color="warning"><ion-icon name="heart"></ion-icon></ion-fab-button>
|
|
<ion-fab-button color="danger"><ion-icon name="heart"></ion-icon></ion-fab-button>
|
|
<ion-fab-button color="light"><ion-icon name="heart"></ion-icon></ion-fab-button>
|
|
<ion-fab-button color="medium"><ion-icon name="heart"></ion-icon></ion-fab-button>
|
|
<ion-fab-button color="dark"><ion-icon name="heart"></ion-icon></ion-fab-button>
|
|
</p>
|
|
<p>
|
|
<ion-fab-button color="primary" class="ion-activated"><ion-icon name="star"></ion-icon></ion-fab-button>
|
|
<ion-fab-button color="secondary" class="ion-activated"><ion-icon name="star"></ion-icon></ion-fab-button>
|
|
<ion-fab-button color="tertiary" class="ion-activated"><ion-icon name="star"></ion-icon></ion-fab-button>
|
|
<ion-fab-button color="success" class="ion-activated"><ion-icon name="star"></ion-icon></ion-fab-button>
|
|
<ion-fab-button color="warning" class="ion-activated"><ion-icon name="star"></ion-icon></ion-fab-button>
|
|
<ion-fab-button color="danger" class="ion-activated"><ion-icon name="star"></ion-icon></ion-fab-button>
|
|
<ion-fab-button color="light" class="ion-activated"><ion-icon name="star"></ion-icon></ion-fab-button>
|
|
<ion-fab-button color="medium" class="ion-activated"><ion-icon name="star"></ion-icon></ion-fab-button>
|
|
<ion-fab-button color="dark" class="ion-activated"><ion-icon name="star"></ion-icon></ion-fab-button>
|
|
</p>
|
|
|
|
<h3>Custom</h3>
|
|
|
|
<!-- Custom Font -->
|
|
<ion-fab-button class="large">large</ion-fab-button>
|
|
|
|
<!-- Custom Colors -->
|
|
<ion-fab-button class="custom"><ion-icon name="star"></ion-icon></ion-fab-button>
|
|
<ion-fab-button class="custom ion-activated"><ion-icon name="star"></ion-icon></ion-fab-button>
|
|
<ion-fab-button color="secondary" class="custom"><ion-icon name="heart"></ion-icon></ion-fab-button>
|
|
|
|
<!-- Custom Colors Fab In List -->
|
|
<ion-fab-button class="fab-button-in-list custom-white">White</ion-fab-button>
|
|
<ion-fab-button class="fab-button-in-list custom-white ion-activated">White</ion-fab-button>
|
|
<ion-fab-button class="fab-button-in-list custom-white"><ion-icon name="heart"></ion-icon></ion-fab-button>
|
|
<ion-fab-button class="fab-button-in-list custom-white ion-activated"><ion-icon name="heart"></ion-icon></ion-fab-button>
|
|
<ion-fab-button class="fab-button-in-list custom-blue"><ion-icon name="star"></ion-icon></ion-fab-button>
|
|
<ion-fab-button class="fab-button-in-list custom-blue ion-activated"><ion-icon name="star"></ion-icon></ion-fab-button>
|
|
<ion-fab-button class="fab-button-in-list custom-border">Border</ion-fab-button>
|
|
<ion-fab-button class="fab-button-in-list custom-border ion-activated">Border</ion-fab-button>
|
|
<ion-fab-button class="fab-button-in-list custom-border"><ion-icon name="star"></ion-icon></ion-fab-button>
|
|
<ion-fab-button class="fab-button-in-list custom-border ion-activated"><ion-icon name="star"></ion-icon></ion-fab-button>
|
|
|
|
<style>
|
|
ion-fab-button {
|
|
display: inline-block;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.large {
|
|
font-size: 24px;
|
|
}
|
|
|
|
.custom {
|
|
--background: lightpink;
|
|
--background-activated: green;
|
|
--color: blue;
|
|
--color-activated: white;
|
|
}
|
|
|
|
.custom-white {
|
|
--background: white;
|
|
--background-activated: #f6f6f6;
|
|
}
|
|
|
|
.custom-blue {
|
|
--background: #add8e6;
|
|
--background-activated: #7cb2c4;
|
|
}
|
|
|
|
.custom-border {
|
|
--border-radius: 10px;
|
|
--border-width: 2px;
|
|
--border-style: dashed;
|
|
--border-color: red;
|
|
}
|
|
</style>
|
|
</body>
|
|
</html>
|