layui-vue 0.3.7 发布，新增大量基础组件，支持主题定制

内容简介：更新内容： 0.3.7 [新增] slider 滑块组件 setp 属性, 支持设置步长。 [新增] index.less 样式文件, 支持一定程度的主题定制。 [移除] `defineProps`,`defineEmits` 两个全局宏命令引入，消除控制台警告。 [修复]...

更新内容：

0.3.7

• [新增] slider 滑块组件 setp 属性, 支持设置步长。
• [新增] index.less 样式文件, 支持一定程度的主题定制。
• [移除] `defineProps`,`defineEmits` 两个全局宏命令引入，消除控制台警告。
• [修复] menu 组件 inverted 属性不兼容 string 类型。
• [修复] menu 组件 level 属性不兼容 string 类型。
• [升级] icons-vue 1.0.4 版本。
• [升级] layer-vue 1.3.3 版本。

0.3.6

• [新增] result 结果组件, 提供 success error 通用状态页。
• [新增] exception 异常组件, 提供 403, 404, 500 通用异常页。
• [新增] menu 组件 level 属性, 控制菜单层级之间的背景色差异。
• [新增] menu 组件 inverted 属性, 提供另一种树形菜单选中效果。
• [新增] menu 组件 theme 属性, 可选值 light 和 dark。
• [修复] table 组件 header 不随 body 滚动。
• [升级] vue 3.2.29 版本。

0.3.5

• [新增] split-panel 分割面板, 高度灵活的布局组件。
• [新增] layer 弹层 type 属性 drawer 可选值, 提供抽屉模式。
• [修复] tab-item 组件 closable 属性警告, 兼容 string 类型。
• [修复] dropdown 下拉菜单 content 显示位置问题。
• [升级] icons-vue 1.0.3 版本。
• [升级] layer-vue 1.3.1 版本。

更新详情：

主题定制

新版本发布后，支持一定程度的主题定制，以满足业务和品牌上多样化的视觉需求，包括但不限于主色、圆角、边框和部分组件的视觉定制。以下是一些最常用的通用变量，所有样式变量可以在 这里 找到。

@global-primary-color: #009688; // 主题色
@global-checked-color: #5FB878; // 选中色 
@global-border-radius: 2px; // 圆角度数

除全局的主题配置外, 我们还对组件提供定制化的主题配置

@button-primary-color: #009688; // 按钮主题色
@button-border-radius: 2px; // 按钮圆角度数
...

如何定制 ，建立一个单独的 less 变量文件，引入这个文件覆盖 index.less 里的变量。

@import '@layui/layui-vue/lib/index.less'; // 引入官方提供的 less 样式入口文件
@import 'your-theme-file.less'; // 用于覆盖上面定义的变量

异常组件

在实际开发场景中，开发者需要去定义常用错误页面，为避免大量重复的编码工作，我们为开发者预定义了一组通用的错误页面，使用 lay-exception 标签进行创建

结果组件

除异常页面外，我们还可以通过 result 组件，来构建 成功 与 失败 的反馈提醒

 

分割面板

更灵活的布局方案

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

• Yoshino: 一个基于React的可定制化的PC组件库
• 一个优秀的可定制化Flutter相册组件，看这一篇就够了
• 定制优化 Nextcloud 镜像
• goim 架构与定制
• “私人定制” CLI 工具
• Docker 定制镜像

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。