真正的自定义，超牛逼卡片集成重新定义你的界面

nuknoop

无意冲浪的时候，突然发现去年外面的世界里有个大佬开发的卡片集成相当牛逼


hacs 安装TailwindCSS Template 卡片


之后再编辑器中可以选择任意卡片，直接可以修改，之后再内部就可以直接显示传感器的数值或者控制开关灯


https://daisyui.com/blog/bidirectional/ 官方样式
https://components.willpinha.link/alert/ 汇总样式


性能测试下来非常好，大家可以都试试
一起给面板中添砖加瓦，目前没啥头绪，所以希望界面大佬可以基于如此写出更多可以复制的卡片


可以实现起来很好看的卡片，例如彩云天气卡片等

nuknoop

例如

<div class="flex flex-col">
  <div class="form-control h-12 justify-center w-full">
    <label class="cursor-pointer label justify-between items-center">
      <span class="label-text text-center w-full">厨房灯</span>
      <input type="checkbox" class="toggle toggle-primary" 
        {{ iif(is_state('light.xiaomi_mesh_triple_wall_switch_channel_2', 'on'), "checked", "") }} 
        onChange="this.checked ? hass.callService('light', 'turn_on', { entity_id: 'light.xiaomi_mesh_triple_wall_switch_channel_2' }) : hass.callService('light', 'turn_off', { entity_id: 'light.xiaomi_mesh_triple_wall_switch_channel_2' })" 
      />
    </label>
  </div>
</div>

复制代码

nuknoop

<!-- The button to open modal -->
<label for="my_modal_6" class="btn">open modal</label>

<!-- Put this part before </body> tag -->
<input type="checkbox" id="my_modal_6" class="modal-toggle" />
<div class="modal" role="dialog">
  <div class="modal-box">
    <h3 class="font-bold text-lg">Hello!</h3>
    <p class="py-4">测试下</p>
    <div class="modal-action">
      <label for="my_modal_6" class="btn">关掉</label>
    </div>
  </div>
</div>

复制代码

弹窗方式，抛弃mod插件臃肿

binghun9806

确实很强大，就是需要有css基础

lichao622

期待有教程

yuyanhui1988

习惯mod那种了。。。。

xiangboshi

持续关注

juzi0

测试下，看看好不好使

明明洋洋

好看,但是纯代码有难度了

a_dongde

nuknoop 发表于 2024-6-8 12:50
弹窗方式，抛弃mod插件臃肿

弹出可以不需要安装mod了？