首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

TDesign 更新周报(2022年5月第4周)

Tabs:修复选项卡新增和删除在normal风格下无效 Drawer:修复 Drawer使用按键关闭时 contenteditable 出现的边框 Layout:去除 Header额外高度设置 详情见...Collapse:修复 t-class 外部样式类无法使用的问题 DropdownMenu:修复 label 无法实时更新的问题 Sticky:修复吸顶后 tabs 无法滑动的问题 Tabbar:补充缺失的...Bug Fixes Tabbar:优化代码避免在 setData 里传输不必要的页面实例 Sticky:修复在无法获取页面实例时报错的问题 Skeleton:添加组件基础默认样式 DropdownMenu.../ Collapse折叠面板 / Preview图片预览 / Noticebar公告栏 Bug Fixes Button:补充样式类型,优化展示布局 Datetimepicker:补充秒、星期的展示,...修复多标签页关闭左侧会关闭首页的问题 详情见:https://github.com/Tencent/tdesign-vue-starter/releases/tag/0.2.2 TDesign Vue

1.7K30

css3新属性position: sticky 一分钟实现 导航栏悬停功能

【数据结构与算法完整代码】、【前端技术交流群】 想必很多前端小伙伴经常会在开发中遇到这样一个需求,就是在下划时,导航栏悬停在屏幕最上方,例如咱们的csdn: ?...那么你们都是使用什么方法实现的呢?今天我们就用css3的一个新的属性position: sticky 来实现这个功能吧,坚持看下去,就只需一分钟就能搞定。...正文 你只需要找到你导航栏的标签,给他添加以下样式,就可以实现导航栏悬停功能: 标签内容 导航栏 <!...*/ position: sticky; //设置position: sticky样式 top: 0; /...其实原理就是,当标签离浏览器顶部的距离没有达到我们设置的top值时,该标签都处于position: relative 的状态,占据文本流存在于内容中; 当标签离浏览器顶部的距离达到我们设置的top值时,

1.8K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    原型设计软件Axure中文版,Axure如何下载?Axure软件安装教程

    Axure是一款专业的交互式原型设计工具,旨在帮助用户快速制作高品质、高保真度的原型。若你是一个网站设计师或产品经理,那么Axure是你不可或缺的工具。...在Axure中,你可以轻松的进行页面设计、交互效果制作、动画效果制作等等。 Axure的核心功能是原型设计,可以对页面进行细致详尽的设计,并且可以添加各种交互效果,以模拟真实的用户操作。...Axure还支持多种样式设置,可以轻松地设置元素的颜色、字体、大小等属性。 在Axure中,用户可以通过添加交互效果来模拟真实的用户操作,例如鼠标悬停、点击、拖拽等等。...动态面板:可以设置一个面板,通过点击或其他事件触发面板的展开或收起,可以用来实现折叠菜单或者展开详情等功能。 鼠标悬停:设置一个元素,当鼠标悬停在上面时,会触发某种效果,比如提示框或者弹出菜单等。...拖放功能:可以设置元素可拖动,用户可以将元素拖动到其他位置或者面板中。 点击切换:在页面上设置多个元素,点击其中一个元素后,其他元素会自动隐藏或者展开。

    4.3K40

    探索 JQuery EasyUI:构建简单易用的前端页面

    3.2.1 主要属性title: 设置面板的标题。iconCls: 设置面板标题前的图标样式。width: 设置面板的宽度。height: 设置面板的高度。...collapsible: 设置面板是否可折叠。closable: 设置面板是否可关闭。border: 设置面板是否显示边框。3.2.2 使用示例面板标题前的图标样式 collapsible: true, // 设置面板可折叠 closable...面板的内容为 "Welcome to my panel!",并且设置了面板标题前的图标样式为 "icon-ok",使其显示一个勾选图标。同时,我们还设置了面板可折叠、可关闭以及显示边框等属性。...常用插件与扩展4.1 使用 Tooltip 插件Tooltip 插件是 EasyUI 中一个常用的工具,用于在用户鼠标悬停在指定元素上时显示提示信息,增强用户体验。

    58210

    探索 JQuery EasyUI:构建简单易用的前端页面

    3.2.1 主要属性 title: 设置面板的标题。 iconCls: 设置面板标题前的图标样式。 width: 设置面板的宽度。 height: 设置面板的高度。...collapsible: 设置面板是否可折叠。 closable: 设置面板是否可关闭。 border: 设置面板是否显示边框。 3.2.2 使用示例 面板标题前的图标样式 collapsible: true, // 设置面板可折叠 closable...面板的内容为 “Welcome to my panel!”,并且设置了面板标题前的图标样式为 “icon-ok”,使其显示一个勾选图标。同时,我们还设置了面板可折叠、可关闭以及显示边框等属性。...常用插件与扩展 4.1 使用 Tooltip 插件 Tooltip 插件是 EasyUI 中一个常用的工具,用于在用户鼠标悬停在指定元素上时显示提示信息,增强用户体验。

    9610

    基于 Butterfly 的外挂标签引入

    对于父级悬停样式,需要给目标元素添加指定 CSS 类,同时还要给目标元素的父级元素添加 CSS 类 faa-parent animated-hover。...On DOM load 当页面加载时 显示动画 On hover 当鼠标悬停时 显示动画 On parent hover 当鼠标悬停 在父级元素时 显示动画 faa-wrench animated faa-wrench...) warning ban 调整动画速度 warning ban On hover(当鼠标悬停时显示动画) warning ban On parent hover(当鼠标悬停在父级元素时显示动画) warning...folding Butterfly 虽然也有内置折叠框 hideToggle 标签,但是 Volantis 的 folding 折叠框更好看一些 标签语法 配置参数 样式展示 显示代码 {% folding...查看图片测试 查看默认打开的折叠框 这是一个默认打开的折叠框。

    1.2K30

    深入理解bootstrap

    列嵌套:在一个列里再声明一个或者多个行(row),内部所嵌套的row的宽度为100%时就是当前外部列的宽度 3.列排序:通过.col-md-push-*和.col-md-pull-*一实现 4.响应式栅格...:.table 2.隔行加背景色样式:.table-striped 3.带边框的单元格:.table-bordered 4.鼠标悬停高亮的表格:.table-hover 5.紧凑型表格:.table-condensed....alert 2.属性值data-dismiss="alert",警告框的关闭,需要配合js使用 3.在.alert样式上应用一个.alert-dismissable样式即可实现一个可关闭的警告框 4....、.list-group-item-text S.面板 1.基础面板:.panel、.panel-default(.panel-xxx多彩)、panel-body 2.头尾样式:.panel-heading...1.data-toggle="collapse"配合data-target=""使用,折叠区域使用collapse和in样式 2.默认隐藏折叠区域,触发元素上添加一个.collapsed样式,去掉折叠区域的

    3.4K60

    SAO UI Plan -- SAO Utils WEB 2.0

    球形风格还是很好实现的。大概只花了半天摸鱼时间,就基本实现了球形样式UI和悬停变色效果,得益于之前做右半边的经验,不管是构建主体还是引入图标都是顺风顺水。...不过静态的css是不支持这种玩法的啦,好在到时候实装时还有pug和stylus可以添加计算变量动态调整。小case啦。 然后左半边菜单就搞定啦,悬停显示效果和动画里那是一模一样啊。开心!...内附本帖链接,可能的话,希望可以开着帮我做下宣传 3 hoverShow true , false true为开启悬停显示,false为关闭悬停显示。默认开启。控制属性栏和三级菜单的悬停显隐。...4.1 music.enable true , false true为开启点击音效,false为关闭点击音效 4.2 music.Launcher Url,音乐文件的相对路径或外链 右键点击打开菜单时的音效...,留空则使用默认音效 4.3 music.Click Url,音乐文件的相对路径或外链 左键点击菜单选项时的音效,留空则使用默认音效 4.4 music.Alert Url,音乐文件的相对路径或外链 右键点击退出按钮时的音效

    2.1K20

    开发必备 | 新手如何快速掌握VSCode编辑器?

    (折叠)区域 Fold (collapse) region Ctrl+Shift+] 展开(未折叠)区域 Unfold (uncollapse) region Ctrl+K Ctrl+[ 折叠(未折叠...Ctrl+K S 全部保存 Save All Ctrl+F4 关闭 Close Ctrl+K Ctrl+W 关闭所有 Close All Ctrl+Shift+T 重新打开关闭的编辑器 Reopen...,在命令面板中输入“快捷键”,可以进入快捷键的设置.或者你也可以选择菜单栏「偏好设置 --> 键盘快捷方式」进入快捷键的设置。...2.换另外一个电脑时,从云端同步配置到本地:当我们换另外一台电脑时,可以先在 VS Code 中安装 settings-sync 插件,安装完插件后,在插件里使用 GitHub 账号登录,登录之后,插件的界面上...CSS Peek : 增强 HTML 和 CSS 之间的关联,快速查看该元素上的 CSS 样式。

    88111

    JQuery EasyUI window 用法

    布尔 定义是否显示可折叠定义按钮 true minimizable 布尔 定义是否显示最小化按钮 true maximizable 布尔 定义是否显示最大化按钮 true closable 布尔 定义是否显示关闭按钮...字符串 给面板添加一个CSS类 null headerCls 字符串 给面板头部添加一个CSS类 null bodyCls 字符串 给面板主体添加一个CSS类 null style 对象 给面板自定义样式...null loadingMessage 字符串 当加载远程数据时,在面板中显示的信息 Loading…                       事件 名字 参数 描述 onLoad none 当远程数据加载时触发...onBeforeDestroy none 当面板销毁之前触发 onDestroy none 当面板关闭之后触发 onBeforeCollpase none 当面板折叠之前触发 onCollapse none...forceDestroy 当forceDestroy设置为true,面板被销毁的时候忽略onBeforeDestroy回调函数 refresh none 当设置了href值时,刷新面板来加载远程数据

    1.2K20

    Sketch 94 mac,草图94中文最新版支持M1,支持macOS Ventura 13

    新的面板组按类型覆盖,使您可以轻松地查看和更改符号实例中的颜色、图像、文本和图层样式——一次完成。我们还改进了在实例中显示嵌套符号的方式——现在应该感觉更整洁了。...如果您在颜色弹出框中键入新的颜色值,则现在在您单击其他位置以关闭弹出框时应用这些值。我们更新了选择框的设计。它现在使用应用程序的强调色,更容易看到选定的图层(特别是在选择多个形状和画板时)。...层列表现在显示符号中的每个层(而不仅仅是那些应用了样式的层)——继续并更改不是符号或未应用任何样式的层的属性。发生了什么变化:我们改变了双击符号的工作方式。...修复了在选择色调或调整颜色变量时可能发生的崩溃。修复了将形状转换为轮廓有时会在画布上稍微移动它或移除其旋转或翻转的错误。当您悬停或拖动线层的调整大小手柄时,您现在将看到一个工具提示及其长度。...如果在将鼠标悬停在手柄上时按住 ⌘ 键,您将看到线条的角度。我们修复了在插入或复制粘贴位图后关闭文档时会发生的内存泄漏。修复了无法通过拖动未填充区域来移动带有边框但没有填充的选定形状的问题。

    11K70

    你会在浏览器中打断点吗?我会!

    42); console.log("输出整数格式: %i", 42); // %f - 浮点数格式化 console.log("输出浮点数格式: %f", 3.14159); // %o - 以可折叠的优化多行样式显示一个对象...JavaScript 对象格式化 console.log("用于简单的对象表示: %O", obj); // %c - 应用 CSS 样式到输出 console.log("%c对文本进行样式化输出...我们可以对组执行以下操作: 通过点击其名称折叠或展开一个组。 通过点击组或断点旁边的复选框单独启用或禁用组或断点。 将鼠标悬停在其上,然后点击关闭按钮可以要删除一个组。...当我们禁用断点时,Sources 面板会使其在行号旁边的标记「变为透明」。 组具有上下文菜单。...当我们禁用断点时,Sources 面板会使其在行号旁边的标记「变为透明」。 将鼠标悬停在断点上,然后点击编辑以编辑,点击关闭以删除它。 在编辑断点时,可以在内联编辑器的下拉列表中更改其类型。

    57910

    使用 HTML5 新标签 制作 Accordion 组件(赠送3个相关案例源码)

    使用这两个标签,我们可以很方便地实现内容的展开和折叠功能。下面我们来详细介绍一下它们的用法。 :这个标签用于包裹可折叠的内容。默认情况下,内容是折叠的,用户点击时可以展开。...:这个标签用作 的标题。点击这个标题可以展开或折叠其后的内容。 HTML 部分 首先,我们来看一下 HTML 部分的代码: 的外观,包括背景颜色、字体样式、边框、悬停效果等。...details:设置了每个 details 标签的样式,包括背景色、边框、圆角和过渡效果。当鼠标悬停时,边框颜色会发生变化。....faq-title 和 .faq-content:分别设置了标题和内容的样式,使其更加美观和易读。 .expand-icon:设置了图标的样式和过渡效果,使得在展开和折叠时有更好的视觉体验。

    13410

    【译】W3C WAI-ARIA最佳实践 -- 控件

    如果实现只允许一个面板被展开,如果另一个面板被展开,折叠这个面板。 当焦点在展开状态的手风琴标题上,如果实现支持折叠,折叠该面板。...内容面板 包含与选项卡元素相关联内容的元素。 当初始化一个选项卡界面,一个选项卡面板默认显示,其相关联选项卡元素使用样式来标识其当前活跃。...如果还有任何选项卡元素,将焦点设置在已关闭选项卡元素的下一个元素上,并且激活新聚焦的选项卡元素。 NOTE 建议当选项卡元素接收到焦点时自动激活,只要它们相关的选项卡面板显示时没有明显的延迟。...Tooltip是元素获得键盘焦点或鼠标悬停在其上时,显示的与元素相关的信息弹窗。它通常在一小段延迟后出现,并在 Escape 按下或鼠标移出时消失。 Tooltip组件不会获得焦点。...包含可聚焦元素的悬停可以使用非模态对话框模式实现。 示例 在 issue 127. 记录着工具提示示例的进展。 键盘交互 Escape: 关闭工具提示框。

    4.6K30

    Visual Studio Code 快捷键 Mac 版

    Fn + → ⇥ == 右制表符(Tab键) ⇤ == 左制表符(Shift+Tab) ⎋ == Escape (Esc) ⏏ == 电源开关键 常用 Mac 快捷键 介绍 ⇧⌘P, F1 显示命令面板...↓ 跳到当前行的开始,结束 ⌃PgUp 滚动到 ⌃PgDown 滚动到行头/行尾 ⌘PgUp /⌘PgDown 滚动到页头/页尾 ⇧⌘[ / ⇧⌘] 折叠/展开区域 ⌘K ⌘[ / ⌘K ⌘] 折叠/展开所有子区域...Click 插入光标 ⌥⌘↑ 在上面插入光标 ⌥⌘↓ 在下面插入光标 ⌘U 撤消上一个光标操作 ⇧⌥I 在所选每行的末尾插入光标 ⌘I 选择当前行 ⇧⌘L 选择当前选择的所有事件 ⌘F2 选择当前单词的所有出现...⌘K ← / ⌘K → 移动活动编辑器组 文件管理 Mac 快捷键 介绍 ⌘N 新建文件 ⌘O 打开文件 ⌘S 保存 ⇧⌘S 保存为… ⌥⌘S 保存所有 ⌘W 关闭 ⌘K ⌘W 关闭所有 ⇧⌘T 重新打开已关闭的编辑器...Markdown预览 ⌘K V 打开Markdown预览到一边 调试 Mac 快捷键 介绍 F9 切换断点 F5 开始/继续 F11 / ⇧F11 跳进/出 F10 跳过 ⇧F5 暂停 ⌘K ⌘I 显示悬停

    1.7K31

    源计划-方舟:首页卡片

    极致简化信息 悬停标题和封面,弹出描述面板 宽屏左右张开,窄屏上下张开。 置顶、评论数、分类、标签均隐藏至卡片四个牙角。悬停展开。...点击查看参考教程 参考方向 教程原贴 参考了UI风格和配色样式 Neon-Space-Rainmeter 参考了UI风格和配色样式 JARVIS-Highpitched-OS fontawesome图标文档...fontawesome Flex布局参数解释 Flex 布局教程:语法篇 - 阮一峰的网络日志 Transition属性实现平滑过渡动画 CSS3实现伪类hover离开时平滑过渡效果示例 CSS伪类实现三角形绘制...> 0)) .article-meta-sticky i.fas.fa-thumbtack.sticky span.sticky=...cyber_post_item_link_hover() &:hover transition: all 0.3s color: var(--cyber-post-item-font-hover) //封面和标题的基础样式

    62920

    侧栏友链通讯录卡片

    24:内测版v0.02 实现离线头像和在线头像区分显示 自动计算在线头像人数并显示在分组栏 2022-06-23:内测版v0.01 实现侧栏友链通讯录 点击查看参考教程 参考方向 教程原贴 参考了折叠框的语法...HTML 标签 参考了PC版腾讯QQ的通讯录样式 腾讯QQ界面 店长的碎碎念 感觉好久好久没有写友链魔改和侧栏魔改的教程了,之前都是在捣鼓各种各样的API插件。...然后常态就显示我自己的角色属性卡片,多弄点悬停点击的按钮上去,这样就能把about和link页面合起来。...魔改步骤 预览效果 本企划还处于草创阶段,自适应样式有待优化,且版本针对当前所是用的butterfly_v4+,低版本用户不再另外支持。...这会让你每页的dom数量爆表。我之前这么做,导致我在运行gulp时压缩html时直接内存溢出。

    43650
    领券