mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-08 23:58:13 +08:00
refactor(card): update card for iOS 11 and add subtitle component
This commit is contained in:
Brandy Carney
32
packages/core/src/components.d.ts
vendored
32
packages/core/src/components.d.ts
vendored
@ -473,6 +473,38 @@ declare global {
|
||||
}
|
||||
|
||||
|
||||
import {
|
||||
CardSubtitle as IonCardSubtitle
|
||||
} from './components/card-subtitle/card-subtitle';
|
||||
|
||||
declare global {
|
||||
interface HTMLIonCardSubtitleElement extends IonCardSubtitle, HTMLElement {
|
||||
}
|
||||
var HTMLIonCardSubtitleElement: {
|
||||
prototype: HTMLIonCardSubtitleElement;
|
||||
new (): HTMLIonCardSubtitleElement;
|
||||
};
|
||||
interface HTMLElementTagNameMap {
|
||||
"ion-card-subtitle": HTMLIonCardSubtitleElement;
|
||||
}
|
||||
interface ElementTagNameMap {
|
||||
"ion-card-subtitle": HTMLIonCardSubtitleElement;
|
||||
}
|
||||
namespace JSX {
|
||||
interface IntrinsicElements {
|
||||
"ion-card-subtitle": JSXElements.IonCardSubtitleAttributes;
|
||||
}
|
||||
}
|
||||
namespace JSXElements {
|
||||
export interface IonCardSubtitleAttributes extends HTMLAttributes {
|
||||
|
||||
color?: string,
|
||||
mode?: 'ios' | 'md' | 'wp'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
import {
|
||||
CardTitle as IonCardTitle
|
||||
} from './components/card-title/card-title';
|
||||
|
||||
@ -6,19 +6,19 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Padding top of the card
|
||||
$card-ios-padding-top: 13px !default;
|
||||
$card-ios-padding-top: 20px !default;
|
||||
|
||||
/// @prop - Padding end of the card
|
||||
$card-ios-padding-end: 16px !default;
|
||||
$card-ios-padding-end: $card-ios-padding-top !default;
|
||||
|
||||
/// @prop - Padding bottom of the card
|
||||
$card-ios-padding-bottom: 14px !default;
|
||||
$card-ios-padding-bottom: $card-ios-padding-top !default;
|
||||
|
||||
/// @prop - Padding start of the card
|
||||
$card-ios-padding-start: 16px !default;
|
||||
$card-ios-padding-start: $card-ios-padding-top !default;
|
||||
|
||||
/// @prop - Font size of the card
|
||||
$card-ios-font-size: 1.4rem !default;
|
||||
$card-ios-font-size: 1.6rem !default;
|
||||
|
||||
|
||||
.card-content-ios {
|
||||
@ -28,11 +28,6 @@ $card-ios-font-size: 1.4rem !default;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.card-header-ios + .card-content-ios,
|
||||
.card-ios .item + .card-content-ios {
|
||||
@include padding(0, null, null, null);
|
||||
}
|
||||
|
||||
|
||||
// Generate iOS Card Content Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@ -31,11 +31,6 @@ $card-md-line-height: 1.5 !default;
|
||||
line-height: $card-md-line-height;
|
||||
}
|
||||
|
||||
.card-header-md + .card-content-md,
|
||||
.card-md .item + .card-content-md {
|
||||
@include padding(0, null, null, null);
|
||||
}
|
||||
|
||||
|
||||
// Generate Material Design Card Content Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@ -6,4 +6,6 @@
|
||||
|
||||
ion-card-content {
|
||||
display: block;
|
||||
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@ -5,57 +5,19 @@
|
||||
// iOS Card Header
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Font size of the card header
|
||||
$card-ios-header-font-size: 1.6rem !default;
|
||||
|
||||
/// @prop - Font weight of the card header
|
||||
$card-ios-header-font-weight: 500 !default;
|
||||
|
||||
/// @prop - Padding top of the card header
|
||||
$card-ios-header-padding-top: 16px !default;
|
||||
$card-ios-header-padding-top: 20px !default;
|
||||
|
||||
/// @prop - Padding end of the card header
|
||||
$card-ios-header-padding-end: $card-ios-header-padding-top !default;
|
||||
|
||||
/// @prop - Padding bottom of the card header
|
||||
$card-ios-header-padding-bottom: $card-ios-header-padding-top !default;
|
||||
$card-ios-header-padding-bottom: 16px !default;
|
||||
|
||||
/// @prop - Padding start of the card header
|
||||
$card-ios-header-padding-start: $card-ios-header-padding-end !default;
|
||||
|
||||
/// @prop - Color of the card header
|
||||
$card-ios-header-color: #333 !default;
|
||||
|
||||
|
||||
.card-header-ios {
|
||||
@include padding($card-ios-header-padding-top, $card-ios-header-padding-end, $card-ios-header-padding-bottom, $card-ios-header-padding-start);
|
||||
|
||||
font-size: $card-ios-header-font-size;
|
||||
font-weight: $card-ios-header-font-weight;
|
||||
color: $card-ios-header-color;
|
||||
}
|
||||
|
||||
|
||||
// Generate iOS Card Header Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
|
||||
|
||||
.card-ios-#{$color-name} {
|
||||
|
||||
.card-header-ios {
|
||||
color: $color-contrast;
|
||||
}
|
||||
|
||||
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
|
||||
.card-header-ios-#{$color-name} {
|
||||
color: $color-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-header-ios-#{$color-name} {
|
||||
color: $color-base;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -5,9 +5,6 @@
|
||||
// Material Design Card Header
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Font size of the card header
|
||||
$card-md-header-font-size: 1.6rem !default;
|
||||
|
||||
/// @prop - Padding top of the card header
|
||||
$card-md-header-padding-top: 16px !default;
|
||||
|
||||
@ -20,38 +17,7 @@ $card-md-header-padding-bottom: $card-md-header-padding-top !default;
|
||||
/// @prop - Padding start of the card header
|
||||
$card-md-header-padding-start: $card-md-header-padding-end !default;
|
||||
|
||||
/// @prop - Color of the card header
|
||||
$card-md-header-color: #222 !default;
|
||||
|
||||
|
||||
.card-header-md {
|
||||
@include padding($card-md-header-padding-top, $card-md-header-padding-end, $card-md-header-padding-bottom, $card-md-header-padding-start);
|
||||
|
||||
font-size: $card-md-header-font-size;
|
||||
color: $card-md-header-color;
|
||||
}
|
||||
|
||||
|
||||
// Generate Material Design Card Header Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
|
||||
|
||||
.card-md-#{$color-name} {
|
||||
|
||||
.card-header-md {
|
||||
color: $color-contrast;
|
||||
}
|
||||
|
||||
@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
|
||||
.card-header-md-#{$color-name} {
|
||||
color: $color-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-header-md-#{$color-name} {
|
||||
color: $color-base;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
@ -11,4 +11,6 @@ ion-card-header {
|
||||
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@ -0,0 +1,70 @@
|
||||
@import "../../themes/ionic.globals.ios";
|
||||
@import "./card-subtitle";
|
||||
|
||||
|
||||
// iOS Card Subtitle
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Font size of the card subtitle
|
||||
$card-ios-subtitle-font-size: 1.6rem !default;
|
||||
|
||||
/// @prop - Font weight of the card subtitle
|
||||
$card-ios-subtitle-font-weight: 700 !default;
|
||||
|
||||
/// @prop - Font weight of the card subtitle
|
||||
$card-ios-subtitle-text-transform: uppercase !default;
|
||||
|
||||
/// @prop - Letter spacing of the card subtitle
|
||||
$card-ios-subtitle-letter-spacing: .06rem !default;
|
||||
|
||||
/// @prop - Padding top of the card subtitle
|
||||
$card-ios-subtitle-padding-top: 0 !default;
|
||||
|
||||
/// @prop - Padding end of the card subtitle
|
||||
$card-ios-subtitle-padding-end: $card-ios-subtitle-padding-top !default;
|
||||
|
||||
/// @prop - Padding bottom of the card subtitle
|
||||
$card-ios-subtitle-padding-bottom: $card-ios-subtitle-padding-top !default;
|
||||
|
||||
/// @prop - Padding start of the card subtitle
|
||||
$card-ios-subtitle-padding-start: $card-ios-subtitle-padding-end !default;
|
||||
|
||||
/// @prop - Color of the card subtitle
|
||||
$card-ios-subtitle-color: rgba(0, 0, 0, 0.4) !default;
|
||||
|
||||
|
||||
|
||||
.card-subtitle-ios {
|
||||
@include padding($card-ios-subtitle-padding-top, $card-ios-subtitle-padding-end, $card-ios-subtitle-padding-bottom, $card-ios-subtitle-padding-start);
|
||||
|
||||
font-size: $card-ios-subtitle-font-size;
|
||||
font-weight: $card-ios-subtitle-font-weight;
|
||||
text-transform: $card-ios-subtitle-text-transform;
|
||||
letter-spacing: $card-ios-subtitle-letter-spacing;
|
||||
color: $card-ios-subtitle-color;
|
||||
}
|
||||
|
||||
|
||||
// Generate iOS Card subtitle Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
|
||||
|
||||
.card-ios-#{$color-name} {
|
||||
|
||||
.card-subtitle-ios {
|
||||
color: $color-contrast;
|
||||
}
|
||||
|
||||
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
|
||||
.card-subtitle-ios-#{$color-name} {
|
||||
color: $color-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-subtitle-ios-#{$color-name} {
|
||||
color: $color-base;
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,57 @@
|
||||
@import "../../themes/ionic.globals.md";
|
||||
@import "./card-subtitle";
|
||||
|
||||
|
||||
// Material Design Card Subtitle
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Font size of the card subtitle
|
||||
$card-md-subtitle-font-size: 1.6rem !default;
|
||||
|
||||
/// @prop - Padding top of the card subtitle
|
||||
$card-md-subtitle-padding-top: 0 !default;
|
||||
|
||||
/// @prop - Padding end of the card subtitle
|
||||
$card-md-subtitle-padding-end: $card-md-subtitle-padding-top !default;
|
||||
|
||||
/// @prop - Padding bottom of the card subtitle
|
||||
$card-md-subtitle-padding-bottom: $card-md-subtitle-padding-top !default;
|
||||
|
||||
/// @prop - Padding start of the card subtitle
|
||||
$card-md-subtitle-padding-start: $card-md-subtitle-padding-end !default;
|
||||
|
||||
/// @prop - Color of the card subtitle
|
||||
$card-md-subtitle-color: #222 !default;
|
||||
|
||||
|
||||
.card-subtitle-md {
|
||||
@include padding($card-md-subtitle-padding-top, $card-md-subtitle-padding-end, $card-md-subtitle-padding-bottom, $card-md-subtitle-padding-start);
|
||||
|
||||
font-size: $card-md-subtitle-font-size;
|
||||
color: $card-md-subtitle-color;
|
||||
}
|
||||
|
||||
|
||||
// Generate Material Design Card subtitle Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
|
||||
|
||||
.card-md-#{$color-name} {
|
||||
|
||||
.card-subtitle-md {
|
||||
color: $color-contrast;
|
||||
}
|
||||
|
||||
@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
|
||||
.card-subtitle-md-#{$color-name} {
|
||||
color: $color-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-subtitle-md-#{$color-name} {
|
||||
color: $color-base;
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,11 @@
|
||||
@import "../../themes/ionic.globals";
|
||||
|
||||
|
||||
// Card Subtitle
|
||||
// --------------------------------------------------
|
||||
|
||||
ion-card-subtitle {
|
||||
display: block;
|
||||
|
||||
position: relative;
|
||||
}
|
||||
39
packages/core/src/components/card-subtitle/card-subtitle.tsx
Normal file
39
packages/core/src/components/card-subtitle/card-subtitle.tsx
Normal file
@ -0,0 +1,39 @@
|
||||
import { Component, Prop} from '@stencil/core';
|
||||
|
||||
|
||||
@Component({
|
||||
tag: 'ion-card-subtitle',
|
||||
styleUrls: {
|
||||
ios: 'card-subtitle.ios.scss',
|
||||
md: 'card-subtitle.md.scss'
|
||||
},
|
||||
host: {
|
||||
theme: 'card-subtitle'
|
||||
}
|
||||
})
|
||||
export class CardSubtitle {
|
||||
/**
|
||||
* @input {string} The color to use from your Sass `$colors` map.
|
||||
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
|
||||
* For more information, see [Theming your App](/docs/theming/theming-your-app).
|
||||
*/
|
||||
@Prop() color: string;
|
||||
|
||||
/**
|
||||
* @input {string} The mode determines which platform styles to use.
|
||||
* Possible values are: `"ios"`, `"md"`, or `"wp"`.
|
||||
* For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
|
||||
*/
|
||||
@Prop() mode: 'ios' | 'md' | 'wp';
|
||||
|
||||
hostData() {
|
||||
return {
|
||||
'role': 'heading',
|
||||
'aria-level': '3'
|
||||
};
|
||||
}
|
||||
|
||||
protected render() {
|
||||
return <slot></slot>;
|
||||
}
|
||||
}
|
||||
@ -6,34 +6,37 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Font size of the card title
|
||||
$card-ios-title-font-size: 1.8rem !default;
|
||||
$card-ios-title-font-size: 2.8rem !default;
|
||||
|
||||
/// @prop - Font weight of the card title
|
||||
$card-ios-title-font-weight: 700 !default;
|
||||
|
||||
/// @prop - Padding top of the card title
|
||||
$card-ios-title-padding-top: 8px !default;
|
||||
$card-ios-title-padding-top: 0 !default;
|
||||
|
||||
/// @prop - Padding end of the card title
|
||||
$card-ios-title-padding-end: 0 !default;
|
||||
$card-ios-title-padding-end: $card-ios-title-padding-top !default;
|
||||
|
||||
/// @prop - Padding bottom of the card title
|
||||
$card-ios-title-padding-bottom: 8px !default;
|
||||
$card-ios-title-padding-bottom: $card-ios-title-padding-top !default;
|
||||
|
||||
/// @prop - Padding start of the card title
|
||||
$card-ios-title-padding-start: 0 !default;
|
||||
$card-ios-title-padding-start: $card-ios-title-padding-top !default;
|
||||
|
||||
/// @prop - Margin top of the card title
|
||||
$card-ios-title-margin-top: 2px !default;
|
||||
$card-ios-title-margin-top: 0 !default;
|
||||
|
||||
/// @prop - Margin end of the card title
|
||||
$card-ios-title-margin-end: 0 !default;
|
||||
$card-ios-title-margin-end: $card-ios-title-margin-top !default;
|
||||
|
||||
/// @prop - Margin bottom of the card title
|
||||
$card-ios-title-margin-bottom: 2px !default;
|
||||
$card-ios-title-margin-bottom: $card-ios-title-margin-top !default;
|
||||
|
||||
/// @prop - Margin start of the card title
|
||||
$card-ios-title-margin-start: 0 !default;
|
||||
$card-ios-title-margin-start: $card-ios-title-margin-top !default;
|
||||
|
||||
/// @prop - Color of the card title
|
||||
$card-ios-title-text-color: #222 !default;
|
||||
$card-ios-title-text-color: #000 !default;
|
||||
|
||||
|
||||
.card-title-ios {
|
||||
@ -44,6 +47,7 @@ $card-ios-title-text-color: #222 !default;
|
||||
display: block;
|
||||
|
||||
font-size: $card-ios-title-font-size;
|
||||
font-weight: $card-ios-title-font-weight;
|
||||
line-height: 1.2;
|
||||
color: $card-ios-title-text-color;
|
||||
}
|
||||
|
||||
@ -9,25 +9,25 @@
|
||||
$card-md-title-font-size: 2.4rem !default;
|
||||
|
||||
/// @prop - Padding top of the card title
|
||||
$card-md-title-padding-top: 8px !default;
|
||||
$card-md-title-padding-top: 0 !default;
|
||||
|
||||
/// @prop - Padding end of the card title
|
||||
$card-md-title-padding-end: 0 !default;
|
||||
$card-md-title-padding-end: $card-md-title-padding-top !default;
|
||||
|
||||
/// @prop - Padding bottom of the card title
|
||||
$card-md-title-padding-bottom: 8px !default;
|
||||
$card-md-title-padding-bottom: $card-md-title-padding-top !default;
|
||||
|
||||
/// @prop - Padding start of the card title
|
||||
$card-md-title-padding-start: 0 !default;
|
||||
$card-md-title-padding-start: $card-md-title-padding-end !default;
|
||||
|
||||
/// @prop - Margin top of the card title
|
||||
$card-md-title-margin-top: 2px !default;
|
||||
$card-md-title-margin-top: 0 !default;
|
||||
|
||||
/// @prop - Margin end of the card title
|
||||
$card-md-title-margin-end: 0 !default;
|
||||
$card-md-title-margin-end: $card-md-title-margin-top !default;
|
||||
|
||||
/// @prop - Margin bottom of the card title
|
||||
$card-md-title-margin-bottom: 2px !default;
|
||||
$card-md-title-margin-bottom: $card-md-title-margin-top !default;
|
||||
|
||||
/// @prop - Margin start of the card title
|
||||
$card-md-title-margin-start: $card-md-title-margin-end !default;
|
||||
|
||||
@ -6,4 +6,6 @@
|
||||
|
||||
ion-card-title {
|
||||
display: block;
|
||||
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@ -27,6 +27,13 @@ export class CardTitle {
|
||||
*/
|
||||
@Prop() mode: 'ios' | 'md' | 'wp';
|
||||
|
||||
hostData() {
|
||||
return {
|
||||
'role': 'heading',
|
||||
'aria-level': '2'
|
||||
};
|
||||
}
|
||||
|
||||
protected render() {
|
||||
return <slot></slot>;
|
||||
}
|
||||
|
||||
@ -6,16 +6,16 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Margin top of the card
|
||||
$card-ios-margin-top: 12px !default;
|
||||
$card-ios-margin-top: 30px !default;
|
||||
|
||||
/// @prop - Margin end of the card
|
||||
$card-ios-margin-end: 12px !default;
|
||||
$card-ios-margin-end: 20px !default;
|
||||
|
||||
/// @prop - Margin bottom of the card
|
||||
$card-ios-margin-bottom: 12px !default;
|
||||
$card-ios-margin-bottom: 30px !default;
|
||||
|
||||
/// @prop - Margin start of the card
|
||||
$card-ios-margin-start: 12px !default;
|
||||
$card-ios-margin-start: 20px !default;
|
||||
|
||||
/// @prop - Padding top of the media on the card
|
||||
$card-ios-padding-media-top: 10px !default;
|
||||
@ -27,13 +27,13 @@ $card-ios-padding-media-bottom: 9px !default;
|
||||
$card-ios-background-color: $list-ios-background-color !default;
|
||||
|
||||
/// @prop - Box shadow color of the card
|
||||
$card-ios-box-shadow-color: rgba(0, 0, 0, .3) !default;
|
||||
$card-ios-box-shadow-color: rgba(0, 0, 0, .18) !default;
|
||||
|
||||
/// @prop - Box shadow of the card
|
||||
$card-ios-box-shadow: 0 1px 2px $card-ios-box-shadow-color !default;
|
||||
$card-ios-box-shadow: 0 16px 42px $card-ios-box-shadow-color !default;
|
||||
|
||||
/// @prop - Border radius of the card
|
||||
$card-ios-border-radius: 2px !default;
|
||||
$card-ios-border-radius: 14px !default;
|
||||
|
||||
/// @prop - Font size of the card
|
||||
$card-ios-font-size: 1.4rem !default;
|
||||
|
||||
@ -6,6 +6,7 @@
|
||||
|
||||
ion-card {
|
||||
display: block;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
223
packages/core/src/components/card/test/basic.html
Normal file
223
packages/core/src/components/card/test/basic.html
Normal file
@ -0,0 +1,223 @@
|
||||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Ionic Cards</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-content>
|
||||
<!-- <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 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 style="color: white">
|
||||
<div style="position: absolute; top: 0; left:0; right:0; bottom:0;">
|
||||
<img src="https://images.unsplash.com/photo-1500531279542-fc8490c8ea4d?auto=format&fit=crop&w=1502&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D">
|
||||
</div>
|
||||
|
||||
<ion-card-header style="background-color: rgba(255, 255, 255, 0.4)">
|
||||
<ion-card-subtitle color="light">
|
||||
Subtitle
|
||||
</ion-card-subtitle>
|
||||
<ion-card-title color="light">
|
||||
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>
|
||||
Reference in New Issue
Block a user