HI WELCOME TO KANSIRIS

How to change ion-button different shapes in Ionic 4?

Leave a Comment

 

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>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-button>Default</ion-button>
<ion-button><ion-icon slot="icon-only" name="star"></ion-icon></ion-button>
<ion-button><ion-icon slot="start" name="pin"></ion-icon>Map</ion-button>
<ion-button shape="round">Round</ion-button>
<ion-button fill="outline">Outline</ion-button>
<ion-button fill="clear">Clear</ion-button>
<ion-button fill="outline" expand="full">Full Outline Full Outline Full Outline Full Outline Full Outline Full Outline Full Outline</ion-button>
<ion-button fill="clear" expand="block">Block Clear</ion-button>
</p>
<h3>Round button combinations</h3>
<p>
<ion-button shape="round" size="small">Round & Small</ion-button>
<ion-button shape="round" size="large">Round & Large</ion-button>
<ion-button shape="round" fill="outline">Round & Outline</ion-button>
</p>
<h3>Colors</h3>
<p>
<ion-button color="primary">Primary</ion-button>
<ion-button color="secondary">Secondary</ion-button>
<ion-button color="tertiary">Tertiary</ion-button>
<ion-button fill="outline" color="success">Success Outline</ion-button>
<ion-button fill="clear" color="warning">Warning Clear</ion-button>
<ion-button color="danger">Danger</ion-button>
<ion-button color="light">Light</ion-button>
<ion-button expand="block" fill="outline" color="medium">Medium Outline</ion-button>
<ion-button expand="full" fill="clear" color="dark">Dark Clear</ion-button>
</p>
<h3>Custom</h3>
<!-- Custom Font -->
<ion-button class="wide">wide</ion-button>
<ion-button class="large">large</ion-button>
<ion-button class="round">rounded</ion-button>
<ion-button aria-label="this is my custom label">custom aria-label</ion-button>
<!-- Custom Colors -->
<ion-button class="custom">custom</ion-button>
<ion-button class="custom ion-activated ion-focused">custom.focused</ion-button>
<ion-button class="custom ion-activated">custom.activated</ion-button>
<ion-button color="secondary" class="custom">custom w/ secondary</ion-button>
<ion-button fill="clear" class="medium">custom medium</ion-button>
<ion-toolbar>
<ion-buttons slot="start">
<ion-button>Default</ion-button>
</ion-buttons>
<ion-title>Bar</ion-title>
<ion-buttons slot="end">
<ion-button color="secondary">Secondary</ion-button>
</ion-buttons>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="start">
<ion-button class="custom">Custom</ion-button>
<ion-button class="custom ion-activated">Custom.a</ion-button>
</ion-buttons>
<ion-title>Bar</ion-title>
<ion-buttons slot="end">
<ion-button color="secondary" class="custom">Custom Secondary</ion-button>
</ion-buttons>
</ion-toolbar>
<style>
.wide {
width: 100px;
}
.large {
font-weight: normal;
font-size: 24px;
}
.round {
width: 60px;
height: 60px;
--border-radius: 50%;
--vertical-align: middle;
--padding-start: 10px;
--padding-end: 10px;
}
.custom {
--background: lightpink;
--background-hover: #ffb6c1;
--background-activated: green;
--color: #222;
--color-activated: white;
--opacity: 1;
}
.medium {
--color: #989aa2;
--background-hover: #989aa2;
}
</style>
</body>
</html>

0 comments:

Post a Comment

Note: only a member of this blog may post a comment.