集計表

Tabs 要素を使用して、レスポンシブなタブ付きコンテンツを Webflow プロジェクトに追加します。

このチュートリアル全体を通して:

  1. タブを含める
  2. タブにコンテンツを追加する
  3. デザインタブ

タブを含める

タブアイコンのサムネイル

集計要素を組み込むには、 挿入パネル コンポーネントセクションまで移動します。次に、 集計表 要素を選択してキャンバス上に配置します。配置されたコンテナの幅を自動的に占有します。

コンポーネントセクションに含まれる11の要素は背景です

集計表の構造

集計要素は、 集計ラッパー、その中には 集計メニュー そしてその 集計内容.

タブにコンテンツを追加する

タブに切り替えると、いくつかの方法を使用してタブ ペインに要素を統合できます。

スタイル表

集計コンポーネント内の各要素をカスタマイズすることができます。

アクティブなタブと休止状態のタブを区別します。たとえば、フォントの色調と背景の色調を変更して、通常のタブと異なるものにすることができます。現在のタブをカスタマイズするには、動的なタブのネクタイをクリックするだけです。

月次プラン (選択済み)、年次プラン、および 150 周年記念プランと呼ばれるタブのセットが表示されます。

ホバー効果を使用してタブタイを操作する

次のガイドラインに従って、タブ タイにホバー効果を含めることができます。

  1. 現在アクティブでないタブタイを選択してください
  2. 選ぶ ホバー 以内 ドロップダウンリスト
  3. ホバービジュアルの好みに応じてタブをデザインします
  4. 選択する なし 米国のドロップダウン
  5. スタイリング部門のシフトを好ましいスムーズさと時間枠で統合する
左側のステップ 1 で、[年間プラン] タブを選択します。右側のステップ 2 で、州のドロップダウン メニューで [ホバー] (強調表示) を選択します。

プレゼンテーションの変更 

さまざまなタブ ペイン間でのシフトを管理するには:

  1. タブ要素のいずれかを決定する
  2. に向かう 要素設定パネル
  3. ジェントルリングをお選びください イージング方法ドロップダウン
  4. フェードイン/フェードアウトの継続時間(ミリ秒)を設定する
左側のステップ 1 では、ナビゲーター パネルからタブ メニューを選択します。右側のステップ 2 では、タブ設定パネルでイージングを編集します。
ユアン・マック