Skip to content

Commit d5068f8

Browse files
adamdbradleyadamdbradley
committed
feat(picker): init picker
1 parent 0de8c70 commit d5068f8

File tree

12 files changed

+774
-51
lines changed

12 files changed

+774
-51
lines changed

‎ionic/components.ios.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
"components/loading/loading.ios",
2222
"components/menu/menu.ios",
2323
"components/modal/modal.ios",
24+
"components/picker/picker.ios",
2425
"components/radio/radio.ios",
2526
"components/searchbar/searchbar.ios",
2627
"components/segment/segment.ios",

‎ionic/components.md.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
"components/loading/loading.md",
2222
"components/menu/menu.md",
2323
"components/modal/modal.md",
24+
"components/picker/picker.md",
2425
"components/radio/radio.md",
2526
"components/searchbar/searchbar.md",
2627
"components/segment/segment.md",

‎ionic/components.ts

Lines changed: 51 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,51 @@
1-
export * from './components/app/app'
2-
export * from './components/app/id'
3-
4-
export * from './components/action-sheet/action-sheet'
5-
export * from './components/alert/alert'
6-
export * from './components/badge/badge'
7-
export * from './components/blur/blur'
8-
export * from './components/button/button'
9-
export * from './components/checkbox/checkbox'
10-
export * from './components/content/content'
11-
export * from './components/icon/icon'
12-
export * from './components/img/img'
13-
export * from './components/infinite-scroll/infinite-scroll'
14-
export * from './components/infinite-scroll/infinite-scroll-content'
15-
export * from './components/input/input'
16-
export * from './components/item/item'
17-
export * from './components/item/item-sliding'
18-
export * from './components/label/label'
19-
export * from './components/list/list'
20-
export * from './components/loading/loading'
21-
export * from './components/menu/menu-controller'
22-
export * from './components/menu/menu'
23-
export * from './components/menu/menu-types'
24-
export * from './components/menu/menu-toggle'
25-
export * from './components/menu/menu-close'
26-
export * from './components/modal/modal'
27-
export * from './components/nav/nav'
28-
export * from './components/nav/nav-controller'
29-
export * from './components/nav/view-controller'
30-
export * from './components/nav/nav-params'
31-
export * from './components/nav/nav-push'
32-
export * from './components/nav/nav-router'
33-
export * from './components/navbar/navbar'
34-
export * from './components/option/option'
35-
export * from './components/radio/radio-button'
36-
export * from './components/radio/radio-group'
37-
export * from './components/refresher/refresher'
38-
export * from './components/refresher/refresher-content'
39-
export * from './components/scroll/scroll'
40-
export * from './components/searchbar/searchbar'
41-
export * from './components/segment/segment'
42-
export * from './components/select/select'
43-
export * from './components/show-hide-when/show-hide-when'
44-
export * from './components/slides/slides'
45-
export * from './components/spinner/spinner'
46-
export * from './components/tabs/tabs'
47-
export * from './components/tabs/tab'
48-
export * from './components/tap-click/tap-click'
49-
export * from './components/toggle/toggle'
50-
export * from './components/toolbar/toolbar'
51-
export * from './components/virtual-scroll/virtual-scroll'
1+
export * from './components/app/app';
2+
export * from './components/app/id';
3+
export * from './components/action-sheet/action-sheet';
4+
export * from './components/alert/alert';
5+
export * from './components/badge/badge';
6+
export * from './components/blur/blur';
7+
export * from './components/button/button';
8+
export * from './components/checkbox/checkbox';
9+
export * from './components/content/content';
10+
export * from './components/icon/icon';
11+
export * from './components/img/img';
12+
export * from './components/infinite-scroll/infinite-scroll';
13+
export * from './components/infinite-scroll/infinite-scroll-content';
14+
export * from './components/input/input';
15+
export * from './components/item/item';
16+
export * from './components/item/item-sliding';
17+
export * from './components/label/label';
18+
export * from './components/list/list';
19+
export * from './components/loading/loading';
20+
export * from './components/menu/menu-controller';
21+
export * from './components/menu/menu';
22+
export * from './components/menu/menu-types';
23+
export * from './components/menu/menu-toggle';
24+
export * from './components/menu/menu-close';
25+
export * from './components/modal/modal';
26+
export * from './components/nav/nav';
27+
export * from './components/nav/nav-controller';
28+
export * from './components/nav/view-controller';
29+
export * from './components/nav/nav-params';
30+
export * from './components/nav/nav-push';
31+
export * from './components/nav/nav-router';
32+
export * from './components/navbar/navbar';
33+
export * from './components/option/option';
34+
export * from './components/picker/picker';
35+
export * from './components/radio/radio-button';
36+
export * from './components/radio/radio-group';
37+
export * from './components/refresher/refresher';
38+
export * from './components/refresher/refresher-content';
39+
export * from './components/scroll/scroll';
40+
export * from './components/searchbar/searchbar';
41+
export * from './components/segment/segment';
42+
export * from './components/select/select';
43+
export * from './components/show-hide-when/show-hide-when';
44+
export * from './components/slides/slides';
45+
export * from './components/spinner/spinner';
46+
export * from './components/tabs/tabs';
47+
export * from './components/tabs/tab';
48+
export * from './components/tap-click/tap-click';
49+
export * from './components/toggle/toggle';
50+
export * from './components/toolbar/toolbar';
51+
export * from './components/virtual-scroll/virtual-scroll';

‎ionic/components.wp.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
"components/loading/loading.wp",
2222
"components/menu/menu.wp",
2323
"components/modal/modal.wp",
24+
"components/picker/picker.wp",
2425
"components/radio/radio.wp",
2526
"components/searchbar/searchbar.wp",
2627
"components/segment/segment.wp",

‎ionic/components/picker/picker.ios.scss

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
@import "../../globals.ios";
2+
@import "./picker";
3+
4+
// iOS Picker
5+
// --------------------------------------------------
6+
7+
$picker-ios-height: 260px !default;
8+
$picker-ios-background-color: #cfd5da !default;
9+
10+
$picker-ios-toolbar-height: 44px !default;
11+
$picker-ios-toolbar-background-color: #f7f7f8 !default;
12+
13+
$picker-ios-button-height: $picker-ios-toolbar-height !default;
14+
$picker-ios-button-text-color: color($colors-ios, primary) !default;
15+
$picker-ios-button-background-color: transparent !default;
16+
17+
$picker-ios-option-offset-y: 90px !default;
18+
$picker-ios-option-font-size: 18px !default;
19+
$picker-ios-option-line-height: 24px !default;
20+
21+
22+
.picker-wrapper {
23+
height: $picker-ios-height;
24+
25+
border-top: 1px solid #929499;
26+
27+
background: $picker-ios-background-color;
28+
}
29+
30+
.hairlines .picker-wrapper {
31+
border-width: $hairlines-width;
32+
}
33+
34+
.picker-toolbar {
35+
display: flex;
36+
37+
height: $picker-ios-toolbar-height;
38+
background: $picker-ios-toolbar-background-color;
39+
}
40+
41+
.picker-toolbar-button {
42+
flex: 1;
43+
text-align: right;
44+
}
45+
46+
.picker-toolbar-cancel {
47+
text-align: left;
48+
}
49+
50+
.picker-button,
51+
.picker-button.activated {
52+
margin: 0;
53+
54+
height: $picker-ios-button-height;
55+
56+
color: $picker-ios-button-text-color;
57+
background: $picker-ios-button-background-color;
58+
}
59+
60+
.picker-offset {
61+
transform: translateY($picker-ios-option-offset-y);
62+
}
63+
64+
.picker-column {
65+
padding: 0 10px;
66+
}
67+
68+
.picker-prefix,
69+
.picker-suffix,
70+
.picker-options {
71+
padding: 0 8px;
72+
font-size: $picker-ios-option-font-size;
73+
line-height: $picker-ios-option-line-height;
74+
}
75+
76+
.picker-prefix,
77+
.picker-suffix {
78+
padding: 0
79+
}

‎ionic/components/picker/picker.md.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
@import "../../globals.md";
2+
@import "./picker";
3+
4+
// Material Design Picker
5+
// --------------------------------------------------

‎ionic/components/picker/picker.scss

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
@import "../../globals.core";
2+
3+
// Picker
4+
// --------------------------------------------------
5+
6+
$picker-width: 100% !default;
7+
$picker-max-width: 500px !default;
8+
9+
10+
ion-picker-cmp {
11+
position: absolute;
12+
top: 0;
13+
left: 0;
14+
z-index: $z-index-overlay;
15+
display: block;
16+
17+
width: $picker-width;
18+
height: $picker-width;
19+
}
20+
21+
.picker-toolbar {
22+
z-index: 1;
23+
}
24+
25+
.picker-wrapper {
26+
position: absolute;
27+
right: 0;
28+
bottom: 0;
29+
left: 0;
30+
z-index: $z-index-overlay-wrapper;
31+
display: flex;
32+
flex-direction: column;
33+
overflow: hidden;
34+
35+
margin: auto;
36+
37+
width: $picker-width;
38+
max-width: $picker-max-width;
39+
40+
transform: translate3d(0, 100%, 0);
41+
}
42+
43+
.picker-columns {
44+
display: flex;
45+
flex: 1;
46+
overflow: hidden;
47+
}
48+
49+
.picker-offset {
50+
display: flex;
51+
}
52+
53+
.picker-column {
54+
flex: 1;
55+
}
56+
57+
.picker-prefix {
58+
flex: 1;
59+
text-align: right;
60+
}
61+
62+
.picker-suffix {
63+
flex: 1;
64+
text-align: left;
65+
}
66+
67+
.picker-option {
68+
flex: 1;
69+
overflow: hidden;
70+
white-space: nowrap;
71+
text-overflow: ellipsis;
72+
}

0 commit comments

Comments
 (0)