iOS 风格开关按钮的样式与实现

前端

2024-02-06 19:31:50

iOS 风格开关按钮

大家好，我是 Steven。点击一下会打开，再点击一下会关闭。但原来它还有一个小细节，就是长按的时候里面的圆形会拉长，放手后会变回圆形：

iOS开关按钮演示

按钮的背景颜色就会改为深灰色：

iOS开关按钮演示

在这个案例中，我们会学习到如何使用 CSS 建构这个按钮，过程中会运用到 CSS 的变数，以及如何判断系统主题是浅色还是深色，以匹配当前的主题。

开始

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

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:checked + .slider:before {
  transform: translateX(26px);
}

这个简单的例子创建了一个基本的开关按钮，可以点击切换状态。

CSS 变量

我们可以使用 CSS 变量来使代码更具可维护性，例如背景颜色和尺寸。

:root {
  --switch-width: 60px;
  --switch-height: 34px;
  --switch-bg-color: #ccc;
  --switch-slider-bg-color: white;
  --switch-checked-bg-color: #2196F3;
}

.switch {
  width: var(--switch-width);
  height: var(--switch-height);
}

.slider {
  background-color: var(--switch-bg-color);
}

.slider:before {
  background-color: var(--switch-slider-bg-color);
}

input:checked + .slider {
  background-color: var(--switch-checked-bg-color);
}

判断系统主题

我们还可以使用 JavaScript 来判断系统主题是浅色还是深色。然后，我们可以在 CSS 中使用这个信息来更改按钮的样式。

const body = document.body;

if (body.classList.contains('dark')) {
  // 深色模式
  // ...
} else {
  // 浅色模式
  // ...
}

/* 深色模式 */
.switch {
  --switch-bg-color: #333;
  --switch-slider-bg-color: #666;
}

/* 浅色模式 */
.switch {
  --switch-bg-color: #ccc;
  --switch-slider-bg-color: white;
}