パーツ番号 11-02-06 ・ JavaScript使用

セグメントコントロール

iOS風の3択トグルで、選択に合わせてスライダーが滑らかに移動します。WordPressの表示期間や表示形式の切替に使えます。

プレビュー

ソースコード

HTML

<div class="seg">
          <span class="slider"></span>
          <button class="opt is-sel">日</button>
          <button class="opt">週</button>
          <button class="opt">月</button>
        </div>

CSS

.d11-02-06 .seg{position:relative;display:inline-flex;padding:4px;border-radius:12px;background:#e9e9f2}
        .d11-02-06 .opt{position:relative;z-index:1;border:0;background:transparent;padding:8px 22px;font-size:13px;color:#555;cursor:pointer;transition:color .3s;font-weight:600}
        .d11-02-06 .opt.is-sel{color:#26264a}
        .d11-02-06 .slider{position:absolute;top:4px;left:4px;bottom:4px;width:60px;border-radius:9px;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.15);transition:transform .35s cubic-bezier(.4,1.3,.5,1)}

JavaScript

(function(){
        var r=document.querySelector('#item-11-02-06 .d11-02-06');
        var opts=r.querySelectorAll('.opt'),slider=r.querySelector('.slider');
        opts.forEach(function(o,n){o.addEventListener('click',function(){
          opts.forEach(function(x){x.classList.remove('is-sel');});
          o.classList.add('is-sel');
          slider.style.transform='translateX('+(o.offsetLeft-4)+'px)';
          slider.style.width=o.offsetWidth+'px';
        });});
      })();

クラス名 .d11-02-06 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。