element-plus 中的 i i=”dark:ep-moon ep-sunny” 属性详解
在 element-plus 中,我们可能会遇到这样的代码:
<el-button><i i="dark:ep-moon ep-sunny"></i> </el-button>
登录后复制
其中, 这段代码引起了我们的疑惑。它是如何工作的?
i 属性
中的 i 属性是一个自定义属性,它允许我们动态地设置元素的类名。当使用 dark:ep-moon 这样的值时,它表示在元素中添加一个 class=”dark” 属性时,该元素应获得 ep-moon 类。同样,当使用 ep-sunny 时,这意味着当元素中没有 class=”dark” 时,该元素应获得 ep-sunny 类。
暗黑模式
在 element-plus 中,暗黑模式通过向 html 元素添加 class=”dark” 属性来触发。因此,当我们点击按钮以切换到暗黑模式时,dark 类将被添加到 html 元素中。
css 优先级
element-plus 使用 css 优先级来确定哪个类名的样式应应用于元素。在 css 中,.dark [i~=”ep-sunny”] 的优先级高于 [i~=”ep-sunny”],这意味着当 html 元素具有 dark 类时,.dark [i~=”ep-sunny”] 的样式将覆盖 [i~=”ep-sunny”] 的样式。
视觉效果
这使得在切换到暗黑模式时,原本属于 ep-sunny 类的元素(按钮中的图标),会被覆盖并显示 ep-moon 样式。这种方式可以让图标在暗黑模式下保持可见性,而不用写大量的条件样式。
© 版权声明
文章版权归作者所有,未经允许请勿转载。
【小浪云服务商 - 服务器12元起 - 挂机宝5元起】
THE END
暂无评论内容