📝 Framework7教程

109篇技术文档
  Framework7-手风琴

📅  最后修改于: 2020-10-25 02:51:27        🧑  作者: Mango

描述手风琴是一个图形控制元素,显示为堆叠的项目列表。可以扩展或拉伸每个手风琴以显示与该手风琴相关的内容。可折叠布局当使用单个单独的可折叠元素时,您需要省略可折叠列表包装元素。以下是可折叠布局的结构-以下类在Framework7中用于手风琴-S.NoClasses & Description1accordion-listIt is an optional class, which contains ...

  Framework7-卡

📅  最后修改于: 2020-10-25 02:51:40        🧑  作者: Mango

描述卡片包含与单个主题相关的有组织的信息,例如照片,链接和文本。下表显示了Framework7卡类型-S.NoTypes & Description1Card HTML LayoutThe basic card HTML layout uses card classes to arrange its items.2List View With CardsYou can usecardsas lis...

  Framework7-芯片

📅  最后修改于: 2020-10-25 02:52:11        🧑  作者: Mango

描述筹码是一小块实体,可以包含照片,小标题字符串和简短信息。芯片HTML布局以下代码显示了Framework7中使用的基本芯片HTML布局-上面的HTML布局包含许多类,如下所列-芯片-这是芯片容器。chip-media-这是芯片媒体元素,可以包含图像,头像或图标。它是可选的。card-label-这是芯片文本标签。card-delete-这是芯片的可选删除图标链接。例以下示例表示实体,例如相册,...

  Framework7-按钮

📅  最后修改于: 2020-10-25 02:52:22        🧑  作者: Mango

描述通过向链接或输入按钮添加适当的类,Framework7提供了一组准备使用的按钮。S.NoTypes & Description1iOS Theme ButtonsFramework7 provides many iOS theme buttons, which can be used by applying appropriate classes.2Material Theme Buttons...

  Framework7-操作按钮

📅  最后修改于: 2020-10-25 02:52:35        🧑  作者: Mango

描述Framework7提供了一个浮动动作按钮来执行提升的动作。它们在用户界面上显示为浮动的带圆圈图标。它具有包含变形,发射和转移锚点的运动行为。浮动动作按钮仅在Material主题中受支持。下表列出了Framework7中使用的操作按钮类型-S.NoTypes & Description1Floating Action Button LayoutIt is very simple; you ju...

  Framework7-表单

📅  最后修改于: 2020-10-25 02:52:49        🧑  作者: Mango

描述表单用于与用户进行交互,并使用文本字段,复选框,单选按钮等从Web用户收集数据。Framework7提供了不同类型的表单元素,可以顺利地与应用程序配合使用,如下表所示-S.NoOverlay Type & Description1Form ElementsForm elements are used to make good looking form layouts.2Checkboxes a...

  Framework7-标签

📅  最后修改于: 2020-10-25 02:53:10        🧑  作者: Mango

描述制表符是按逻辑分组的内容集,使我们可以在它们之间快速翻页并像手风琴一样节省空间。标签版面以下代码定义选项卡的布局-哪里-<div class =“ tabs”>-它是所有选项卡的必需包装。如果我们错过了,制表符将根本无法使用。<div class =“ tab”>−它是一个选项卡,应具有唯一的id属性。<div class =“ tab active”>-它是一个活动标签,它使用其他活动类使标...

  Framework7-滑动滑块

📅  最后修改于: 2020-10-25 02:53:29        🧑  作者: Mango

描述滑动滑块是功能最强大且最先进的触摸滑块,它具有许多功能,它属于Framework7。以下HTML布局显示了滑动滑块-以下类别用于滑动滑块-滑动容器-它是主滑块容器的必需元素,用于幻灯片和分页。Swiper-wrapper-这是其他包装滑片的必需元素。swiper-slide-它是单个slide元素,并且可以在其中包含任何HTML。滑动分页-分页项目符号是可选的,并且它们是自动创建的。您可以使用...

  Framework7-图片浏览器

📅  最后修改于: 2020-10-25 02:53:43        🧑  作者: Mango

描述照片浏览器类似于iOS照片浏览器组件,用于显示可缩放和平移的图像组。要在图像之间滑动,照片浏览器使用Swiper Slider。下表显示了framework7中使用的照片浏览器类型-S.NoPhoto browser types & Description1Create Photo Browser InstancePhoto browser can be created and initial...

  Framework7-自动完成

📅  最后修改于: 2020-10-25 02:55:40        🧑  作者: Mango

描述自动完成是Framework7的移动友好型和触摸优化的组件,可以作为下拉列表或独立方式使用。您可以使用JavaScript方法创建和初始化自动完成实例-需要参数的对象用于初始化自动完成实例。自动完成参数下表列出了Framework7中可用的自动完成参数-S.NoParameters & DescriptionTypeDefault1openInIt defines how to open an...

  Framework7-选择器

📅  最后修改于: 2020-10-25 02:56:28        🧑  作者: Mango

描述Picker类似于iOS本机Picker,它是一个功能强大的组件,可让您从列表中选择任何值,还可以用于创建自定义叠加层Picker。您可以将Picker用作嵌入式组件或叠加层。叠加层选择器将在平板电脑(iPad)上自动转换为Popover。使用以下App的方法,您可以创建和初始化JavaScript方法-参数是必需的对象,用于初始化选取器实例,它是必需的方法。选择器参数下表指定了选择器中的可用...

  Framework7-日历

📅  最后修改于: 2020-10-25 02:56:42        🧑  作者: Mango

描述日历组件使您可以轻松处理日期,并且可以用作嵌入式或叠加组件。重叠式日历将自动转换为平板电脑上的弹出框。只能使用JavaScript创建和初始化日历。您需要使用相关的App的方法,如下所示-myApp.calendar(parameters)-此方法返回初始化的日历实例。它接受一个对象作为参数。下表显示了Framework7中的日历用法-S.NoCalendar Usage & Descript...

  Framework7-刷新

📅  最后修改于: 2020-10-25 02:57:15        🧑  作者: Mango

描述它是一个特殊的组件,用于通过拉动刷新(重新加载)页面内容。以下代码显示了如何刷新页面内容-以下类用于刷新-page-content-它具有一个附加的pull-to-refresh-content类,并且它需要启用pull刷新。pull-to-refresh-layer-这是一个隐藏层,用于拉动以刷新视觉元素,它只是一个预加载器和一个箭头。data-ptr-distance =“ 55”-这是一...

  Framework7-无限滚动

📅  最后修改于: 2020-10-25 02:57:55        🧑  作者: Mango

描述当页面接近底部时,无限滚动使您可以加载其他内容并执行所需的操作。以下HTML布局显示了无限滚动-上面的布局包含以下类-page-content infinite-scroll-用于无限滚动容器。data-distance-此属性允许您配置距页面底部的距离(以像素为单位)以触发无限滚动事件,其默认值为50像素。如果要在页面顶部使用无限滚动,则需要在“页面内容”中添加其他“无限滚动顶部”类-无限滚...

  Framework7-消息

📅  最后修改于: 2020-10-25 02:59:03        🧑  作者: Mango

描述消息是Framework7的组件,它使应用程序中的注释和消息传递系统可视化。讯息版面framework7具有以下消息布局结构-布局在不同区域包含以下类-消息页面布局下表显示了消息页面布局的类别及其说明。S.NoClasses & Description1messages-contentIt is a required additional class added to “page-conten...