パーツ番号 04-08-10 ・ CSSのみ

グループ化されたトグルリスト(複数設定項目)

複数のラベルとスイッチを縦にグループ化した一覧です。通知設定などまとまった項目の表示に使えます。

staticcss

プレビュー

ソースコード

HTML

<ul class="d04-08-10-list">
          <li><span class="d04-08-10-name">メール通知</span><span class="d04-08-10-sw d04-08-10-on"><i></i></span></li>
          <li><span class="d04-08-10-name">プッシュ通知</span><span class="d04-08-10-sw d04-08-10-on"><i></i></span></li>
          <li><span class="d04-08-10-name">SMS通知</span><span class="d04-08-10-sw d04-08-10-off"><i></i></span></li>
          <li><span class="d04-08-10-name">ニュースレター</span><span class="d04-08-10-sw d04-08-10-off"><i></i></span></li>
        </ul>

CSS

.d04-08-10{align-items:stretch}
        .d04-08-10-list{list-style:none;margin:0;padding:0;width:100%}
        .d04-08-10-list li{display:flex;align-items:center;justify-content:space-between;padding:7px 4px;font-size:12px;color:#374151}
        .d04-08-10-name{color:#4b5563}
        .d04-08-10-sw{position:relative;width:38px;height:21px;border-radius:11px;display:inline-block}
        .d04-08-10-sw i{position:absolute;top:2px;width:17px;height:17px;border-radius:50%;background:#fff;display:block}
        .d04-08-10-on{background:#0ea5e9}
        .d04-08-10-on i{right:2px}
        .d04-08-10-off{background:#e2e8f0}
        .d04-08-10-off i{left:2px}

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