ReactJSでメーターを作ってみた

最近ジャバスクリプトでアンドロイド・アイホン・ＰＣのアプリを作ってますが、そのアプリにゲーム感覚みたいな特徴作りたくてメーターが必要だった。自分で挑戦したら驚くほど簡単でしたので、Qiitaに乗せておこうと思った。

メーターのクラスはこのようになりました →

var Meter = React.createClass({
    render: function(){

        var width = (this.props.current / this.props.max) * 100;

        var style = this.props.additionalStyles || {};
        style.width = width + '%';

        return(
        <div className="meter_base">
            <div className="meter" style={style}></div>
        </div>
        );
    }
});

AdditionalStylesについてですが、メータークラスを変えなくても色とか変わりたい時や、２つのメーターあって違う色とかで作りたい時のためにそのAdditionalStylesに置いたらいいって事です。

使用はこんな　→　

var GameInterface = React.createClass({
    render: function(){
        var progressStyle = {
            background: '#9c9'
        };
        return(<div>
            <Meter max={マックス} current={ステータス} additionalStyles={progressStyle}
            // 他のエレメントとか
        </div>);
    }
});

そしてそのCSSは　→

.meter_base{
    height: 15px;
    width: 100%;
}
.meter{
    height: 15px;
    transition: 0.5s;
    white-space: nowrap;
    border-radius: 0px 10px 10px 0px;
}

そして結果はこれです →

作っているアプリではメーターは上がっていくけど、もちろん下がる場合でも（キャラクラーのライフとか）ちゃんと動きます。

そして色を変えてみたらこうなりました →

        var progressStyle = {
            background: '#9c9'
        };

        if(危ない条件){
            progressStyle.background = "#E38D8D";
        }

結果 →

前回の投稿よりずっと簡単な内容だけど、今日は以上です！