搜索文件 /

结构 内容

betway东盟体育app离子框架提供了几种不同的布局,可用于构建应用程序。从单页面布局,拆分窗格视图和模块。

可用的最简单的布局包括一个 标题 内容 。应用程序中的大多数页面通常都有这两个,但是不需要标题才能使用内容。


                <
               离子应用程序
               >
             
                <
               离子标题
               >
             
                <
               离子工具栏
               >
             
                <
               离子标题
               >
             标题
                
               离子标题
               >
             
                
               离子工具栏
               >
             
                
               离子标题
               >
             
                <
               离子内容
              
               班级
                =
                
               离子填充
                
               >
             
                <
               H1.
               >
             主要内容
                
               H1.
               >
             
                
               离子内容
               >
             
                
               离子应用程序
               >
复制 复制

正如您所看到的,标题中的工具栏会出现在内容上方。有时应用程序需要在内容下方有一个工具栏,这是使用页脚时的工具栏。


                <
               离子应用程序
               >
             
                <
               离子内容
              
               班级
                =
                
               离子填充
                
               >
             
                <
               H1.
               >
             主要内容
                
               H1.
               >
             
                
               离子内容
               >
             
                <
               离子页脚
               >
             
                <
               离子工具栏
               >
             
                <
               离子标题
               >
             页脚
                
               离子标题
               >
             
                
               离子工具栏
               >
             
                
               离子页脚
               >
             
                
               离子应用程序
               >
复制 复制

这些也可以在一个页面上组合以在上面具有工具栏 低于内容。


                <
               离子应用程序
               >
             
                <
               离子标题
               >
             
                <
               离子工具栏
               >
             
                <
               离子标题
               >
             标题
                
               离子标题
               >
             
                
               离子工具栏
               >
             
                
               离子标题
               >
             
                <
               离子内容
              
               班级
                =
                
               离子填充
                
               >
             
                <
               H1.
               >
             主要内容
                
               H1.
               >
             
                
               离子内容
               >
             
                <
               离子页脚
               >
             
                <
               离子工具栏
               >
             
                <
               离子标题
               >
             页脚
                
               离子标题
               >
             
                
               离子工具栏
               >
             
                
               离子页脚
               >
             
                
               离子应用程序
               >
复制 复制

生活例子

您可以在Angular中查看此设置的Live示例 这里 和反应 这里

标签布局

由水平组成的布局 标签 可用于让用户在内容视图之间快速更改。每个选项卡都可以使用静态内容或导航堆栈 离子路由器出口 要么 离子导航


                <
               离子应用程序
               >
             
                <
               离子标签
               >
             
                <
               离子标签
              
               标签
                =
                
               
                
               >
             
                <
               H1.
               >
             家庭内容
                
               H1.
               >
             
                
               离子标签
               >
             
                <
               离子标签
              
               标签
                =
                
               设置
                
               >
             
                <
               H1.
               >
             设置内容
                
               H1.
               >
             
                
               离子标签
               >
             
                <
               离子标签杆
              
               投币口
                =
                
               底部
                
               >
             
                <
               离子标签按钮
              
               标签
                =
                
               
                
               >
             
                <
               离子标签
               >
             
                
               离子标签
               >
             
                <
               离子图标
              
               姓名
                =
                
               
                
               >
                
               离子图标
               >
             
                
               离子标签按钮
               >
             
                <
               离子标签按钮
              
               标签
                =
                
               设置
                
               >
             
                <
               离子标签
               >
             设置
                
               离子标签
               >
             
                <
               离子图标
              
               姓名
                =
                
               设置
                
               >
                
               离子图标
               >
             
                
               离子标签按钮
               >
             
                
               离子标签杆
               >
             
                
               离子标签
               >
             
                
               离子应用程序
               >
复制 复制

生活例子

您可以在Angular中查看此设置的Live示例 这里 和反应 这里

移动应用中的标准布局包括切换侧面的能力 菜单 通过单击按钮或从侧面刷新它。侧菜单通常用于导航,但它们可以包含任何内容。


                <
               离子应用程序
               >
             
                <
               离子菜单
              
               内容ID
                =
                
               主要内容
                
               >
             
                <
               离子标题
               >
             
                <
               离子工具栏
              
               颜色
                =
                
               基本的
                
               >
             
                <
               离子标题
               >
             菜单
                
               离子标题
               >
             
                
               离子工具栏
               >
             
                
               离子标题
               >
             
                <
               离子内容
               >
             
                <
               离子清单
               >
             
                <
               离子列表标题
               >
             导航
                
               离子列表标题
               >
             
                <
               离子菜单 - 切换
              
               自动隐藏
                =
                
               错误的
                
               >
             
                <
               离子项目
              
               按钮
               >
             
                <
               离子图标
              
               投币口
                =
                
               开始
                
              
               姓名
                =
                '
               
                '
               >
                
               离子图标
               >
             
                <
               离子标签
               >
             
                
               离子标签
               >
             
                
               离子项目
               >
             
                
               离子菜单 - 切换
               >
             
                
               离子清单
               >
             
                
               离子内容
               >
             
                
               离子菜单
               >
             
                <
               离子页面
              
               班级
                =
                
               离子页面
                
              
               ID
                =
                
               主要内容
                
               >
             
                <
               离子标题
               >
             
                <
               离子工具栏
               >
             
                <
               离子按钮
              
               投币口
                =
                
               开始
                
               >
             
                <
               离子菜单 - 切换
               >
             
                <
               离子按钮
               >
             
                <
               离子图标
              
               投币口
                =
                
               仅限图标
                
              
               姓名
                =
                
               菜单
                
               >
                
               离子图标
               >
             
                
               离子按钮
               >
             
                
               离子菜单 - 切换
               >
             
                
               离子按钮
               >
             
                <
               离子标题
               >
             标题
                
               离子标题
               >
             
                
               离子工具栏
               >
             
                
               离子标题
               >
             
                <
               离子内容
              
               班级
                =
                
               离子填充
                
               >
             
                <
               H1.
               >
             主要内容
                
               H1.
               >
             
                <
               P.
               >
             单击左上角的图标切换菜单。
                
               P.
               >
             
                
               离子内容
               >
             
                
               离子页面
               >
             
                
               离子应用程序
               >
             
                <
               离子菜单控制器
               >
                
               离子菜单控制器
               >
复制 复制

生活例子

您可以在Angular中查看此设置的Live示例 这里 和反应 这里

拆分窗格布局

一种 拆分窗格 布局具有更复杂的结构,因为它可以组合以前的布局。当视口高于指定断点时,它允许显示多个视图。如果设备的屏幕尺寸低于一定大小,则将隐藏拆分窗格视图。

默认情况下,筛选窗格视图将显示屏幕大于时 768px. , 或者 m 断点,但这可以通过设置来定制以使用不同的断点 什么时候 财产。下面是拆分窗格包含可见的菜单的示例 sm 屏幕和向上,或者视口大于 576px. 。通过水平调整浏览器的大小使应用程序小于此,拆分窗格视图将消失。


                <
               离子应用程序
               >
             
                <
               离子分裂窗格
              
               什么时候
                =
                
               sm
                
              
               内容ID
                =
                
               主要内容
                
               >
             
                <
               离子菜单
              
               内容ID
                =
                
               主要内容
                
               >
             
                <
               离子标题
               >
             
                <
               离子工具栏
              
               颜色
                =
                
               基本的
                
               >
             
                <
               离子标题
               >
             菜单
                
               离子标题
               >
             
                
               离子工具栏
               >
             
                
               离子标题
               >
             
                <
               离子内容
               >
             
                <
               离子清单
               >
             
                <
               离子列表标题
               >
             导航
                
               离子列表标题
               >
             
                <
               离子菜单 - 切换
              
               自动隐藏
                =
                
               错误的
                
               >
             
                <
               离子项目
              
               按钮
               >
             
                <
               离子图标
              
               投币口
                =
                
               开始
                
              
               姓名
                =
                '
               
                '
               >
                
               离子图标
               >
             
                <
               离子标签
               >
             
                
               离子标签
               >
             
                
               离子项目
               >
             
                
               离子菜单 - 切换
               >
             
                
               离子清单
               >
             
                
               离子内容
               >
             
                
               离子菜单
               >
             
                <
               div
              
               班级
                =
                
               离子页面
                
              
               ID
                =
                
               主要内容
                
               >
             
                <
               离子标题
               >
             
                <
               离子工具栏
               >
             
                <
               离子按钮
              
               投币口
                =
                
               开始
                
               >
             
                <
               离子菜单 - 切换
               >
             
                <
               离子按钮
               >
             
                <
               离子图标
              
               投币口
                =
                
               仅限图标
                
              
               姓名
                =
                
               菜单
                
               >
                
               离子图标
               >
             
                
               离子按钮
               >
             
                
               离子菜单 - 切换
               >
             
                
               离子按钮
               >
             
                <
               离子标题
               >
             标题
                
               离子标题
               >
             
                
               离子工具栏
               >
             
                
               离子标题
               >
             
                <
               离子内容
              
               班级
                =
                
               离子填充
                
               >
             
                <
               H1.
               >
             主要内容
                
               H1.
               >
             
                
               离子内容
               >
             
                
               div
               >
             
                
               离子分裂窗格
               >
             
                
               离子应用程序
               >
复制 复制

重要的是要注意的是 ID 匹配 内容ID 由拆分窗格指定将是始终可见的主要内容。这可以是任何元素,包括一个元素 离子导航 离子路由器出口 或者 离子标签

生活例子

您可以在Angular中查看此设置的Live示例 这里 和反应 这里

下一个
响应网格

Baidu