- 始めよう
- イベント
- ルーター / ナビゲーション
- ストア
- コンポーネント
- アプリ / コア
- アコーディオン / 折りたたみ
- アクションシート / アクション
- アプリバー
- エリアチャート
- オートコンプリート
- バッジ
- ブロック / コンテンツブロック
- ボタン
- カレンダー / デートピッカー
- カード
- チェックボックス
- チップス / タグ
- カラーピッカー
- コンタクトリスト
- データテーブル
- ダイアログ
- エレベーション
- フローティングアクションボタン / FAB
- フォームデータ / ストレージ
- ゲージ
- グリッド/レイアウトグリッド
- アイコン
- 無限スクロール
- 入力 / フォーム入力
- 遅延ロード
- リンク
- リストビュー
- リストインデックス
- ログイン画面
- メニュー
- メニューリスト
- メッセージバー
- メッセージ
- ナビゲーションバー
- 通知
- ページ
- パネル / サイドパネル
- フォトブラウザ
- ピッカー
- 円グラフ
- ポップオーバー
- ポップアップ
- プリローダー
- プログレスバー
- プルトゥーリフレッシュ
- ラジオボタン
- レンジスライダー
- サーチバー
- シートモーダル
- スケルトン
- スマートセレクト
- ソータブルリスト
- ステータスバー
- ステッパー
- サブナビゲーションバー
- スワイプアウト
- スワイパー
- タブ
- テキストエディタ
- タイムライン
- トースト
- トグル
- ツールバー / タブバー
- ツールチップ
- ツリービュー
- ビュー / ルーター
- バーチャルリスト
- Framework7 アイコン
- スタイリング
- Dom7
- タッチユーティリティ
- ユーティリティ
- プラグイン API
- 遅延モジュール
- カスタムビルド
エレベーション
影は、オブジェクトの奥行きや方向性を示す重要な視覚的手がかりとなります。影は、表面間の分離量を示す唯一の視覚的な手がかりです。オブジェクトの標高によって、その影の見え方が決まります。仰角の値は0〜24の範囲で設定できます。
Elevation can be added to any element by adding elevation-0, elevation-1, ..., elevation-24 classes.
To add different elevation only on hover (desktop), you can use elevation-hover-0, elevation-hover-1, ..., elevation-hover-24 classes.
To specify elevation only when item pressed, you can use elevation-pressed-0, elevation-pressed-1, ..., elevation-pressed-24 classes.
エレメントに elevation-$n, elevation-hover-$n, elevation-pressed-$n の遷移を追加するには、elevation-transition クラスを追加します。異なる継続時間を使用するには、elevation-transition-100, elevation-transition-200, ..., elevation-transition-500 クラスのいずれかを使用します。
CSS Variables
Below is the list of related CSS variables (CSS custom properties).
:root {
--f7-elevation-0: 0px 0px 0px 0px rgba(0, 0, 0, 0);
--f7-elevation-1: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14),
0px 1px 3px 0px rgba(0, 0, 0, 0.12);
--f7-elevation-2: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14),
0px 1px 5px 0px rgba(0, 0, 0, 0.12);
--f7-elevation-3: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14),
0px 1px 8px 0px rgba(0, 0, 0, 0.12);
--f7-elevation-4: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14),
0px 1px 10px 0px rgba(0, 0, 0, 0.12);
--f7-elevation-5: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 5px 8px 0px rgba(0, 0, 0, 0.14),
0px 1px 14px 0px rgba(0, 0, 0, 0.12);
--f7-elevation-6: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14),
0px 1px 18px 0px rgba(0, 0, 0, 0.12);
--f7-elevation-7: 0px 4px 5px -2px rgba(0, 0, 0, 0.2), 0px 7px 10px 1px rgba(0, 0, 0, 0.14),
0px 2px 16px 1px rgba(0, 0, 0, 0.12);
--f7-elevation-8: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14),
0px 3px 14px 2px rgba(0, 0, 0, 0.12);
--f7-elevation-9: 0px 5px 6px -3px rgba(0, 0, 0, 0.2), 0px 9px 12px 1px rgba(0, 0, 0, 0.14),
0px 3px 16px 2px rgba(0, 0, 0, 0.12);
--f7-elevation-10: 0px 6px 6px -3px rgba(0, 0, 0, 0.2), 0px 10px 14px 1px rgba(0, 0, 0, 0.14),
0px 4px 18px 3px rgba(0, 0, 0, 0.12);
--f7-elevation-11: 0px 6px 7px -4px rgba(0, 0, 0, 0.2), 0px 11px 15px 1px rgba(0, 0, 0, 0.14),
0px 4px 20px 3px rgba(0, 0, 0, 0.12);
--f7-elevation-12: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14),
0px 5px 22px 4px rgba(0, 0, 0, 0.12);
--f7-elevation-13: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 13px 19px 2px rgba(0, 0, 0, 0.14),
0px 5px 24px 4px rgba(0, 0, 0, 0.12);
--f7-elevation-14: 0px 7px 9px -4px rgba(0, 0, 0, 0.2), 0px 14px 21px 2px rgba(0, 0, 0, 0.14),
0px 5px 26px 4px rgba(0, 0, 0, 0.12);
--f7-elevation-15: 0px 8px 9px -5px rgba(0, 0, 0, 0.2), 0px 15px 22px 2px rgba(0, 0, 0, 0.14),
0px 6px 28px 5px rgba(0, 0, 0, 0.12);
--f7-elevation-16: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14),
0px 6px 30px 5px rgba(0, 0, 0, 0.12);
--f7-elevation-17: 0px 8px 11px -5px rgba(0, 0, 0, 0.2), 0px 17px 26px 2px rgba(0, 0, 0, 0.14),
0px 6px 32px 5px rgba(0, 0, 0, 0.12);
--f7-elevation-18: 0px 9px 11px -5px rgba(0, 0, 0, 0.2), 0px 18px 28px 2px rgba(0, 0, 0, 0.14),
0px 7px 34px 6px rgba(0, 0, 0, 0.12);
--f7-elevation-19: 0px 9px 12px -6px rgba(0, 0, 0, 0.2), 0px 19px 29px 2px rgba(0, 0, 0, 0.14),
0px 7px 36px 6px rgba(0, 0, 0, 0.12);
--f7-elevation-20: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 20px 31px 3px rgba(0, 0, 0, 0.14),
0px 8px 38px 7px rgba(0, 0, 0, 0.12);
--f7-elevation-21: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 21px 33px 3px rgba(0, 0, 0, 0.14),
0px 8px 40px 7px rgba(0, 0, 0, 0.12);
--f7-elevation-22: 0px 10px 14px -6px rgba(0, 0, 0, 0.2), 0px 22px 35px 3px rgba(0, 0, 0, 0.14),
0px 8px 42px 7px rgba(0, 0, 0, 0.12);
--f7-elevation-23: 0px 11px 14px -7px rgba(0, 0, 0, 0.2), 0px 23px 36px 3px rgba(0, 0, 0, 0.14),
0px 9px 44px 8px rgba(0, 0, 0, 0.12);
--f7-elevation-24: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14),
0px 9px 46px 8px rgba(0, 0, 0, 0.12);
}
Example
<template>
<div class="page">
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner">
<div class="title">Elevation</div>
</div>
</div>
<div class="page-content">
<div class="block">
<div class="row">
<div class="col">
<div class="elevation-demo elevation-1">1</div>
</div>
<div class="col">
<div class="elevation-demo elevation-2">2</div>
</div>
<div class="col">
<div class="elevation-demo elevation-3">3</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="elevation-demo elevation-4">4</div>
</div>
<div class="col">
<div class="elevation-demo elevation-5">5</div>
</div>
<div class="col">
<div class="elevation-demo elevation-6">6</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="elevation-demo elevation-7">7</div>
</div>
<div class="col">
<div class="elevation-demo elevation-8">8</div>
</div>
<div class="col">
<div class="elevation-demo elevation-9">9</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="elevation-demo elevation-10">10</div>
</div>
<div class="col">
<div class="elevation-demo elevation-11">11</div>
</div>
<div class="col">
<div class="elevation-demo elevation-12">12</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="elevation-demo elevation-13">13</div>
</div>
<div class="col">
<div class="elevation-demo elevation-14">14</div>
</div>
<div class="col">
<div class="elevation-demo elevation-15">15</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="elevation-demo elevation-16">16</div>
</div>
<div class="col">
<div class="elevation-demo elevation-17">17</div>
</div>
<div class="col">
<div class="elevation-demo elevation-18">18</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="elevation-demo elevation-19">19</div>
</div>
<div class="col">
<div class="elevation-demo elevation-20">20</div>
</div>
<div class="col">
<div class="elevation-demo elevation-21">21</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="elevation-demo elevation-22">22</div>
</div>
<div class="col">
<div class="elevation-demo elevation-23">23</div>
</div>
<div class="col">
<div class="elevation-demo elevation-24">24</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="elevation-demo elevation-6 elevation-hover-24 elevation-pressed-12 elevation-transition">6 +
hover-24 + pressed-12</div>
</div>
</div>
</div>
</div>
</div>
</template>
<style>
.elevation-demo {
height: 100px;
margin: 30px 10px;
background: #fff;
font-size: 18px;
text-align: center;
line-height: 100px;
}
</style>