头图

通过触发器中的执行其它触发器动态显示夜间模式和日光模式图标的显示和隐藏,同时使用组件切换器控制不同组件之间的切换

效果展示

具体步骤

  • 制作按钮切换模式
  • 制作切换图标
  • 创建开关切换触发器
  • 创建图标显示隐藏触发器
  • 创建日光模式和夜间模式的触发器
  • 制作夜间模式和日光模式页面
  • 设置组件切换器的链接内容

步骤分解

制作按钮切换模式

  • 拖拽 开关 到 根容器
  • 选中 开关
  • 点击 检查面板 中的 数据绑定与设置
  • 选择 默认激活模式
  • 点击 检查面板 中的 样式
  • 配置样式
  • 配置样式完成后,关闭 默认激活模式

制作切换图标

  • 拖拽 图标 到 根容器 中
  • 点击 检查面板 中的 数据绑定与设置
  • 选择太阳图标
  • 月亮图标的操作相同

创建开关切换触发器

  • 选中 开关
  • 点击 检查面板 中的 触发器
  • 创建 触发器

创建图标显示隐藏触发器

  • 选中 图标
  • 点击 检查面板 中的 触发器
  • 创建 触发器
  • 月亮图标的相关触发器,操作逻辑相同

  • 将月亮图标 拖到 太阳图标上

创建日光模式和夜间模式的触发器

  • 拖拽 容器 到 根容器 中
  • 选中 容器
  • 点击 检查面板 中的 样式
  • 配置样式

  • 新增一个 样式
  • 点击 选中
  • 配置 样式

  • 拖拽 标签文本 到 样式
  • 选中 标签文本
  • 点击 检查面板 中的 样式
  • 配置字体 样式

  • 新增一个 样式
  • 配置 样式

制作夜间模式和日光模式页面

  • 选中 容器
  • 点击 检查面板 中的 触发器
  • 创建 触发器

  • 选中 开关
  • 添加 执行触发器


官网链接:https://www.towify.com/#/


Towify
1 声望1 粉丝