Twilight白天黑夜切换组件

2024-06-28 23:52:33首发，1周前更新

ax-twilight组件可页面整体切换dark模式，也支持局部切换dark模式。

前言

目前网页终端设备基本上都支持暗黑风格切换，切换的方式主要有两种：

1. 自动获得用户浏览器自身是否设置了dark模式，通过媒体查询prefers-color-scheme属性，更新全局css变量
2. 通过对网页的根节点设置dark属性或者scheme=dark属性，以改变全局css变量

第一种方式完全自动，除非用户主动取消浏览器的dark模式；第二种方式完全手动，通过按钮切换根节点的dark属性。两者各有优劣，可混合使用。

---

切换按钮

本框架提供一个twilight切换按钮专门用来切换dark模式。

只需插入ax-twilight节点即可，通过点击该按钮可让body节点追加scheme=dark属性，以实现暗黑风格。

尺寸

通过size属性可设置按钮的尺寸，支持3种尺寸，sm（高18px）、md（高22px，默认）和lg（高28px）。

简化按钮

通过feature属性可简化按钮：

• feature=icon：将删除label节点，只保留图标
• feature=plain：只保留图标，label、背景和边框全部取消。

指定根节点

通过target属性设置被设置scheme属性的节点，该属性为节点选择器，如果能找到该节点则设置，如果找不到还是设置body节点。

修改label

默认文本是中文的白天、黑夜，可通过属性labels修改，写法labels="day,night"。

Attributes属性

名称	可选值	默认值	说明
target	''/-	-	指定目标节点
feature	'icon'/'plain'/''	-	组合风格
size	'sm'/'md'/'lg'/''/-	-	尺寸大小
labels	''	-	标签文本，用英文逗号隔开

Methods方法

有组件通用的内置方法：

• set：设置组件属性，支持一个参数即被设置的属性值键值对{key，value}或其数组
• reset：重置组件属性，无参数
• clear：清除属性和值，无参数

基本用法：CompElem.reset();

Events事件

有组件通用的事件：

• connected：组件连接成功，无参数
• disconnected：组件断开连接，无参数
• adopted：组件被转移，无参数
• set：设置了属性，支持一个参数即设置的值
• cleared：清除了属性，无参数
• reset：重置了属性，无参数

基本用法：CompElem.on('connected',()=>{console.log('connected')});