tabs curryQ

fn$.tabs({mode:'step'})：ステップ式＋タブ自動生成 -> タブ名称を指定する場合は、tav-noteに属性data-titleで指定

コンテンツ 1

mode:'step'でタブ切り替えをステップ式に


let $step = document.getElementById('tab4');
fn$.tabs({mode:'step'})($step);

spotと併用：タブごとのサイズは自動調整される


fn$.spot()($step);

コンテンツ 2

ヒントやメッセージ

//ヒント
data-hint="ヒントです"

//メッセージ
data-header="メッセージを自由に"

メッセージのデザイン


top_msg: { class:'hdl-fukibg my-2'},
hint_msg: { class:'grey lighten-3red text-white px-3 py-1 my-2'},
last_msg: { class:'grey lighten-3red text-white px-3 py-1 my-2'},

コンテンツ 3

//フッターにもメッセージ
 data-footer="もうすぐですよ！"

コンテンツ４

コンテンツ５


  fn$.tabs({mode:'step'})(document.getElementById('tab4'));
//フィッターのsticlyは、cssで実現
  .sticky-bottom {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    align-self: flex-end;
  }
//親要素にoveflow = hiddenがあると効かない！

stepTabs & Spot


  let $step = document.getElementById('tab4');
  fn$.tabs({mode:'step'})($step);
  fn$.spot()($step);