Toggle Switch

1.input tagを使用して、チェックボックス

w3schoolに入ると「How to create a toggle switch」という文章があります.reactとして作成する前にこの文章を参考にし,機能の実現を考慮した.

HTML:w 3 schoolには円形と矩形のバージョンがあります.ターンを参考に制作を開始します.

<!-- Rectangular switch -->
<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>

<!-- Rounded switch -->
<label class="switch">
  <input type="checkbox">
  <span class="slider round"></span>
</label>

toggleSwitch.jsxファイルを作成し、まずlanderセクションを作成します.cssはpostcssを使用した.例とは異なり、私が作成した切り替えには、クリックした瞬間に背景色が左から右に塗りつぶされるアニメーション効果があるはずです.切替ボタンを単独で使用して背景処理を行う必要があるため,2つのspan classが作成された.

<div className={styles.toggleSwitch}>
  <input
    type="checkbox"
    className={styles.checkbox}
    id="toggleSwitch"
  />
</div>

  <label className={styles.label} htmlFor="toggleSwitch">
    <span className={styles.toggleInner} />
    <span className={styles.switch} />
  </label>

2. CSS

1) ToggleInner CSS

既存のinputチェックボックスはdipslayを除去し、機能のみを保持する必要があります.Labelクラスを使用してボタンシェイプを配置し、toggleInnerとswitchを配置します.
最も注意しなければならない部分はtoggleInnerで、css仮想要素セレクタ:before,:afterを使用する必要があります.このときcontentは、コンテンツがないため削除すると要素が完全に消えてしまうことに注意してください.
toggleInnerの全体幅は切り替えの200%で、前はピンク、その後はグレーです.checkboxが選択されている場合はtoggleInnerを左に100%移動する必要がありますので、初期値はmargin-left:-100%に設定します.

.toggleInner {
  display: block;
  width: 200%;
  margin-left: -100%;
}

.toggleInner:before,
.toggleInner:after {
  float: left;
  width: 50%;
  height: 36px;
  padding: 0;
  box-sizing: border-box;
  content: "";
}

.toggleInner:before {
  background-color: pink;
}

.toggleInner:after {
  background-color: #bbb;
}

2) Switch CSS

背景色とともにボタンも移動します.スイッチボタンを作ります.

.switch {
  display: block;
  width: 24px;
  margin: 5px;
  background: #fff;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 40px;
  border: 0 solid #bbb;
  border-radius: 50%;
 }

3）移行の適用

.checkbox:checked + .label .toggleInner {
  margin-left: 0;
}

.checkbox:checked + .label .switch {
  right: 0px;
}

/* toggleinner와 switch에 적용 */
/* switch의 transition property는 all을 적용한다 */
transition: margin-left 0.3s ease-in;

4)完了

素子状態管理によりtextを変化させることができる.

  const onChangeText = e => {
    console.log(e.target.checked);
    if (e.target.checked === false) {
      setOnOff("OFF");
    } else if (e.target.checked === true) {
      setOnOff("ON");
    }
  };