Onsenui : create right to left slide button

Question

There's a parameter "animation" and "should-spin" on ons-buttons but how can I edit the code so I can have a custom div showing in the place of the spin ? I don't want the spin, just want button showing "A", then the div slides to the left and the "B" appears.

I'm totally novice at Onsen.ui so I don't know where to start.

Answer 1

You need to modify the template and css.

We can take the source code of ons-button and create my-button as can be seen in this plunker:

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

usage

<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%;
}