[英]intro.js not working properly with angular material right sidenav
I am having an issue with creating an intro.js tutorial on a right hand sidenav in an angular-material application. 我在使用角材料应用程序的右侧sidenav上创建intro.js教程时遇到问题。 I was able to replicate the issue in this plunker. 我能够在这个pl弹枪中复制该问题。
http://plnkr.co/edit/L0obADPTtiU028B806vF?p=preview http://plnkr.co/edit/L0obADPTtiU028B806vF?p=preview
angular
.module('YourApp', ['ngMaterial', 'angular-intro'])
.config(function($mdThemingProvider){
$mdThemingProvider.theme('default')
.primaryPalette('blue')
.dark();
})
.controller('ctrl', function ($scope, $mdSidenav) {
$scope.toggleRight = buildToggler('right');
$scope.toggleLeft = buildToggler('left');
$scope.IntroOptions = {
steps:[
{
element: '.step1',
intro: 'Testing',
position: 'left'
},
{
element: '.step2',
intro: 'Testing',
position: 'left'
},
{
element: '.step3',
intro: 'Testing 2',
position: 'left'
}],
showStepNumbers: false,
exitOnOverlayClick: true,
exitOnEsc: true,
nextLabel: '<strong>NEXT!</strong>',
prevLabel: '<span style="color:green">Previous</span>',
skipLabel: 'Exit',
doneLabel: 'Thanks'
};
$scope.ShouldAutoStart = false;
function buildToggler(navID) {
return function() {
$mdSidenav(navID).toggle()
}
}
});
Is this a bug with intro.js/angular-intro, or am I doing something wrong ?? 这是intro.js / angular-intro的错误,还是我做错了? I believe what is happening is the location for the selected elements on the right hand sidenav are being calculated incorrectly. 我相信发生的是右侧sidenav上所选元素的位置计算不正确。 This problem does not manifest itself for a left hand sidenav as seen in this plunker ... 像这个矮子一样,这个问题不会在左侧导航中显现出来。
http://plnkr.co/edit/PEUryioQPOckx5AzRGpK?p=preview http://plnkr.co/edit/PEUryioQPOckx5AzRGpK?p=preview
It works only if you add the directive md-is-locked-open
to your side nav panel. 仅当您在侧面导航面板中添加指令md-is-locked-open
,该命令才起作用。 If this is not defined, the panel is not locked and the position cannot be calculated properly. 如果未定义,则面板未锁定且位置无法正确计算。 When this expression evaluates to true, the sidenav 'locks open': it falls into the content's flow instead of appearing over it. 当该表达式的值为真时,sidenav“锁定打开”:它落入内容流中,而不是出现在内容流中。 This overrides the md-is-open
attribute. 这将覆盖md-is-open
属性。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.