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:
@ -5,6 +5,3 @@ import {App} from 'ionic/ionic';
|
||||
templateUrl: 'main.html'
|
||||
})
|
||||
class E2EApp {}
|
||||
|
||||
|
||||
document.body.style.background='#eee';
|
||||
|
@ -1,8 +1,9 @@
|
||||
|
||||
<ion-toolbar><ion-title>Advanced Cards</ion-title></ion-toolbar>
|
||||
|
||||
<ion-content class="outer-content">
|
||||
|
||||
<ion-card>
|
||||
<ion-card>
|
||||
|
||||
<div>
|
||||
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
|
||||
@ -29,10 +30,10 @@
|
||||
</button>
|
||||
</ion-item>
|
||||
|
||||
</ion-card>
|
||||
</ion-card>
|
||||
|
||||
|
||||
<ion-card>
|
||||
<ion-card>
|
||||
|
||||
<ion-item>
|
||||
<div item-left class="item-media">
|
||||
@ -50,8 +51,9 @@
|
||||
<p>Hello. I am a paragraph.</p>
|
||||
</ion-card-content>
|
||||
|
||||
</ion-card>
|
||||
</ion-card>
|
||||
|
||||
</ion-content>
|
||||
|
||||
<style>
|
||||
.avatar {
|
||||
|
@ -5,6 +5,3 @@ import {App} from 'ionic/ionic';
|
||||
templateUrl: 'main.html'
|
||||
})
|
||||
class E2EApp {}
|
||||
|
||||
|
||||
document.body.style.background='#eee';
|
||||
|
@ -1,8 +1,9 @@
|
||||
|
||||
<ion-toolbar><ion-title>Basic Cards</ion-title></ion-toolbar>
|
||||
|
||||
<ion-content class="outer-content">
|
||||
|
||||
<ion-card>
|
||||
<ion-card>
|
||||
|
||||
<ion-card-header>
|
||||
Card Header
|
||||
@ -13,10 +14,10 @@
|
||||
and climb a mountain or spend a week in the woods. Wash your spirit clean.
|
||||
</ion-card-content>
|
||||
|
||||
</ion-card>
|
||||
</ion-card>
|
||||
|
||||
|
||||
<ion-card>
|
||||
<ion-card>
|
||||
|
||||
<ion-item>
|
||||
<icon pin item-left></icon>
|
||||
@ -29,10 +30,10 @@
|
||||
within an ion-card-content element.
|
||||
</ion-card-content>
|
||||
|
||||
</ion-card>
|
||||
</ion-card>
|
||||
|
||||
|
||||
<ion-card>
|
||||
<ion-card>
|
||||
|
||||
<a ion-item href="#">
|
||||
<icon wifi item-left></icon>
|
||||
@ -58,4 +59,6 @@
|
||||
<icon forward item-right></icon>
|
||||
</button>
|
||||
|
||||
</ion-card>
|
||||
</ion-card>
|
||||
|
||||
</ion-content>
|
||||
|
@ -5,6 +5,3 @@ import {App} from 'ionic/ionic';
|
||||
templateUrl: 'main.html'
|
||||
})
|
||||
class E2EApp {}
|
||||
|
||||
|
||||
document.body.style.background='#eee';
|
||||
|
@ -2,7 +2,9 @@
|
||||
<ion-toolbar><ion-title>Card Images</ion-title></ion-toolbar>
|
||||
|
||||
|
||||
<ion-card>
|
||||
<ion-content class="outer-content">
|
||||
|
||||
<ion-card>
|
||||
<div>
|
||||
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
|
||||
</div>
|
||||
@ -10,10 +12,10 @@
|
||||
<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>
|
||||
<ion-card>
|
||||
|
||||
<ion-item>
|
||||
<div item-left class="item-media">
|
||||
@ -25,7 +27,9 @@
|
||||
|
||||
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
|
||||
|
||||
</ion-card>
|
||||
</ion-card>
|
||||
|
||||
</ion-content>
|
||||
|
||||
|
||||
<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'
|
||||
})
|
||||
class E2EApp {}
|
||||
|
||||
document.body.style.background='#eee';
|
||||
|
@ -1,6 +1,8 @@
|
||||
<ion-toolbar><ion-title>Item Text</ion-title></ion-toolbar>
|
||||
|
||||
<ion-list>
|
||||
<ion-content class="outer-content">
|
||||
|
||||
<ion-list>
|
||||
|
||||
<ion-item>
|
||||
Plain Ol' div with some text
|
||||
@ -38,4 +40,6 @@
|
||||
<p>Paragraph line 3</p>
|
||||
</ion-item>
|
||||
|
||||
</ion-list>
|
||||
</ion-list>
|
||||
|
||||
</ion-content>
|
||||
|
@ -5,5 +5,3 @@ import {App} from 'ionic/ionic';
|
||||
templateUrl: 'main.html'
|
||||
})
|
||||
class E2EApp {}
|
||||
|
||||
document.body.style.background='#eee';
|
||||
|
@ -1,6 +1,8 @@
|
||||
<ion-toolbar><ion-title>List Headers</ion-title></ion-toolbar>
|
||||
|
||||
<ion-list>
|
||||
<ion-content class="outer-content">
|
||||
|
||||
<ion-list>
|
||||
|
||||
<ion-header>
|
||||
List Header
|
||||
@ -30,10 +32,10 @@
|
||||
</div>
|
||||
</ion-item>
|
||||
|
||||
</ion-list>
|
||||
</ion-list>
|
||||
|
||||
|
||||
<ion-list>
|
||||
<ion-list>
|
||||
|
||||
<ion-header>
|
||||
List Header
|
||||
@ -55,10 +57,10 @@
|
||||
</div>
|
||||
</ion-item>
|
||||
|
||||
</ion-list>
|
||||
</ion-list>
|
||||
|
||||
|
||||
<ion-list>
|
||||
<ion-list>
|
||||
|
||||
<ion-header>
|
||||
List Header with text that is too long to fit inside the list header
|
||||
@ -88,10 +90,10 @@
|
||||
</div>
|
||||
</ion-item>
|
||||
|
||||
</ion-list>
|
||||
</ion-list>
|
||||
|
||||
|
||||
<ion-list>
|
||||
<ion-list>
|
||||
|
||||
<ion-item>
|
||||
<icon chatboxes item-left></icon>
|
||||
@ -103,4 +105,6 @@
|
||||
New List, no header, Item 2
|
||||
</ion-item>
|
||||
|
||||
</ion-list>
|
||||
</ion-list>
|
||||
|
||||
</ion-content>
|
||||
|
@ -5,11 +5,12 @@
|
||||
"components/toolbar/modes/ios",
|
||||
"components/action-menu/modes/ios",
|
||||
"components/card/modes/ios",
|
||||
"components/checkbox/modes/ios",
|
||||
"components/content/modes/ios",
|
||||
"components/list/modes/ios",
|
||||
"components/text-input/modes/ios",
|
||||
"components/nav-bar/modes/ios",
|
||||
"components/popup/modes/ios",
|
||||
"components/checkbox/modes/ios",
|
||||
"components/radio/modes/ios",
|
||||
"components/search-bar/modes/ios",
|
||||
"components/segment/modes/ios",
|
||||
|
Reference in New Issue
Block a user