Foundation-progress-sass-reference

提供:Dev Guides
2020年6月23日 (火) 01:26時点におけるMaintenance script (トーク | 投稿記録)による版 (Imported from text file)
(差分) ← 古い版 | 最新版 (差分) | 新しい版 → (差分)
移動先:案内検索

Foundation-プログレスバーSASSリファレンス

説明

SASSリファレンスを使用して、コンポーネントのスタイルを変更できます。

変数

次の表に、このコンポーネントのデフォルトスタイルをカスタマイズできるようにするプロジェクトの設定ファイル内のSASS変数を示します。

Sr.No. Name & Description Type Default Value
1

$progress-height

プログレスバーの高さを表します。

Number 1rem
2

$progress-background

プログレスバーの背景色を表します。

Color $medium-gray
3

$progress-margin-bottom

プログレスバーの下マージンを表します。

Number $global-margin
4

$progress-meter-background

プログレスバーのメーターのデフォルト色を表します。

Color $primary-color
5

$progress-radius

デフォルトの進行状況バーの半径を表します。

Number $global-radius

ミックスイン

このコンポーネントの最終的なCSS出力を構築するには、次のミックスインを使用できます。 Foundationコンポーネントを使用して独自のクラス構造を構築するには、mixinを自分で使用できます。

進捗コンテナ

@include progress-container;

プログレスバーのコンテナにスタイルを追加します。

プログレスメーター

@include progress-meter;

プログレスバーの内部メーターにスタイルを追加します。

プログレスメーターテキスト

@include progress-meter-text;

進行状況バーのメーターのテキストにスタイルを追加します。