📝 Framework7教程
109篇技术文档📅 最后修改于: 2020-10-25 02:44:54 🧑 作者: Mango
Framework7是用于移动HTML的免费开放源代码框架。它用于为iOS和Android设备开发混合移动应用程序或Web应用程序。本教程将教您基本的Framework7，并带您了解一些详细的概念。听众本教程已为初学者准备，以帮助他们了解基本的Framework7。完成本教程后，您将发现自己在Framework7中具有中等水平的专业知识，从这里您可以进入更高的层次。先决条件Framework7基于...
📅 最后修改于: 2020-10-25 02:45:10 🧑 作者: Mango
Framework7是用于移动HTML的免费开放源代码框架。它用于为iOS和Android设备开发混合移动应用程序或Web应用程序。Framework7于2014年推出。最新版本1.4.2于2016年2月发布，由MIT许可。为什么要使用Framework7？为iOS和Android开发应用程序更加容易。Framework7的学习曲线非常简单。它具有许多预样式化的小部件/组件。它具有内置的帮助程序库...
📅 最后修改于: 2020-10-25 02:45:45 🧑 作者: Mango
在本章中，我们将讨论如何安装和设置Framework7。您可以通过两种方式下载Framework7-从Framework7 Github存储库下载您可以使用Bower安装Framework7，如下所示-成功安装Framework7之后，您需要按照以下给定步骤在应用程序中使用Framework7-步骤1-您需要使用以下命令安装gulp-cli来构建Framework7的开发版本和发行版。cli代表G...
📅 最后修改于: 2020-10-25 02:46:00 🧑 作者: Mango
描述Framework7为您的应用程序提供了不同类型的布局。它支持三种类型的导航栏/工具栏布局-S.NoLayout Types & Description1Static LayoutThe static layout is most often used layout-type and includes navbar and toolbar, which can be a scrollable ...
📅 最后修改于: 2020-10-25 02:46:15 🧑 作者: Mango
描述在本章中，让我们研究一下navbar。通常将其放置在包含页面标题和导航元素的屏幕顶部。Navbar由三个部分组成，每个部分都可以包含任何HTML内容，但是建议您按照以下给出的方式使用它们-左-旨在放回链接图标或单个文本链接。居中-用于显示页面标题或标签链接。右-此部分与左部分相似。下表详细演示了navbar的用法-S.NoNavbar Types & Description1Basic nav...
📅 最后修改于: 2020-10-25 02:46:37 🧑 作者: Mango
描述通过使用屏幕底部的导航元素，工具栏可轻松访问其他页面。您可以通过表中指定的两种方式使用工具栏-S.NoToolbar types & Description1Hide ToolbarYou can hide the toolbar automatically when you load the pages by using theno-toolbarclass to loaded page.2...
📅 最后修改于: 2020-10-25 02:47:39 🧑 作者: Mango
描述Framework 7允许使用searchbar类搜索元素。搜索栏参数S.NoParameters & DescriptionTypeDefault1searchListIt searches the CSS selector or HTML element of the list.string or HTML Element–2searchInYou can search the list ...
📅 最后修改于: 2020-10-25 02:48:00 🧑 作者: Mango
描述iOS 7+允许您构建全屏应用程序，当状态栏与应用程序重叠时可能会产生问题。 Framework7通过检测您的应用程序是否处于全屏模式来解决此问题。如果您的应用程序处于全屏模式，那么Framework7将自动将with-statusbar-overlay类添加到<html>（如果应用程序不是处于全屏模式，则将其删除），并且您需要在<body>中添加statusbar-overlay类。如以下代...
📅 最后修改于: 2020-10-25 02:48:15 🧑 作者: Mango
描述侧面板移动到屏幕的左侧或右侧以显示内容。 Framework7允许您在应用程序中最多包含2个面板（右侧面板和左侧面板）。您需要在<body>的开头添加面板，然后通过应用以下列出的类来选择打开效果-panel-reveal-这将使整个应用程序的内容移出。panel-cover-这将使面板覆盖在应用程序的内容上。例如，以下代码显示了如何使用上述类-下表显示了Framework77支持的面板类型-S...
📅 最后修改于: 2020-10-25 02:48:36 🧑 作者: Mango
描述内容块可用于添加其他格式的额外内容。例以下示例演示了在Framework7中使用内容块-输出让我们执行以下步骤，看看上面给出的代码如何工作-将上述指定的HTML代码另存为server根文件夹中的content_block.html文件。以http：//localhost/content_block.html格式打开此HTML文件，并显示如下所示的输出。该代码为文本内容添加了额外的格式和所需的间...
📅 最后修改于: 2020-10-25 02:49:12 🧑 作者: Mango
描述Framework7提供了不同类型的网格类型来根据用户需要放置内容。布局网格提供了不同类型的列大小，如下表所述-S.NoClassTable ClassWidth1col-5tablet-55%2col-10tablet-1010%3col-15tablet-1515%4col-20tablet-2020%5col-25tablet-2525%6col-30tablet-3030%7col-3...
📅 最后修改于: 2020-10-25 02:49:25 🧑 作者: Mango
描述Framework7提供了各种类型的叠加层，以使应用程序顺畅地工作。下表列出了一些Framework7叠加层-S.NoOverlay Type & Description1ModalModal is a small window that display the content from separate sources without leaving the parent window.2P...
📅 最后修改于: 2020-10-25 02:49:43 🧑 作者: Mango
描述Framework7中的预加载器由可缩放矢量图形（SVG）制成，并由CSS制成动画，从而使其易于调整大小。预载器有两种颜色-默认为浅色背景另一个是深色背景您可以在HTML中使用preloader类，如下所示-例以下示例演示了在Framework7中预加载器的使用-输出让我们执行以下步骤，看看上面给出的代码如何工作-将上述给定的HTML代码另存为服务器根文件夹中的preloader.html文件...
📅 最后修改于: 2020-10-25 02:50:25 🧑 作者: Mango
描述进度条可用于向用户显示资产的负载或任务的进度。您可以使用progressbar类指定进度条。如果用户不知道请求的加载过程将持续多长时间，则可以使用progressbar-infinite类。进度条JavaScript API进度条可以与JavaScript API一起使用，以通过以下方法指定show，hide和progress属性-S.NoMethodsDescription & Parame...
📅 最后修改于: 2020-10-25 02:50:39 🧑 作者: Mango
描述列表视图是功能强大的UI组件，可在多行的可滚动列表中显示数据。 Framework7提供了不同类型的列表视图以与您的应用程序一起使用。下表列出了一些Framework7列表视图–S.NoTypes & Description1List ViewList views are powerful user interface components, which present data in a s...