javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 12:29:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(picker): add ios/md/wp picker styles

Browse Source
This commit is contained in:
Adam Bradley
2016-04-26 16:03:44 -05:00
parent 066ab712c0
commit aa9a667a3f
8 changed files with 932 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

224
ionic/components/picker/test/basic/index.ts
View File

@ -1,68 +1,212 @@
import {ViewEncapsulation} from 'angular2/core';
import {App, Page, Picker, NavController} from 'ionic-angular';
@Page({
templateUrl: 'main.html'
templateUrl: 'main.html',
encapsulation: ViewEncapsulation.None,
})
class E2EPage {
smoothie: string;
timer: string;
constructor(private nav: NavController) {
setTimeout(() => {
this.presentPicker()
}, 250);
}
constructor(private nav: NavController) {}
presentPicker() {
twoColumns() {
let picker = Picker.create({
buttons: [
{
text: 'Cancel',
role: 'cancel'
},
'Done'
{
text: 'Done',
handler: (data) => {
this.smoothie = `${data.flavor1} ${data.flavor2}`;
}
}
],
columns: [
{
prefix: 'prefix',
suffix: 'suffix',
name: 'flavor1',
align: 'right',
options: [
{ text: 'Jan' },
{ text: 'Feb' },
{ text: 'Mar' },
{ text: 'Apr' },
{ text: 'May' },
{ text: 'Jun' },
{ text: 'Jul' },
{ text: 'Aug' },
{ text: 'Sep' },
{ text: 'Oct' },
{ text: 'Nov' },
{ text: 'Dec' },
{ text: 'Mango' },
{ text: 'Banana' },
{ text: 'Cherry' },
{ text: 'Strawberry' },
{ text: 'Raspberry' },
{ text: 'Blueberry' },
{ text: 'Peach' },
{ text: 'Coconut' },
{ text: 'Pineapple' },
{ text: 'Honeydew' },
{ text: 'Watermelon' },
{ text: 'Grape' },
{ text: 'Avocado' },
{ text: 'Kiwi' },
{ text: 'Orange' },
{ text: 'Papaya' },
]
},
{
name: 'flavor2',
align: 'left',
options: [
{ text: 'Banana' },
{ text: 'Orange' },
{ text: 'Grape' },
{ text: 'Watermelon' },
{ text: 'Strawberry' },
{ text: 'Papaya' },
{ text: 'Kiwi' },
{ text: 'Cherry' },
{ text: 'Raspberry' },
{ text: 'Mango' },
{ text: 'Pineapple' },
{ text: 'Peach' },
{ text: 'Avocado' },
{ text: 'Honeydew' },
{ text: 'Blueberry' },
{ text: 'Coconut' },
]
},
// {
// prefix: 'prefix',
// suffix: 'suffix',
// options: [
// { text: 'Jan' },
// { text: 'Feb' },
// { text: 'Mar' },
// { text: 'Apr' },
// { text: 'May' },
// { text: 'Jun' },
// { text: 'Jul' },
// { text: 'Aug' },
// { text: 'Sep' },
// { text: 'Oct' },
// { text: 'Nov' },
// { text: 'Dec' },
// ]
// },
]
});
this.nav.present(picker);
}
prefixLabel() {
let picker = Picker.create({
buttons: [
{
text: 'Nerp',
role: 'cancel'
},
{
text: 'Woot!',
handler: (data) => {
this.smoothie = `${data.flavor1}`;
}
}
],
columns: [
{
name: 'flavor1',
align: 'left',
prefix: 'Flavor',
options: [
{ text: 'Mango' },
{ text: 'Banana' },
{ text: 'Cherry' },
{ text: 'Strawberry' },
{ text: 'Raspberry' },
{ text: 'Blueberry' },
{ text: 'Peach' },
{ text: 'Coconut' },
{ text: 'Pineapple' },
{ text: 'Honeydew' },
{ text: 'Watermelon' },
{ text: 'Grape' },
{ text: 'Avocado' },
{ text: 'Kiwi' },
{ text: 'Orange' },
{ text: 'Papaya' },
]
}
]
});
this.nav.present(picker);
}
suffixLabel() {
let picker = Picker.create({
buttons: [
{
text: 'No',
role: 'cancel'
},
{
text: 'Si',
handler: (data) => {
this.smoothie = `${data.flavor1}`;
}
}
],
columns: [
{
name: 'flavor1',
align: 'right',
suffix: 'flavor',
options: [
{ text: 'Mango' },
{ text: 'Banana' },
{ text: 'Cherry' },
{ text: 'Strawberry' },
{ text: 'Raspberry' },
{ text: 'Blueberry' },
{ text: 'Peach' },
{ text: 'Coconut' },
{ text: 'Pineapple' },
{ text: 'Honeydew' },
{ text: 'Watermelon' },
{ text: 'Grape' },
{ text: 'Avocado' },
{ text: 'Kiwi' },
{ text: 'Orange' },
{ text: 'Papaya' },
]
}
]
});
this.nav.present(picker);
}
columnSizes() {
let picker = Picker.create();
picker.addButton({
text: 'Cancel',
role: 'cancel'
});
picker.addButton({
text: 'Set Timer',
handler: (data) => {
this.timer = `${data.hour}:${data.min}`;
}
});
picker.addColumn({
name: 'hour',
suffix: 'hour',
columnWidth: '30%',
optionsWidth: '50px',
options: Array.apply(null, {length: 23}).map(Number.call, Number)
});
var minuteOptions = [];
for (var i = 0; i < 60; i++) {
minuteOptions.push({
text: i,
value: ('0' + i).slice(-2)
});
}
picker.addColumn({
name: 'min',
suffix: 'min',
columnWidth: '40%',
optionsWidth: '80px',
options: minuteOptions
});
this.nav.present(picker);
}
}