前端小技巧 - 用emoji做切换按钮

最新推荐文章于 2024-09-24 21:17:34 发布

「已注销」

最新推荐文章于 2024-09-24 21:17:34 发布

阅读量110

点赞数

文章标签：前端 css javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/JOUeu/article/details/128628142

版权

2015年，emoji里的Face with Tears of Joy被选进了年度，那么，我们就用这个表情来做一个按钮切换样例，拒绝枯燥无聊的checkbox。

我们知道使用的for属性可以绑定checkbox的选择框，可以来回切换选择和不选择。现在，结合css中的选择器:checked和它的兄弟Checkbox Hack，让我们做点好玩的事情。

先放样例

See the Pen yeVNrN by cyseria (@cyseria) on CodePen.

html:

基本的css (scss):

.emoji-toggle {
  position: relative;
  .well { // the label
    cursor: pointer;
  }
  .toggle { // the checkbox
    appearance: none;
    background: transparent;
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 100; 

    // "off"
    ~.emoji:before { 
      content: "emoji unicode here";
      position: absolute;
      left: 0;
      top: -15px;
      font-size: 40px;
      z-index: 1;
      transition: 0.2s;
    }

    // "on"
    &:checked {
      ~.emoji:before {
        content: "different emoji unicode here";
        left: 100%;
        margin-left: -1em;
      }
    }

  }
}

其中，input选择框表面上看是隐藏起来的，实际上他覆盖了整个div层，所以我们可以完美的点击这块地方去进行选择的切换，并且改变emoji表情和它的位置。

使用sass来书写不同样式

为了更方便的使用该样式，我们想让它可以定义四个不同的伪元素内容(两个表情和两个label)
，这听起来令人兴奋，所以我决定用sass的@mixin来实现。这是我喜欢用的一个预处理器，不会太复杂但可以把一些冗余的东西抽取起来。

@mixin emojiType($leftEmoji, $rightEmoji, $leftLabel, $rightLabel) {
  .toggle {
    ~.emoji:before {
      content: $leftEmoji;
    }
    &:checked {
      ~.emoji:before {
        content: $rightEmoji;
      }
    }
     ~label {
      &:before {
        content: $leftLabel;
      }
      &:after {
        content: $rightLabel;
      }
    }
  }
}

// Usage
.emoji-happy {
  @include emojiType(
    "\01F604", "\01F620", "Happy", "Mad"
  );
}