文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

sheral——一个方便定制及扩展的UI组件库

虽然UI部分从效果上看与其他的UI库没有什么特殊区别，都是移动端重构需要面对的一些常见的页面效果。但是表面的相似，并不代表本质的类同，只有深入代码才能发现不一样的惊喜。...sheral整体设计思想主要分为基础功能部分和UI组件部分，其中基础功能部分由sandal来承载，而UI组件就是基于sandal提供的基础能力实现的UI（一如jquery和插件的关系，sandal就如jquery...样式的控制，一般来说只会使用一种卡片样式，所以要设置开关控制样式输出 布局的控制，毕竟不是每个人都需要兼容低端安卓机，所以flex和float可以自由切换，也方便以后直接升级 具体源码实现如下： @charset...众多的组件数量及丰富的组件形态，并加上克制的思想，以及方便定制和扩展的能力 组件不针对特定的业务，都是移动端基础常见效果，更通用 所有的这些优点最终导向一个愿景：方便，快捷，高效！...整体了解了sheral的设计思想及优点之后，下面介绍下如何使用sheral。 如何使用sheral 因为篇幅有限，这里仅以实现ios的设置列表为例（从飞行模式到运营商），如下图： ?

66810

sheral——一个方便定制及扩展的UI组件库

虽然UI部分从效果上看与其他的UI库没有什么特殊区别，都是移动端重构需要面对的一些常见的页面效果。但是表面的相似，并不代表本质的类同，只有深入代码才能发现不一样的惊喜。...sheral整体设计思想主要分为基础功能部分和UI组件部分，其中基础功能部分由sandal来承载，而UI组件就是基于sandal提供的基础能力实现的UI（一如jquery和插件的关系，sandal就如jquery...样式的控制，一般来说只会使用一种卡片样式，所以要设置开关控制样式输出 布局的控制，毕竟不是每个人都需要兼容低端安卓机，所以flex和float可以自由切换，也方便以后直接升级 具体源码实现如下： @charset...众多的组件数量及丰富的组件形态，并加上克制的思想，以及方便定制和扩展的能力 组件不针对特定的业务，都是移动端基础常见效果，更通用 所有的这些优点最终导向一个愿景：方便，快捷，高效！...整体了解了sheral的设计思想及优点之后，下面介绍下如何使用sheral。 如何使用sheral 因为篇幅有限，这里仅以实现ios的设置列表为例（从飞行模式到运营商），如下图： ?

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

    Flutter + OpenHarmony 设计系统实战：构建统一、美观、无障碍的跨端 UI 体系

    手表、车机、智慧屏上使用你的应用。...5.1 动效原则 时长：进入动画 ≤ 300ms，退出 ≤ 200ms 缓动：使用 Curves.easeOut（自然减速） 克制：非必要不加动效 5.2 Flutter 实现 // 页面切换淡入 PageRouteBuilder...所有图标按钮需 Semantics(label: "搜索") 焦点顺序 逻辑清晰（车机/TV 必须支持） 6.2 Flutter 无障碍实践 // 为图标按钮添加语义 Semantics( label...（如 @oh-design/tokens@1.2.0） 组件库独立发布，业务项目按需升级 八、验收标准与 Checklist ✅ 所有颜色来自 OhColors ✅ 所有间距使用 OhSpacing...，而非重复造轮子 开发者高效交付，无需纠结像素对齐 用户在任何设备上都感到熟悉与安心 行动建议： 今天就定义 OhColors 和 OhSpacing 明天封装 OhButton 组件 下周完成首页基于新系统的重构

    13510

    鸿蒙特效教程10-卡片展开收起效果

    本教程将详细讲解如何在HarmonyOS中实现卡片的展开/收起效果，通过这个实例，你将掌握ArkUI中状态管理和动画实现的核心技巧。...interface定义卡片数据结构 创建卡片数据数组和对应的展开状态数组 使用ForEach循环创建多个卡片 修改toggleCard函数接受索引参数，只切换特定卡片的状态 步骤6：添加滚动容器和全局控制按钮...在这个示例中： 对于单个卡片，我们使用isExpanded布尔值跟踪其展开状态 对于多个卡片，我们使用cardsExpanded数组，数组中的每个元素对应一个卡片的状态 更新数组类型的状态时，需要创建一个新数组而不是直接修改原数组...卡片高度跳变：为卡片内容设置固定高度，或者使用更复杂的布局计算动态高度。 多卡片状态管理复杂：使用数组管理多个状态，并记得创建数组副本而不是直接修改原数组。...关键技术点包括： 使用@State管理组件状态 使用.animation()属性和animateTo()函数实现动画 使用条件渲染动态显示内容 实现数据驱动的UI创建 为多个卡片独立管理状态 这些技术不仅适用于卡片展开

    99800

    Android 手表应用开发设计规范 【译】

    继续向下滑动会切换到静音模式，以关闭震动提醒和亮屏通知。 •设置界面：可通过卡片激活或者通过某些设备上的实体按键进入。用户可在此处关闭或重启设备、调节屏幕亮度、切换飞行模式以及查询设备信息。...所有这些信息是否都是必须的？能否分几张卡片显示？设计卡片信息的时候切记卡片是可以分多页展示的。 为余光设计 　　用户持续使用应用的时间越久，就会越和现实世界脱节。...作为手表 UI 的一部分，提供可交互、带有省电模式、并考虑如何与系统UI元素互动的表盘设计是至关重要的。 创新理念 ? 设计 Android 手表表盘是一项以清晰可视化时间为目标的考验。...圆形指针表盘设计应采用较小的提示卡片。如果能够确保在提示卡片最高状态下仍可显示时间信息，则可以将提示卡片状态设置为自适应高度。设置自适应高度提示卡片的好处是，能够显示更多的通知信息。...例如：你也许最终决定只显示一项近期安排，而不是将整月的日程安排都显示出来。通过一系列做减法的过程，你的设计最终应该能够达到数据高度整合的效果。

    5K70

    UI界面中阴影绘制完全攻略！

    首先，咱们谈谈阴影使用的场景。 ? 我们使用阴影来强调特定的组件，创建深度以在屏幕中来创造一个特别的世界，并给出某些组件的特定状态。但是，我们在哪里，以及如何明智地使用它们呢？...默认状态和悬停状态按钮 场景02.卡片阴影 卡片是UI中重要且可操作的组件。要使它们具有一定的深度，并将其视觉上放置在最上层，此时我们可以使用阴影。记住！要让它们漂浮起来。 ?...带有阴影的提示图形 场景04.活动项目（如开关） 当涉及到活动状态（例如切换或选定的列表项）时，一种不错的做法是为它们提供视觉层次结构，例如颜色，当然还有阴影。另外，使它们简单而柔软。 ?...如下图，左边的阴影平滑自然，右边的阴影则过于锐利和突兀。 ? 25%的Alpha值和90%的alpha值 阴影Y值的偏移量 Y轴决定了阴影的偏移量。如果将Y轴设置为较高的值，那它会离卡片更远。...比如下方的蓝色按钮，你可以选择更深一点的蓝色来作为阴影颜色，然后将蓝色加上透明度。而不是使用纯黑色作为阴影颜色。 ?

    3.2K20

    动手实践：美化 Jenkins 报告插件的用户界面

    新的用户界面插件 新的 Jenkins 插件提供了以下 UI 组件: jquery3-api-plugin:为 Jenkins 插件提供 jQuery 3。...Git Forensics 插件 本教程中的元素将全部在新的 Forensics API 插件中使用（实际上，该插件不是新的，它是 Warnings Next Generation 插件的依赖项）。...您可以下载插件内容，并详细了解如何在实践中使用这些新组件。或者，您可以更改此插件，只是为了了解如何对这些新组件进行参数设置。...如果要在较大的设备上打开同一页面，则会并排显示两个饼图，并且轮播会被隐藏。 卡片 当将插件信息显示为一个块时，通常会显示纯文本元素。通常，这将导致某些无关紧要的网页。...如今，有几个功能强大的基于 JS 的图表库可供使用，它们在客户端完成相同的工作（实际上甚至做得更好）。这样做的好处是可以在每个客户端上自定义这些图表，而不会影响服务器性能。

    8K10

    前端组件整理

    待办事宜日历 full calendar 支持脱放的方式来改变待办事宜的时间 时间选取组件 jQuery ui datepicker 经典，不是很好看 pickadate 轻量级，手机友好的，漂亮...该组件依赖Twitter Bootstrap, Moment.js和jQuery. 自定义滚动条 perfect scrollbar 轻量级的滚动条。外观与mac上chrome的滚动条一样。...动画效果 jQuery.Marquee 跑马灯效果 quickflip 卡片翻转效果 卡片翻转效果2 兼容性可以。写的比较简单：1，只支持x方向翻转 2,类名都是规定好的 3，只能被调用一次。...jquery的动画不支持颜色值的变化。改库提供了这个支持。...transit 对元素进行css的变换 视觉差插件 scrollorama 比较简单 superscrollorama 能做的效果更多，但要用第三方Tween的库，使用起来比较复杂。

    14.2K40

    前端常用插件

    : 用于生成 Github 信息卡片的库 github-cards: 用于生成 Github 信息卡片的库 money.js: 轻量级货币转换库，web 和 node 皆可用 accounting.js...的支持 jquery.scrollTo: 在页面上以一个元素为起始以动画的方式移动(ScrollTo)到另一个元素， 支持回退等 jScrollPane: 自定义的滚动条，让所有浏览器都显示一样的滚动条...，可以让我们根据不同的设备来为其定制响应的 Javascript 和 CSS jquery-qrcode: jQuery 插件，用来生成二维码 Wookmark-jQuery: jQuery 的一个插件...Sortable: 现代浏览器上用于实现元素拖拽排序的功能，支持 Meteor, AngularJS, React，不依赖 jQuery Swiper: 用于实现浏览器上的滑动切换效果，支持硬件加速 matter-js...版的 Firefox jquery-mobile: jQuery 团队开发的用于辅助手机端 web app 开发的库，基于 HTML5 mobile-angular-ui: 基于angularjs和bootstarp

    6K61

    App之可点击元素的设计

    仅仅使用文字作为可点击元素存在，而不使用图标作为可点击元素，这样使得这款阅读古诗词的app别有一番风味，其产品的气质体现得很到位。 其实，app的所有构成内容都可以是可点击元素。...三、卡片式，点击卡片任意位置打开详页，可以使app逻辑简单明了。 同时，卡片UI可以做得比较丰富，图片、标题、简介、按钮等元素都尽情表达。如 微信的消息列表： ? QQ的消息列表 ?...扫一扫，基本都使用个符号了。 ---- ? 齿轮，一般表示“设置” ---- ? 爱心，表示“喜欢，收藏，关注，赞” ---- ?...有些用的不是常见的语义化图标，所以加上文字还是有必要的。比如 ? 还有些意思比较宽泛的，比如下载，加上文字后更具体： ? 有些是比较多余的，因为图标已经能完全、准确的表达含义了。 ? ?...四、图标应尽量使用语义化高的，适当使用文字作为提示。 ---- 转载请联系本号 自在园版权所有

    3.2K70

    Bulma 现代CSS框架入门指南

    这里有几个compelling理由：纯CSS实现 - 不依赖jQuery或其他JavaScript库模块化设计 - 只需导入你需要的组件基于Flexbox - 更现代的布局方式易于自定义 - 通过Sass..., sans-serif;// 修改断点$tablet: 769px;$desktop: 960px + 40px;```这样就能创建一个完全符合你品牌风格的网站，而不是看起来"像是用了框架"的网站！...版权所有 © 2023. ```这个例子展示了如何使用Bulma的各种组件来创建一个专业的产品页面。注意观察布局如何自然地从移动视图过渡到桌面视图，这全都归功于Bulma的响应式设计！...: 0; text-transform: uppercase; letter-spacing: 2px; // 更多自定义样式...}最好的网站往往是框架和自定义样式的结合，而不是100%依赖框架...它的学习曲线低，文档清晰，让你能够快速上手并构建漂亮的响应式网站。最后的建议：框架只是工具，真正的魔法来自于你如何使用它。不要害怕尝试、修改和扩展Bulma来满足你的需求！

    36710

    用 AR 眼镜打造你的办公助手，使用 Unity 开发到 Rokid 部署全记录

    如果无图，设置Camera.main的clearFlags为SolidColor，并指定fallbackColor。...左上角识别卡片，小而醒目。右下角计时条带。全屏遮罩+居中卡片用于消息弹窗。因为所有元素都是运行时创建的，我可以在代码里精确控制它们的位置和大小。...Invoke();}使用Time.realtimeSinceStartup而不是Time.time是因为后者会受到Time.timeScale的影响（比如游戏暂停），而计时器应该不受影响。...六、运行效果与使用体验在Rokid眼镜上启动应用后，几秒钟内，右上角就会出现半透明的卡片，显示“产品评审会2小时30分后”和“今日3项待办”。...当有新邮件时，屏幕中央会弹出一个半透明的弹窗，显示邮件标题和摘要，用户轻点触摸板上的“关闭”按钮即可让它消失。整个体验非常流畅，所有卡片都是悬浮在眼前的，完全不影响现实视线。

    14310

    干货 | 携程鸿蒙应用开发实践

    其中，FA有UI界面，提供与用户交互的能力；而PA无UI界面，提供后台运行任务的能力以及统一的数据访问抽象。FA在进行用户交互时所需的后台数据访问也需要由对应的PA提供支撑。...基于FA/PA开发的应用，能够实现特定的业务功能，支持跨设备调度与分发，为用户提供一致、高效的应用体验。 我们今天主要从应用层开发方面展开。...4种尺寸，分别是微卡片（1*2）、小卡片（2*2）、中卡片（2*4）、大卡片（4*4），同一个应用还支持多种不同类型的服务卡片，不同尺寸与类型可以通过卡片管理界面进行切换和选择。...申请前，首先需要通过DevEco Studio来生成密钥（存储在格式为.p12的密钥库文件中）和证书请求文件（.csr文件），同时也可以使用命令行工具的方式来生成。...将HarmonyOS应用打包成APP后，通过AppGallery Connect将HarmonyOS应用分发到不同的设备上。可以根据发布HarmonyOS应用指导将APP上架到华为应用市场。

    1.9K20

    微商城订单模块重构实践

    作者：晓旭 & 茄子 & 时文涛 部门：有赞电商移动组 背景 订单是电商服务的核心场景之一，微商城客户端的订单模块已经服务了商家多年，功能和体验上和 PC 端有一定的差距。...在这种设计的方案中，后续订单卡片新增或修改某些状态的 UI，只需要变更卡片样式即可达到 app 内所有订单页面生效。...客户端的列表模块代码历史较长，从产品经理、设计师到开发，经手人都比较多，难以保证新的设计可以覆盖到所有的使用场景 订单列表模块，从设计上已经拆分为正向订单和逆向订单（维权、退款订单）两个类别，对于新的组件...在新的订单卡片中，为了将订单卡片样式设置更为灵活，我们将新订单的订单卡片进行了纵向拆分，将订单卡片一共拆分为如下几个大部分： 顶栏区域 客户信息区域 配送状态区域 商品信息区域（包含折叠区域） 费用展示区域...如此，一个订单卡片可以根据自身的数据，构造出不同的区域，而每一个区域均有独立的 view model 和 view 一一对应。

    2.2K30

    Vue3二维码生成器实现方案

    」提供预览区域、下载按钮区域，以及文档说明和相关工具组件功能脚本一：public/js/qr-code-generator-ui.js，只处理：类型卡片的选中态切换（.qr-type-card）不同类型表单块的显隐...三、UI交互层：类型切换与表单显隐public/js/qr-code-generator-ui.js是一个自执行函数，仅做UI层交互：setActiveType(root,type)：遍历所有.qr-type-card...text类型给每张卡片绑定click事件，切换类型init()：通过document.querySelectorAll('[data-qr-generator]')找到所有实例并绑定监听DOMContentLoaded...如果必填字段为空（如邮箱地址、WiFiSSID、vCard姓名），函数会返回空字符串，后续生成逻辑会弹出「请填写必填字段」的通知而不是生成无效二维码。...，用浅色填充；再按像素遍历，凡是足够「黑」的像素，就在path中追加Mx,yh1v1h-1z这种1×1小方块；最终得到一个单path的SVG，方便下载和后续放大使用。

    10510

    13.HarmonyOS NEXT流式卡片列表实现指南：Flex多行布局详解

    本教程将详细讲解如何使用HarmonyOS的ArkUI框架中的Flex组件实现一个灵活的流式卡片列表，重点关注多行布局与对齐策略的应用。...： 1. direction: FlexDirection.Row 设置Flex容器的主轴方向为水平方向，子元素将沿水平方向排列。...FlexAlign值 主轴对齐效果 应用场景 Start 左对齐 常规列表、表单 Center 居中对齐 居中展示、强调重点 End 右对齐 特定UI元素如操作按钮 SpaceBetween 两端对齐，...动态渲染卡片 使用ForEach组件实现数据驱动的UI渲染： ForEach(this.cardData, (item:string) => { Row() { Text(item...容器样式设置 为整个Flex容器设置适当的样式，确保流式布局正常工作： .width('100%') .padding({ left: 16, top: 12, right: 16 }) .backgroundColor

    71310

    借助 CodeBuddy 打造我的图标预览平台 —— IconWiz 开发实录

    这个想法越想越有趣，于是我向 CodeBuddy 发出请求： “我要用 Vue3 + Vite 构建一个图标预览平台 IconWiz，支持搜索图标、显示 SVG、复制代码、多图标库切换、卡片式布局和图标预览设置...CodeBuddy 自动使用 npm create vite@latest 初始化了一个 Vue3 + TypeScript 项目，并安装好了所有基础依赖，连 Tailwind CSS 的配置文件都一起设置好了...UI 细节：卡片交互 + 动态高亮 在 UI 设计上，CodeBuddy 完美实现了我提出的“卡片式宫格布局”要求。每个图标都被包裹在柔和圆角的卡片中，悬停时还有轻微放大 + 高亮边框，非常现代。...它设计了一个图标库注册与加载模块，将每个图标都抽象成标准数据结构，再统一处理，这样搜索、展示逻辑就可以复用，切换图标库时也能保持 UI 一致，非常优雅。...CodeBuddy 不仅实现了我所有提出的功能，还在细节上做得非常到位，自动处理配置、集成库、优化交互体验，几乎可以说是“主动式编程”。

    26310

    响应式卡片抽奖插件 CardShow

    当然，博主写这篇文章不是为了炫耀这个 Demo，而是交流 jQuery 插件的编写以及这一项目中遇到的各种问题。...以下是我在写插件时遇到的问题以及解决的问题，大概包括 jQuery 插件编写、modernizr 使用、css3 动画、transitionend 事件、洗牌算法、相邻不重复随机数、获取 transform...相邻不重复随机数 解决这个问题多少让我有一些成就感，虽然还不是很完美。这个问题简单说就是：写一个函数，使其可以持续输出随机数，而相邻位置的随机数不相同。...// 产生相邻不重复的随机数，n 为随机数个数 // 定义比较变量，能否将其封装在函数内？...众所周知，transform2d 是 3X3 矩阵，而 transform3d 是 4X4 矩阵，如果使用 transform3d 属性而没有给出第三个值，在火狐及谷歌浏览器会输出 3X3 矩阵，而在

    3.1K60
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

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

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

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

      领券