整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

checkbox和radio美化插件checkRad

checkbox和radio美化插件checkRadio.js

次向大家介绍一个checkbox和radio美化插件checkRadio.js, 为什么只有checkbox和radio美化? 因为input文本框,按钮,文件选择我们都可以通过简单的css就可以美化,唯独checkbox复选框,radio单选框,下拉菜单,滚动条不容易美化, 下拉菜单有了 easydropdown.js 就够了 ,那么我们就只需要 checkbox和radio美化就行了。

该插件已经被用到项目中,比较不错。

插件地址

http://www.qieban.cn/p/checkRadio.js/

切版qieban.cn,靠谱、高性价比前端切图外包选择。


子们,来了。


这一章继续继续,讲解小程序的常见组件(7)— radio单选框。


它与网页的单选框用法是大致相同的,但是有2个细节需特别注意。


1、可以通过 color属性来修改颜色



如上图,"选中"图标被选中时,默认样式是呈现绿色,这里可以通过 color属性来修改颜色。


2、当需要选中某个单选框,触发某一事件时,需和radio group 一起使用。


啥意思呢?看不懂?


别急,我们用一个需求来讲讲就懂了。


需求:创建男,女两个标签,当选中一个时,在图标下方显示文字"你选中的为男/女"


撸起袖子加油干:


1、新建一个页面 demo15


2、打开demo15.wxml 文件,删除原先的代码,写入如下代码:


  <radio-group bindchange="    ">
 <radio color="red" value="male">男</radio>
 <radio color="red" value="female" >女</radio>
 </radio-group>


3、保存,小程序界面显示男,女两标签。



点击男/女标签,图标出现红色选中,但没有提示文字。



别着急,我们慢慢来。



4、给radio-group 绑定change 事件,修改代码成如下:


(与上面代码神似,注意观察啊)


 <radio-group bindchange="handlechange">
 <radio color="red" value="male">男</radio>
 <radio color="red" value="female" >女</radio>
 </radio-group>


5、在demo15.wxml中,加上view标签,用来显示页面中显示的值,代码如下:


<radio-group bindchange="handlechange">  
  <radio color="red" value="male">男</radio> 
 <radio color="red" value="female" >女</radio> 
 </radio-group>

<view>您选中的是:{{gender}}</view>


保存后,小程序页面选中某个图标后,出现提示文字。



6、在demo15.js文件中,写入页面逻辑的代码。

首先先删除原先的代码,只保留data部分。

写入如下代码(内含每步的注释):


Page({
  data: {
    gender: ""
 },
 handleChange(e){
 // 1 获取单选框中的值
 let gender=e.detail.value;
 // 2 把值 赋值给 data中的数据
 this.setData({
 // gender:gender
 gender
 })
 }
})


保存后,小程序显示如下,选中某一个图标,下面就会有提示文字。

我们的需求实现了。



以上步骤很好的解释了radio 单选框的第2个细节:

当需要选中某个单选框,触发某一事件时,需和radio group 一起使用。


还有第一个细节:radio的颜色属性。


我们演示一下:

很简单,只需一步就搞定。


修改demo15.wxml文件中 radio color 的部分,

这里将原先的红色修改为 绿色(green),其余不变。


代码如下:


  <radio-group bindchange="handlechange">
 <radio color="green" value="male">男</radio>
 <radio color="green" value="female" >女</radio>
 </radio-group>
 
 <view>您选中的是:{{gender}}</view>


保存后,图标被选中后的颜色发生了变化:



到这里,我们的第一个小细节也演示完了。


单选框的用法基本就这两点与网页中的单选框的使用不同,其余具体知识点,请移步官方文档。


快门传送:https://developers.weixin.qq.com/miniprogram/dev/component/radio.html

黑模式是一种设计趋势,由暗色(dark)和高亮(light)两种视觉模式组成。暗黑模式之所以成为设计或者 Web 端的热点,主要归功于 Apple 公司,该公司在 iOS 和 macOS 操作系统中加入了暗黑模式,即系统级别的两种皮肤,用户可以通过系统切换,让整个应用的颜色可以轻松切换。暗黑模式流行之后,Windows 和 谷歌也加入了暗黑模式,选多流行的网站和应用程序中都提供了暗黑模式选型。

本文将从以下几个方面深入探讨网页暗黑模式的实现:

  • 效果预览
  • 暗黑模式现状
  • 暗黑模式实现方案
  • 传统方案:类名或者样式表切换
  • 现代方案:CSS变量 + @container + :has()
  • 未来方案:light-dark()
  • 暗黑模式的应用

如果本文对您有帮助,欢迎在关注、点赞、分享给更多需要的人。

1.效果预览

2.暗黑模式现状

暗黑模式在操作系统被支持之后,在APP、网页、浏览器中得到广泛支持,尤其是现在网页端的框架已实现的对暗黑模式的功能支持。

2.1.操作系统

以 macOS 为例,在操作系统中 Settings > 通用 面板可以切换 light 和 dark 模式。

2.2.浏览器

在 Chrome 开发工具中 DevTools > Settings > Preferences > Theme 可以设置 light 和 dark 模式。

2.3.前端框架

1)Bootstrap

Bootstrap 在 v5.3.0 版本支持了 light 和 dark 两种颜色模式,开发者可以通过 data-bs-theme 属性在 html 元素上全局切换,也可以在特定的组件和元素上切换。

更多:https://getbootstrap.com/docs/5.3/customize/color-modes/

2)Tailwind CSS

Tailwind CSS 中暗黑模式可以通过 mediaclass 两种方式进行设置,media 选项由操作系统设置,只会考虑浏览器的配色方案偏好,而 class 选项将查找 .dark 应用于 html 标签的类,通过这种方法,开发者可以手动进行偏好设置。

更多:https://tailwindcss.com/docs/dark-mode

3.暗黑模式实现方案

3.1.传统方案:类名或者样式表切换

暗黑模式最传统的实现方案就是实现两套颜色主题,包含类名切换和按条件加载样式表两种不同方案。

1)类名切换:一个样式文件 + 两套颜色类选择器:

通过一个样式文件和两套颜色类选择器,通过 Javascript 实现类名 light 或者 dark 切换。

<style>
  .container {
    .light {
      color: #ccc;
    }
    .dark {
      color: #333;
    }
  }
</style>
<div class="container light"></div>
<div class="container dark"></div>

2)样式表按需:两个样式文件 + 一套颜色类选择器:

<%if(theme==='dark') {%>
  <link href="https://xxx.com/dark.css">
<%>} else {%>
  <link href="https://xxx.com/light.css">
<%}%>

<div class="container"></div>

3.2.现代方案:CSS变量 + @container + :has()

现代方案采用现代 CSS 属性:CSS变量、@container、:where()、:has() 等组合来实现。

1)核心样式:

body {
  display: grid;
  place-items: center;
  --background-color: #fff;
  --text-color: #222;
  background-color: var(--background-color);
  color: var(--text-color);
  color-scheme: light dark;
  margin-top: 20px;
}

:where(html) {
  --darkmode: 0;
  container-name: root;
  container-type: normal;
}

@container root style(--darkmode: 1) {
  body {
    --background-color: hsl(228, 5%, 15%);
    --text-color: hsl(228, 5%, 80%);
  }
}

@media (prefers-color-scheme: dark) {
  html {
    --darkmode: 1;
  }
}

@media (prefers-color-scheme: light) {
  html {
    --darkmode: 0;
  }
}

html:has(#color-scheme-light:checked) {
  --darkmode: 0;
}

html:has(#color-scheme-dark:checked) {
  --darkmode: 1;
}

2)部分样式解析:

html:has(#color-scheme-dark:checked)html 子元素含有 id 属性值为 color-scheme-darkchecked 属性值为 true 的元素。示例中使用的是 input[type=radio] 元素。

@media (prefers-color-scheme: light)prefers-color-scheme CSS 媒体特性用于检测用户是否有将系统的主题色设置为亮色或者暗色。本示例在切换系统暗黑模式时,网页的颜色也会跟着变化。

:where():CSS 伪类函数,接受选择器列表作为它的参数,将会选择所有能被该选择器列表中任何一条规则选中的元素。

:has():CSS 伪类函数,通过把可容错相对选择器列表作为参数,提供了一种针对引用元素选择父元素或者先前的兄弟元素的方法。

@container root style(--darkmode: 1): 是一种条件组规则,可将样式应用于包含上下文。样式声明由条件筛选,如果条件为真,则应用于容器。当容器改变大小时,将对条件进行评估。

color-scheme: light dark:color-scheme 属性允许元素指明它可以使用哪些配色方案。当用户选择其中一种配色方案时,操作系统会对用户界面进行调整。这包括表单控件、滚动条和 CSS 系统颜色的使用值。

3.3.未来方案:light-dark()

1)light-dark() 介绍

好消息!,CSS Color Module Level 5 Specification 新增加了一个函数 light-dark()。该函数接受两个颜色值作为参数。根据您正在使用的颜色方案,它将输出第一个或第二个颜色参数。

light-dark(<color>, <color>);

如规范中描述:

This function computes to the computed value of the first color, if the used color scheme is light or unknown, or to the computed value of the second color, if the used color scheme is dark.

使用的配色方案不仅基于用户的 Light/Dark 模式设置,还基于 color-scheme 属性的值。这与系统颜色的计算方法类似。

:root {
  color-scheme: light dark;
}

/* light 对应 #333,dark 对应 #ccc */
:root {
  --text-color: light-dark(#333, #ccc); 
}

2)light-dark() 兼容性

当前,现代浏览器对 light-dark() 的支持还不太好,仅有 firefox 浏览器的最新版本支持。

2)light-dark() 支持判断

可以通过 @supports 和 CSS 伪元素来判断。

#support::after {
  content: "? Your browser does not support light-dark()";
  background-color: #ff00002b;

  display: block;
  margin: 1em 0;
  padding: 1em;
  border: 1px solid #ccc;
}
@supports(color: light-dark(#fff, #000)) {
  #support::after {
    content: "? Your browser supports light-dark()";
    background-color: #00ff002b;
  }
}

4.暗黑模式的应用

除了主要的网页颜色主题切换外,还有一些其他应用场景。

1)暗黑模式图像

2)暗黑模式阴影

3)暗黑模式调色板

4)暗黑模式段落

5.最后

网站是否启用暗黑模式,取决于不同团队、不同用户群体、不同设计风格,下面是一些推荐你开启的理由:

  • UI 风格和功能会看起来很酷、很时尚
  • 通过支持对 light 主题敏感的用户,它可以增强可访问性,减轻他们的眼睛疲劳
  • 它允许用户决定最舒适的内容消费方式,同时为我们提供了一种保持外观和感觉的控制方式
  • 它有助于延长具有 OLED 屏幕的设备的电池寿命,因为较亮的颜色消耗更多能量
  • 最重要的一点,暗盒模式现状非常非常受欢迎