首页
学习
活动
专区
圈层
工具
发布

【新!超详细】Figma组件属性完全指南

例如,我创建了一个具有三种类型的按钮:主要、次要和再次级。每个都有 4 种状态:启用、悬停、聚焦和禁用。此外,每个都有两个图标,一个在左边,一个在右边,加上一个文本标签。...例如,创建一个具有不同状态(如启用、悬停和禁用)的按钮。 还有一件事,如果你想使用交互式组件,你必须使用变体。 如何在 Figma 中添加属性? 第一步,您需要创建一个组件。...例如,如果要创建悬停按钮,请将其颜色从启用更改为悬停,并将其命名为悬停。您现在有一个包含两个变体的变体组件集。 如何在 Figma 中编辑属性?...更改列表中的变体顺序 当您单击一个实例并想要更改变体时,您希望它按字母顺序排列,或者最流行的变体在顶部。 在变体行上,单击详细信息图标。在打开的窗口中,拖放变体。...专业提示-命名属性 我们不能有同名的属性。例如,对于一个按钮,我们不能为布尔属性和交换属性赋予相同的名称,即“图标”。为了克服它,您可以在布尔属性中写入单词“Icon”之前添加单词“Show”。

16.7K32

Vue Amazing UI:好用的Vue3组件,大大提升开发速度,这款强大的Vue3组件库,组件太丰富了,几乎涵盖了你需要的控件样式,不信你自己测试

Ellipsis(文本省略)当文本内容过长,在有限的空间内无法完全显示时,Ellipsis 组件可以将文本进行省略显示,并且可以设置鼠标悬停时显示完整内容等效果。...FloatButton(浮动按钮)在一些页面中,如手机端的应用,可能会有一些常用的操作按钮,如快速回到顶部、添加新内容等,FloatButton 可以以浮动的形式显示在页面上,方便用户操作。...Message(全局提示)当需要在页面上显示一些全局的提示信息,如操作成功或者失败的提示,Message 组件可以在页面的某个固定位置显示这些信息。...Popconfirm(弹出确认)类似于 Dialog 和 Popover 的结合,当用户进行某个操作时,如删除操作,会弹出一个确认框,并且可以在确认框中显示一些提示信息。...Popover(气泡卡片)在鼠标悬停或者点击某个元素时,弹出一个气泡卡片,显示一些相关的信息或者操作按钮,如在地图上悬停在某个地点时,弹出气泡卡片显示该地的详细信息。

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

    niRvana · 轻拟物主题4.8完美版

    方便的在文章中插入提示框,并允许选择蓝、绿、橙、红四种提示色彩 插入下载按钮 插入模态框 插入提示工具: 在段落中插入提示语,鼠标悬停即可显示,就像这样。...UI样式 您可以轻松的在文章中插入小标题样式、模态框、提示框、折叠内容、内容回复可见、下载按钮、下拉菜单、站内文章链接等,例如: 图片 图片 未标题 显示下拉菜单 左眼会配右眼哭の博客...,可给选中的文本设置鼠标悬停效果 4、新增:阅读量显示。...文章分类页、全部文章时间排序页在一定尺寸的屏幕上出现边栏,且顶栏也有边栏按钮的BUG,如:小尺寸的iPad横屏状态 v1.5.1 1、增强:批量发送的垃圾评论再也不可能进入本站了!...2、REST API错误不再清空页面,而是显示错误提示 v1.4.2 1、修复:启用Ajax不刷新加载页面时,文章二维码封面显示后,使用返回按钮不消失的bug;鼠标悬停显示tooltip提示文字后,使用返回按钮不消失的

    10K10

    Flutte部件目录-Material Components 顶

    一个显示在应用底部的材质小部件,用于在少量视图中进行选择,通常介于3到5之间。 底部导航栏由文本标签,图标或两者的多个项目组成,并放置在一块材料的顶部。 它提供了应用程序顶级视图之间的快速导航。...一个凸起的按钮由一个矩形的材料悬停在界面上。 ? ? FloatingActionButton 浮动操作按钮是一个圆形图标按钮,它悬停在内容上以提升应用程序中的主要操作。...PopupMenuButton 按下时显示菜单并且当菜单因选择项目而被解除时调用onSelected。 ? ButtonBar 按钮的水平排列。 ?...芯片代表小块中的复杂实体,如联系人。 ? Tooltip 工具提示提供的文本标签可帮助解释按钮或其他用户界面操作的功能。...将按钮封装在工具提示窗口小部件中,以便在按下窗口小部件时(或者当用户采取其他适当的操作时)显示标签。 ? DataTable 数据表显示一组原始数据。 它们通常出现在桌面企业产品中。

    13K40

    从零开始的Qt开发指南(六)Qt 常用控件之 QWidget(下):从交互细节到颜值定制,打造专业级界面

    二、cursor:给鼠标换 “皮肤”,提升交互辨识度 当用户把鼠标移到不同控件上时,光标形状的变化能直观告诉用户 “这里能做什么”—— 比如悬停在按钮上显示 “手型”,悬停在输入框显示...四、toolTip:给控件加 “提示标签”,降低用户理解成本 当用户对某个控件的功能不确定时,鼠标悬停时显示的提示信息(toolTip)能快速解答疑惑 —— 比如按钮上只放了图标,toolTip...“确认” 和 “取消” 操作,鼠标悬停时显示提示,且 “确认” 按钮的提示显示 3 秒,“取消” 按钮的提示一直显示。...方法设置toolTip的显示持续时间,如Yes按钮的toolTip在显示3000ms后消失,No则在显示7000ms后消失。...4.3 进阶:statusTip 与 whatThis(其他提示类型) 除了toolTip,QWidget 还支持另外两种提示: statusTip:鼠标悬停时在窗口状态栏显示的提示(需要窗口有状态栏

    19510

    UI设计工具Sketch v2025.3发布:全新界面,多个功能适配macOS Tahoe

    团队测试了macOS Tahoe推崇的浮动窗口和玻璃材质,但发现它们在画布密集场景易分散注意力。最终采用固定侧边栏,将文档标签移至顶部(位于页面与图层列表之上)。...用户可双击重命名、悬停点击“×”关闭、拖出或拖入创建新窗口。虽macOS Tahoe默认推荐顶部标签栏,但Sketch判定侧边集成更契合设计工作流,故将标签页设为新默认选项,同时保留窗口模式供切换。...图层列表的聚焦优化图层列表新增“聚焦模式”默认开启,仅显示当前选中图层、其父容器及同级兄弟元素,避免复杂文件干扰。若选中画布顶层对象,则自动恢复完整列表。用户可通过侧边栏底部按钮或命令栏快速切换。...符号覆盖体验升级符号覆盖(Symbol Overrides)功能优化:预览图更大,颜色变量名称完整显示;覆盖项超15个时,系统按组件类型自动分组。...这次v2025.3的版本更新不仅是界面的视觉升级,更是Sketch对“专业设计工具如何在现代操作系统中实现高效协作”的系统性解答。

    14710

    在macOS上使用VS Code和Clang配置C++开发环境

    +"并安装Microsoft官方的C/C++扩展验证Clang安装:macOS通常预装了Clang编译器,可通过终端验证:clang --version如果未安装Clang,终端会提示安装命令行开发者工具...当你在第10行输入msg.时,可以看到IntelliSense生成的推荐成员函数列表:你可以按Tab键插入选中的成员。添加开括号时,会显示函数所需参数的信息。...如果播放按钮上显示调试图标,可直接点击进行调试。...探索调试器开始单步执行代码前,注意用户界面的几个变化:集成终端出现在源代码编辑器底部,调试控制台选项卡显示调试器运行的输出编辑器高亮显示开始调试前设置断点的行:活动栏中的"运行和调试"视图显示调试信息代码编辑器顶部出现调试控制面板...例如,循环变量只有在程序执行循环时才可用。你还可以在程序暂停时将鼠标悬停在任何变量上快速查看其值:使用launch.json自定义调试使用播放按钮或F5调试时,C++扩展会动态创建调试配置。

    1.6K20

    【云顾问-数字资产】改进报告生成流程,实时感知生成时长

    功能介绍鼠标悬停至【生成报告】按钮时,即可预览报告生成的简要概况点击【生成报告】按钮后,顶部将实时显示生成过程的计时器,让您清晰、直观地感知报告生成进度报告生成完毕后,点击【查看】按钮,即可查阅生成的临时报告...简要概况描述了您当前生成报告的时间节点,以及是通过手动巡检or自动巡检生成,这两者的区别在于:手动巡检:在您当日手动完成巡检后,再去发起生成报告,具有较高的实时性自动巡检:在每天凌晨12点,系统会自动对所有架构图进行巡检...,以便您能快速生成报告此外,您还可以通过点击架构图右上角的【订阅】按钮或点击链接报告订阅,订阅每日巡检结果到您的邮箱,掌握最新资源风险动态我在生成过程中关闭提示窗口会影响生成进展吗?...关闭正在生成中的消息窗口不会影响报告的生成过程,报告生成完毕后,将会通过气泡提示的方式通知您生成完毕后,我该做什么?当前生成的报告为临时报告。...为了确保您的数据安全和便于日后查阅,建议您在查看报告时,点击右上角的【报告归档】按钮,将这份报告保存至您的数字资产中

    21210

    如何在 Windows 使用 Podman Desktop 取代 Docker Desktop

    另外,如果你更喜欢Linux提示符和Linux工具,也可以直接从WSL实例中访问Podman。...构建命令的输出将显示在嵌入式终端窗口中。单击完成按钮继续。您将被带到镜像屏幕,您的新镜像将在其中显示。如果您选择不构建新镜像,则在容器创建对话框中按下“来自现有镜像”按钮后,您将进入镜像屏幕。...接下来,将鼠标悬停在任何镜像上,然后单击出现在屏幕右侧的播放按钮: 现在您可以配置新容器实例的属性。...它会重新显示在容器屏幕上。 管理容器 将鼠标悬停在容器上会显示可让您停止或删除它们的操作。您还可以使用左侧的复选框来选择多个容器并批量应用操作。单击最右侧的三个点按钮会显示一个包含更多选项的溢出菜单。...单击“部署”将 Pod 启动到活动的 Kubernetes 集群中,如 ~.kube/config 文件所定义。您可以在设置菜单中选择不同的集群连接。

    6.4K12

    Google Earth Engine(GEE)——GEE最全介绍(7000字长文)初学者福音!

    当按下“获取链接”按钮时,浏览器地址栏中将出现一个唯一链接。此链接表示按下按钮时编辑器中的代码。...要将数据集直接导入脚本,请单击数据集描述中的导入链接或 import按钮。 代码编辑器顶部的导入部分。 将数据集导入脚本的结果组织在脚本顶部的导入部分中,在您导入某些内容之前隐藏。...出现的可视化工具允许您以交互方式配置图层显示参数。单击工具右侧的按钮(默认情况下,它会根据提供的最小和最大范围执行自定义拉伸)以将显示线性拉伸到显示窗口中图像值的百分位数或标准偏差。...当检查器选项卡被激活时,光标变成一个十字准线,当您单击地图时,它将显示光标下的位置和图层值。例如,图显示了在Inspector选项卡中单击地图的结果 。...(请注意,矩形是平面几何图形,因此它们不能放置在具有测地线几何图形(如线和多边形)的图层上。)

    6.6K11

    【愚公系列】2023年12月 Winform控件专题 StatusStrip控件详解

    当工具栏宽度不足以容纳所有控件时,会自动将部分控件隐藏在菜单中。 Vertical:垂直排列。将工具栏内的各子控件按照垂直方向排列,可使用工具栏显示所有控件,但是占用的窗口空间较大。...这样,当鼠标悬停在这两个子控件上时,就会显示它们的ToolTip提示信息。 2.常用场景 StatusStrip控件通常用于显示程序的状态信息,如进度条、消息提示、时间、版本号等等。...显示提示信息:例如在程序中添加一个ToolTip控件,可以在StatusStrip控件中显示提示文字,帮助用户更好地理解程序的功能。...在程序启动时,模拟了一个加载的过程,并在进度条中显示进度,加载完成后隐藏进度条。同时,启动了一个定时器,在每隔1秒钟时更新时间Label的内容。...最后,我们还设置了ShowItemToolTips属性为true,使得当鼠标悬停在状态栏上时,会显示提示信息。 我正在参与2023腾讯技术创作特训营第四期有奖征文,快来和我瓜分大奖!

    1.8K21

    Qt-for-鸿蒙PC-无边框窗口开发实践

    项目实现了自定义标题栏、窗口控制按钮、主题切换等功能,展示了 Qt Quick Controls 2.15 在 HarmonyOS 平台上创建现代化、无边框窗口界面的实际应用。...使用 Image 显示 SVG 图标 根据窗口状态动态切换图标(最大化/还原) 关闭按钮悬停时显示红色背景 5....窗口状态管理 6.1 窗口恢复时定位到屏幕顶部 // 窗口状态变化时,恢复窗口时将标题栏固定到屏幕顶部 onVisibilityChanged: { if (visibility === Window.Windowed...)确保窗口已创建 设置窗口背景色避免白色/黑色闪烁 问题2:窗口恢复时出现白色或黑色背景 原因:ApplicationWindow 的默认背景色是白色,透明时可能显示为黑色。...字体大小适配 标题栏文字:font.pixelSize: 28 主标题:font.pixelSize: 48 按钮文字:font.pixelSize: 28 提示文字:font.pixelSize: 28

    17510

    VsCode中使用Jupyter

    首次打开“不受信任”的笔记本时,将显示以下通知提示。 如果选择“信任”,则笔记本将继续受信任。如果您选择不信任笔记本,则工具栏中将显示“不受信任”,并且笔记本将保持只读状态,如前所述。...如果不这样做,则在选择PDF选项时将提示您安装它。另外,请注意,如果您的Notebook中只有SVG输出,它们将不会显示在PDF中。...删除代码小区# 可以通过将鼠标悬停在代码单元上并使用代码单元工具栏中的删除图标,或在选定的代码单元处于命令模式下时通过键盘组合键dd来删除代码单元。...在运行代码和单元格之后,单击顶部工具栏中的“变量”图标,您将看到当前变量的列表,当在代码中使用变量时,这些列表将自动更新。...在“笔记本编辑器”窗口中,双击任何绘图以在查看器中将其打开,或选择绘图左上角的绘图查看器按钮(悬停时可见)。

    7.7K40

    如何用7个简单的步骤,在Firefox开发工具中调试JavaScript

    步骤5:逐步完成代码 现在我们知道了如何在代码中设置断点,我们想要遍历每一行,这样我们就可以知道哪里出错了。首先,在第7行中放置一个断点——就在Add按钮的单击处理程序中,这样我们就可以从头开始。...从第7行开始,使用“Step Over”按钮,直到第13行。活动线显示为淡蓝色背景,上下有线。 ? 现在,您可以使用“Step In”按钮移动到对capitalizeString函数的调用中。 ?...请记住,执行中的当前位置没有改变,因此使用Step Over按钮将从调用堆栈的顶部继续。 步骤6:确定应用程序的状态。 既然已经导航到错误发生的位置,我们需要检查应用程序的状态并找出导致错误的原因。...在代码继续之前,有很多选项可以用来确定变量包含的值和表达式的值。我们将依次研究每一个。 鼠标悬停 确定变量值的最简单的方法是将鼠标悬停在它上面,工具提示就会弹出该值。...观察者 您可以向监视表达式面板添加表达式,该面板在代码中移动时显示表达式的当前值。这对于跟踪更复杂的表达式随时间的变化是很方便的。

    5.8K60

    【愚公系列】2023年11月 Winform控件专题 ToolTip控件详解

    AutomaticDelay:自动延迟,表示鼠标悬停在控件上时,提示信息显示的延迟时间,默认值为500毫秒。...;在上面的示例中,当鼠标悬停在button1按钮上时,将会显示一个气球形式的ToolTip,该ToolTip的内容是“这是一个气球形式的ToolTip!”。...在ToolTip控件中,通过UseAnimation属性可以设置工具提示是否使用动画效果显示。...同时,将ToolTip控件绑定到button1按钮上,当用户鼠标悬浮在button1上时,会显示所设定的提示信息。...工具栏提示:在Winform窗体中使用工具栏时,可以通过ToolTip控件在鼠标悬浮在工具栏按钮上时,显示该按钮的功能描述,帮助用户更好地使用工具栏。

    3.5K11

    用 CodeBuddy 搭建我的个人博客:技术小白的零门槛建站实践指南

    模式下,从组件库中筛选所需元素(如"导航栏""文章列表"),拖拽至编辑区,通过右侧属性面板修改文字、颜色、布局等参数; 实战应用:搭建博客首页时,选择"顶部导航栏"组件并设置菜单名称(首页、文章、关于我...头像动画:为了让头像展示更具仪式感,工具设计了入场动画。avatar-container 初始时覆盖全屏,显示loading……进度条,同时页面内容逐渐显示,增强了用户的沉浸感。...: 链接悬停:当鼠标悬停在链接、按钮、卡片等元素上时,外层圆圈放大至1.5倍,内层圆点变为透明,强化交互反馈。...工具的实现既兼顾了规范要求,又保持了整体风格: 入口设计:在页脚添加了网站声明链接,文字颜色与整体风格一致,链接悬停时添加了渐变效果,保持了交互的一致性。...鼠标悬停时,卡片会上浮 10px 并生成紫色阴影。 专栏导航:底部有 13个圆角标签(如“Linux”,“C++”),直接链接到 CSDN 对应专栏。鼠标悬停时,片会上浮 10px 并生成紫色阴影。

    63521

    在WSL中配置VS Code C++开发环境完整教程

    在Windows系统上进行C++开发时,借助Windows Subsystem for Linux (WSL)可以获得接近原生Linux的开发体验。...成功启动后,VS Code窗口标题栏会显示"WSL: Ubuntu",状态栏会显示远程连接状态。...vector或string上查看类型信息输入msg.时会自动显示成员函数列表自动补全功能可通过Tab键触发运行C++程序确保helloworld.cpp是当前活动文件点击编辑器右上角的"播放"按钮在弹出的编译器选择中...调试器无法启动问题:调试时提示"miDebuggerPath"配置错误解决:检查gdb是否安装:sudo apt-get install gdbwhereis gdb # 确认路径更新launch.json...,你已经学会了如何在WSL环境中配置VS Code进行C++开发,包括:设置WSL和Linux开发环境安装必要的工具和扩展创建、编译、运行和调试C++程序配置自定义构建和调试任务这种开发方式结合了Windows

    1.1K20

    JavaScript 事件加载有哪些应用场景?

    事件可以是用户交互行为(如点击、悬停、输入等),也可以是页面加载、网络请求等。通过事件加载,可以在特定的事件触发时执行相应的JavaScript代码,实现各种功能和交互效果。...JavaScript事件加载的应用场景 1 网页交互和用户体验改善 通过绑定按钮点击事件、链接点击事件等,实现页面元素的交互效果,如显示/隐藏元素、切换内容、展开/折叠等,提升用户体验。...2 表单验证和数据处理 在表单提交前,通过绑定表单提交事件,对用户输入进行验证和处理。例如,验证输入是否为空、格式是否符合要求,或者对输入进行实时校验和提示。...4 页面元素操作和样式修改 通过绑定鼠标悬停事件、键盘事件等,实现页面元素的样式修改和交互效果。例如,鼠标悬停时显示提示信息,按键触发菜单展开等。...; }); 效果:当按钮被点击时,输出框中显示文本"按钮被点击了!"

    86810
    领券