私はIonic 2を使用しており、タンクレベルを示す垂直方向のプログレスバーコンポーネントを作成しようとしています。内側div(垂直方向の進行バー)を外側divの下部に配置する方法は?
これは私がこれまで持っているものです。
tank-bar {
.progress-outer {
height: 96%;
margin: 10px 2%;
padding: 3px;
text-align: center;
background-color: #f4f4f4;
border: 2px solid #dcdcdc;
color: dark;
border-radius: 20px;
}
.progress-inner {
min-height: 15;
white-space: nowrap;
overflow: hidden;
padding: 5px;
border-radius: 20px;
background-color: map-get($colors, secondary);
}
}
は残念ながら、それはまだかなりありませんし、ブラウザで次のようになります。
私は緑を表示したいと思います外側のdivの上部からではなく、底部からの部分(パーセントフル)。
私はまだCSSとSassでかなり恐ろしいですが、チュートリアルを通してより良くなるように努力しています。次のように
編集*
HTMLは次のとおりです。
<div class="progress-outer">
<div class="progress-inner" [style.height]="Level + '%'">
{{Level}}%
</div>
</div>
HTMLがにいいだろうです! – robbannn
申し訳ありませんこれを今すぐ追加しました –
レンダリングされたhtml? – Legends