文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如意设计助手× TDesign：产品设计的绝佳搭档

比如设计师调整某个 Design Token 的值，并不能及时通知到下游 UI 组件库的调整。 设计师与开发工程师在设计系统中的工作是脱节的。...组件编辑 对于组件编辑，如意设计助手提供以下三个重要功能点： 修改组件内容 修改组件状态 修改组件结构 从组件面板拖拽组件到 Figma 画布中，或者选中画布中已有组件时，组件面板自动切换至 Design...我们使用 token 来代替硬编码值，以便为 UI 开发维护一致且可扩展的视觉系统。...当您编辑矩形图层时，助手会推荐颜色、阴影、边框、圆角等样式 token，而文本图层则会推荐颜色、typography 等样式 token。...相应的，在「Code」面板中的生成 CSS 代码中，会使用对应 CSS 变量值，而非硬编码值。

76832

React19 她来了，她来了，他带着礼物走来了

❞ React 编译器 的核心几乎与 Babel 完全解耦，编译器内核其实就是「旧的 AST 输入，新的 AST 输出」。在后台，编译器使用自定义代码表示和转换管道来执行语义分析。...在使用Action之前 在下面的代码片段中，我们将利用 onSubmit事件，在表单提交时触发搜索操作。...❞ 当使用Web字体时，浏览器在下载字体文件时，会显示一段时间的空白文本，直到字体文件完全加载完成。这段时间内，用户可能会看到页面上出现了空白文本，然后突然闪现出字体样式。这种体验被称为FOIT。...); fn：表单提交或按钮按下时要调用的函数。 initialState：我们希望状态初始值是什么。它可以是任何可序列化的值。在首次调用操作后，此参数将被忽略。 permalink：这是可选的。...queryData:用于获取此次操作中from表单中对应key的值 useOptimistic() hook ❝useOptimistic 也新发布的Hook，它允许我们在异步操作时显示不同的状态。

26110
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    前端无障碍开发指南

    但 ARIA 永远无法替代语义化 HTML 标签，NO ARIA is better than bad ARIA。请优先考虑语义最贴近的 HTML 标签，只在必要时使用 ARIA。...采用 为表单项分类 当表单分为不同板块时，我们可能会使用 元素实现表单项的样式板块划分，但这样的划分并不利于无障碍设备获得表单项信息，可以使用进行替换...这样的设计会导致当 input 得到焦点时，placeholder 自动消失，造成用户无法感知当前表单项的内容。...尽可能使用原生的表单元素 在制作表单组件时，我们往往会出于实现 UI 样式的要求，采用 替代原生的表单元素。...规则 3：避免使用无意义的 HTML 标签 在使用 React、Vue 等框架时，我们往往需要将组件包裹在一个根元素中： 但这样的处理在编译后，会在造成元素结构的混乱： 标签混在 <tr

    1.2K20

    使用React和Flask创建一个完整的机器学习Web应用程序

    作者 | Karan Bhanot 来源 | Towards Data Science 编辑 | 代码医生团队 一直想开发一个完整的机器学习应用程序，将有一个UI来输入一些输入和机器学习模型来预测这些值...该项目的亮点： 前端是在React中开发的，它包含一个带有表单的单页，用于提交输入值 后端是在Flask中开发的，它暴露预测端点以使用训练有素的分类器进行预测，并将结果发送回前端以便于消费 GitHub...接下来加载了bootstrap它，允许为每个屏幕大小创建响应式网站。更新了App.js文件以添加带下拉菜单Predict和ResetPrediction按钮的表单。...一个内部的两个这样的组将成为UI。 还必须使用相同的名称更新状态，formData并使用默认值作为相应下拉列表的最小值。构造函数如下所示。...该应用程序如下所示： 主页 使用某些特征值，按下Predict按钮时，模型将其分类为Iris Setosa。 使用新的特征值，模型可以预测工厂Iris Versicolour。

    5.1K30

    React 18 带给我们的惊喜

    例如在 Canvas 画布编辑场景中，我们可以加载完主节点框架之后立刻进行渲染，而每个节点的内容则可以进行合并渲染，尽可能加快用户看到可编辑页面的时间，同时避免 http 异步函数引起的频繁渲染的性能开销...它可以在客户端动态加载代码（React.lazy），配合 Suspense 组件实现数据拉取和状态控制的关注点分离（当子组件未加载完成时，父组件填充 fallback 声明的组件），但是并不能在服务器端进行加载...当 Suspense 可以在服务器端使用之后，一旦某个组件加载慢，就可以将 fallback 的内容传输到客户端（例如下图中的 loading 态），保证用户尽可能早的可进行交互。...5、New Render API 新的更加友好的语义化 render 方式。...React 18 给我们提供了一些从应用构建视角下的手段，例如： 在 Client 端随时中断的框架设计，第一优先级渲染用户最关注的 UI 交互模块。

    73410

    TDesign 更新周报（2022年6月第1周）

    align 失效的问题Table： 修复表头多选框无法居中和居右展示的问题修复无法在 SSR 场景下使用的问题Others官网： 支持在线配置组件库主题详情见：https://github.com/Tencent...，使用日期选择器时，切换月份也会导致退出编辑模式Form： 修复 form实例方法 submit 调用后的刷新问题详情见：https://github.com/Tencent/tdesign-vue-next...''重构了事件返回参数，在传入了 format 属性时，value 则是格式化之后的值，否则就是 picker-item 的值FeaturesTabbar： 新增支持 icon 插槽Button： 新增...github.com/Tencent/tdesign-mobile-vue/releases/tag/0.8.6解决方案及周边TDesign Starter CLI 发布 0.2.3Bug Fixes修复自定义创建项目时图标加载的问题详情见...Starter 发布 0.1.4Features增加面包屑导航搜索框样式优化Layout组件命名语义化图表主题功能优化详情见：https://github.com/Tencent/tdesign-react-starter

    1.1K20

    React19 为我们带来了什么？

    使用 use 时，它接受传入一个 Promise 作为参数，会在 Promise 状态非 fullfilled 时阻塞组件 Render。...通常我们会使用 use Api 配合 Suspense 来一起使用，从而处理在数据获取时的页面加载态展示。...Actions 在 React 中核心的理念便是数据改变驱动视图渲染。 通常当用户提交表单更改某些值时，我们的应用程序将发出对应 API 请求，等待结果返回后根据响应内容去处理交互行为。...Error handling： Action 提供错误处理的值，因此我们可以在请求失败时显示错误边界，并自动将 Optimistic updates 恢复为其原始值。...通常在某个 input 输入完毕后，我们需要将 input 的值输入提交到后台服务中保存后再来更新页面 UI ，这种情况就可以使用 useOptimistic 来进行我所谓的“乐观更新”。

    24710

    2023 React 生态系统，以及我的一些吐槽……

    首先，服务器状态具有以下特点： 以你无法控制或拥有的远程位置持久存储 需要使用异步 API 进行获取和更新 暗示共享所有权，并且可能被其他人在你不知情的情况下更改 如果不小心处理，可能会在应用程序中变得...这在实现当今应用程序中使用的其他行为时变得更加复杂： 跟踪加载状态以显示 UI 加载指示器 避免对相同数据进行重复请求 进行乐观更新以提高 UI 响应速度 随着用户与 UI 进行交互，管理缓存的生命周期...Formik 是一个小型库，可以帮助您解决以下三个最令人讨厌的问题： 将值放入和取出表单状态 验证和错误消息 处理表单提交 通过将所有这些放在一个地方，Formik 可以让事情井然有序，使得测试、重构和理解您的表单变得轻而易举...不是因为我认为 React 在实现表单方面采取了错误的方法，而是因为在使用 React 时，表单是最具挑战性的问题。 许多框架都有自己的解决方案来处理表单。AngularJS 在这方面做得非常好。...对于普通的表单来说，它表现得很好，但在多步骤表单方面有些困难。虽然后来他们添加了“向导”表单，但使用起来并不太直观。 此外，Formik 依赖于表单元素，并且在控制 Redux 存储时存在一些挑战。

    78530

    Node+Puppeteer+可视化配置海报业务尝试

    现有海报方案里，都是通过page.goto方式进行网络页面加载，需要前端每个海报都创建页面，测试，部署，发布；流程复杂且无法解放前端。响应速度则特别依赖页面资源加载和网络状态。...这种简单特定业务即可使用可视化方式进行生成，这里我选用了React作为UI框架，通过自定义json scheam作为数据存储格式，动态渲染页面。在设计可视化中内在核心是：组件编排和表单编排。...组件编排 在设计组件编排时考虑到可视化在其他项目都有可用性，这里使用了插件化的方式为组件赋能，及组件本身只有渲染能力，如果需要给组件扩展能力，及使用高阶组件的方式进行注入，这里布局统一使用了绝对布局，使用...> ) } 表单编排 在可视化系统中，表单主要是通过组件属性生成对应的表单，有些属性我们并不想用户编辑，所以在设计表单时，我们同样使用自定义json schema的方式定义表单并通过插件注册的方式进行注入系统...关于痛点2 上述可视化编辑器已经完成了页面生成，现在通过goto方式直接访问，但是发现本身系统使用react，react包本身不小且如果基础组件越来越多则打包的资源便会增加，而且现代开发方式，需要通过js

    1.4K20

    使用 Riot，ES6 和 Webpack 构建应用

    标签构造主体的逻辑脱离上下文： 这使得标签文件无法被编辑器/IDE 的代码检测以及其他的工具处理 涉及 this 时，脱离上下文意味着代码不是合法的 JavaScript 并且在编辑器/IDE 中会报错...Riot和React的基本区别 最重要的区别在于 UI 标记模板是如何声明的： 在 React 中 UI 标记模板是在你的 JavaScript 源码中生成的（使用 JSX 语言的扩展）。...对于像上面这样较小的普通用例来说，两种方式其实没太多选择余地，但是在编写更大的高度动态化的 UI 组件时，React 的 JavaScript 方式的威力和灵活性就明显更优越了。...还可以查看下面两处内容： 使用/>关闭HTML5标签可能造成无法预料的结果 放错位置的表单结束标签 绑定标签事件处理器到 this 上 绑定标签事件处理器到 this 上，以确保这些处理器总是和标签文本一起清除...未来蓝图 Riot（类似 React）是一个 UI 库而不是一个框架。

    96820

    ​年终盘点: 复盘20+基于React的开源管理后台&插件

    （布尔值、数字、富文本等）的大型组件库。...7.React Hook Form React Hook Form是一个高性能、灵活、易拓展、易于使用的表单校验库，用于React Web＆Native的表单验证。...，也可适用于学习React时进行参考或练手的项目。...为应用的每一个状态设计简洁的视图，当数据变动时 React能高效更新并渲染合适的组件。 组件化: 构建管理自身状态的封装组件，然后对其组合以构成复杂的 UI。...，首屏加载超快 扩展了antd写了许多实用的UI，通过一个配置即可生成，后台CRUD三件套（数据表格，搜索框，新增编辑表单） 按业务模块划分的目录结构，开发独力功能时无需分心其它模块，做到最小耦合 19

    1.7K10

    TDesign 更新周报（2022年7月第1周）

    closeOnEscKeydown 默认值导致的无法设置的问题Drawer: 修复 header 默认值为 undefined 的问题Dialog: 修复 dialog 滚动失效问题Form: 修复...默认值导致的无法设置的问题DatePicker: 修复日期选择器在表单禁用后还能点击的问题Tree: getRightData 方法兼容 value 的 aliasForm: 修复不传 form.onSubmit...treeselect: 默认lazy异步加载开启，与api保持一致DatePicker: 修复 presetsPlacement 不生效的问题colorpicker: 修复最近使用颜色的功能Table:...: 修复 disabled 依然可删除问题colorPicker: 修复在 ColorTrigger 输入色值时，自动format输入值并回填的问题table: 兼容树状表格未传入 tree 属性的场景详情见...）版本 UI 保持一致支持按需加载详情见：https://tdesign.tencent.com/mobile-react/getting-started解决方案TDesign Vue Starter

    2.3K10

    《微信小程序七日谈》- 第三天：玩转Page组件的生命周期

    今天这篇文章简单记录一下在使用小程序Page组件时对于其生命周期的一些使用心得。...使用过React的开发者肯定会对用on做为钩子函数命名前缀非常不舒服，React使用will、did、should等一系列有时态语义的词汇命名钩子函数，令开发者一眼就能分辨钩子函数对应的生命周期阶段。...浏览器的用户行为事件机制，以及我们所熟悉的jQuery中，使用on作为捕获/监听事件的API命名，这种情形下可以把on理解为当某件事情发生时做某些行为，这也是大部分前端工程师对on语义的理解。...同样，笔者参与的项目也有上述的业务逻辑，在用户离开页面之前提示用户的编辑状态。...小程序提供一些内置的UI组件，但是逻辑组件只有app和page两种，并且两者并不是严格的父子组件关系。所以，page组件并不需要类似React中的props数据，所有的数据都属于自身。

    1.3K100

    2020最新前端面试题_2020年前端面试题

    vue项目中使用ajax时需要axios插件 下载方式cnpm install axios --save 12、v-model的使用 v-model用于表单的双向绑定，可以实时修改数据 13、请说出vue.cli...可以，比如 v-on=“onclick,onbure” 16、$nextTick的使用 在data()中的修改后，页面中无法获取data修改后的数据， 使用$nextTick时，当data中的数据修改后...disabled设置的文本框无法获取焦点 3、如果表单的字段是disabled，则该字段不会发送（表单传值）和序列化 浏览器 1、浏览器中输入url到网页显示，整个过程发生了什么 域名解析 发起tcp...它提高了应用的性能 可以方便地在客户端和服务器端使用 由于 JSX，代码的可读性很好 React 很容易与 Meteor，Angular 等其他框架集成 使用 React，编写 UI 测试用例变得非常容易...组件是 React 应用 UI 的构建块。这些组件将整个 UI 分成小的独立并可重用的部分。 每个组件彼此独立，而不会影响 UI 的其余部分 7、 React 中 render()的目的?

    6.7K10

    《精通reactvue组件设计》之5分钟教你实现一个极具创意的加载(Loading)组件

    首先我们设计的不是后台管理系统专用的加载动画,而是作为一个C端产品的功用型加载动画.我们都知道加载动画的作用是:在用户等待网页时能看到有用的信息,比如网站介绍,引导, 公司信息等,缓解用户焦虑....策略型加载动画往往用在C端产品或者系统中,用来为用户提供更多的引导信息, 当用户首次访问系统或者网站时, 由于某种主动型引导(网站在加载时或者切换页面时故意给用户看到的加载信息)或者环境原因(网络,带宽限制导致的加载过慢...这块也涉及到一个知识点, 因为加载文本其实主要是用来修饰元素的,并没有太多的语义化场景, 所以我们会放在::after伪对象的content里, 但是一般content是在css里写的,那么如何实现动态文本呢...使用Skeleton组件 我们可以通过如下方式使用它: 加载中..." /> 笔者已经将实现过的组件发布到npm上了,大家如果感兴趣可以直接用npm安装后使用...json编辑器组件(react版) 笔者已经将组件库发布到npm上了, 大家可以通过npm安装的方式体验组件.

    99220

    阿里高性能表单解决方案——Formily

    字段与字段关联时，如何保证不影响表单性能？ 表单数据管理复杂 表单值转换逻辑复杂(前后端格式不一致) 同步默认值与异步默认值合并逻辑复杂 跨表单数据通信，如何让性能不随字段数量增加而变差？...生命周期 借助 Mobx 和路径系统，我们已经打造了一个较为完备的表单方案了，但是这样抽象了之后，我们的方案就像个黑盒，外界无法感知到方案内部状态流转过程，想要在某个过程阶段内实现一些逻辑则无法实现，所以...react-jsonschema-form的解法是，数据是数据，UI 是 UI，这样的好处是，各个协议都是非常纯净的协议，但是却带来了较大的维护成本和理解成本，用户要开发一个表单，需要不断的在两种协议心智上做切换...所以，我们的表单完全可以使用协议来描述了，不管是再复杂的布局，还是很复杂的联动，都能做到可配置。...内核层是 UI 无关的，它保证了用户管理的逻辑和状态是不耦合任何一个框架，这样有几个好处： 逻辑与 UI 框架解耦，未来做框架级别的迁移，业务代码无需大范围重构 学习成本统一，如果用户使用了@formily

    4K20

    总结100+前端优质库,让你成为前端百事通

    相关库 UI 库 Ant design 用于研发企业级中后台产品的 UI 组件库 Ant design mobile 基于 Ant Design 设计体系的 React UI 移动端组件库 MaterialUI...世界最受欢迎的基于质感设计的 React UI 库 toolbox 一套使用 CSS 模块功能实现 Google 的 Material Design 规范的 React 组件 Fabric UI 微软开源的...动画/动效果 Halogen 使用 React 的加载动画集合 react-loading 一款基于 react 的轻量级加载动画库, 支持按需导入, 开箱即用 react-move 漂亮的，数据驱动的...powerNice 文档编辑器 mitu 图片编辑器 h5-dooring H5 页面编辑器 GGEditor 可视化图编辑器 react-codemirror2 代码编辑器 jsoneditor json...编辑器 地图相关 google-map-react 谷歌地图插件 react-amap 高德地图插件 react-baidu-map 百度地图 优秀国产项目集合 可视化编辑器 h5-dooring

    3.2K20
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券