前端必备:FrontendBlocks 3.9 版本重磅发布


重磅更新内容(划重点):可以支持相似块的class合并了,生成的css代码行数最高可降95%!

对于大家的使用反馈我非常重视,所以在改了两个小版本之后又用几个项目实测了近一年,这回终于正式发布3.9版本。

赶快发挥你对弹性布局的理解和设计才华吧!高度还原设计稿必备!

更新内容:

1、智能父子连字符关联:支持CSS名称连字符的父子关系关联,生成产物的命名更加省心
我们可以用连字符命名各个块,并且支持在块中嵌套块,这样我们就可以很方便的实现复杂的页面布局。
比如icon-btn,下面分别有icon-btn-image和icon-btn-text两个子元素,
那么在生成的时候会自动生成下面的这种代码:

<div class="icon-btn" onclick="iconBtnClick()">
    <img class="image"/>
    <div class="text">图标文字</div>
</div>
<style>
    .icon-btn{
        box-sizing:border-box;
        border-bottom:1px solid rgba(229, 229, 229, 1);
        border-right:1px solid rgba(229, 229, 229, 1);
        text-align:left;
        display:flex;
        position:relative;
        height:92px;
        width:33%;
        flex-direction:column;
        justify-content:center;
        align-items:center;
    }
    .icon-btn{
        user-select: none;
    }
    .icon-btn:hover{
        opacity: 0.8;
    }
    .icon-btn:active{
        opacity: 0.5;
    }
    .icon-btn>.image{
        background-image:url(https://www.yumeisoft.com/demo-icon.jpg);
        background-size:cover;
        background-repeat:no-repeat;
        background-position:center;
        text-align:left;
        width:32px;
        height:32px;
    }
    .icon-btn>.text{
        font-size:14px;
        color:rgba(102, 102, 102, 1);
        text-align:left;
        display:flex;
        position:relative;
        width:100%;
        flex-direction:column;
        align-items:center;
    }
</style>

2、智能CSS精简:精简了生成的CSS代码,原来数千行的代码现如今只需几十行。对于结构相同并且所有子元素样式一模一样的,不会再生成新的block样式,而是直接复用之前的样式。
3、对于名称为-btn、-button结尾的元素自动加上点击效果,并且自动添加点击事件,写业务代码更方便,生成完几乎直接就可以开写!
4、增加了7个常用模板,可以更快速的构建布局。
5、极速设置面板里增加了一键“设置随机占位图”按钮,立即就能给当前块加背景,快速获得图文并茂的效果。
6、重写了导出vue和html的代码,现在导出规则已经和ToolsBar解耦,你可以更方便的写你想要的任何导出规则。
7、导出界面增加了一键复制功能,粘贴到代码里就能用!更贴心。


相關推薦

2022-10-23

键盘和键鼠套装等等,都是大家平时日常中可用到的生活必备小物件哦~   等级划分 除了礼品兑换外,根据大家所获积分值,openKylin将成长体系划分为以下6个等级,分别是:OK青铜、OK白银、OK黄金、OK钻石、OK星耀、OK王

2023-09-06

快速搭建自己的移动商城,更好更快地拓展业务 2. 前端工程师开发团队 前端工程师开发团队,可以借助跨平台APP大幅提升开发效率。统一的代码库,跨平台适配,让他们可以专注于业务逻辑的开发,而不需要为不同平台编

2023-05-24

Next Terminal v1.3.9 已经发布,HTML5 的远程桌面网关 此版本更新内容包括: 修复【资源管理菜单-动态指令功能存在严重缺陷】fixed #359 修复计划任务日志分页无效的问题 增加用户密码长度限制(旧版本存在设计缺陷,当密码

2023-02-11

,体系最完整的图形处理器设计及研发队伍,涵盖架构、前端设计、后端设计、系统工程、软件及测试等芯片设计的各个方面,梯队完整健全。团队具备三十余年的研发经验,在3D渲染、通用计算、人工智能、视频编解码、图像

2022-09-04

、特定用途的适用性和不侵权的保证。在任何情况下, 版本细节 本期主要对监听日志进行了改进和优化,解决了 11 个 Issue 功能建议。 v4.3.9 版本细节:https://gitee.com/dotnetchina/Furion/issues/I5PIWD v4.3.8 版本细节:https:/

2022-05-19

已发布,这是 Python 3.9 的第 13 个也是最后一个常规维护版本,包含了 166 次 commit。公告指出,从现在开始,3.9 分支将只接受安全修复,并且在 2025 年 10 月之前,这些修复程序将以仅源码的形式发布。 与 3.8 相比,Python 3.9 中

2021-12-29

git-bug 是一个分布式 bug 跟踪器,直接利用了 Git 的特性,可以像平常操作 Git commit 与分支一样,直接远程推送 bug 项与他人协作。开发者不需要依赖某个 Web 服务器来处理项目 bug,也可以离线查看并修改 bug 报告。 git-bug 使用

2024-04-03

JeeSite 源码仓库:https://gitee.com/thinkgem/jeesite4 JeeSite Vue 前端源码:https://gitee.com/thinkgem/jeesite-vue JeeSite 跨平台手机端:https://gitee.com/thinkgem/jeesite-uniapp JeeSite Cloud 微服务:https://gitee.com/thinkgem/jeesite-cloud JeeSite 客户端安

2022-06-18

Godot 4.0 发布了第 10 个 Alpha 版本。 值得关注的变化: 新增将 Godot 3.x 项目转换为兼容 Godot 4 的 CLI 工具 此工具旨在优化项目从 Godot 3.x 过渡到 Godot 4.0 的 API 兼容性。由于此工作仍在进行中,因此建议在尝试转换工具之前,先

2023-09-19

项目简介 JECloud 平台后端采用微服务架构,前端采用微应用架构,可做到不同服务使用不同数据库独立运行。全平台采用基于模型驱动的设计模式,并在前后端留有大量的代码植入入口,方便开发者对平台进行改造扩充。JEClou

2023-12-01

一键安装AI框架。 AI框架安装助手采用前后端分离架构:前端负责检测系统硬件,自动推荐安装方式,提供安装选择,获取安装选项,显示安装信息及进度;后端执行具体任务并向前端及时反馈信息。该架构提高了开发效率、可

2023-09-15

交互组件:https://github.com/devlive-community/openai-java-sdk 该版本着重支持 Apache Seatunnel 作为流水线支持框架 DataCap 已发布 发布版本 发布时间 1.14.0 2023-09-14 General 修复数据源检查任务返回空的问题 添

2022-10-14

同一时间共发布了 Python 3.10.8、3.9.15、3.8.15 和 3.7.15 四个版本。 此次的安全更新内容包括: CVE-2022-40674:捆绑的 libexpat 从 2.4.7 升级到 2.4.9,修复了 function doContent 中的 heap use-after-free 漏洞 gh-97616:修复了list *= int中可能出

2023-06-15

的函数调用功能 更新并增加可控制性的gpt-4和gpt-3.5-turbo版本 gpt-3.5-turbo的新 16k 上下文版本(与标准 4k 版本对比) 最先进的嵌入模型的价格降低了 75% gpt-3.5-turbo输入 token 的价格降低了 25% 公布gpt-3.5-turbo-0301和gpt-4-0314模型