mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-19 03:32:21 +08:00
iOS outer-content css
This commit is contained in:
Adam Bradley
@ -5,6 +5,3 @@ import {App} from 'ionic/ionic';
|
|||||||
templateUrl: 'main.html'
|
templateUrl: 'main.html'
|
||||||
})
|
})
|
||||||
class E2EApp {}
|
class E2EApp {}
|
||||||
|
|
||||||
|
|
||||||
document.body.style.background='#eee';
|
|
||||||
|
|||||||
@ -1,58 +1,60 @@
|
|||||||
|
|
||||||
<ion-toolbar><ion-title>Advanced Cards</ion-title></ion-toolbar>
|
<ion-toolbar><ion-title>Advanced Cards</ion-title></ion-toolbar>
|
||||||
|
|
||||||
|
<ion-content class="outer-content">
|
||||||
|
|
||||||
<ion-card>
|
<ion-card>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
|
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
|
||||||
</div>
|
|
||||||
|
|
||||||
<ion-card-content>
|
|
||||||
<h2 class="card-title">
|
|
||||||
Card Title Goes Here
|
|
||||||
</h2>
|
|
||||||
<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-item actions>
|
|
||||||
<button clear item-left>
|
|
||||||
<icon star></icon>
|
|
||||||
Favorite
|
|
||||||
</button>
|
|
||||||
<button clear item-right>
|
|
||||||
<icon share></icon>
|
|
||||||
Share
|
|
||||||
</button>
|
|
||||||
</ion-item>
|
|
||||||
|
|
||||||
</ion-card>
|
|
||||||
|
|
||||||
|
|
||||||
<ion-card>
|
|
||||||
|
|
||||||
<ion-item>
|
|
||||||
<div item-left class="item-media">
|
|
||||||
<img class="avatar" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
|
|
||||||
</div>
|
</div>
|
||||||
<h2>Card With An Inset Picture</h2>
|
|
||||||
<p>Isn't it beautiful</p>
|
|
||||||
</ion-item>
|
|
||||||
|
|
||||||
<div>
|
<ion-card-content>
|
||||||
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
|
<h2 class="card-title">
|
||||||
</div>
|
Card Title Goes Here
|
||||||
|
</h2>
|
||||||
|
<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-card-content>
|
<ion-item actions>
|
||||||
<p>Hello. I am a paragraph.</p>
|
<button clear item-left>
|
||||||
</ion-card-content>
|
<icon star></icon>
|
||||||
|
Favorite
|
||||||
|
</button>
|
||||||
|
<button clear item-right>
|
||||||
|
<icon share></icon>
|
||||||
|
Share
|
||||||
|
</button>
|
||||||
|
</ion-item>
|
||||||
|
|
||||||
</ion-card>
|
</ion-card>
|
||||||
|
|
||||||
|
|
||||||
|
<ion-card>
|
||||||
|
|
||||||
|
<ion-item>
|
||||||
|
<div item-left class="item-media">
|
||||||
|
<img class="avatar" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
|
||||||
|
</div>
|
||||||
|
<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-card>
|
||||||
|
|
||||||
|
</ion-content>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.avatar {
|
.avatar {
|
||||||
width: 80px !important;
|
width: 80px !important;
|
||||||
|
|||||||
@ -5,6 +5,3 @@ import {App} from 'ionic/ionic';
|
|||||||
templateUrl: 'main.html'
|
templateUrl: 'main.html'
|
||||||
})
|
})
|
||||||
class E2EApp {}
|
class E2EApp {}
|
||||||
|
|
||||||
|
|
||||||
document.body.style.background='#eee';
|
|
||||||
|
|||||||
@ -1,61 +1,64 @@
|
|||||||
|
|
||||||
<ion-toolbar><ion-title>Basic Cards</ion-title></ion-toolbar>
|
<ion-toolbar><ion-title>Basic Cards</ion-title></ion-toolbar>
|
||||||
|
|
||||||
|
<ion-content class="outer-content">
|
||||||
|
|
||||||
<ion-card>
|
<ion-card>
|
||||||
|
|
||||||
<ion-card-header>
|
<ion-card-header>
|
||||||
Card Header
|
Card Header
|
||||||
</ion-card-header>
|
</ion-card-header>
|
||||||
|
|
||||||
<ion-card-content>
|
<ion-card-content>
|
||||||
Keep close to Nature's heart... and break clear away, once in awhile,
|
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.
|
and climb a mountain or spend a week in the woods. Wash your spirit clean.
|
||||||
</ion-card-content>
|
</ion-card-content>
|
||||||
|
|
||||||
</ion-card>
|
</ion-card>
|
||||||
|
|
||||||
|
|
||||||
<ion-card>
|
<ion-card>
|
||||||
|
|
||||||
<ion-item>
|
<ion-item>
|
||||||
<icon pin item-left></icon>
|
<icon pin item-left></icon>
|
||||||
ion-iteam in a card, icon left, button right
|
ion-iteam in a card, icon left, button right
|
||||||
<button outline item-right>View</button>
|
<button outline item-right>View</button>
|
||||||
</ion-item>
|
</ion-item>
|
||||||
|
|
||||||
<ion-card-content>
|
<ion-card-content>
|
||||||
This is content, without any paragraph or header tags,
|
This is content, without any paragraph or header tags,
|
||||||
within an ion-card-content element.
|
within an ion-card-content element.
|
||||||
</ion-card-content>
|
</ion-card-content>
|
||||||
|
|
||||||
</ion-card>
|
</ion-card>
|
||||||
|
|
||||||
|
|
||||||
<ion-card>
|
<ion-card>
|
||||||
|
|
||||||
<a ion-item href="#">
|
<a ion-item href="#">
|
||||||
<icon wifi item-left></icon>
|
<icon wifi item-left></icon>
|
||||||
Card Link Item 1
|
Card Link Item 1
|
||||||
<icon forward item-right></icon>
|
<icon forward item-right></icon>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a ion-item href="#">
|
<a ion-item href="#">
|
||||||
<icon wine item-left></icon>
|
<icon wine item-left></icon>
|
||||||
Card Link Item 2
|
Card Link Item 2
|
||||||
<icon forward item-right></icon>
|
<icon forward item-right></icon>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<button ion-item>
|
<button ion-item>
|
||||||
<icon warning item-left></icon>
|
<icon warning item-left></icon>
|
||||||
Card Button Item 1
|
Card Button Item 1
|
||||||
<icon forward item-right></icon>
|
<icon forward item-right></icon>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<button ion-item>
|
<button ion-item>
|
||||||
<icon walk item-left></icon>
|
<icon walk item-left></icon>
|
||||||
Card Button Item 2
|
Card Button Item 2
|
||||||
<icon forward item-right></icon>
|
<icon forward item-right></icon>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
</ion-card>
|
</ion-card>
|
||||||
|
|
||||||
|
</ion-content>
|
||||||
|
|||||||
@ -5,6 +5,3 @@ import {App} from 'ionic/ionic';
|
|||||||
templateUrl: 'main.html'
|
templateUrl: 'main.html'
|
||||||
})
|
})
|
||||||
class E2EApp {}
|
class E2EApp {}
|
||||||
|
|
||||||
|
|
||||||
document.body.style.background='#eee';
|
|
||||||
|
|||||||
@ -2,30 +2,34 @@
|
|||||||
<ion-toolbar><ion-title>Card Images</ion-title></ion-toolbar>
|
<ion-toolbar><ion-title>Card Images</ion-title></ion-toolbar>
|
||||||
|
|
||||||
|
|
||||||
<ion-card>
|
<ion-content class="outer-content">
|
||||||
<div>
|
|
||||||
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
|
|
||||||
</div>
|
|
||||||
<ion-card-content>
|
|
||||||
<h4>H4 text inside ion-card-content</h4>
|
|
||||||
<p>Paragraph text inside ion-card-content.</p>
|
|
||||||
</ion-card-content>
|
|
||||||
</ion-card>
|
|
||||||
|
|
||||||
|
<ion-card>
|
||||||
<ion-card>
|
<div>
|
||||||
|
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
|
||||||
<ion-item>
|
|
||||||
<div item-left class="item-media">
|
|
||||||
<img class="avatar" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
|
|
||||||
</div>
|
</div>
|
||||||
<h2>Card With An Inset Picture, H2 text</h2>
|
<ion-card-content>
|
||||||
<p>Isn't it beautiful.</p>
|
<h4>H4 text inside ion-card-content</h4>
|
||||||
</ion-item>
|
<p>Paragraph text inside ion-card-content.</p>
|
||||||
|
</ion-card-content>
|
||||||
|
</ion-card>
|
||||||
|
|
||||||
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
|
|
||||||
|
|
||||||
</ion-card>
|
<ion-card>
|
||||||
|
|
||||||
|
<ion-item>
|
||||||
|
<div item-left class="item-media">
|
||||||
|
<img class="avatar" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
|
||||||
|
</div>
|
||||||
|
<h2>Card With An Inset Picture, H2 text</h2>
|
||||||
|
<p>Isn't it beautiful.</p>
|
||||||
|
</ion-item>
|
||||||
|
|
||||||
|
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
|
||||||
|
|
||||||
|
</ion-card>
|
||||||
|
|
||||||
|
</ion-content>
|
||||||
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|||||||
10
ionic/components/content/modes/ios.scss
Normal file
10
ionic/components/content/modes/ios.scss
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
|
||||||
|
// iOS Content
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
$outer-content-md-background-color: #efeff4 !default;
|
||||||
|
|
||||||
|
|
||||||
|
[mode=ios] .outer-content {
|
||||||
|
background: $outer-content-md-background-color;
|
||||||
|
}
|
||||||
@ -5,5 +5,3 @@ import {App} from 'ionic/ionic';
|
|||||||
templateUrl: 'main.html'
|
templateUrl: 'main.html'
|
||||||
})
|
})
|
||||||
class E2EApp {}
|
class E2EApp {}
|
||||||
|
|
||||||
document.body.style.background='#eee';
|
|
||||||
|
|||||||
@ -1,41 +1,45 @@
|
|||||||
<ion-toolbar><ion-title>Item Text</ion-title></ion-toolbar>
|
<ion-toolbar><ion-title>Item Text</ion-title></ion-toolbar>
|
||||||
|
|
||||||
<ion-list>
|
<ion-content class="outer-content">
|
||||||
|
|
||||||
<ion-item>
|
<ion-list>
|
||||||
Plain Ol' div with some text
|
|
||||||
</ion-item>
|
|
||||||
|
|
||||||
<ion-item>
|
<ion-item>
|
||||||
Single line text that should have ellipses when it doesn't all fit in the item
|
Plain Ol' div with some text
|
||||||
</ion-item>
|
</ion-item>
|
||||||
|
|
||||||
<ion-item class="item-text-wrap">
|
<ion-item>
|
||||||
Multiline text that should wrap when it is too long
|
Single line text that should have ellipses when it doesn't all fit in the item
|
||||||
to fit on one line in the item. Class on .item
|
</ion-item>
|
||||||
</ion-item>
|
|
||||||
|
|
||||||
<ion-item class="item-text-wrap">
|
<ion-item class="item-text-wrap">
|
||||||
<h1>H1 Title Text</h1>
|
Multiline text that should wrap when it is too long
|
||||||
<p>Paragraph line 1</p>
|
to fit on one line in the item. Class on .item
|
||||||
</ion-item>
|
</ion-item>
|
||||||
|
|
||||||
<ion-item class="item-text-wrap">
|
<ion-item class="item-text-wrap">
|
||||||
<h2>H2 Title Text</h2>
|
<h1>H1 Title Text</h1>
|
||||||
<p>Paragraph line 1</p>
|
<p>Paragraph line 1</p>
|
||||||
</ion-item>
|
</ion-item>
|
||||||
|
|
||||||
<ion-item class="item-text-wrap">
|
<ion-item class="item-text-wrap">
|
||||||
<h3>H3 Title Text</h3>
|
<h2>H2 Title Text</h2>
|
||||||
<p>Paragraph line 1</p>
|
<p>Paragraph line 1</p>
|
||||||
<p>Paragraph line 2</p>
|
</ion-item>
|
||||||
</ion-item>
|
|
||||||
|
|
||||||
<ion-item class="item-text-wrap">
|
<ion-item class="item-text-wrap">
|
||||||
<h4>H4 Title Text</h4>
|
<h3>H3 Title Text</h3>
|
||||||
<p>Paragraph line 1</p>
|
<p>Paragraph line 1</p>
|
||||||
<p>Paragraph line 2</p>
|
<p>Paragraph line 2</p>
|
||||||
<p>Paragraph line 3</p>
|
</ion-item>
|
||||||
</ion-item>
|
|
||||||
|
|
||||||
</ion-list>
|
<ion-item class="item-text-wrap">
|
||||||
|
<h4>H4 Title Text</h4>
|
||||||
|
<p>Paragraph line 1</p>
|
||||||
|
<p>Paragraph line 2</p>
|
||||||
|
<p>Paragraph line 3</p>
|
||||||
|
</ion-item>
|
||||||
|
|
||||||
|
</ion-list>
|
||||||
|
|
||||||
|
</ion-content>
|
||||||
|
|||||||
@ -5,5 +5,3 @@ import {App} from 'ionic/ionic';
|
|||||||
templateUrl: 'main.html'
|
templateUrl: 'main.html'
|
||||||
})
|
})
|
||||||
class E2EApp {}
|
class E2EApp {}
|
||||||
|
|
||||||
document.body.style.background='#eee';
|
|
||||||
|
|||||||
@ -1,106 +1,110 @@
|
|||||||
<ion-toolbar><ion-title>List Headers</ion-title></ion-toolbar>
|
<ion-toolbar><ion-title>List Headers</ion-title></ion-toolbar>
|
||||||
|
|
||||||
<ion-list>
|
<ion-content class="outer-content">
|
||||||
|
|
||||||
<ion-header>
|
<ion-list>
|
||||||
List Header
|
|
||||||
</ion-header>
|
|
||||||
|
|
||||||
<ion-item>
|
<ion-header>
|
||||||
<icon wifi item-left></icon>
|
List Header
|
||||||
Wifi
|
</ion-header>
|
||||||
<div class="item-note" item-right>
|
|
||||||
Terrible
|
|
||||||
</div>
|
|
||||||
</ion-item>
|
|
||||||
|
|
||||||
<ion-item>
|
<ion-item>
|
||||||
<icon heart item-left></icon>
|
<icon wifi item-left></icon>
|
||||||
Affection
|
Wifi
|
||||||
<div class="item-note" item-right>
|
<div class="item-note" item-right>
|
||||||
Very Little
|
Terrible
|
||||||
</div>
|
</div>
|
||||||
</ion-item>
|
</ion-item>
|
||||||
|
|
||||||
<ion-item>
|
<ion-item>
|
||||||
<icon home item-left></icon>
|
<icon heart item-left></icon>
|
||||||
Home
|
Affection
|
||||||
<div class="item-note" item-right>
|
<div class="item-note" item-right>
|
||||||
Where the heart is
|
Very Little
|
||||||
</div>
|
</div>
|
||||||
</ion-item>
|
</ion-item>
|
||||||
|
|
||||||
</ion-list>
|
<ion-item>
|
||||||
|
<icon home item-left></icon>
|
||||||
|
Home
|
||||||
|
<div class="item-note" item-right>
|
||||||
|
Where the heart is
|
||||||
|
</div>
|
||||||
|
</ion-item>
|
||||||
|
|
||||||
|
</ion-list>
|
||||||
|
|
||||||
|
|
||||||
<ion-list>
|
<ion-list>
|
||||||
|
|
||||||
<ion-header>
|
<ion-header>
|
||||||
List Header
|
List Header
|
||||||
</ion-header>
|
</ion-header>
|
||||||
|
|
||||||
<ion-item>
|
<ion-item>
|
||||||
<icon color-wand item-left></icon>
|
<icon color-wand item-left></icon>
|
||||||
Magic
|
Magic
|
||||||
<div class="item-note" item-right>
|
<div class="item-note" item-right>
|
||||||
Activated
|
Activated
|
||||||
</div>
|
</div>
|
||||||
</ion-item>
|
</ion-item>
|
||||||
|
|
||||||
<ion-item>
|
<ion-item>
|
||||||
<icon star item-left></icon>
|
<icon star item-left></icon>
|
||||||
Star status
|
Star status
|
||||||
<div class="item-note" item-right>
|
<div class="item-note" item-right>
|
||||||
Super
|
Super
|
||||||
</div>
|
</div>
|
||||||
</ion-item>
|
</ion-item>
|
||||||
|
|
||||||
</ion-list>
|
</ion-list>
|
||||||
|
|
||||||
|
|
||||||
<ion-list>
|
<ion-list>
|
||||||
|
|
||||||
<ion-header>
|
<ion-header>
|
||||||
List Header with text that is too long to fit inside the list header
|
List Header with text that is too long to fit inside the list header
|
||||||
</ion-header>
|
</ion-header>
|
||||||
|
|
||||||
<ion-item>
|
<ion-item>
|
||||||
<icon pizza item-left></icon>
|
<icon pizza item-left></icon>
|
||||||
Pizza
|
Pizza
|
||||||
<div class="item-note" item-right>
|
<div class="item-note" item-right>
|
||||||
Always
|
Always
|
||||||
</div>
|
</div>
|
||||||
</ion-item>
|
</ion-item>
|
||||||
|
|
||||||
<ion-item>
|
<ion-item>
|
||||||
<icon beer item-left></icon>
|
<icon beer item-left></icon>
|
||||||
Beer
|
Beer
|
||||||
<div class="item-note" item-right>
|
<div class="item-note" item-right>
|
||||||
Yes Plz
|
Yes Plz
|
||||||
</div>
|
</div>
|
||||||
</ion-item>
|
</ion-item>
|
||||||
|
|
||||||
<ion-item>
|
<ion-item>
|
||||||
<icon wine item-left></icon>
|
<icon wine item-left></icon>
|
||||||
Wine
|
Wine
|
||||||
<div class="item-note" item-right>
|
<div class="item-note" item-right>
|
||||||
All the time
|
All the time
|
||||||
</div>
|
</div>
|
||||||
</ion-item>
|
</ion-item>
|
||||||
|
|
||||||
</ion-list>
|
</ion-list>
|
||||||
|
|
||||||
|
|
||||||
<ion-list>
|
<ion-list>
|
||||||
|
|
||||||
<ion-item>
|
<ion-item>
|
||||||
<icon chatboxes item-left></icon>
|
<icon chatboxes item-left></icon>
|
||||||
New List, no header, Item 1
|
New List, no header, Item 1
|
||||||
</ion-item>
|
</ion-item>
|
||||||
|
|
||||||
<ion-item>
|
<ion-item>
|
||||||
<icon chatboxes item-left></icon>
|
<icon chatboxes item-left></icon>
|
||||||
New List, no header, Item 2
|
New List, no header, Item 2
|
||||||
</ion-item>
|
</ion-item>
|
||||||
|
|
||||||
</ion-list>
|
</ion-list>
|
||||||
|
|
||||||
|
</ion-content>
|
||||||
|
|||||||
@ -5,11 +5,12 @@
|
|||||||
"components/toolbar/modes/ios",
|
"components/toolbar/modes/ios",
|
||||||
"components/action-menu/modes/ios",
|
"components/action-menu/modes/ios",
|
||||||
"components/card/modes/ios",
|
"components/card/modes/ios",
|
||||||
"components/checkbox/modes/ios",
|
"components/content/modes/ios",
|
||||||
"components/list/modes/ios",
|
"components/list/modes/ios",
|
||||||
"components/text-input/modes/ios",
|
"components/text-input/modes/ios",
|
||||||
"components/nav-bar/modes/ios",
|
"components/nav-bar/modes/ios",
|
||||||
"components/popup/modes/ios",
|
"components/popup/modes/ios",
|
||||||
|
"components/checkbox/modes/ios",
|
||||||
"components/radio/modes/ios",
|
"components/radio/modes/ios",
|
||||||
"components/search-bar/modes/ios",
|
"components/search-bar/modes/ios",
|
||||||
"components/segment/modes/ios",
|
"components/segment/modes/ios",
|
||||||
|
|||||||
Reference in New Issue
Block a user