javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

test(button): add other shapes to shape test

Browse Source
This commit is contained in:
Brandy Carney
2024-04-11 16:55:24 -04:00
parent 95daa05a49
commit 940e96d41f
1 changed files with 253 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

275
core/src/components/button/test/shape/index.html
View File

@@ -2,7 +2,7 @@
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" />
<title>Button - Round</title>
<title>Button - Shape</title>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
@@ -26,7 +26,7 @@
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Button - Round</ion-title>
<ion-title>Button - Shape</ion-title>
</ion-toolbar>
</ion-header>
@@ -34,17 +34,174 @@
<h1>Default</h1>
<div id="default" class="grid">
<div>
<ion-button size="small" shape="round">Button</ion-button>
<ion-button size="small">Button</ion-button>
</div>
<div>
<ion-button>Button</ion-button>
</div>
<div>
<ion-button size="large">Button</ion-button>
</div>
<div>
<ion-button size="small">
<ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
</ion-button>
</div>
<div>
<ion-button>
<ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
</ion-button>
</div>
<div>
<ion-button size="large">
<ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
</ion-button>
</div>
<div>
<ion-button fill="outline" size="small">Button</ion-button>
</div>
<div>
<ion-button fill="outline">Button</ion-button>
</div>
<div>
<ion-button fill="outline" size="large">Button</ion-button>
</div>
<div>
<ion-button fill="outline" size="small">
<ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
</ion-button>
</div>
<div>
<ion-button fill="outline">
<ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
</ion-button>
</div>
<div>
<ion-button fill="outline" size="large">
<ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
</ion-button>
</div>
<!-- Clear buttons have focused state to see shape -->
<div>
<ion-button fill="clear" size="small" class="ion-focused">Button</ion-button>
</div>
<div>
<ion-button fill="clear" class="ion-focused">Button</ion-button>
</div>
<div>
<ion-button fill="clear" size="large" class="ion-focused">Button</ion-button>
</div>
<div>
<ion-button fill="clear" size="small" class="ion-focused">
<ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
</ion-button>
</div>
<div>
<ion-button fill="clear" class="ion-focused">
<ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
</ion-button>
</div>
<div>
<ion-button fill="clear" size="large" class="ion-focused">
<ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
</ion-button>
</div>
</div>
<h1>Soft</h1>
<div id="soft" class="grid">
<div>
<ion-button shape="soft" size="small">Button</ion-button>
</div>
<div>
<ion-button shape="soft">Button</ion-button>
</div>
<div>
<ion-button shape="soft" size="large">Button</ion-button>
</div>
<div>
<ion-button shape="soft" size="small">
<ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
</ion-button>
</div>
<div>
<ion-button shape="soft">
<ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
</ion-button>
</div>
<div>
<ion-button shape="soft" size="large">
<ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
</ion-button>
</div>
<div>
<ion-button shape="soft" fill="outline" size="small">Button</ion-button>
</div>
<div>
<ion-button shape="soft" fill="outline">Button</ion-button>
</div>
<div>
<ion-button shape="soft" fill="outline" size="large">Button</ion-button>
</div>
<div>
<ion-button shape="soft" fill="outline" size="small">
<ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
</ion-button>
</div>
<div>
<ion-button shape="soft" fill="outline">
<ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
</ion-button>
</div>
<div>
<ion-button shape="soft" fill="outline" size="large">
<ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
</ion-button>
</div>
<!-- Clear buttons have focused state to see shape -->
<div>
<ion-button shape="soft" fill="clear" size="small" class="ion-focused">Button</ion-button>
</div>
<div>
<ion-button shape="soft" fill="clear" class="ion-focused">Button</ion-button>
</div>
<div>
<ion-button shape="soft" fill="clear" size="large" class="ion-focused">Button</ion-button>
</div>
<div>
<ion-button shape="soft" fill="clear" size="small" class="ion-focused">
<ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
</ion-button>
</div>
<div>
<ion-button shape="soft" fill="clear" class="ion-focused">
<ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
</ion-button>
</div>
<div>
<ion-button shape="soft" fill="clear" size="large" class="ion-focused">
<ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
</ion-button>
</div>
</div>
<h1>Round</h1>
<div id="round" class="grid">
<div>
<ion-button shape="round" size="small">Button</ion-button>
</div>
<div>
<ion-button shape="round">Button</ion-button>
</div>
<div>
<ion-button size="large" shape="round">Button</ion-button>
<ion-button shape="round" size="large">Button</ion-button>
</div>
<div>
<ion-button size="small" shape="round">
<ion-button shape="round" size="small">
<ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
</ion-button>
</div>
@@ -54,25 +211,22 @@
</ion-button>
</div>
<div>
<ion-button size="large" shape="round">
<ion-button shape="round" size="large">
<ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
</ion-button>
</div>
</div>
<h1>Outline</h1>
<div id="outline" class="grid">
<div>
<ion-button size="small" shape="round" fill="outline">Button</ion-button>
<ion-button shape="round" fill="outline" size="small">Button</ion-button>
</div>
<div>
<ion-button shape="round" fill="outline">Button</ion-button>
</div>
<div>
<ion-button size="large" shape="round" fill="outline">Button</ion-button>
<ion-button shape="round" fill="outline" size="large">Button</ion-button>
</div>
<div>
<ion-button size="small" shape="round" fill="outline">
<ion-button shape="round" fill="outline" size="small">
<ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
</ion-button>
</div>
@@ -82,26 +236,23 @@
</ion-button>
</div>
<div>
<ion-button size="large" shape="round" fill="outline">
<ion-button shape="round" fill="outline" size="large">
<ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
</ion-button>
</div>
</div>
<h1>Clear</h1>
<!-- The buttons have the `ion-focused` class to highlight that they are round. Otherwise, they would be invisible. -->
<div id="clear" class="grid">
<!-- Clear buttons have focused state to see shape -->
<div>
<ion-button size="small" shape="round" fill="clear" class="ion-focused">Button</ion-button>
<ion-button shape="round" fill="clear" size="small" class="ion-focused">Button</ion-button>
</div>
<div>
<ion-button shape="round" fill="clear" class="ion-focused">Button</ion-button>
</div>
<div>
<ion-button size="large" shape="round" fill="clear" class="ion-focused">Button</ion-button>
<ion-button shape="round" fill="clear" size="large" class="ion-focused">Button</ion-button>
</div>
<div>
<ion-button size="small" shape="round" fill="clear" class="ion-focused">
<ion-button shape="round" fill="clear" size="small" class="ion-focused">
<ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
</ion-button>
</div>
@@ -111,12 +262,92 @@
</ion-button>
</div>
<div>
<ion-button size="large" shape="round" fill="clear" class="ion-focused">
<ion-button shape="round" fill="clear" size="large" class="ion-focused">
<ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
</ion-button>
</div>
</div>
<h1>Rectangular</h1>
<div id="rectangular" class="grid">
<div>
<ion-button shape="rectangular" size="small">Button</ion-button>
</div>
<div>
<ion-button shape="rectangular">Button</ion-button>
</div>
<div>
<ion-button shape="rectangular" size="large">Button</ion-button>
</div>
<div>
<ion-button shape="rectangular" size="small">
<ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
</ion-button>
</div>
<div>
<ion-button shape="rectangular">
<ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
</ion-button>
</div>
<div>
<ion-button shape="rectangular" size="large">
<ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
</ion-button>
</div>
<div>
<ion-button shape="rectangular" fill="outline" size="small">Button</ion-button>
</div>
<div>
<ion-button shape="rectangular" fill="outline">Button</ion-button>
</div>
<div>
<ion-button shape="rectangular" fill="outline" size="large">Button</ion-button>
</div>
<div>
<ion-button shape="rectangular" fill="outline" size="small">
<ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
</ion-button>
</div>
<div>
<ion-button shape="rectangular" fill="outline">
<ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
</ion-button>
</div>
<div>
<ion-button shape="rectangular" fill="outline" size="large">
<ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
</ion-button>
</div>
<!-- Clear buttons have focused state to see shape -->
<div>
<ion-button shape="rectangular" fill="clear" size="small" class="ion-focused">Button</ion-button>
</div>
<div>
<ion-button shape="rectangular" fill="clear" class="ion-focused">Button</ion-button>
</div>
<div>
<ion-button shape="rectangular" fill="clear" size="large" class="ion-focused">Button</ion-button>
</div>
<div>
<ion-button shape="rectangular" fill="clear" size="small" class="ion-focused">
<ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
</ion-button>
</div>
<div>
<ion-button shape="rectangular" fill="clear" class="ion-focused">
<ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
</ion-button>
</div>
<div>
<ion-button shape="rectangular" fill="clear" size="large" class="ion-focused">
<ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
</ion-button>
</div>
</div>
<!-- TODO remove from tests -->
<h1>Color</h1>
<div id="color">
<ion-button shape="round">Default</ion-button>