javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

list headers/footers

Browse Source
This commit is contained in:
Adam Bradley
2015-07-27 08:31:34 -05:00
parent 84d7f72887
commit d2b730c5e3
9 changed files with 117 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
ionic/components/list/extensions/ios.scss
View File

@@ -2,38 +2,29 @@
// iOS List
// --------------------------------------------------
$list-ios-background-color: #fff !default;
$list-ios-border-color: #c8c7cc !default;
$list-ios-header-margin: 35px 15px 10px 15px !default;
$list-ios-header-font-size: 1.4rem !default;
$list-ios-header-padding: 30px $item-ios-padding-right 10px $item-ios-padding-left !default;
$list-ios-header-font-size: 1.2rem !default;
$list-ios-header-color: #6d6d72 !default;
$list-ios-footer-padding: 0 15px !default;
$list-ios-footer-font-size: 1.4rem !default;
$list-ios-footer-padding: 10px $item-ios-padding-right 0 $item-ios-padding-left !default;
$list-ios-footer-font-size: 1.2rem !default;
$list-ios-footer-color: #8f8f94 !default;
.list[mode="ios"] {
/*
.list-header {
position: relative;
margin: $list-ios-header-margin;
.list-header {
padding: $list-ios-header-padding;
font-size: $list-ios-header-font-size;
text-transform: uppercase;
color: $list-ios-header-color;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.list-footer {
padding: $list-ios-footer-padding;
font-size: $list-ios-footer-font-size;
text-transform: uppercase;
color: $list-ios-footer-color;
}
*/
}

36
ionic/components/list/list.scss
View File

@@ -10,41 +10,9 @@
list-style-type: none;
}
/*
.list-header {
margin-top: $list-margin-top;
margin-bottom: $list-margin-bottom;
.list-header,
.list-footer {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.list {
position: relative;
display: block;
margin: $list-margin-top 0;
padding: 0;
// TODO: Verify if we need this, it makes margin sizing (inset, etc.) not
// work and is not present in v1
//width: 100%;
list-style-type: none;
&[inset],
&.list-inset {
margin-top: 0;
margin-left: -$content-padding;
margin-right: -$content-padding;
}
}
.list + .list-footer {
margin: ($list-margin-bottom - $list-margin-top) 0 $list-margin-bottom;
}
.list-header + .list {
margin-top: 0;
}
*/

1
ionic/components/list/test/headers-footers/e2e.ts Normal file
View File

@@ -0,0 +1 @@

7
ionic/components/list/test/headers-footers/index.ts Normal file
View File

@@ -0,0 +1,7 @@
import {App} from 'ionic/ionic';
@App({
templateUrl: 'main.html'
})
class IonicApp {}

83
ionic/components/list/test/headers-footers/main.html Normal file
View File

@@ -0,0 +1,83 @@
<ion-toolbar><ion-title>List Headers/Footers</ion-title></ion-toolbar>
<ion-list>
<div class="list-header">
List Header
</div>
<div class="item">
<icon name="ion-wifi"></icon>
<div class="item-content">
Wifi
</div>
<div class="item-note">
Terrible
</div>
</div>
<div class="item">
<icon name="ion-heart"></icon>
<div class="item-content">
Affection
</div>
<div class="item-note">
Very Little
</div>
</div>
</ion-list>
<ion-list>
<div class="list-header">
List Header
</div>
<div class="item">
<icon name="ion-wand"></icon>
<div class="item-content">
Magic
</div>
<div class="item-note">
Activated
</div>
</div>
<div class="list-footer">
List Footer
</div>
</ion-list>
<ion-list>
<div class="list-header">
List Header with text that is too long to fit inside the list header
</div>
<div class="item">
<icon name="ion-pizza"></icon>
<div class="item-content">
Pizza
</div>
<div class="item-note">
Always
</div>
</div>
<div class="item">
<icon name="ion-beer"></icon>
<div class="item-content">
Beer
</div>
<div class="item-note">
Yes Plz
</div>
</div>
<div class="list-footer">
List Footer with text that is also too long why do you do this all the time plz stop its too long!
</div>
</ion-list>