Question

有参数＆＃34;动画＆＃34;并且＆＃34;应该旋转＆＃34; ons-buttons但是如何编辑代码以便我可以在旋转位置显示自定义div？我不想要旋转，只需按钮显示＆＃34; A＆＃34;然后div滑到左边，＆＃34; B＆＃34;出现。

我在Onsen.ui完全是新手，所以我不知道从哪里开始。

Answer 1

您需要修改模板和css。

我们可以使用ons-button的源代码并创建我的按钮，如下图所示：

http://plnkr.co/edit/j7vlIh?p=preview

<强>使用

<my-button ng-init="spin=false;" ng-click="spin = !spin" should-spin="{{spin}}" right-label="B">
    A
</my-button>

<强>的javascript

myApp.directive('myButton', function() {
    return {
        restrict: 'E',
        replace: true,
        transclude: true,
        scope: {
            shouldSpin: '@',
            animation: '@',
            type: '@',
            disabled: '@',
            rightLabel: '@'
        },
        templateUrl: 'button_template.html',
        link: function(scope, element, attrs){
            var effectButton = element;
            var TYPE_PREFIX = "topcoat-button--";
            scope.item = {};                

            // if animation is not specified -> default is slide-left
            if(scope.animation === undefined || scope.animation === ""){
                scope.item.animation = "slide-left";
            }

            scope.$watch('disabled', function(disabled){
                if(disabled === "true"){
                    effectButton.attr('disabled', true);
                }else{
                    effectButton.attr('disabled', false);
                }
            });

            scope.$watch('animation', function(newAnimation){
                if(newAnimation){
                    scope.item.animation = newAnimation;
                }
            });

            scope.$watch('shouldSpin', function(shouldSpin){
                if(shouldSpin === "true"){
                    effectButton.attr('data-loading', true);
                }else{
                    effectButton.removeAttr('data-loading');
                }
            });
        }
    };
});

<强> button_template.html

<button ng-class="'topcoat-button--{{type}}'" class="{{item.animation}} effeckt-button topcoat-button no-select">
    <span class="label" ng-transclude></span>
    <span class="right-label">{{rightLabel}}</span>
</button>

<强> CSS

.effeckt-button > .right-label {
  transition-property: padding, opacity, left, right, top, bottom, margin;
  transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);  
}

.effeckt-button > .right-label {
  opacity: 0;
  position: absolute;
}


.effeckt-button.slide-left > .right-label {
  left: 100%;  
}

.effeckt-button.slide-left[data-loading] > .label {
  opacity: 0;
  left: -100%;
}

.effeckt-button.slide-left[data-loading] > .right-label {
  opacity: 1;
  left: 50%;
}

Onsenui：创建从右到左的滑动按钮

1 个答案: