ionic 上拉菜单 中怎么去设置按钮的css

html-css09

ionic 上拉菜单 中怎么去设置按钮的css,第1张

在代码中触发上拉菜单，需要在你的 angular 控制器中使用 $ionicActionSheet 服务：

angular.module('starter', ['ionic'])

.run(function($ionicPlatform) {

$ionicPlatform.ready(function() {

// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard

// for form inputs)

if(window.cordova &&window.cordova.plugins.Keyboard) {

cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true)

}

if(window.StatusBar) {

StatusBar.styleDefault()

}

})

})

.controller( 'actionsheetCtl',['$scope','$ionicActionSheet','$timeout' ,function($scope,$ionicActionSheet,$timeout){

$scope.show = function() {

var hideSheet = $ionicActionSheet.show({

buttons: [

{ text: '<b>Share</b>This' },

{ text: 'Move' }

],

destructiveText: 'Delete',

titleText: 'Modify your album',

cancelText: 'Cancel',

cancel: function() {

// add cancel code..

},

buttonClicked: function(index) {

return true

}

})

$timeout(function() {

hideSheet()

}, 2000)

}

}])

1.page.html文件里写ionic提供的控件，比如：ion-header,ion-content, ion-title,ion-toobar,经管如此，有时候满足不了项目的界面，我们需要结合HTML的基本命令来完成设计，比如：div，p， img，a，等。

2.scss使用经验：每个页面都有自己的scss文件，我在使用时，发现几个页面的css定义会影响，就是页面2可以用页面1的css定义造成干扰的现象，后来发现，每个scss文件里有个页面定义，我们只要把当前页面的css定义放在这个页面定义就行，实现了css分离。（）本人刚学习网页编程，一切都在探索中）。示例如下：

age-page3 {

.page {

display: flex

align-items: center

text-align: center

margin: 0 auto

height: 100%

ackground-color: #abaaaa

adding-top: 5px

adding-bottom: 5px

// margin-top: 2px

这个page属性就放在了page-page3的大括号里面，保证了这个css定义只影响当前页面。

当引入非Ionic标准插件时，会碰到需要独立引入JS与CSS文件。

JS相对比较容易，但CSS需要修改打包配置文件。

修改package.json, 定义我们自定义的copy配置文件

"config": {

"ionic_copy": "./config/copy.config.js"

},

在工程根目录下新建config目录，添加copy.config.js文件，

文件中写入：

module.exports = {

copyCropperjs: {

src: ["{{ROOT}}/node_modules/cropperjs/dist/cropper.min.css"],

dest: "{{BUILD}}"

}

}

最后在index.html中引入相应的css即可。

<link rel="stylesheet" href="build/cropper.min.css">