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

style(actionSheet): icons for ios

Browse Source
This commit is contained in:
mhartington
2017-12-14 10:36:23 -05:00
parent a795878a9e
commit b29bdb3152
3 changed files with 14 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/core/src/components/action-sheet/action-sheet.ios.scss
View File

@@ -90,10 +90,13 @@
@include padding-horizontal(null, $action-sheet-ios-button-icon-padding-right);
width: $action-sheet-ios-icon-width;
height: $action-sheet-ios-button-icon-height;
font-size: $action-sheet-ios-button-icon-font-size;
vertical-align: $action-sheet-ios-icon-vertical-align;
fill: $action-sheet-ios-button-icon-fill-color;
}

6
packages/core/src/components/action-sheet/action-sheet.ios.vars.scss
View File

@@ -72,9 +72,15 @@ $action-sheet-ios-button-icon-padding-right: .1em !default;
/// @prop - Height of the action sheet button icon
$action-sheet-ios-button-icon-height: .7em !default;
/// @prop - Width of the icon in the action sheet button
$action-sheet-ios-icon-width: 23px !default;
/// @prop - Margin top of the action sheet button icon
$action-sheet-ios-button-icon-margin-top: -10px !default;
/// @prop - Vertical align of the icon in the action sheet button
$action-sheet-ios-icon-vertical-align: middle !default;
/// @prop - Font size of the action sheet button
$action-sheet-ios-button-font-size: 20px !default;

7
packages/core/src/components/action-sheet/test/basic/index.html
View File

@@ -37,8 +37,6 @@
<script>
async function presentBasic() {
const mode = Ionic.mode;
const actionSheetController = document.querySelector('ion-action-sheet-controller');
await actionSheetController.componentOnReady();
const actionSheetElement = await actionSheetController.create({
@@ -46,26 +44,31 @@
buttons: [{
text: 'Delete',
role: 'destructive',
icon: 'trash',
handler: () => {
console.log('Delete clicked');
}
}, {
text: 'Share',
icon: 'share',
handler: () => {
console.log('Share clicked');
}
}, {
text: 'Play (open modal)',
icon: 'arrow-dropright-circle',
handler: () => {
console.log('Play clicked');
}
}, {
text: 'Favorite',
icon: 'heart',
handler: () => {
console.log('Favorite clicked');
}
}, {
text: 'Cancel',
icon: 'close',
role: 'cancel',
handler: () => {
console.log('Cancel clicked');