angularjs - Angularjs/Bootstrap - ステートレス ボタンの作成方法

Question

Bootstrap と Angularjsを使用して、「アクティブ」に見えないボタンを作成したいと思います。マウスが上にあるときはボタンを少し暗くし、クリックするとさらに暗くしたいと思います。ただし、マウスがボタンから離れると、元の外観に戻りたいと思います。

意味的には、ボタンを使用してアプリの一部を「リセット」しています。クリックされたときにコードを実行したい。ただし、ボタンが押された後、ボタンが「押された」状態のままであることは意味がありません。

これが実際の例です。

何か案は？

Answer 1

別のクラスを指定してbtn-reset、次の CSS を追加します。

// the order of these two is also important
.btn-reset:hover{
    background-color: Dark !important;
}

.btn-reset:active{
    background-color: Darkest !important;
}

// you need this to reset it after it's been clicked and released
.btn-reset:focus{
    background-color: Normal !important;
}

ここで動作していますhttp://plnkr.co/edit/QVChtJ8w70HXmyAaVY4A?p=preview

問題は、:focus疑似クラスの色が標準ボタンよりも暗いため、クリックした後もフォーカスが残っているため、色が暗いことです。標準色に固執したい場合は、:focus疑似の新しいセレクターを追加するだけです。クラス。

Answer 2

ng-mouseenterまたは、ディレクティブとディレクティブを使用することもできますng-mosueleave。

例えば：

<div ng-app="ButtonApp">
    <div ng-controller="MainCtrl">
        <button ng-class="buttonClass" 
                ng-mouseenter="onMouseEnter()" 
                ng-mouseleave="onMouseLeave()"> Click Me!
    </div>
</div>

そしてあなたのコントローラーで：

var app = angular.module('ButtonApp',[]);
app.controller('MainCtrl', ['$scope',function($scope){

    var defaultButtonClass = ['btn','btn-foxtrot'];
    $scope.buttonClass = defaultButtonClass;

    $scope.onMouseEnter = function(){
        $scope.buttonClass = ['btn','btn-bravo'];
    };

    $scope.onMouseLeave = function() {
        $scope.buttonClass = defaultButtonClass;
    }

}]);

私のJSFiddleを見ることができます。

ボタンの色を生成するには、 Beautiful Buttons for Twitter Bootstrappers のようなものを使用できます。