https://blog.qife122.com/tags/%E7%BB%84%E4%BB%B6%E5%BC%80%E5%8F%91/ Recent content in 组件开发 on 办公AI智能小助手 Hugo zh-cn qife Wed, 31 Dec 2025 23:59:25 +0800 https://blog.qife122.com/p/%E6%9E%84%E5%BB%BA%E8%AE%BE%E8%AE%A1%E7%B3%BB%E7%BB%9F%E7%BB%84%E4%BB%B6%E7%9A%84%E9%AB%98%E7%BA%A7%E6%A0%87%E6%B3%A8%E6%8C%87%E5%8D%97%E4%BB%8E%E9%A2%84%E8%AE%BE%E6%A0%87%E6%B3%A8%E5%88%B0figma-code-connect/ Wed, 31 Dec 2025 23:59:25 +0800 https://blog.qife122.com/p/%E6%9E%84%E5%BB%BA%E8%AE%BE%E8%AE%A1%E7%B3%BB%E7%BB%9F%E7%BB%84%E4%BB%B6%E7%9A%84%E9%AB%98%E7%BA%A7%E6%A0%87%E6%B3%A8%E6%8C%87%E5%8D%97%E4%BB%8E%E9%A2%84%E8%AE%BE%E6%A0%87%E6%B3%A8%E5%88%B0figma-code-connect/ <p>在本文中，我们将探讨两种将重要可访问性细节从设计端传递给开发端的高级方法：一种是创建自定义的“预设标注”，另一种是利用 Figma 的 Code Connect 功能。这两种方法旨在确保设计意图，尤其是非视觉的、关键的可访问性属性，不会在设计系统组件的流转过程中丢失。</p> https://blog.qife122.com/p/%E8%AE%BE%E8%AE%A1%E7%B3%BB%E7%BB%9F%E6%A0%87%E6%B3%A8%E5%AE%9E%E8%B7%B5%E5%A6%82%E4%BD%95%E8%AE%A9%E7%BB%84%E4%BB%B6%E6%97%A0%E9%9A%9C%E7%A2%8D%E8%AE%BF%E9%97%AE%E4%B8%8D%E5%86%8D%E8%A2%AB%E5%BF%BD%E8%A7%86/ Wed, 22 Oct 2025 06:58:14 +0800 https://blog.qife122.com/p/%E8%AE%BE%E8%AE%A1%E7%B3%BB%E7%BB%9F%E6%A0%87%E6%B3%A8%E5%AE%9E%E8%B7%B5%E5%A6%82%E4%BD%95%E8%AE%A9%E7%BB%84%E4%BB%B6%E6%97%A0%E9%9A%9C%E7%A2%8D%E8%AE%BF%E9%97%AE%E4%B8%8D%E5%86%8D%E8%A2%AB%E5%BF%BD%E8%A7%86/ <p>当谈到设计系统时，每个组织在无障碍访问旅程中处于不同的阶段。有些组织在使其设计系统可访问方面付出了大量努力，而其他组织在达到这一目标之前还有很长的路要走。为了帮助这一旅程，许多组织依赖无障碍标注来确保设计准备构建时没有访问障碍。</p> https://blog.qife122.com/p/%E6%9E%84%E5%BB%BA%E5%8F%AF%E5%A4%8D%E7%94%A8%E7%9A%84react%E5%BC%80%E5%85%B3%E5%88%87%E6%8D%A2%E7%BB%84%E4%BB%B6%E4%BB%8E%E9%9B%B6%E5%88%B0%E4%B8%80/ Sat, 13 Sep 2025 15:09:13 +0800 https://blog.qife122.com/p/%E6%9E%84%E5%BB%BA%E5%8F%AF%E5%A4%8D%E7%94%A8%E7%9A%84react%E5%BC%80%E5%85%B3%E5%88%87%E6%8D%A2%E7%BB%84%E4%BB%B6%E4%BB%8E%E9%9B%B6%E5%88%B0%E4%B8%80/ <h1 id="构建可复用的react开关切换组件">构建可复用的React开关切换组件</h1> <p>在本文中，我们将创建一个受iOS启发的React开关切换组件。这是一个小巧、独立的组件，可以在未来的项目中复用。同时，我们还将构建一个简单的演示React应用，使用我们自定义的开关切换组件。</p> https://blog.qife122.com/p/%E6%9E%84%E5%BB%BA%E5%8F%AF%E5%A4%8D%E7%94%A8%E7%9A%84react%E5%88%87%E6%8D%A2%E5%BC%80%E5%85%B3%E7%BB%84%E4%BB%B6/ Sat, 13 Sep 2025 14:18:11 +0800 https://blog.qife122.com/p/%E6%9E%84%E5%BB%BA%E5%8F%AF%E5%A4%8D%E7%94%A8%E7%9A%84react%E5%88%87%E6%8D%A2%E5%BC%80%E5%85%B3%E7%BB%84%E4%BB%B6/ <h1 id="构建可复用的react切换开关组件">构建可复用的React切换开关组件</h1> <p>在本文中，我们将创建一个受iOS启发的React切换组件。这是一个小型、独立的组件，可以在未来的项目中重复使用。同时，我们还将构建一个简单的演示React应用，使用我们的自定义切换开关组件。</p> https://blog.qife122.com/p/%E6%9E%84%E5%BB%BA%E5%8F%AF%E5%A4%8D%E7%94%A8%E7%9A%84react%E5%BC%80%E5%85%B3%E5%88%87%E6%8D%A2%E7%BB%84%E4%BB%B6%E4%BB%8E%E9%9B%B6%E5%88%B0%E4%B8%80%E5%AE%8C%E6%95%B4%E6%8C%87%E5%8D%97/ Fri, 05 Sep 2025 05:29:38 +0800 https://blog.qife122.com/p/%E6%9E%84%E5%BB%BA%E5%8F%AF%E5%A4%8D%E7%94%A8%E7%9A%84react%E5%BC%80%E5%85%B3%E5%88%87%E6%8D%A2%E7%BB%84%E4%BB%B6%E4%BB%8E%E9%9B%B6%E5%88%B0%E4%B8%80%E5%AE%8C%E6%95%B4%E6%8C%87%E5%8D%97/ <h1 id="构建可复用的react开关切换组件">构建可复用的React开关切换组件</h1> <h2 id="关键要点">关键要点</h2> <ul> <li>使用Create React App快速搭建新React应用，构建可复用的iOS风格开关切换组件</li> <li>利用SCSS为开关切换组件设计样式，确保视觉吸引力并符合现代设计标准</li> <li>将开关切换实现为React受控组件，使用props动态管理其状态和行为</li> <li>通过键盘可访问性和适当的ARIA属性增强可访问性</li> <li>使用PropTypes进行组件内类型检查，确保传递必需数据且类型正确</li> <li>通过SCSS变量和媒体查询探索高级主题和响应式设计，使开关切换在不同设备上自适应</li> </ul> <h2 id="第1步---创建react应用">第1步 - 创建React应用</h2> <p>使用Create React App快速启动开关切换React组件：</p>