mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 12:29:55 +08:00
list updates
This commit is contained in:
Adam Bradley
@ -34,8 +34,7 @@
|
||||
"../radio/radio",
|
||||
"../switch/switch",
|
||||
"../tabs/tabs",
|
||||
"../toolbar/toolbar",
|
||||
"../view/view";
|
||||
"../toolbar/toolbar";
|
||||
|
||||
|
||||
// Android Components
|
||||
@ -48,6 +47,7 @@
|
||||
// iOS Components
|
||||
@import
|
||||
"../checkbox/extensions/ios",
|
||||
"../content/extensions/ios",
|
||||
"../list/extensions/ios",
|
||||
"../item/extensions/ios",
|
||||
"../radio/extensions/ios",
|
||||
|
||||
@ -31,13 +31,13 @@ export let CheckboxConfig = new ComponentConfig('checkbox')
|
||||
export class Checkbox {
|
||||
constructor(
|
||||
configFactory: CheckboxConfig,
|
||||
element: NgElement,
|
||||
@NgElement() ngElement: NgElement,
|
||||
@PropertySetter('attr.role') setAriaRole: Function,
|
||||
@PropertySetter('attr.aria-checked') setAriaChecked: Function,
|
||||
@PropertySetter('attr.aria-invalid') setAriaInvalid: Function,
|
||||
@PropertySetter('attr.aria-disabled') setAriaDisabled: Function
|
||||
) {
|
||||
this.domElement = element.domElement
|
||||
this.domElement = ngElement.domElement
|
||||
this.domElement.classList.add('item')
|
||||
this.config = configFactory.create(this)
|
||||
|
||||
|
||||
@ -1,30 +1,26 @@
|
||||
|
||||
<div class="pane">
|
||||
<ion-view view-title="Checkboxes">
|
||||
|
||||
<div class="pane-container">
|
||||
<ion-content>
|
||||
|
||||
<div class="content" style="background: #efeff4">
|
||||
<div class="list-header">Some Checkboxes</div>
|
||||
|
||||
<ion-list>
|
||||
<ion-list>
|
||||
|
||||
<ion-list-header>Some Checkboxes</ion-list-header>
|
||||
<ion-checkbox [checked]="true">
|
||||
Apples
|
||||
</ion-checkbox>
|
||||
|
||||
<ion-checkbox [checked]="true">
|
||||
Apples
|
||||
</ion-checkbox>
|
||||
<ion-checkbox>
|
||||
Bananas
|
||||
</ion-checkbox>
|
||||
|
||||
<ion-checkbox>
|
||||
Bananas
|
||||
</ion-checkbox>
|
||||
<ion-checkbox [disabled]="true">
|
||||
Oranges
|
||||
</ion-checkbox>
|
||||
|
||||
<ion-checkbox [disabled]="true">
|
||||
Oranges
|
||||
</ion-checkbox>
|
||||
</ion-list>
|
||||
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</ion-view>
|
||||
|
||||
@ -2,7 +2,9 @@
|
||||
// Content
|
||||
// --------------------------------------------------
|
||||
|
||||
$content-background-color: #fff !default;
|
||||
|
||||
.content {
|
||||
background-color: white;
|
||||
|
||||
.pane-container {
|
||||
background-color: $content-background-color;
|
||||
}
|
||||
|
||||
10
src/components/content/extensions/ios.scss
Normal file
10
src/components/content/extensions/ios.scss
Normal file
@ -0,0 +1,10 @@
|
||||
|
||||
// iOS Content
|
||||
// --------------------------------------------------
|
||||
|
||||
$content-ios-background-color: #efeff4 !default;
|
||||
|
||||
|
||||
.view-ios .pane-container {
|
||||
background-color: $content-ios-background-color;
|
||||
}
|
||||
@ -2,15 +2,21 @@
|
||||
// iOS Item
|
||||
// --------------------------------------------------
|
||||
|
||||
$item-ios-min-height: 44px !default;
|
||||
$item-ios-padding-left: 15px !default;
|
||||
$item-ios-accessory-color: #8e8e93 !default;
|
||||
$item-ios-border-color: $list-ios-border-color !default;
|
||||
$item-ios-background-color: #fff !default;
|
||||
$item-ios-min-height: 44px !default;
|
||||
$item-ios-padding-left: 15px !default;
|
||||
$item-ios-accessory-color: #8e8e93 !default;
|
||||
$item-ios-border-color: $list-ios-border-color !default;
|
||||
|
||||
|
||||
.list-ios {
|
||||
.view-ios {
|
||||
|
||||
.list-header {
|
||||
margin-left: $item-ios-padding-left;
|
||||
}
|
||||
|
||||
.item {
|
||||
background: $item-ios-background-color;
|
||||
min-height: $item-ios-min-height;
|
||||
padding-left: $item-ios-padding-left;
|
||||
}
|
||||
|
||||
@ -5,18 +5,6 @@
|
||||
$item-min-height: 44px !default;
|
||||
|
||||
|
||||
// <li class="item">
|
||||
// <div class="item-content">
|
||||
// <div class="item-title">
|
||||
// Item Title
|
||||
// </div>
|
||||
// <div class="item-accessory">
|
||||
// Badge
|
||||
// </div>
|
||||
// </div>
|
||||
// </li>
|
||||
|
||||
|
||||
.item {
|
||||
position: relative;
|
||||
|
||||
|
||||
@ -9,19 +9,14 @@ $list-ios-header-margin: 35px 15px 10px 15px !default;
|
||||
$list-ios-header-font-size: 1.4rem !default;
|
||||
$list-ios-header-color: #6d6d72 !default;
|
||||
|
||||
$list-ios-footer-margin: 10px 0 35px 0 !default;
|
||||
$list-ios-footer-padding: 0 15px !default;
|
||||
$list-ios-footer-font-size: 1.4rem !default;
|
||||
$list-ios-footer-color: #8f8f94 !default;
|
||||
|
||||
|
||||
.list-ios {
|
||||
.view-ios {
|
||||
|
||||
.list-content {
|
||||
background: $list-ios-background-color;
|
||||
}
|
||||
|
||||
.list-content:before {
|
||||
.list:before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: auto;
|
||||
@ -39,7 +34,7 @@ $list-ios-footer-color: #8f8f94 !default;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.list-content:after {
|
||||
.list:after {
|
||||
position: absolute;
|
||||
top: auto;
|
||||
right: auto;
|
||||
@ -72,7 +67,6 @@ $list-ios-footer-color: #8f8f94 !default;
|
||||
}
|
||||
|
||||
.list-footer {
|
||||
margin: $list-ios-footer-margin;
|
||||
padding: $list-ios-footer-padding;
|
||||
font-size: $list-ios-footer-font-size;
|
||||
color: $list-ios-footer-color;
|
||||
|
||||
@ -1,31 +1,21 @@
|
||||
import {NgElement, Component, Template} from 'angular2/angular2'
|
||||
import {ComponentConfig} from 'ionic2/config/component-config';
|
||||
|
||||
export let ListConfig = new ComponentConfig('list');
|
||||
export let ListConfig = new ComponentConfig('list')
|
||||
|
||||
@Component({
|
||||
selector: 'ion-list',
|
||||
services: [ListConfig]
|
||||
})
|
||||
@Template({
|
||||
inline: `
|
||||
<header class="list-header">
|
||||
<content select="ion-list-header"></content>
|
||||
</header>
|
||||
<div class="list-content">
|
||||
<content></content>
|
||||
</div>
|
||||
<footer class="list-footer">
|
||||
<content select="ion-list-footer"></content>
|
||||
</footer>
|
||||
`
|
||||
inline: `<content></content>`
|
||||
})
|
||||
export class List {
|
||||
constructor(
|
||||
configFactory: ListConfig,
|
||||
element: NgElement
|
||||
ngElement: NgElement
|
||||
) {
|
||||
this.domElement = element.domElement;
|
||||
this.domElement = ngElement.domElement;
|
||||
configFactory.create(this);
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,50 +2,29 @@
|
||||
// List
|
||||
// --------------------------------------------------
|
||||
|
||||
$list-margin: 35px 0 !default;
|
||||
$list-content-margin: 10px 0 !default;
|
||||
|
||||
|
||||
// <div class="list">
|
||||
// <div class="list-header">
|
||||
// List Header
|
||||
// </div>
|
||||
// <ul class="list-content">
|
||||
// ...
|
||||
// </ul>
|
||||
// <div class="list-footer">
|
||||
// List Footer
|
||||
// </div>
|
||||
// </div>
|
||||
|
||||
|
||||
.list {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin: $list-margin;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.list-header {
|
||||
position: relative;
|
||||
|
||||
margin-top: 35px;
|
||||
margin-bottom: 10px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.list-header + .list-content {
|
||||
margin: $list-content-margin;
|
||||
}
|
||||
|
||||
.list-content {
|
||||
.list {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
display: block;
|
||||
margin: 35px 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.list-footer {
|
||||
margin: 10px 0;
|
||||
margin: -25px 0 10px;
|
||||
}
|
||||
|
||||
.list-header + .list {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@ -1,3 +1,84 @@
|
||||
<ion-list>
|
||||
<ion-item>Hello</ion-item>
|
||||
</ion-list>
|
||||
|
||||
<ion-view view-title="List">
|
||||
|
||||
<ion-content>
|
||||
|
||||
|
||||
<div class="list-header">
|
||||
List Header
|
||||
</div>
|
||||
|
||||
<ion-list>
|
||||
|
||||
<div class="item">
|
||||
<div class="item-content">
|
||||
<div class="item-title">
|
||||
Item
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</ion-list>
|
||||
|
||||
<div class="list-footer">
|
||||
List Footer
|
||||
</div>
|
||||
|
||||
|
||||
<div class="list-header">
|
||||
List Header
|
||||
</div>
|
||||
|
||||
<ion-list>
|
||||
|
||||
<div class="item">
|
||||
<div class="item-content">
|
||||
<div class="item-title">
|
||||
Item
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</ion-list>
|
||||
|
||||
|
||||
<div class="list-header">
|
||||
List Header
|
||||
</div>
|
||||
|
||||
<ion-list>
|
||||
|
||||
<div class="item">
|
||||
<div class="item-content">
|
||||
<div class="item-title">
|
||||
Item
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</ion-list>
|
||||
|
||||
<ion-list>
|
||||
|
||||
<div class="item">
|
||||
<div class="item-content">
|
||||
<div class="item-title">
|
||||
Item
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<div class="item-content">
|
||||
<div class="item-title">
|
||||
Item
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</ion-list>
|
||||
|
||||
|
||||
</ion-content>
|
||||
|
||||
</ion-view>
|
||||
|
||||
@ -1,12 +1,14 @@
|
||||
import {bootstrap} from 'angular2/core';
|
||||
import {Component, Template} from 'angular2/angular2';
|
||||
import {View} from 'ionic2/components/view/view';
|
||||
import {Content} from 'ionic2/components/content/content';
|
||||
import {List} from 'ionic2/components/list/list';
|
||||
import {Item} from 'ionic2/components/item/item';
|
||||
|
||||
|
||||
@Component({ selector: '[ion-app]' })
|
||||
@Template({
|
||||
url: 'main.html',
|
||||
directives: [List, Item]
|
||||
directives: [View, Content, List]
|
||||
})
|
||||
class IonicApp {
|
||||
constructor() {
|
||||
|
||||
@ -8,17 +8,7 @@ export let RadioConfig = new ComponentConfig('radio');
|
||||
services: [RadioConfig]
|
||||
})
|
||||
@Template({
|
||||
inline: `
|
||||
<header class="list-header">
|
||||
<content select="ion-list-header"></content>
|
||||
</header>
|
||||
<div class="list-content radio-group radio-group-ios">
|
||||
<content></content>
|
||||
</div>
|
||||
<footer class="list-footer">
|
||||
<content select="ion-list-footer"></content>
|
||||
</footer>
|
||||
`
|
||||
inline: `<content></content>`
|
||||
})
|
||||
export class RadioGroup {
|
||||
constructor(
|
||||
@ -27,7 +17,7 @@ export class RadioGroup {
|
||||
) {
|
||||
this.domElement = element.domElement
|
||||
this.domElement.classList.add('list')
|
||||
this.domElement.classList.add('list-ios')
|
||||
this.domElement.classList.add('radio-group')
|
||||
configFactory.create(this)
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,28 +1,24 @@
|
||||
|
||||
<div class="pane">
|
||||
<ion-view view-title="Radio Buttons">
|
||||
|
||||
<div class="pane-container">
|
||||
|
||||
<div class="content" style="background: #efeff4">
|
||||
|
||||
<ion-radio-group>
|
||||
|
||||
<ion-list-header>
|
||||
Radio Group
|
||||
</ion-list-header>
|
||||
|
||||
<ion-radio>
|
||||
Star Wars
|
||||
</ion-radio>
|
||||
|
||||
<ion-radio>
|
||||
Star Trek
|
||||
</ion-radio>
|
||||
|
||||
</ion-radio-group>
|
||||
<ion-content>
|
||||
|
||||
<div class="list-header">
|
||||
Radio Group
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<ion-radio-group>
|
||||
|
||||
</div>
|
||||
<ion-radio>
|
||||
Star Wars
|
||||
</ion-radio>
|
||||
|
||||
<ion-radio>
|
||||
Star Trek
|
||||
</ion-radio>
|
||||
|
||||
</ion-radio-group>
|
||||
|
||||
</ion-content>
|
||||
|
||||
</ion-view>
|
||||
|
||||
@ -1,30 +1,26 @@
|
||||
|
||||
<div class="pane">
|
||||
<ion-view view-title="Switches">
|
||||
|
||||
<div class="pane-container">
|
||||
<ion-content>
|
||||
|
||||
<div class="content" style="background: #efeff4">
|
||||
<div class="list-header">Some Switches</div>
|
||||
|
||||
<ion-list>
|
||||
<ion-list>
|
||||
|
||||
<ion-list-header>Some Switches</ion-list-header>
|
||||
<ion-switch [checked]="true">
|
||||
Apples
|
||||
</ion-switch>
|
||||
|
||||
<ion-switch [checked]="true">
|
||||
Apples
|
||||
</ion-switch>
|
||||
<ion-switch>
|
||||
Bananas
|
||||
</ion-switch>
|
||||
|
||||
<ion-switch>
|
||||
Bananas
|
||||
</ion-switch>
|
||||
<ion-switch [disabled]="true">
|
||||
Oranges
|
||||
</ion-switch>
|
||||
|
||||
<ion-switch [disabled]="true">
|
||||
Oranges
|
||||
</ion-switch>
|
||||
</ion-list>
|
||||
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</ion-view>
|
||||
|
||||
@ -46,7 +46,7 @@ $toolbar-ios-button-background-color: transparent !default;
|
||||
}
|
||||
|
||||
.bar-inner-title {
|
||||
opacity: 0;
|
||||
opacity: 0; // JS will set to 1 after adjusting alignment
|
||||
}
|
||||
|
||||
.bar-secondary-item {
|
||||
|
||||
1
src/components/toolbar/test/html-title/e2e.js
Normal file
1
src/components/toolbar/test/html-title/e2e.js
Normal file
@ -0,0 +1 @@
|
||||
|
||||
18
src/components/toolbar/test/html-title/main.html
Normal file
18
src/components/toolbar/test/html-title/main.html
Normal file
@ -0,0 +1,18 @@
|
||||
|
||||
<ion-view>
|
||||
|
||||
<ion-view-title>
|
||||
<span style="color:red">Awesome</span>
|
||||
<strong style="color:green">HTML</strong>
|
||||
<em style="color:purple">Title</em>
|
||||
</ion-view-title>
|
||||
|
||||
<ion-nav-items side="primary">
|
||||
<button class="button">p1</button>
|
||||
</ion-nav-items>
|
||||
|
||||
<ion-nav-items side="secondary">
|
||||
<button class="button">s1</button>
|
||||
</ion-nav-items>
|
||||
|
||||
</ion-view>
|
||||
@ -1,12 +1,11 @@
|
||||
import {bootstrap} from 'angular2/core';
|
||||
import {Component, Template} from 'angular2/angular2';
|
||||
import {View} from 'ionic2/components/view/view';
|
||||
import {Content} from 'ionic2/components/content/content';
|
||||
|
||||
@Component({ selector: '[ion-app]' })
|
||||
@Template({
|
||||
url: 'main.html',
|
||||
directives: [View, Content]
|
||||
directives: [View]
|
||||
})
|
||||
class IonicApp {
|
||||
constructor() {
|
||||
1
src/components/toolbar/test/long-title/e2e.js
Normal file
1
src/components/toolbar/test/long-title/e2e.js
Normal file
@ -0,0 +1 @@
|
||||
|
||||
@ -1,9 +1,5 @@
|
||||
|
||||
<ion-view view-title="!attr Title!">
|
||||
|
||||
<ion-view-title>
|
||||
!ele Title!
|
||||
</ion-view-title>
|
||||
<ion-view view-title="What we have here is an extremely long title that probably would not fit inside of a standard title block that is on top of the view and things.">
|
||||
|
||||
<ion-nav-items side="primary">
|
||||
<button class="button">p1</button>
|
||||
@ -13,11 +9,6 @@
|
||||
|
||||
<ion-nav-items side="secondary">
|
||||
<button class="button">s1</button>
|
||||
<button class="button">s2</button>
|
||||
</ion-nav-items>
|
||||
|
||||
<ion-content>
|
||||
CONTENT!!
|
||||
</ion-content>
|
||||
|
||||
</ion-view>
|
||||
16
src/components/toolbar/test/long-title/main.js
Normal file
16
src/components/toolbar/test/long-title/main.js
Normal file
@ -0,0 +1,16 @@
|
||||
import {bootstrap} from 'angular2/core';
|
||||
import {Component, Template} from 'angular2/angular2';
|
||||
import {View} from 'ionic2/components/view/view';
|
||||
|
||||
@Component({ selector: '[ion-app]' })
|
||||
@Template({
|
||||
url: 'main.html',
|
||||
directives: [View]
|
||||
})
|
||||
class IonicApp {
|
||||
constructor() {
|
||||
console.log('IonicApp Start')
|
||||
}
|
||||
}
|
||||
|
||||
bootstrap(IonicApp)
|
||||
1
src/components/toolbar/test/lopsided-buttons/e2e.js
Normal file
1
src/components/toolbar/test/lopsided-buttons/e2e.js
Normal file
@ -0,0 +1 @@
|
||||
|
||||
14
src/components/toolbar/test/lopsided-buttons/main.html
Normal file
14
src/components/toolbar/test/lopsided-buttons/main.html
Normal file
@ -0,0 +1,14 @@
|
||||
|
||||
<ion-view view-title="Attribute Title">
|
||||
|
||||
<ion-nav-items side="primary">
|
||||
<button class="button">p1</button>
|
||||
<button class="button">p2</button>
|
||||
<button class="button">p3</button>
|
||||
</ion-nav-items>
|
||||
|
||||
<ion-nav-items side="secondary">
|
||||
<button class="button">s1</button>
|
||||
</ion-nav-items>
|
||||
|
||||
</ion-view>
|
||||
16
src/components/toolbar/test/lopsided-buttons/main.js
Normal file
16
src/components/toolbar/test/lopsided-buttons/main.js
Normal file
@ -0,0 +1,16 @@
|
||||
import {bootstrap} from 'angular2/core';
|
||||
import {Component, Template} from 'angular2/angular2';
|
||||
import {View} from 'ionic2/components/view/view';
|
||||
|
||||
@Component({ selector: '[ion-app]' })
|
||||
@Template({
|
||||
url: 'main.html',
|
||||
directives: [View]
|
||||
})
|
||||
class IonicApp {
|
||||
constructor() {
|
||||
console.log('IonicApp Start')
|
||||
}
|
||||
}
|
||||
|
||||
bootstrap(IonicApp)
|
||||
@ -1,11 +1,15 @@
|
||||
import {NgElement, Component, Template, Parent} from 'angular2/angular2'
|
||||
import {Toolbar} from 'ionic2/components/toolbar/toolbar'
|
||||
import {ComponentConfig} from 'ionic2/config/component-config'
|
||||
|
||||
export let ViewConfig = new ComponentConfig('view')
|
||||
|
||||
@Component({
|
||||
selector: 'ion-view',
|
||||
bind: {
|
||||
title: 'view-title'
|
||||
}
|
||||
},
|
||||
services: [ViewConfig]
|
||||
})
|
||||
@Template({
|
||||
inline: `
|
||||
@ -20,8 +24,12 @@ import {Toolbar} from 'ionic2/components/toolbar/toolbar'
|
||||
directives: [Toolbar]
|
||||
})
|
||||
export class View {
|
||||
constructor(@NgElement() ele:NgElement) {
|
||||
ele.domElement.classList.add('pane')
|
||||
console.log('View constructed', ele.domElement);
|
||||
constructor(
|
||||
configFactory: ViewConfig,
|
||||
@NgElement() ngElement:NgElement
|
||||
) {
|
||||
this.domElement = ngElement.domElement
|
||||
this.domElement.classList.add('pane')
|
||||
this.config = configFactory.create(this)
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,3 +0,0 @@
|
||||
.pane-container {
|
||||
flex: 1;
|
||||
}
|
||||
Reference in New Issue
Block a user