可折叠块允许您隐藏或显示内容 - 对于存储部分信息很有用。如需创建一个可折叠的内容块,需要为容器添加 data-role="collapsible" 属性。...在容器(div)内,添加一个标题元素(H1-H6),后跟您想要进行扩展的 HTML 标记,默认情况下,内容是被折叠起来的。... 我是可折叠的内容。... 我是嵌套的可折叠块中被展开的内容。 panel ? jQuery Mobile中的面板会在屏幕的左侧向右侧划出。...--推动显示--> 可以使用按钮来关闭面板:仅需要在面板的div中添加 data-rel="close" 属性。
,点击后也可以展示 多个折叠 只需向元素添加data-toggle=”collapse”和 adata-target即可自动分配对可折叠元素的控制。...该data-target属性接受一个 CSS 选择器来应用折叠。确保将类添加collapse到可折叠元素。如果您希望它默认打开,请添加附加类in。 实现效果 通过 JavaScript 手动启用 $('.collapse').collapse() .collapse(options) 将您的内容激活为可折叠元素...在可折叠元素实际被隐藏之前(即在事件发生之前)返回给调用者。hidden.bs.collapse Bootstrap 的折叠类公开了一些用于挂钩折叠功能的事件。...事件类型 描述 show.bs.collapse show调用实例方法时立即触发此事件。 shown.bs.collapse 当折叠元素对用户可见时触发此事件(将等待 CSS 转换完成)。
布尔 定义是否显示可折叠定义按钮 true minimizable 布尔 定义是否显示最小化按钮 true maximizable 布尔 定义是否显示最大化按钮 true closable 布尔 定义是否显示关闭按钮...true 属性 名字 类型 描述 默认值 title 字符串 在面板头部显示的标题文本 null iconCls 字符串 一个CSS类来显示在面板中的16...false border 布尔 定义面板的边框 true doSize 布尔 当设置为true,面板载创建的时候将被调整和重新布局 true collapsible 布尔 定义是否显示可折叠定义按钮 false...回调函数 refresh none 当设置了href值时,刷新面板来加载远程数据 resize options 设置面板的大小和布局,这些选项包含以下的属性: width: 新面板的宽度 height:...新面板的高度 left: 新面板的左侧位置 top: 新面板的顶部位置 move options 移动面板到一个新的位置,这些选项包含以下属性: left: 新面板的左侧位置 top: 新面板的顶部位置
近日,在2019MWC大会上华为发布一款5G商用折叠手机,让很多人高呼“被惊艳到了”。 ---- 提到可折叠的手机,大家对这个概念可能并不陌生。在几年前,微软,索尼都推出过类似的工程机或概念机。...是PPT产品还是划时代的升级 从折叠概念产机的产生到如今的商用量产,这个期间折叠手机走了大概有将近10年的时间,而影响折叠手机的量产的原因无疑是来自技术方面的挑战: 第一,从硬件上,柔性屏幕面板要做到可折叠...第二,屏幕折叠的铰链技术,直接影响着手机的美观和应用体验,柔派手机在发布时就不能很好的贴合在一起,从侧面看,弯曲部分会有很大的缝隙,而此次华为和三星发布的折叠手机,则有了更好的贴合技术。...可见,行业内的众多大佬并不认为折叠手机技术已经成熟,而目前折叠手机多以超级限量的形式发售,也被认为主要原因是折叠屏的良品率太低,根本不能进行大规模生产。...折叠手机的应用场景有何变化 除了技术原因导致折叠手机迟迟不能量产,折叠手机的应用场景一直也是困扰手机厂商发布量产折叠手机的一个重要原因。
折叠组件,然后我根据提供接口属性,我大概实现出来类似下面组件的形态,然后面试官问动画除了height形式,还有其他它方式么,因为height的变化会触发重排,另外折叠面板panel如果是大量数据,打开的时候会卡顿...在这种模式下,只有一个面板可以被展开。当一个新的面板被展开时,之前展开的面板将被关闭。 activeKey:当前展开面板的key。如果我们处于手风琴模式,这将是一个字符串或null。...defaultActiveKey:默认展开面板的key。它的类型与activeKey相同。 onChange:它在面板切换时被触发。它接收一个参数,表示当前展开面板的key。...这个子组件将作为Collapse组件的一部分,用于表示一个可折叠的面板。 arrow:这是一个自定义的箭头。如果这是一个React节点,antd-mobile将自动为你添加旋转动画效果。...key:panel的唯一标识符。 onClick:它在面板的标题栏被点击时被触发。它接收一个参数,表示点击事件。 title:panel标题栏的内容。
1.2 参数 1.2.1 容器参数 参数名称 参数类型 描述 默认值 width 数字 可折叠标签的宽度。 auto height 数字 可折叠标签的高度。...auto fit 布尔 是否使可折叠标签自动缩放以适应父容器的大小,当为true时width和height参数将失效。 false border 布尔 是否显示边界线。...true 1.2.2 面板参数 可折叠标签面板继承自面板(panel),许多属性定义在标签里,下面的属性就是如此: 参数名称 参数类型 描述 默认值 selected 布尔 设置可折叠标签中默认展开的标签页...false Window也重写了Panel里的一些属性 属性名 类型 描述 默认值 title 字符串 窗口的标题文本 New Window collapsible 布尔 定义是否显示可折叠定义按钮...false border 布尔 定义面板的边框 true doSize 布尔 当设置为true,面板载创建的时候将被调整和重新布局 true collapsible 布尔 定义是否显示可折叠定义按钮 false
此外,属性uniqueItems设置为的枚举数组设置true现在仅显示剩余选项而不是下拉列表中的所有选项。...对笔记本布局进行了一些改进: 当单元格折叠时,单元格输入的第一行现在被渲染。 当窗口的宽度不足以呈现所有主要操作时,笔记本编辑器工具栏上的操作将移动到溢出菜单 ( ... ) 中。...如果你在侧面打开编辑器并稍后关闭该编辑器组,只是为了再次打开编辑器到侧面,则不会恢复视图状态,因为您正在打开一个新的编辑器组。...终端拖放 将终端从一个窗口的选项卡列表或编辑器区域拖放到另一个窗口的选项卡列表、编辑器区域或面板中。...---- 你手动开启一下 ---- 我们很高兴地宣布无标题文件的自动语言检测的初始预览版,它使用机器学习来检测您正在编码的语言并自动设置无标题文件的语言模式。
如今随着可折叠屏幕使用量的增加,围绕折叠设备进行的开发方式更加多样,将应用延伸至手机之外的机会也就随之增加了。...数据显示,因为更大的屏幕空间,可折叠设备的多任务处理量增加了 7 倍,开发者有必要平衡布局的简单性与灵活性以优化应用,例如开发者在使用新的窗口尺寸类别和视口断点时,如果要优化断点的布局,可以将其视为 3...在导航优化方面,以往在对直板手机竖屏模式的部分导航组件进行优化时,导航组件几乎始终停靠在屏幕底部,在可折叠设备或更大的设备中情况就不同了,用户实际上大多数时间是用双手持握设备,这就意味着导航组件最好是放置在设备边缘和侧面...(Expanded height) 和展开宽度 (Expanded width),断点分别是 900dp+ 和 840dp+,更多屏幕尺寸相关的大小可以参考下面的表: 与此同时,当考虑到可拆卸设备时...;在折叠的桌面模式下,用户看起来像是在操作一部笔记本电脑,点触屏幕,手机可能会出现不稳晃动;这种模式下摄像头位置也可能会挡住后面的屏幕内容,虽然内容会被渲染,但因为被挡住而不可见。
展开您的视频播放体验 可折叠设备向用户们提供了使用他们的手机做更多事情的可能性,包括*桌面模式**等创新,也就是当手机平放时,铰链处于水平位置,同时折叠屏幕处于部分打开的状态。...一个很好的例子是 Google Duo 团队 对其应用进行的优化,从而使该应用在平板电脑和可折叠设备上均能运行良好。...△ Duo 应用在优化前后的对比 在这篇文章中,您会了解到一个简单而又高效的方式来使您的应用在可折叠设备上运行时适配布局。...这是一个简单的媒体播放器案例,它会自动调节尺寸以避免让折叠处出现在画面中间,并且调整播放控制组件的位置,从屏幕完全展开时嵌入画面中,变为当屏幕部分折叠时显示为单独的面板。...由于 ReactiveGuide 是水平的,此属性指的是参考线到父布局底部的距离。 让您的应用感知屏幕折叠 现在进入最重要的部分: 如何获知您的手机何时进入了桌面模式,并获取到折叠处的位置呢?
,但从媒体反馈来看,减少了折叠屏的可见折痕,比左右折叠设计耐用程度更高,这让折叠屏收获了商业化潜力; 二是成本持续下探,Galaxy Z Flip售价1380美元,让习惯了动辄数万、数十万的“概念折叠屏...2011年,折叠初展翼。 当年,三星在CES电子展上展示了自家第一个折叠屏设备的原型。这款机器采用了AMOLED屏幕,显示屏可以对折,并且在10万次折叠/展开后,铰链处的亮度仅下降了6%。...此后,该技术不断在三星旗舰手机上得到推广,从Galaxy Note Edge到Galaxy S10,可侧面显示的柔性屏幕,就成为三星扩大手机交互视野的独门武器。 2016,强行折叠。...2019年2月,华为、OPPO、小米几乎都相继发布了自己的折叠屏手机。微软也随后推出了首款“折叠屏”手机Suface Duo。苹果也被曝出或将在未来推出一款搭载可折叠屏幕的iPad。...而根据DSCC的预测,三星7.3英寸的可折叠柔性OLED面板2019年的成本接近180美金,但2022年的成本将降至90美金左右,降幅约为50%。按此趋势,打开消费市场显然只是时间早晚。
1月4日消息,三星显示器在CES 2023展会上展示了新一代的OLED 面板“Flex Hybrid”,将可折叠和可拉伸滑动功能结合到了一起,未来或可以应用在智能手机、平板电脑和笔记本电脑上。...据悉,Flex Hybrid首次将可折叠和可拉伸技术结合在了一起,展开左侧屏幕后可以从右侧拉伸出另一个额外屏幕。...当屏幕折叠时尺寸为8英寸,展开时可以达到10.5英寸,当屏幕进一步拉伸后可扩大至12.4 英寸,用户可以分别在4:3 或16:10 屏幕比例中欣赏电影和影片。...▲三星显示器 Flex Hybrid 结合可折叠和可拉伸技术 据了解,三星显示器开发的Flex Hybrid混合面板是针对下一代设备,可同时成为智能手机、平板电脑和笔记本电脑。...,而三星显示器也有机会再度引领面板外型的创新。
一、Expander控件详解WPF中的Expander控件是一个可折叠的控件,可以用来显示或隐藏其子控件。当用户单击Expander控件的标题时,其子控件将会打开或关闭。...Expander控件的属性和事件如下:属性:Header:Expander控件的标题IsExpanded:控制子控件的打开或关闭状态事件:Expanded:当子控件打开时发生Collapsed:当子控件关闭时发生下面是一个...Collapsed:当Expander折叠时发生的事件。Expanded:当Expander展开时发生的事件。以上是一些常用的属性,还有其他的属性可以参考MSDN文档。...例如,展开一个选项卡的Expander控件时,可以关闭其他选项卡的Expander控件,以便有更多的空间去显示当前选项卡的内容。窗口内的面板控制:Expander控件可以用来控制窗口中的面板。...例如,可以设置一个Expander控件来切换窗口左侧的面板。当Expander控件折叠时,面板将关闭;折叠后,面板将呈现。
目前,可折叠手机并没有统一标准,各个手机厂商提供的可折叠技术方案并不一致。所谓的可折叠手机既可以是屏幕可折叠,也可以是元器件可折叠。...在实现生活中,虽然智能手机目前并没有发展到如此成熟的地步,但可折叠手机俨然已经成为了各大手机生产厂商下一步的“抢夺高地”。...华为则早在此前就被外媒爆料称其将于今年11月推出全球首款使用OLED面板的可折叠手机。近日,有知情人士透露华为计划首批量产可折叠手机数量可能限制在2万-3万台左右。...因此,对于手机厂家而言,如果他们无法达到这些要求,即便生产出可折叠手机,也只是看上去很美而已。产品并不能切实的落地到实际的应用中去,也因此无法真正的将可折叠手机变成手机革新的又一里程碑。...总结 自从1973年名为马丁·库帕的男子发明了像两块砖头一样大的无线电话之后,手机也经历了从“板砖”大小到适合手持尺寸、直板、滑盖、翻盖变成大屏、有按键到无按键、功能机变成智能手机等一系列转变。
如何适配不同的屏幕尺寸并保障良好的体验,一直以来都是开发者的一大难题。尤其随着可折叠设备等新兴产品的涌现,适配工作也愈发迫切。...Android 开发者峰会 期间我们更新了一些内容,以帮助开发者为可折叠设备等更多其他类型的设备做好准备。...△ 主页横幅示例 对于支持面板而言,从 LinearLayout 到 ConstraintLayout 的任何布局控件,都可以当作容器来定位面板。...如下图所示,我们考虑一件事,当过渡到小屏幕尺寸时,面板上的内容应该放在哪里。...适配可折叠设备 可折叠设备不仅配备了更大的屏幕,它们还可以根据设备的折叠方式和用户的使用方式调整设备的方向/姿势。 目前有三种常见的设备形态: 折叠、未折叠和桌面模式 (悬停)。
- data-parent 属性把折叠面板(accordion)的 id 添加到要展开或折叠的组件的链接上。...- href 或 data-toggle="collapse" 添加到您想要展开或折叠的组件的链接上,Href设置折叠元素的id锚 - data-target="" 可以创建不带 accordion 标记的简单的可折叠组件...(collapsible); parent selector 默认值:false data-parent 如果提供了一个选择器,当可折叠项目显示时,指定父元素下的所有可折叠的元素将被关闭。...这与传统的折叠面板(accordion)的行为类似 - 这依赖于 accordion-group 类 toggle boolean 默认值:true data-toggle 切换调用可折叠元素。...shown.bs.collapse 当折叠元素对用户可见时触发该事件(将等待 CSS 过渡效果完成)。 hide.bs.collapse 当调用 hide 实例方法时立即触发该事件。
如今三星已推出四款折叠屏手机,据相关媒体报道,三星正在考虑研发一款带有滑出式键盘的折叠屏手机,目前已经申请了专利。专业人士在Galaxy Z Fold2的基础上专门制作了相关渲染图。...目前,这仅是一种外观专利,其对于功能描述非常少,仅透露了一部分隐藏在机身下方或内部的键盘。 从相关渲染图中可以看出,该手机由双铰链和三个屏幕组成,折叠合上后有一个屏幕始终是可见的,可以做副屏。...同时我们可以看到,三星的这款可折叠手机同时采用了,向内和向外两种折叠方式,也使其更多了不少使用的灵活性。...不过值得注意的是,虽然配备键盘,但仍然有可能以触控感应的方式,所以实际体验的灵活性能否达到期待还很难说。...如今,只有华为和三星推出折叠手机,小米想做可折叠智能手机的想法已经诞生了很久,但这几年的进展似乎并没有预想的那么顺利,并且折叠手机的价格都偏高,只有摆脱小规模量产,成本居高不下的局面,实现大规模量产,并将成本降低到大多数人都可以接受的地步
为什么要支持大屏设备 △ 可折叠设备的用法有很多,这里只是其中一部分 在过去的一年里,设备制造商们发布了大批令人兴奋的全新可折叠设备和平板设备。...2020 年,平板电脑设备的销售量增长了 16%。分析师预计,到 2023 年市面上将有超过 4 亿台 Android 平板电脑。另外,可折叠设备也正在重新定义高端设备。...用户可以并排比较两个产品,在写文档时参考笔记,或者在规划事件时保持日历可见 输入模式 由于许多人使用大屏幕来提高生产力,平板电脑应该支持基本的键盘、鼠标和手写笔输入。...NavRail 垂直导航栏 在功能上等同于底部导航,并在大屏幕上提供了更符合人体工程学的导航体验。当您扩展用户界面到大屏幕上时,使用 NavRail 会更利于手指点击,因为用户通常会握住大屏幕的两边。...它还会提供这些特性如何影响应用的信息,方便您创建最佳体验。比如,当用户一边观看视频一边把设备折叠成桌面模式时,您可以对可折叠设备的状态变化做出响应。
简介:浏览器 浏览助手 目前只是一个 个人工具的雏形, 后续会做成用户制 主要三个功能: 1.自动记录浏览记录(跨浏览器,跨设备) 2.手动收藏当前页面 3.手动收藏喜欢的图片 功能截图:...1.基础展示: 加载插件后 进入页面会出现在右下角(可折叠) 可打开主面板,以及收藏和取消收藏当前的页面 图片 图片 2.历史记录: 可快捷搜索 根据网址和网址标题(前端模糊搜索) 图片 图片 3....收藏记录: 可快捷搜索 根据网址和网址标题(前端模糊搜索) 图片 4.收藏图片: 可放大查看图片 图片 图片 如何收藏图片呢?...这个很简单 随便到一个网站 如果喜欢某一张图片 就鼠标浮上去 图片的右上角 会显示一个爱心 点击即可收藏了 图片 图片 上面就是插件的基础功能介绍 可能看了之后有小伙伴会发问了 用浏览器原生的历史记录...然而我想说的是: 这个插件的优势就是 1.使用数据库存储数据,并非浏览器缓存, 所以可以轻松的做到, 同个设备 不同个浏览器(我的谷歌浏览器和双核浏览器)浏览、收藏记录数据共享 不同的设备,相同或不同的浏览器
#面板 .panel-default #默认面板样式 .panel-heading #很简单地向面板添加标题容器 .panel-title #- 来添加预定义样式的标题 .panel-body...- href 或 data-toggle="collapse" 添加到您想要展开或折叠的组件的链接上,Href设置折叠元素的id锚 - data-target="" 可以创建不带 accordion 标记的简单的可折叠组件...(collapsible); parent selector 默认值:false data-parent 如果提供了一个选择器,当可折叠项目显示时,指定父元素下的所有可折叠的元素将被关闭。...这与传统的折叠面板(accordion)的行为类似 - 这依赖于 accordion-group 类 toggle boolean 默认值:true data-toggle 切换调用可折叠元素。...shown.bs.collapse 当折叠元素对用户可见时触发该事件(将等待 CSS 过渡效果完成)。 hide.bs.collapse 当调用 hide 实例方法时立即触发该事件。
这意味着在平板电脑、可折叠设备和 Chrome OS 设备上,有超过 2.5 亿台大屏幕设备运行着 Android 系统,而关于可折叠设备的使用数量也在不断增长,同比增长超过 250%,因此,"大屏"...其中,较小型代表了竖屏模式下手机的典型模式,中等型代表了大部分平板电脑和更大的可折叠设备的尺寸,展开型则代表了平板电脑或更大的可折叠设备,或是桌面设备在横屏模式下的显示情况。...这样,当我选择一项任务并且应用从双窗口变成单窗口时,该项目将位于导航栈的顶部,并是可见的状态。...△ 可折叠手机上布局转换 为了正确处理如何将列表和详情窗口折叠成单窗口层次结构,当在较小的屏幕上时,我们需要知道用户最后与哪个窗口交互,为此,我们实现了一个简单的自定义修饰符来记录最后一次交互,并以此决定...但这次更改是针对屏幕尺寸做的决策,我们是不是可以让单个组件自身根据页面而拥有不同尺寸呢?例如我们有一张卡片,当在列表中因为空间的限制只展示标题和副标题,而有更多空间时,则调整为显示图像。
领取专属 10元无门槛券
手把手带您无忧上云