mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
fix(button): add custom properties and remove --ion-color overrides (#15463)
- adds custom properties - removes the overrides of `--ion-color-*` variables - documents the properties references #14808 references #14853 references #14850
This commit is contained in:
Brandy Carney
@@ -21,51 +21,61 @@
|
||||
<ion-content id="content" padding no-bounce text-center>
|
||||
<p>
|
||||
<ion-button>Default</ion-button>
|
||||
<ion-button class="focused">Default.focused</ion-button>
|
||||
<ion-button class="activated">Default.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button color="primary">Primary</ion-button>
|
||||
<ion-button class="focused" color="primary">Primary.focused</ion-button>
|
||||
<ion-button class="activated" color="primary">Primary.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button color="secondary">Secondary</ion-button>
|
||||
<ion-button class="focused" color="secondary">Secondary.focused</ion-button>
|
||||
<ion-button class="activated" color="secondary">Secondary.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button color="tertiary">Tertiary</ion-button>
|
||||
<ion-button class="focused" color="tertiary">Tertiary.focused</ion-button>
|
||||
<ion-button class="activated" color="tertiary">Tertiary.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button color="success">Success</ion-button>
|
||||
<ion-button class="focused" color="success">Success.focused</ion-button>
|
||||
<ion-button class="activated" color="success">Success.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button color="warning">Warning</ion-button>
|
||||
<ion-button class="focused" color="warning">Warning.focused</ion-button>
|
||||
<ion-button class="activated" color="warning">Warning.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button color="danger">Danger</ion-button>
|
||||
<ion-button class="focused" color="danger">Danger.focused</ion-button>
|
||||
<ion-button class="activated" color="danger">Danger.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button color="light">Light</ion-button>
|
||||
<ion-button class="focused" color="light">Light.focused</ion-button>
|
||||
<ion-button class="activated" color="light">Light.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button color="medium">Medium</ion-button>
|
||||
<ion-button class="focused" color="medium">Medium.focused</ion-button>
|
||||
<ion-button class="activated" color="medium">Medium.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button color="dark">Dark</ion-button>
|
||||
<ion-button class="focused" color="dark">Dark.focused</ion-button>
|
||||
<ion-button class="activated" color="dark">Dark.activated</ion-button>
|
||||
</p>
|
||||
|
||||
|
||||
@@ -5,12 +5,12 @@ const { register, Page, platforms } = require('../../../../../scripts/e2e');
|
||||
|
||||
class E2ETestPage extends Page {
|
||||
constructor(driver, platform) {
|
||||
super(driver, `http://localhost:3333/src/components/button/test/fill?ionic:mode=${platform}`);
|
||||
super(driver, `http://localhost:3333/src/components/button/test/clear?ionic:mode=${platform}`);
|
||||
}
|
||||
}
|
||||
|
||||
platforms.forEach(platform => {
|
||||
describe('button/fill', () => {
|
||||
describe('button/clear', () => {
|
||||
register('should init', driver => {
|
||||
const page = new E2ETestPage(driver, platform);
|
||||
return page.navigate('#content');
|
||||
100
core/src/components/button/test/clear/index.html
Normal file
100
core/src/components/button/test/clear/index.html
Normal file
@@ -0,0 +1,100 @@
|
||||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Button - Clear</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<script src="/dist/ionic.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="/css/ionic.bundle.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ion-app>
|
||||
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Button - Clear</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content id="content" padding no-bounce>
|
||||
<p>
|
||||
<ion-button fill="clear">Default</ion-button>
|
||||
<ion-button fill="clear" class="activated">Default.activated</ion-button>
|
||||
<ion-button fill="clear" class="focused">Default.focused</ion-button>
|
||||
<ion-button fill="clear" class="activated focused">Default.activated.focused</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button fill="clear" color="primary">Primary</ion-button>
|
||||
<ion-button fill="clear" class="activated" color="primary">Primary.activated</ion-button>
|
||||
<ion-button fill="clear" class="focused" color="primary">Primary.focused</ion-button>
|
||||
<ion-button fill="clear" class="activated focused" color="primary">Primary.activated.focused</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button fill="clear" color="secondary">Secondary</ion-button>
|
||||
<ion-button fill="clear" class="activated" color="secondary">Secondary.activated</ion-button>
|
||||
<ion-button fill="clear" class="focused" color="secondary">Secondary.focused</ion-button>
|
||||
<ion-button fill="clear" class="activated focused" color="secondary">Secondary.activated.focused</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button fill="clear" color="tertiary">Tertiary</ion-button>
|
||||
<ion-button fill="clear" class="activated" color="tertiary">Tertiary.activated</ion-button>
|
||||
<ion-button fill="clear" class="focused" color="tertiary">Tertiary.focused</ion-button>
|
||||
<ion-button fill="clear" class="activated focused" color="tertiary">Tertiary.activated.focused</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button fill="clear" color="success">Success</ion-button>
|
||||
<ion-button fill="clear" class="activated" color="success">Success.activated</ion-button>
|
||||
<ion-button fill="clear" class="focused" color="success">Success.focused</ion-button>
|
||||
<ion-button fill="clear" class="activated focused" color="success">Success.activated.focused</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button fill="clear" color="warning">Warning</ion-button>
|
||||
<ion-button fill="clear" class="activated" color="warning">Warning.activated</ion-button>
|
||||
<ion-button fill="clear" class="focused" color="warning">Warning.focused</ion-button>
|
||||
<ion-button fill="clear" class="activated focused" color="warning">Warning.activated.focused</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button fill="clear" color="danger">Danger</ion-button>
|
||||
<ion-button fill="clear" class="activated" color="danger">Danger.activated</ion-button>
|
||||
<ion-button fill="clear" class="focused" color="danger">Danger.focused</ion-button>
|
||||
<ion-button fill="clear" class="activated focused" color="danger">Danger.activated.focused</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button fill="clear" color="light">Light</ion-button>
|
||||
<ion-button fill="clear" class="activated" color="light">Light.activated</ion-button>
|
||||
<ion-button fill="clear" class="focused" color="light">Light.focused</ion-button>
|
||||
<ion-button fill="clear" class="activated focused" color="light">Light.activated.focused</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button fill="clear" color="medium">Medium</ion-button>
|
||||
<ion-button fill="clear" class="activated" color="medium">Medium.activated</ion-button>
|
||||
<ion-button fill="clear" class="focused" color="medium">Medium.focused</ion-button>
|
||||
<ion-button fill="clear" class="activated focused" color="medium">Medium.activated.focused</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button fill="clear" color="dark">Dark</ion-button>
|
||||
<ion-button fill="clear" class="activated" color="dark">Dark.activated</ion-button>
|
||||
<ion-button fill="clear" class="focused" color="dark">Dark.focused</ion-button>
|
||||
<ion-button fill="clear" class="activated focused" color="dark">Dark.activated.focused</ion-button>
|
||||
</p>
|
||||
<p>
|
||||
<ion-button fill="clear" disabled>Disabled</ion-button>
|
||||
<ion-button fill="clear" color="secondary" disabled>Secondary Disabled</ion-button>
|
||||
</p>
|
||||
</ion-content>
|
||||
|
||||
</ion-app>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
19
core/src/components/button/test/outline/e2e.js
Normal file
19
core/src/components/button/test/outline/e2e.js
Normal file
@@ -0,0 +1,19 @@
|
||||
'use strict';
|
||||
|
||||
const { By, until } = require('selenium-webdriver');
|
||||
const { register, Page, platforms } = require('../../../../../scripts/e2e');
|
||||
|
||||
class E2ETestPage extends Page {
|
||||
constructor(driver, platform) {
|
||||
super(driver, `http://localhost:3333/src/components/button/test/outline?ionic:mode=${platform}`);
|
||||
}
|
||||
}
|
||||
|
||||
platforms.forEach(platform => {
|
||||
describe('button/outline', () => {
|
||||
register('should init', driver => {
|
||||
const page = new E2ETestPage(driver, platform);
|
||||
return page.navigate('#content');
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -3,7 +3,7 @@
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Button - Fill</title>
|
||||
<title>Button - Outline</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<script src="/dist/ionic.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="/css/ionic.bundle.css">
|
||||
@@ -14,7 +14,7 @@
|
||||
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Button - Fill</ion-title>
|
||||
<ion-title>Button - Outline</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
@@ -22,110 +22,76 @@
|
||||
<p>
|
||||
<ion-button fill="outline">Default</ion-button>
|
||||
<ion-button fill="outline" class="activated">Default.activated</ion-button>
|
||||
<ion-button fill="outline" class="focused">Default.focused</ion-button>
|
||||
<ion-button fill="outline" class="activated focused">Default.activated.focused</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button fill="outline" color="primary">Primary</ion-button>
|
||||
<ion-button fill="outline" class="activated" color="primary">Primary.activated</ion-button>
|
||||
<ion-button fill="outline" class="focused" color="primary">Primary.focused</ion-button>
|
||||
<ion-button fill="outline" class="activated focused" color="primary">Primary.activated.focused</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button fill="outline" color="secondary">Secondary</ion-button>
|
||||
<ion-button fill="outline" class="activated" color="secondary">Secondary.activated</ion-button>
|
||||
<ion-button fill="outline" class="focused" color="secondary">Secondary.focused</ion-button>
|
||||
<ion-button fill="outline" class="activated focused" color="secondary">Secondary.activated.focused</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button fill="outline" color="tertiary">Tertiary</ion-button>
|
||||
<ion-button fill="outline" class="activated" color="tertiary">Tertiary.activated</ion-button>
|
||||
<ion-button fill="outline" class="focused" color="tertiary">Tertiary.focused</ion-button>
|
||||
<ion-button fill="outline" class="activated focused" color="tertiary">Tertiary.activated.focused</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button fill="outline" color="success">Success</ion-button>
|
||||
<ion-button fill="outline" class="activated" color="success">Success.activated</ion-button>
|
||||
<ion-button fill="outline" class="focused" color="success">Success.focused</ion-button>
|
||||
<ion-button fill="outline" class="activated focused" color="success">Success.activated.focused</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button fill="outline" color="warning">Warning</ion-button>
|
||||
<ion-button fill="outline" class="activated" color="warning">Warning.activated</ion-button>
|
||||
<ion-button fill="outline" class="focused" color="warning">Warning.focused</ion-button>
|
||||
<ion-button fill="outline" class="activated focused" color="warning">Warning.activated.focused</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button fill="outline" color="danger">Danger</ion-button>
|
||||
<ion-button fill="outline" class="activated" color="danger">Danger.activated</ion-button>
|
||||
<ion-button fill="outline" class="focused" color="danger">Danger.focused</ion-button>
|
||||
<ion-button fill="outline" class="activated focused" color="danger">Danger.activated.focused</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button fill="outline" color="light">Light</ion-button>
|
||||
<ion-button fill="outline" class="activated" color="light">Light.activated</ion-button>
|
||||
<ion-button fill="outline" class="focused" color="light">Light.focused</ion-button>
|
||||
<ion-button fill="outline" class="activated focused" color="light">Light.activated.focused</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button fill="outline" color="medium">Medium</ion-button>
|
||||
<ion-button fill="outline" class="activated" color="medium">Medium.activated</ion-button>
|
||||
<ion-button fill="outline" class="focused" color="medium">Medium.focused</ion-button>
|
||||
<ion-button fill="outline" class="activated focused" color="medium">Medium.activated.focused</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button fill="outline" color="dark">Dark</ion-button>
|
||||
<ion-button fill="outline" class="activated" color="dark">Dark.activated</ion-button>
|
||||
<ion-button fill="outline" class="focused" color="dark">Dark.focused</ion-button>
|
||||
<ion-button fill="outline" class="activated focused" color="dark">Dark.activated.focused</ion-button>
|
||||
</p>
|
||||
<p>
|
||||
<ion-button fill="outline" disabled>Disabled</ion-button>
|
||||
<ion-button fill="outline" color="secondary" disabled>Secondary Disabled</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button fill="clear">Default</ion-button>
|
||||
<ion-button fill="clear" class="activated">Default.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button fill="clear" color="primary">Primary</ion-button>
|
||||
<ion-button fill="clear" class="activated" color="primary">Primary.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button fill="clear" color="secondary">Secondary</ion-button>
|
||||
<ion-button fill="clear" class="activated" color="secondary">Secondary.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button fill="clear" color="tertiary">Tertiary</ion-button>
|
||||
<ion-button fill="clear" class="activated" color="tertiary">Tertiary.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button fill="clear" color="success">Success</ion-button>
|
||||
<ion-button fill="clear" class="activated" color="success">Success.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button fill="clear" color="warning">Warning</ion-button>
|
||||
<ion-button fill="clear" class="activated" color="warning">Warning.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button fill="clear" color="danger">Danger</ion-button>
|
||||
<ion-button fill="clear" class="activated" color="danger">Danger.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button fill="clear" color="light">Light</ion-button>
|
||||
<ion-button fill="clear" class="activated" color="light">Light.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button fill="clear" color="medium">Medium</ion-button>
|
||||
<ion-button fill="clear" class="activated" color="medium">Medium.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button fill="clear" color="dark">Dark</ion-button>
|
||||
<ion-button fill="clear" class="activated" color="dark">Dark.activated</ion-button>
|
||||
</p>
|
||||
<p>
|
||||
<ion-button fill="clear" disabled>Disabled</ion-button>
|
||||
<ion-button fill="clear" color="secondary" disabled>Secondary Disabled</ion-button>
|
||||
</p>
|
||||
</ion-content>
|
||||
|
||||
</ion-app>
|
||||
@@ -10,27 +10,91 @@
|
||||
</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>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 color="success">Success</ion-button>
|
||||
<ion-button color="warning">Warning</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 color="medium">Medium</ion-button>
|
||||
<ion-button color="dark">Dark</ion-button>
|
||||
</p>
|
||||
<p>
|
||||
<ion-badge color="primary">Primary</ion-badge>
|
||||
<ion-badge color="secondary">Secondary</ion-badge>
|
||||
<ion-badge color="tertiary">Tertiary</ion-badge>
|
||||
<ion-badge color="success">Success</ion-badge>
|
||||
<ion-badge color="warning">Warning</ion-badge>
|
||||
<ion-badge color="danger">Danger</ion-badge>
|
||||
<ion-badge color="light">Light</ion-badge>
|
||||
<ion-badge color="medium">Medium</ion-badge>
|
||||
<ion-badge color="dark">Dark</ion-badge>
|
||||
<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>
|
||||
|
||||
<!-- Custom Colors -->
|
||||
<ion-button class="custom">custom</ion-button>
|
||||
<ion-button class="custom activated">custom.activated</ion-button>
|
||||
<ion-button color="secondary" class="custom">custom w/ secondary</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 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-activated: green;
|
||||
--color: #222;
|
||||
--color-activated: white;
|
||||
--opacity: 1;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -61,6 +61,23 @@
|
||||
<ion-title>This is a long title with buttons. It just goes on and on my friend.</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar color="dark">
|
||||
<ion-buttons slot="secondary">
|
||||
<ion-button class="closeButton" fill="solid">
|
||||
Close
|
||||
</ion-button>
|
||||
<ion-button fill="solid">
|
||||
<ion-icon slot="icon-only" name="search"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-buttons slot="primary">
|
||||
<ion-button fill="solid" color="secondary">
|
||||
<ion-icon slot="icon-only" name="more"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-title>This is a long title with buttons. It just goes on and on my friend.</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="secondary">
|
||||
<ion-button>
|
||||
|
||||
Reference in New Issue
Block a user