MIUI オプション ボックス スイッチ スタイルのシミュレーション

IOS用のスイッチシミュレーションがあり、もちろんMIUI用のスイッチシミュレーションもあります

設定オプションのスイッチスタイルを見て、気まぐれに試してみることにしました

最終的な効果は写真の通りです:

実装プロセス

1. オプションボックスのチェックボックス

もちろん、アナログスイッチにはオプションボックスが必要で、ここではチェックボックスが使用されます

2. 切り替えのプロセスを理解する

スイッチボタンをクリックしてオンまたはオフにします。ネイティブのチェックボックスではアイコンの効果を実現できないため、画像内のスイッチを表すには追加の要素が必要です

そして、チェックボックスのクリック効果と、クリック後にチェックされるかどうかの効果を使用する必要があるため、チェックボックスを非表示にすることはできませんが、上書きすることはできます

冗長なタグの使用を減らすために、疑似要素: before と :after を使用できます。タグ構造は次のとおりです

リーリー

3.スイッチの実装

:before 擬似要素をスイッチの背景レイヤーとして使用し、:after 擬似要素をスイッチ項目 (つまり、小さな円) として使用します

リーリー

リーリー

最初の小さな円は左側にあり、スイッチ状態がオンの場合、それを右に移動して、オン状態の背景色を更新します

リーリー

上記はキーコード、以下は完全なスタイルです

リーリー

完全な CSS コード

4. スイッチテスト

最後に、JSを使用してスイッチのステータス変化を検出できます

リーリー