mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
test(components): update tests to match v3
This commit is contained in:
Brandy Carney
@@ -21,12 +21,12 @@
|
||||
<ion-action-sheet-controller></ion-action-sheet-controller>
|
||||
|
||||
<ion-button expand="block" id="basic" onclick="presentBasic()">Basic</ion-button>
|
||||
<ion-button expand="block" id="icons" onclick="presentIcons()">Icons</ion-button>
|
||||
<ion-button expand="block" id="noBackdropDismiss" onclick="presentNoBackdropDismiss()">No Backdrop Dismiss</ion-button>
|
||||
<ion-button expand="block" id="alertFromActionSheet" onclick="presentAlert()">Alert from Action Sheet</ion-button>
|
||||
<ion-button expand="block" id="scrollableOptions" onclick="presentScroll()">Scrollable Options</ion-button>
|
||||
<ion-button expand="block" id="scrollWithoutCancel" onclick="presentScrollNoCancel()">Scroll Without Cancel</ion-button>
|
||||
<ion-button expand="block" id="cancelOnly" onclick="presentCancelOnly()">Cancel Only</ion-button>
|
||||
<ion-button expand="block" id="icons" onclick="presentIcons()">Icons</ion-button>
|
||||
<ion-button expand="block" id="cssClass" onclick="presentWithCssClass()">Custom CSS Class</ion-button>
|
||||
|
||||
</ion-content>
|
||||
|
||||
@@ -19,44 +19,76 @@
|
||||
|
||||
<ion-content>
|
||||
<ion-list>
|
||||
<ion-list-header>Badges Right</ion-list-header>
|
||||
<ion-item>
|
||||
<ion-badge slot="start" color="primary">11</ion-badge>
|
||||
<ion-label>Primary</ion-label>
|
||||
<ion-badge slot="end" color="primary">99</ion-badge>
|
||||
<ion-label>Default Badge</ion-label>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-badge slot="start" color="secondary">22</ion-badge>
|
||||
<ion-label>Secondary</ion-label>
|
||||
<ion-badge slot="end" color="primary">99</ion-badge>
|
||||
<ion-label>Primary Badge</ion-label>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-badge slot="start" color="danger">33</ion-badge>
|
||||
<ion-label>Danger</ion-label>
|
||||
<ion-badge slot="end" color="secondary">99</ion-badge>
|
||||
<ion-label>Secondary Badge</ion-label>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-badge slot="start" color="light">44</ion-badge>
|
||||
<ion-label>Light</ion-label>
|
||||
<ion-badge slot="end" color="danger">99</ion-badge>
|
||||
<ion-label>Danger Badge</ion-label>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-badge slot="start" color="dark">55</ion-badge>
|
||||
<ion-label>Dark</ion-label>
|
||||
<ion-badge slot="end" color="light">99</ion-badge>
|
||||
<ion-label>Light Badge</ion-label>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-badge slot="end" color="dark">99</ion-badge>
|
||||
<ion-label>Dark Badge</ion-label>
|
||||
</ion-item>
|
||||
<ion-item onclick="toggleColor()">
|
||||
<ion-badge id="toggleColor" slot="end" color="primary">99</ion-badge>
|
||||
<ion-label>Dynamic Badge Color (toggle)</ion-label>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
|
||||
<ion-button onclick="toggleColors()">Toggle Colors</ion-button>
|
||||
<ion-list>
|
||||
<ion-list-header>Badges Left</ion-list-header>
|
||||
<ion-item>
|
||||
<ion-badge slot="start" color="primary">99</ion-badge>
|
||||
<ion-label>Default Badge</ion-label>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-badge slot="start" color="primary">99</ion-badge>
|
||||
<ion-label>Primary Badge</ion-label>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-badge slot="start" color="secondary">99</ion-badge>
|
||||
<ion-label>Secondary Badge</ion-label>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-badge slot="start" color="danger">99</ion-badge>
|
||||
<ion-label>Danger Badge</ion-label>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-badge slot="start" color="light">99</ion-badge>
|
||||
<ion-label>Light Badge</ion-label>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-badge slot="start" color="dark">99</ion-badge>
|
||||
<ion-label>Dark Badge</ion-label>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
|
||||
</ion-page>
|
||||
</ion-app>
|
||||
|
||||
<script>
|
||||
const badges = [...document.querySelectorAll('ion-badge')];
|
||||
const baseColors = badges.map(el => el.getAttribute('color'));
|
||||
const badge = document.querySelector('#toggleColor');
|
||||
|
||||
function toggleColors() {
|
||||
badges.forEach((el, i) => {
|
||||
const prev = el.getAttribute('color');
|
||||
const base = baseColors[i];
|
||||
el.setAttribute('color', prev === base ? null : base);
|
||||
});
|
||||
function toggleColor() {
|
||||
const prev = badge.getAttribute('color');
|
||||
const base = 'secondary';
|
||||
badge.setAttribute('color', prev === base ? null : base);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
@@ -9,22 +9,72 @@
|
||||
<body>
|
||||
<ion-app>
|
||||
<ion-page>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Button - Basic</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Button - Basic</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content padding no-bounce>
|
||||
<p><ion-button>Default</ion-button></p>
|
||||
<p><ion-button color="primary">Primary</ion-button></p>
|
||||
<p><ion-button color="secondary">Secondary</ion-button></p>
|
||||
<p><ion-button color="danger">Danger</ion-button></p>
|
||||
<p><ion-button color="light">Light</ion-button></p>
|
||||
<p><ion-button color="dark">Dark</ion-button></p>
|
||||
<p><ion-button disabled>Disabled</ion-button></p>
|
||||
</ion-content>
|
||||
<ion-content padding no-bounce text-center>
|
||||
<p>
|
||||
<ion-button>Default</ion-button>
|
||||
<ion-button class="activated">Default.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button color="primary">Primary</ion-button>
|
||||
<ion-button color="primary" class="activated">Primary.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button color="secondary">Secondary</ion-button>
|
||||
<ion-button color="secondary" class="activated">Secondary.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button color="danger">Danger</ion-button>
|
||||
<ion-button color="danger" class="activated">Danger.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button color="light">Light</ion-button>
|
||||
<ion-button color="light" class="activated">Light.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button color="dark">Dark</ion-button>
|
||||
<ion-button color="dark" class="activated">Dark.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button disabled>Button Disabled</ion-button>
|
||||
<ion-button color="secondary" disabled>Secondary Disabled</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button id="dynamicColor1" onclick="changeColor(event)">Change Color</ion-button>
|
||||
<ion-button id="dynamicColor2" onclick="changeColor(event)" fill="outline">Change Color</ion-button>
|
||||
</p>
|
||||
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
</ion-app>
|
||||
|
||||
<script>
|
||||
testingColors = ['primary', 'secondary', 'danger', 'dark'];
|
||||
testingColorIndex = {
|
||||
dynamicColor1: 0,
|
||||
dynamicColor2: 0
|
||||
};
|
||||
|
||||
function changeColor(ev) {
|
||||
el = ev.currentTarget;
|
||||
|
||||
testingColorIndex[el.id] = (testingColorIndex[el.id] >= testingColors.length - 1 ? 0 : testingColorIndex[el.id] + 1);
|
||||
newColor = testingColors[testingColorIndex[el.id]];
|
||||
|
||||
el.color = newColor;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -9,21 +9,38 @@
|
||||
<body>
|
||||
<ion-app>
|
||||
<ion-page>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Button - Round</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Button - Round</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content padding no-bounce>
|
||||
<p><ion-button round>Default</ion-button></p>
|
||||
<p><ion-button round fill="outline" color="secondary">Outline</ion-button></p>
|
||||
<p><ion-button round fill="clear">Clear</ion-button></p>
|
||||
<p><ion-button round expand="block" color="danger">Block</ion-button></p>
|
||||
<p><ion-button round expand="full" color="dark">Full</ion-button></p>
|
||||
<p><ion-button round strong>Strong</ion-button></p>
|
||||
</ion-content>
|
||||
<ion-content padding text-center no-bounce>
|
||||
<ion-button round>Button</ion-button>
|
||||
<ion-button round color="light">Button Light</ion-button>
|
||||
<ion-button round color="secondary">Button Secondary</ion-button>
|
||||
<ion-button round color="danger">Button Danger</ion-button>
|
||||
<ion-button round color="dark">Button Dark</ion-button>
|
||||
|
||||
<ion-button fill="outline" round>Button</ion-button>
|
||||
<ion-button fill="outline" round color="light">Button Light</ion-button>
|
||||
<ion-button fill="outline" round color="secondary">Button Secondary</ion-button>
|
||||
<ion-button fill="outline" round color="danger">Button Danger</ion-button>
|
||||
<ion-button fill="outline" round color="dark">Button Dark</ion-button>
|
||||
|
||||
<ion-button round fill="clear">Clear</ion-button>
|
||||
<ion-button round expand="block" color="danger">Block</ion-button>
|
||||
<ion-button round expand="full" color="dark">Full</ion-button>
|
||||
<ion-button round strong>Strong</ion-button>
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
</ion-app>
|
||||
|
||||
<style>
|
||||
ion-button {
|
||||
display: block !important;
|
||||
margin: 8px auto !important;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -17,225 +17,51 @@
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content fullscreen="true">
|
||||
<ion-card>
|
||||
<ion-card-content>
|
||||
This is just your basic card with some text to boot. Like it? Keep scrolling...
|
||||
</ion-card-content>
|
||||
</ion-card>
|
||||
|
||||
<ion-content>
|
||||
<ion-card>
|
||||
<ion-card-header>
|
||||
<ion-card-subtitle>
|
||||
Subtitle
|
||||
</ion-card-subtitle>
|
||||
<ion-card-title>
|
||||
Title
|
||||
</ion-card-title>
|
||||
<ion-card-title>Card Header</ion-card-title>
|
||||
</ion-card-header>
|
||||
|
||||
<ion-card-content>
|
||||
The British use the term "header", but the American term "head-shot" the English simply refuse to adopt.
|
||||
Keep close to Nature's heart... and break clear away, once in awhile,
|
||||
and climb a mountain or spend a week in the woods. Wash your spirit clean.
|
||||
</ion-card-content>
|
||||
</ion-card>
|
||||
|
||||
<ion-card>
|
||||
<div style="position: absolute; top: 0; left:0; right:0; bottom:0;">
|
||||
<img style="transform: rotate(145deg) scale(1.5)" src="http://images.all-free-download.com/images/graphiclarge/travel_icons_6813629.jpg">
|
||||
</div>
|
||||
<ion-card-header translucent>
|
||||
<ion-card-subtitle>
|
||||
Subtitle
|
||||
</ion-card-subtitle>
|
||||
<ion-card-title>
|
||||
Title
|
||||
</ion-card-title>
|
||||
</ion-card-header>
|
||||
|
||||
<ion-card-content style="min-height: 200px">
|
||||
</ion-card-content>
|
||||
</ion-card>
|
||||
|
||||
<ion-card style="color: white;">
|
||||
<div style="position: absolute; top: 0; left:0; right:0; bottom:0;">
|
||||
<img style="transform: scale(2)" src="https://images.unsplash.com/photo-1500531279542-fc8490c8ea4d?auto=format&fit=crop&w=1502&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D">
|
||||
</div>
|
||||
<ion-card-header translucent>
|
||||
<ion-card-subtitle>
|
||||
Subtitle
|
||||
</ion-card-subtitle>
|
||||
<ion-card-title>
|
||||
Title
|
||||
</ion-card-title>
|
||||
</ion-card-header>
|
||||
|
||||
<ion-card-content style="padding-top: 100px">
|
||||
The British use the term "header", but the American term "head-shot" the English simply refuse to adopt.
|
||||
</ion-card-content>
|
||||
</ion-card>
|
||||
|
||||
<ion-card>
|
||||
<div style="position: absolute; top: 0; left:0; right:0; bottom:0;">
|
||||
<img src="https://images.unsplash.com/photo-1483354483454-4cd359948304?dpr=1&auto=format&fit=crop&w=1000&q=80&cs=tinysrgb&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D">
|
||||
</div>
|
||||
|
||||
<ion-card-header>
|
||||
<ion-card-subtitle>
|
||||
Subtitle
|
||||
</ion-card-subtitle>
|
||||
<ion-card-title>
|
||||
Title
|
||||
</ion-card-title>
|
||||
</ion-card-header>
|
||||
|
||||
<ion-card-content>
|
||||
The British use the term "header", but the American term "head-shot" the English simply refuse to adopt.
|
||||
</ion-card-content>
|
||||
</ion-card>
|
||||
|
||||
<ion-card>
|
||||
<ion-card-content>
|
||||
<ion-card-title>
|
||||
Card Title Goes Here
|
||||
</ion-card-title>
|
||||
<p>
|
||||
Keep close to Nature's heart... and break clear away, once in awhile, and climb a mountain. I am within a paragraph element.
|
||||
</p>
|
||||
</ion-card-content>
|
||||
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
<ion-col no-padding>
|
||||
<ion-button clear small>
|
||||
<ion-icon slot="start" name="star"></ion-icon>
|
||||
Star
|
||||
</ion-button>
|
||||
</ion-col>
|
||||
<ion-col no-padding text-right>
|
||||
<ion-button clear small class="activated">
|
||||
<ion-icon slot="start" name="share"></ion-icon>
|
||||
Activated
|
||||
</ion-button>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
|
||||
</ion-card>
|
||||
|
||||
<ion-card class="cards-list-demo">
|
||||
<ion-card-header>
|
||||
Explore Nearby
|
||||
</ion-card-header>
|
||||
|
||||
<ion-list>
|
||||
<ion-item>
|
||||
<ion-icon name='cart' item-start></ion-icon>
|
||||
Shopping
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-icon name='medical' item-start></ion-icon>
|
||||
Hospital
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-icon name='cafe' item-start></ion-icon>
|
||||
Cafe
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-icon name='paw' item-start></ion-icon>
|
||||
Dog Park
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-icon name='beer' item-start></ion-icon>
|
||||
Pub
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-icon name='planet' item-start></ion-icon>
|
||||
Space
|
||||
</ion-item>
|
||||
|
||||
</ion-list>
|
||||
</ion-card>
|
||||
|
||||
<ion-card>
|
||||
|
||||
<ion-item>
|
||||
<ion-avatar item-start>
|
||||
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
|
||||
</ion-avatar>
|
||||
<h2>Card With An Inset Picture</h2>
|
||||
<p>Isn't it beautiful</p>
|
||||
<ion-icon name="pin" slot="start"></ion-icon>
|
||||
ion-item in a card, icon left, button right
|
||||
<ion-button fill="outline" slot="end">View</ion-button>
|
||||
</ion-item>
|
||||
|
||||
<div>
|
||||
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
|
||||
</div>
|
||||
|
||||
<ion-card-content>
|
||||
<p>Hello. I am a paragraph.</p>
|
||||
This is content, without any paragraph or header tags,
|
||||
within an ion-card-content element.
|
||||
</ion-card-content>
|
||||
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
<ion-col no-padding>
|
||||
<ion-button clear small>
|
||||
<ion-icon slot="start" name="star"></ion-icon>
|
||||
Favorite
|
||||
</ion-button>
|
||||
</ion-col>
|
||||
<ion-col no-padding text-center>
|
||||
<ion-button clear small>
|
||||
<ion-icon slot="start" name="musical-notes"></ion-icon>
|
||||
Listen
|
||||
</ion-button>
|
||||
</ion-col>
|
||||
<ion-col no-padding align-self-center padding-right text-right>
|
||||
<ion-note>
|
||||
11h ago
|
||||
</ion-note>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
</ion-card>
|
||||
|
||||
<ion-card no-margin>
|
||||
<ion-card>
|
||||
<ion-item href="#" class="activated">
|
||||
<ion-icon name="wifi" slot="start"></ion-icon>
|
||||
Card Link Item 1 .activated
|
||||
</ion-item>
|
||||
|
||||
<div>
|
||||
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
|
||||
</div>
|
||||
<ion-item href="#">
|
||||
<ion-icon name="wine" slot="start"></ion-icon>
|
||||
Card Link Item 2
|
||||
</ion-item>
|
||||
|
||||
<ion-card-content>
|
||||
ion-card[no-margin] This card was breaking the border radius.
|
||||
</ion-card-content>
|
||||
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
<ion-col no-padding>
|
||||
<ion-button clear small dark>
|
||||
<ion-icon slot="start" name="star"></ion-icon>
|
||||
Favorite
|
||||
</ion-button>
|
||||
</ion-col>
|
||||
|
||||
<ion-col no-padding text-center>
|
||||
<ion-button clear small dark>
|
||||
<ion-icon slot="start" name="musical-notes"></ion-icon>
|
||||
Listen
|
||||
</ion-button>
|
||||
</ion-col>
|
||||
<ion-col no-padding text-right>
|
||||
<ion-button clear small dark>
|
||||
<ion-icon slot="start" name="share-alt"></ion-icon>
|
||||
Share
|
||||
</ion-button>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
<ion-item class="activated">
|
||||
<ion-icon name="warning" slot="start"></ion-icon>
|
||||
Card Button Item 1 .activated
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-icon name="walk" slot="start"></ion-icon>
|
||||
Card Button Item 2
|
||||
</ion-item>
|
||||
</ion-card>
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
|
||||
245
packages/core/src/components/card/test/translucent/index.html
Normal file
245
packages/core/src/components/card/test/translucent/index.html
Normal file
@@ -0,0 +1,245 @@
|
||||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Card - Basic</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>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ion-app>
|
||||
<ion-page>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Card - Basic</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content fullscreen="true">
|
||||
<ion-card>
|
||||
<ion-card-content>
|
||||
This is just your basic card with some text to boot. Like it? Keep scrolling...
|
||||
</ion-card-content>
|
||||
</ion-card>
|
||||
|
||||
<ion-card>
|
||||
<ion-card-header>
|
||||
<ion-card-subtitle>
|
||||
Subtitle
|
||||
</ion-card-subtitle>
|
||||
<ion-card-title>
|
||||
Title
|
||||
</ion-card-title>
|
||||
</ion-card-header>
|
||||
|
||||
<ion-card-content>
|
||||
The British use the term "header", but the American term "head-shot" the English simply refuse to adopt.
|
||||
</ion-card-content>
|
||||
</ion-card>
|
||||
|
||||
<ion-card>
|
||||
<div style="position: absolute; top: 0; left:0; right:0; bottom:0;">
|
||||
<img style="transform: rotate(145deg) scale(1.5)" src="http://images.all-free-download.com/images/graphiclarge/travel_icons_6813629.jpg">
|
||||
</div>
|
||||
<ion-card-header translucent>
|
||||
<ion-card-subtitle>
|
||||
Subtitle
|
||||
</ion-card-subtitle>
|
||||
<ion-card-title>
|
||||
Title
|
||||
</ion-card-title>
|
||||
</ion-card-header>
|
||||
|
||||
<ion-card-content style="min-height: 200px">
|
||||
</ion-card-content>
|
||||
</ion-card>
|
||||
|
||||
<ion-card style="color: white;">
|
||||
<div style="position: absolute; top: 0; left:0; right:0; bottom:0;">
|
||||
<img style="transform: scale(2)" src="https://images.unsplash.com/photo-1500531279542-fc8490c8ea4d?auto=format&fit=crop&w=1502&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D">
|
||||
</div>
|
||||
<ion-card-header translucent>
|
||||
<ion-card-subtitle>
|
||||
Subtitle
|
||||
</ion-card-subtitle>
|
||||
<ion-card-title>
|
||||
Title
|
||||
</ion-card-title>
|
||||
</ion-card-header>
|
||||
|
||||
<ion-card-content style="padding-top: 100px">
|
||||
The British use the term "header", but the American term "head-shot" the English simply refuse to adopt.
|
||||
</ion-card-content>
|
||||
</ion-card>
|
||||
|
||||
<ion-card>
|
||||
<div style="position: absolute; top: 0; left:0; right:0; bottom:0;">
|
||||
<img src="https://images.unsplash.com/photo-1483354483454-4cd359948304?dpr=1&auto=format&fit=crop&w=1000&q=80&cs=tinysrgb&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D">
|
||||
</div>
|
||||
|
||||
<ion-card-header>
|
||||
<ion-card-subtitle>
|
||||
Subtitle
|
||||
</ion-card-subtitle>
|
||||
<ion-card-title>
|
||||
Title
|
||||
</ion-card-title>
|
||||
</ion-card-header>
|
||||
|
||||
<ion-card-content>
|
||||
The British use the term "header", but the American term "head-shot" the English simply refuse to adopt.
|
||||
</ion-card-content>
|
||||
</ion-card>
|
||||
|
||||
<ion-card>
|
||||
<ion-card-content>
|
||||
<ion-card-title>
|
||||
Card Title Goes Here
|
||||
</ion-card-title>
|
||||
<p>
|
||||
Keep close to Nature's heart... and break clear away, once in awhile, and climb a mountain. I am within a paragraph element.
|
||||
</p>
|
||||
</ion-card-content>
|
||||
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
<ion-col no-padding>
|
||||
<ion-button clear small>
|
||||
<ion-icon slot="start" name="star"></ion-icon>
|
||||
Star
|
||||
</ion-button>
|
||||
</ion-col>
|
||||
<ion-col no-padding text-right>
|
||||
<ion-button clear small class="activated">
|
||||
<ion-icon slot="start" name="share"></ion-icon>
|
||||
Activated
|
||||
</ion-button>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
|
||||
</ion-card>
|
||||
|
||||
<ion-card class="cards-list-demo">
|
||||
<ion-card-header>
|
||||
Explore Nearby
|
||||
</ion-card-header>
|
||||
|
||||
<ion-list>
|
||||
<ion-item>
|
||||
<ion-icon name='cart' item-start></ion-icon>
|
||||
Shopping
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-icon name='medical' item-start></ion-icon>
|
||||
Hospital
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-icon name='cafe' item-start></ion-icon>
|
||||
Cafe
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-icon name='paw' item-start></ion-icon>
|
||||
Dog Park
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-icon name='beer' item-start></ion-icon>
|
||||
Pub
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-icon name='planet' item-start></ion-icon>
|
||||
Space
|
||||
</ion-item>
|
||||
|
||||
</ion-list>
|
||||
</ion-card>
|
||||
|
||||
<ion-card>
|
||||
|
||||
<ion-item>
|
||||
<ion-avatar item-start>
|
||||
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
|
||||
</ion-avatar>
|
||||
<h2>Card With An Inset Picture</h2>
|
||||
<p>Isn't it beautiful</p>
|
||||
</ion-item>
|
||||
|
||||
<div>
|
||||
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
|
||||
</div>
|
||||
|
||||
<ion-card-content>
|
||||
<p>Hello. I am a paragraph.</p>
|
||||
</ion-card-content>
|
||||
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
<ion-col no-padding>
|
||||
<ion-button clear small>
|
||||
<ion-icon slot="start" name="star"></ion-icon>
|
||||
Favorite
|
||||
</ion-button>
|
||||
</ion-col>
|
||||
<ion-col no-padding text-center>
|
||||
<ion-button clear small>
|
||||
<ion-icon slot="start" name="musical-notes"></ion-icon>
|
||||
Listen
|
||||
</ion-button>
|
||||
</ion-col>
|
||||
<ion-col no-padding align-self-center padding-right text-right>
|
||||
<ion-note>
|
||||
11h ago
|
||||
</ion-note>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
</ion-card>
|
||||
|
||||
<ion-card no-margin>
|
||||
|
||||
<div>
|
||||
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
|
||||
</div>
|
||||
|
||||
<ion-card-content>
|
||||
ion-card[no-margin] This card was breaking the border radius.
|
||||
</ion-card-content>
|
||||
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
<ion-col no-padding>
|
||||
<ion-button clear small dark>
|
||||
<ion-icon slot="start" name="star"></ion-icon>
|
||||
Favorite
|
||||
</ion-button>
|
||||
</ion-col>
|
||||
|
||||
<ion-col no-padding text-center>
|
||||
<ion-button clear small dark>
|
||||
<ion-icon slot="start" name="musical-notes"></ion-icon>
|
||||
Listen
|
||||
</ion-button>
|
||||
</ion-col>
|
||||
<ion-col no-padding text-right>
|
||||
<ion-button clear small dark>
|
||||
<ion-icon slot="start" name="share-alt"></ion-icon>
|
||||
Share
|
||||
</ion-button>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
|
||||
</ion-card>
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
</ion-app>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -25,48 +25,131 @@
|
||||
</ion-header>
|
||||
|
||||
<ion-content>
|
||||
<ion-item>
|
||||
<ion-label>Item Icons</ion-label>
|
||||
<ion-icon name="heart" slot="end"></ion-icon>
|
||||
<ion-icon name="star" slot="start"></ion-icon>
|
||||
<ion-item href="#" onclick="testClick(event)">
|
||||
a[ion-item]
|
||||
</ion-item>
|
||||
|
||||
<ion-item class="activated" href="#" onclick="testClick(event)">
|
||||
a[ion-item].activated
|
||||
</ion-item>
|
||||
|
||||
<ion-item color="secondary" href="#" onclick="testClick(event)">
|
||||
a[ion-item] secondary
|
||||
</ion-item>
|
||||
|
||||
<ion-item onclick="testClick(event)">
|
||||
button[ion-item]
|
||||
</ion-item>
|
||||
|
||||
<ion-item class="activated" (click)="testClick(event)">
|
||||
button[ion-item].activated
|
||||
</ion-item>
|
||||
|
||||
<ion-item color="danger" (click)="testClick(event)">
|
||||
button[ion-item] danger
|
||||
</ion-item>
|
||||
|
||||
<ion-item onclick="testClickOutsize(event)">
|
||||
<ion-button slot="start" onclick="testClick(event)">Default</ion-button>
|
||||
Inner Buttons
|
||||
<ion-button fill="outline" slot="end" onclick="testClick(event)">Outline</ion-button>
|
||||
</ion-item>
|
||||
|
||||
<ion-item disabled>
|
||||
<ion-button slot="start" onclick="testClick(event)">
|
||||
<ion-icon slot="start" name="home"></ion-icon>
|
||||
Left Icon
|
||||
</ion-button>
|
||||
disabled left icon buttons
|
||||
<ion-button fill="outline" slot="end" onclick="testClick(event)">
|
||||
<ion-icon slot="start" name="star"></ion-icon>
|
||||
Left Icon
|
||||
</ion-button>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Item No Size Button</ion-label>
|
||||
<ion-button slot="start"><ion-icon name="heart" slot="end"></ion-icon>Start Button</ion-button>
|
||||
<ion-button slot="end">End Button<ion-icon name="star" slot="start"></ion-icon></ion-button>
|
||||
<ion-button slot="start" icon-end onclick="testClick(event)">
|
||||
Right Icon
|
||||
<ion-icon name="home"></ion-icon>
|
||||
</ion-button>
|
||||
right icon buttons
|
||||
<ion-button fill="outline" slot="end" icon-end onclick="testClick(event)">
|
||||
Right Icon
|
||||
<ion-icon name="star"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Item Outline Button</ion-label>
|
||||
<ion-button outline slot="start"><ion-icon name="heart" slot="end"></ion-icon>Start Button</ion-button>
|
||||
<ion-button outline slot="end">End Button<ion-icon name="star" slot="start"></ion-icon></ion-button>
|
||||
<ion-button fill="clear" slot="start" size="default" onclick="testClick(event)">
|
||||
<ion-icon slot="icon-only" name="navigate"></ion-icon>
|
||||
</ion-button>
|
||||
icon only buttons default
|
||||
<ion-button fill="clear" slot="end" size="default" onclick="testClick(event)">
|
||||
<ion-icon slot="icon-only" name="navigate"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-item>
|
||||
|
||||
<ion-item disabled onclick="testClick(event)">
|
||||
ion-item disabled right icon/text button large
|
||||
<ion-button slot="end" size="large" onclick="testClick(event)">
|
||||
<ion-icon slot="start" name="refresh"></ion-icon>
|
||||
Refresh
|
||||
</ion-button>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Item Large Button</ion-label>
|
||||
<ion-button large slot="start"><ion-icon name="star" slot="end"></ion-icon>Start Button</ion-button>
|
||||
<ion-button fill="clear" slot="start" size="small" onclick="testClick(event)">
|
||||
<ion-icon slot="start" name="settings"></ion-icon>
|
||||
Settings
|
||||
</ion-button>
|
||||
ion-item left fill="clear" button small
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Item Large Button</ion-label>
|
||||
<ion-button large slot="end">End Button<ion-icon name="star" slot="start"></ion-icon></ion-button>
|
||||
ion-item right fill="clear" button
|
||||
<ion-button secondary fill="clear" slot="end" onclick="testClick(event)">
|
||||
Edit
|
||||
</ion-button>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Item Small Button</ion-label>
|
||||
<ion-button small slot="start"><ion-icon name="star" slot="end"></ion-icon>Start Button</ion-button>
|
||||
<ion-button small slot="end">End Button<ion-icon name="star" slot="start"></ion-icon></ion-button>
|
||||
<ion-item text-wrap>
|
||||
This is multiline text that has a
|
||||
long description of about how the text is really long
|
||||
and a <a href="#" onclick="testClick(event)">link</a>.
|
||||
<ion-button fill="outline" slot="end" onclick="testClick(event)">View</ion-button>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Item Default Button</ion-label>
|
||||
<ion-button default slot="start"><ion-icon name="star" slot="end"></ion-icon>Start Button</ion-button>
|
||||
<ion-button default slot="end">End Button<ion-icon name="star" slot="start"></ion-icon></ion-button>
|
||||
<ion-item *ngFor="let data of [0,1,2,3,4]; let i = index" [class.activated]="i == 1" onclick="testClick(event)">
|
||||
<ion-avatar slot="start">
|
||||
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
|
||||
</ion-avatar>
|
||||
<h3>ng-for {{i}}</h3>
|
||||
<ion-badge slot="end">260k</ion-badge>
|
||||
</ion-button>
|
||||
|
||||
<ion-item onclick="testClickOutsize(event)">
|
||||
<div>
|
||||
<ion-button fill="clear" slot="end" onclick="testClick(event)">
|
||||
<ion-icon slot="icon-only" name="remove-circle"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button fill="clear" slot="end" onclick="testClick(event)">
|
||||
<ion-icon slot="icon-only" name="add-circle"></ion-icon>
|
||||
</ion-button>
|
||||
</div>
|
||||
</ion-item>
|
||||
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
</ion-app>
|
||||
|
||||
<script>
|
||||
function testClick(ev) {
|
||||
console.log('CLICK!', ev.target.tagName, ev.target.textContent.trim());
|
||||
}
|
||||
|
||||
function testClickOutsize(ev) {
|
||||
console.log('CLICK OUTSIDE!', ev.target.tagName, ev.target.textContent.trim());
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user