有什么可以在从侧面菜单中显示的离子导航视图中显示的内容显示？ [英] What can be shown in content displayed in a ion-nav-view displayed from a side-menu?

问题描述

所以，我还是有点在学习一些什么是在这些框架回事的复制粘贴，祈祷阶段。但我看不出我有什么可以或不可以在视图做在我身边菜单被导航到。

下面是整个页面。有什么建议么？我使用的是Firefox，打开窗户约为iPhone形状和加载的index.html。

我不希望使用老式的表格标记。在另一方面，我没有看到什么工作。我想合理的CSS样式的HTML。但鉴于甚至无法显示一个HTML表格？

 ＆LT;！DOCTYPE HTML＆GT;
 ＆LT; HTML和GT;
     ＆LT; HEAD＆GT;
         ＆LT;间的charset =UTF-8＆GT;         ＆LT;标题＆GT; AAA＆LT; /标题＆GT;         ＆LT; META NAME =视CONTENT =初始规模= 1，最大规模= 1，用户可扩展性=无，宽度=设备宽度＆GT;         ＆LT;！ - 下面两个使应用程序启动速度慢，但是这将工作，直到我们决定如何捆绑。 -rrk  - ＆GT;
         ＆LT;链接HREF =HTTP：//$c$c.ionicframework.com/1.0.0-beta.11/css/ionic.css的rel =stylesheet属性＆GT;
         ＆所述; SCRIPT SRC =HTTP：//$c$c.ionicframework.com/1.0.0-beta.11/js/ionic.bundle.js＆GT;＆下; /脚本＆GT;         ＆LT;脚本类型=文/ JavaScript的＆GT;             angular.module（'AAA'，['离子']）             .factory（'计算器'，函数（）{               返回{                 所有：功能（）{
                   返回[
                      {标题：MENU1}，
                      {标题：MENU2}，
                      {标题：MENU3}，
                      {标题：MENU4}，
                      {标题：MENU5}，
                      {标题：MENU6}，
                      {标题：MENU7}
                   ];
                 }，                 getLastActiveIndex：功能（）{
                   返回parseInt函数（window.localStorage ['lastActiveCalculator']）|| 0;
                 }，                 setLastActiveIndex：功能（指数）{
                   window.localStorage ['lastActiveCalculator'] =指数;
                 }
               }
             }）             的.config（函数（$ stateProvider，$ urlRouterProvider）{
                 使用严格的;                 / *设置状态为应用程序的不同部分。 * /
                 $ stateProvider
                     .STATE（'MENU1'，{名称：关于，网址：'/约，templateUrl：'about.html'，控制器：'CalculatorCtrl'}）
                     .STATE（'MENU2'，{名称：第2页，网址：'/第2页，templateUrl：page2.html，控制器：'CalculatorCtrl'}）
                     .STATE（'MENU3'，{名称：第3页，网址：'/第3页，templateUrl：page3.html'，控制器：'CalculatorCtrl'}）
                     .STATE（'MENU4'，{名称：'第4页，网址：'/第3页，templateUrl：page4.html'，控制器：'CalculatorCtrl'}）
                     .STATE（'MENU5'，{名称：'第5页，网址：'/第3页，templateUrl：page5.html'，控制器：'CalculatorCtrl'}）
                     .STATE（'MENU6'，{名称：'第6页，网址：'/第3页，templateUrl：page6.html'，控制器：'CalculatorCtrl'}）
                     .STATE（'MENU7'，{名称：'第7页，网址：'/第3页，templateUrl：page7.html'，控制器：'CalculatorCtrl'}）
                 ;
                 $ urlRouterProvider.otherwise（'/约'）;
             }）             .controller（'CalculatorCtrl'，函数（$范围，计算器，$状态，$ ionicSideMenuDelegate）{               //加载或初始化计算器
               $ scope.calculators = Calculators.all（）;
               Calculators.setLastActiveIndex（0）;               //取得最后一个活动，还是第计算器
               $ scope.activeCalculator = $ scope.calculators [Calculators.getLastActiveIndex（）];               //调用来选择给定计算器
               $ scope.selectCalculator =功能（计算器，指数）{
                 $ scope.activeCalculator =计算器;
                 Calculators.setLastActiveIndex（索引）;
                 $ state.transitionTo（calculator.title）;
                 $ ionicSideMenuDelegate.toggleLeft（假）;
               };               $ scope.toggleCalculators =功能（）{
                 $ ionicSideMenuDelegate.toggleLeft（）;
               };             }）;
         ＆LT; / SCRIPT＆GT;     ＆LT; /头＆GT;
     ＆LT;机身NG-应用=AAANG-控制器=CalculatorCtrl＆GT;         ＆LT;离子侧菜单＆GT;             ＆LT;！ - 中心内容 - ＆GT;
             ＆LT;离子侧面菜单内容＆GT;
                 ＆LT;离子标题栏类=扎黑＆GT;
                     ＆LT;按钮类=按钮NG点击=toggleCalculators（）＆GT;
                         ＆LT; I＆GT;的计算值LT; I＆GT /;
                     ＆LT; /按钮＆GT;
                     ＆LT; H1类=标题＆GT; AAA＆LT; / H1＆GT;
                 ＆LT; /离子头吧＆GT;                 ＆LT;离子导航视图类=滑 - 左 - 右＆GT;＆LT; /离子NAV-视图＆gt;             ＆LT; /离子侧面菜单内容＆GT;             ＆LT;！ - 左菜单 - ＆GT;
             ＆LT;离子侧面菜单侧=左＆GT;
                 ＆LT;离子标题栏类=扎黑＆GT;
                     Text0
                 ＆LT; /离子头吧＆GT;
                 ＆LT;离子含量滚动=false的＆GT;
                     ＆LT;离子列表＆gt;
                         ＆LT;离子项目NG重复=，在计算器计算器
                                   NG-点击=selectCalculator（计算器，$指数）
                                   NG-CLASS ={活跃：activeCalculator ==计算器}＆GT;
                             {{calculator.title}}
                         ＆LT; /离子项目＆GT;
                     ＆LT; /离子列表＆gt;
                 ＆LT; /离子含量＆GT;
             ＆所述; /离子侧菜单＆gt;         ＆LT; /离子侧菜单＆GT;         ＆LT;脚本ID =about.html类型=文/ NG-模板＆GT;
             ＆LT;离子视图标题=关于＆GT;
                 ＆LT;离子含量填充=真正的＆GT;
                     ＆LT;形式为GT;
                     ＆LT;表边框=1＆GT;
                         ＆所述; TR＆GT;
                             ＆LT; TD＆GT;＆LT;输入类型=按钮值=保存/载入/＆GT;＆LT; / TD＆GT;
                             ＆LT; TD＆GT;＆LT;输入类型=按钮值=分享/＆GT;＆LT; / TD＆GT;
                             ＆LT; TD＆GT;＆LT;输入类型=按钮值=帮助/＆GT;＆LT; / TD＆GT;＆LT; / TR＆GT;
                         ＆所述; TR＆GT;＆下; TD列跨度=3＆GT;
                             文本
                         ＆所述; TR＆GT;＆下; TD列跨度=3＆GT;指示与所述; / TD＆GT;＆下; / TR＆GT;
                         ＆所述; TR＆GT;＆下; TD列跨度=3＆GT;
                             ＆LT;＆OL GT;
                                 ＆LT;立GT;的text1＆LT; /李＆GT;
                                 ＆LT;立GT;文本2＆LT; /李＆GT;
                                 ＆LT;立GT;＆文字3 LT; /李＆GT;
                             ＆LT;＆OL GT;
                         ＆LT; / TD＆GT;＆LT; / TR＆GT;
                         ＆所述; TR＆GT;＆下; TD列跨度=3＆GT;
                             ＆LT; I＆GT;＆LT; P＆GT;
                             文本4
                             ＆所述; / P＆GT;＆下; / I GT;
                         ＆LT; / TD＆GT;＆LT; / TR＆GT;
                     ＆LT; /表＆gt;
                     ＆LT; /表及GT;
                 ＆LT; /离子含量＆GT;
             ＆LT; /离子视图＆gt;
         ＆LT; / SCRIPT＆GT;         ＆LT;脚本ID =page2.html类型=文/ NG-模板＆GT;
             ＆LT;离子视图标题=TITLE1＆GT;
                 ＆LT;离子含量填充=真正的＆GT;
                     ＆LT;形式为GT;
                     ＆LT;表边框=1＆GT;
                         ＆所述; TR＆GT;
                             ＆LT; TD＆GT;＆LT;输入类型=按钮值=保存/载入/＆GT;＆LT; / TD＆GT;
                             ＆LT; TD＆GT;＆LT;输入类型=按钮值=分享/＆GT;＆LT; / TD＆GT;
                             ＆LT; TD＆GT;＆LT;输入类型=按钮值=帮助/＆GT;＆LT; / TD＆GT;
                         ＆LT; / TR＆GT;
                     ＆LT; /表＆gt;
                     ＆LT;表边框=1＆GT;
                         ＆所述; TR＆GT;
                             ＆LT; TD＆GT;期望＆LT; / TD＆GT;
                             ＆LT; TD＆GT;＆LT;输入类型=文字大小=6VALUE =1.5/＆GT;＆LT; / TD＆GT;
                             ＆LT; TD＆GT;＆年LT; / TD＆GT;
                         ＆LT; / TR＆GT;
                         ＆所述; TR＆GT;
                             ＆LT; TD＆GT;＆安培; NBSP;＆LT; / TD＆GT;
                             ＆LT;第i个电流I /第i
                             ＆LT;第i FUTURE＆LT; /第i
                         ＆LT; / TR＆GT;
                         ＆所述; TR＆GT;
                             ＆LT; TD＆GT; Text5＆LT; / TD＆GT;
                             ＆所述; TD＆GT; ＆LT; / TD＆GT;
                             ＆所述; TD＆GT; ＆LT; / TD＆GT;
                         ＆LT; / TR＆GT;
                         ＆所述; TR＆GT;
                             ＆LT; TD＆GT; Text6＆LT; / TD＆GT;
                             ＆LT; TD＆GT;＆LT;输入类型=文字大小=3值=4＆GT;＆LT; / TD＆GT;
                             ＆LT; TD＆GT;＆LT;输入类型=文字大小=3值=1＆GT;＆LT; / TD＆GT;
                         ＆LT; / TR＆GT;
                         ＆所述; TR＆GT;
                             ＆LT; TD＆GT; Text7＆LT; / TD＆GT;
                             ＆LT; TD＆GT;＆LT;输入类型=文字大小=3值=20＆GT;＆LT; / TD＆GT;
                             ＆LT; TD＆GT;＆LT;输入类型=文字大小=3值=30＆GT;＆LT; / TD＆GT;
                         ＆LT; / TR＆GT;
                         ＆所述; TR＆GT;
                             ＆LT; TD＆GT; Text8＆LT; / TD＆GT;
                             ＆LT; TD＆GT;＆LT;输入类型=文字大小=3值=40％＆GT;＆LT; / TD＆GT;
                             ＆LT; TD＆GT;＆LT;输入类型=文字大小=3值=40％＆GT;＆LT; / TD＆GT;
                         ＆LT; / TR＆GT;
                         ＆所述; TR＆GT;
                             ＆LT; TD＆GT; Text9＆LT; / TD＆GT;
                             ＆LT; TD＆GT;＆LT;输入类型=文字大小=3值=2＆GT;＆LT; / TD＆GT;
                             ＆LT; TD＆GT;＆LT;输入类型=文字大小=3值=1＆GT;＆LT; / TD＆GT;
                         ＆LT; / TR＆GT;
                     ＆LT; /表＆gt;
                     ＆LT; /表及GT;
                 ＆LT; /离子含量＆GT;
             ＆LT; /离子视图＆gt;
         ＆LT; / SCRIPT＆GT;         ＆LT;脚本ID =page3.html类型=文/ NG-模板＆GT;
             ＆LT;离子视图标题=第3页＆GT;
                 ＆LT;离子含量填充=真正的＆GT;
                     ＆LT; H1＆gt;页面3'; / H1＆GT;
                 ＆LT; /离子含量＆GT;
             ＆LT; /离子视图＆gt;
         ＆LT; / SCRIPT＆GT;         ＆LT;脚本ID =page4.html类型=文/ NG-模板＆GT;
             ＆LT;离子视图标题=第4页＆GT;
                 ＆LT;离子含量填充=真正的＆GT;
                     ＆LT; H1＆gt;页面4℃; / H1＆GT;
                 ＆LT; /离子含量＆GT;
             ＆LT; /离子视图＆gt;
         ＆LT; / SCRIPT＆GT;         ＆LT;脚本ID =page5.html类型=文/ NG-模板＆GT;
             ＆LT;离子视图标题=第5页＆GT;
                 ＆LT;离子含量填充=真正的＆GT;
                     ＆LT; H1＆gt;页面5℃/ H1＆GT;
                 ＆LT; /离子含量＆GT;
             ＆LT; /离子视图＆gt;
         ＆LT; / SCRIPT＆GT;         ＆LT;脚本ID =page6.html类型=文/ NG-模板＆GT;
             ＆LT;离子视图标题=第6页＆GT;
                 ＆LT;离子含量填充=真正的＆GT;
                     ＆LT; H1＆gt;页面6≤/ H1＆GT;
                 ＆LT; /离子含量＆GT;
             ＆LT; /离子视图＆gt;
         ＆LT; / SCRIPT＆GT;         ＆LT;脚本ID =page7.html类型=文/ NG-模板＆GT;
             ＆LT;离子视图标题=第7页＆GT;
                 ＆LT;离子含量填充=真正的＆GT;
                     ＆LT; H1＆gt;页面7 LT; / H1＆GT;
                 ＆LT; /离子含量＆GT;
             ＆LT; /离子视图＆gt;
         ＆LT; / SCRIPT＆GT;     ＆LT; /身体GT;
 ＆LT; / HTML＆GT;
 

解决方案

表元素的CSS重置，所以你必须重新申请你想为你的表中的所有CSS样式。在移动，他们很少您想要的项目。

什么你可能想要做的是使用CSS离子电网。 http://ionicframework.com/docs/components/#grid 你得到多少相同的布局作为表，但避免使用表。表不应该用于布局

下面是您的第一个视图重做。

 ＆LT;脚本ID =about.html类型=文/ NG-模板＆GT;
         ＆LT;离子视图标题=关于＆GT;
             ＆LT;离子含量填充=真正的＆GT;
                 ＆LT; D​​IV CLASS =行＆GT;
                   ＆LT; D​​IV CLASS =山坳＆GT;＆LT;输入类型=按钮值=保存/载入/＆GT;＆LT; / DIV＆GT;
                   ＆LT; D​​IV CLASS =山坳＆GT;＆LT;输入类型=按钮值=分享/＆GT;＆LT; / DIV＆GT;
                   ＆LT; D​​IV CLASS =山坳＆GT;＆LT;输入类型=按钮值=帮助/＆GT;＆LT; / DIV＆GT;
               ＆LT; / DIV＆GT;
               ＆LT; D​​IV CLASS =行＆GT;
                 ＆LT; D​​IV CLASS =山坳＆gt;文字＆LT; / DIV＆GT;
               ＆LT; / DIV＆GT;
               ＆LT; D​​IV CLASS =行＆GT;
                 ＆LT; D​​IV CLASS =山坳＆GT;说明＆LT; / DIV＆GT;
               ＆LT; / DIV＆GT;
               ＆LT; D​​IV CLASS =行＆GT;
                 ＆LT; D​​IV CLASS =山坳＆GT;
                   ＆LT;＆OL GT;
                     ＆LT;立GT;的text1＆LT; /李＆GT;
                     ＆LT;立GT;文本2＆LT; /李＆GT;
                     ＆LT;立GT;＆文字3 LT; /李＆GT;
                   ＆LT; / OL＆GT;
                 ＆LT; / DIV＆GT;
               ＆LT; / DIV＆GT;
               ＆LT; D​​IV CLASS =行＆GT;
                 ＆LT; D​​IV CLASS =山坳＆GT;
                   ＆所述p为H.;＆下; I＆GT;文本4＆下; / I GT;＆下; / P＆GT;
                 ＆LT; / DIV＆GT;
               ＆LT; / DIV＆GT;
             ＆LT; /离子含量＆GT;
         ＆LT; /离子视图＆gt;
     ＆LT; / SCRIPT＆GT;
 

离子的目的是让事情看起来像原生SDK使事情出现。 CSS的重置他们使用复位样样顺利，但没有额外的样式设置为表（​​可能是其他元素太）。在＆LT; OL方式＆gt; 元素也缺乏风格，因为其目的是将使用列表组件

So, I am still somewhat at the copy-paste-pray stage of learning some of what is going on in these frameworks. But I cannot see what I can or cannot do in the view being navigated to by my side-menu.

Here is the entire page. Any suggestions? I am using Firefox, opening the window to be approximately iPhone shaped and loading the index.html.

I do not want to use old-fashioned table tags. On the other hand, I am not seeing what will work. I want reasonable CSS-style HTML. But the view cannot even show an html table?

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8">

         <title>AAA</title>

         <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

         <!-- These next two make the app start slow, but this will work until we decide on how to bundle. -rrk -->
         <link href="http://code.ionicframework.com/1.0.0-beta.11/css/ionic.css" rel="stylesheet">
         <script src="http://code.ionicframework.com/1.0.0-beta.11/js/ionic.bundle.js"></script>

         <script type="text/javascript">

             angular.module('aaa', ['ionic'])

             .factory('Calculators', function() {

               return {

                 all: function() {
                   return [
                      { title: "MENU1" },
                      { title: "MENU2" },
                      { title: "MENU3" },
                      { title: "MENU4" },
                      { title: "MENU5" },
                      { title: "MENU6" },
                      { title: "MENU7" }
                   ];
                 },

                 getLastActiveIndex: function() {
                   return parseInt(window.localStorage['lastActiveCalculator']) || 0;
                 },

                 setLastActiveIndex: function(index) {
                   window.localStorage['lastActiveCalculator'] = index;
                 }
               }
             })

             .config(function($stateProvider, $urlRouterProvider) {
                 "use strict";

                 /* Set up the states for the application's different sections. */
                 $stateProvider
                     .state('MENU1', {name: 'about', url: '/about', templateUrl: 'about.html', controller: 'CalculatorCtrl'})
                     .state('MENU2', {name: 'page2', url: '/page2', templateUrl: 'page2.html', controller: 'CalculatorCtrl'})
                     .state('MENU3', {name: 'page3', url: '/page3', templateUrl: 'page3.html', controller: 'CalculatorCtrl'})
                     .state('MENU4', {name: 'page4', url: '/page3', templateUrl: 'page4.html', controller: 'CalculatorCtrl'})
                     .state('MENU5', {name: 'page5', url: '/page3', templateUrl: 'page5.html', controller: 'CalculatorCtrl'})
                     .state('MENU6', {name: 'page6', url: '/page3', templateUrl: 'page6.html', controller: 'CalculatorCtrl'})
                     .state('MENU7', {name: 'page7', url: '/page3', templateUrl: 'page7.html', controller: 'CalculatorCtrl'})
                 ;
                 $urlRouterProvider.otherwise('/about');
             })

             .controller('CalculatorCtrl', function($scope, Calculators, $state, $ionicSideMenuDelegate) {

               // Load or initialize calculators
               $scope.calculators = Calculators.all();
               Calculators.setLastActiveIndex(0);

               // Grab the last active, or the first calculator
               $scope.activeCalculator = $scope.calculators[Calculators.getLastActiveIndex()];

               // Called to select the given calculator
               $scope.selectCalculator = function(calculator, index) {
                 $scope.activeCalculator = calculator;
                 Calculators.setLastActiveIndex(index);
                 $state.transitionTo(calculator.title);
                 $ionicSideMenuDelegate.toggleLeft(false);
               };

               $scope.toggleCalculators = function() {
                 $ionicSideMenuDelegate.toggleLeft();
               };

             });
         </script>

     </head>
     <body ng-app="aaa" ng-controller="CalculatorCtrl">

         <ion-side-menus>

             <!-- Center content -->
             <ion-side-menu-content>
                 <ion-header-bar class="bar-dark">
                     <button class="button" ng-click="toggleCalculators()">
                         <i>Calc</i>
                     </button>
                     <h1 class="title">AAA</h1>
                 </ion-header-bar>

                 <ion-nav-view class="slide-left-right"></ion-nav-view>

             </ion-side-menu-content>

             <!-- Left menu -->
             <ion-side-menu side="left">
                 <ion-header-bar class="bar-dark">
                     Text0
                 </ion-header-bar>
                 <ion-content scroll="false">
                     <ion-list>
                         <ion-item ng-repeat="calculator in calculators"
                                   ng-click="selectCalculator(calculator, $index)"
                                   ng-class="{active: activeCalculator == calculator}">
                             {{calculator.title}}
                         </ion-item>
                     </ion-list>
                 </ion-content>
             </ion-side-menu>

         </ion-side-menus>

         <script id="about.html" type="text/ng-template">
             <ion-view title="About">
                 <ion-content padding="true">
                     <form>
                     <table border="1">
                         <tr>
                             <td><input type="button" value="Save/Load" /></td>
                             <td><input type="button" value="Share" /></td>
                             <td><input type="button" value="Help" /></td></tr>
                         <tr><td colspan="3">
                             Text
                         <tr><td colspan="3">Instructions</td></tr>
                         <tr><td colspan="3">
                             <ol>
                                 <li>text1</li>
                                 <li>text2</li>
                                 <li>text3</li>
                             <ol>
                         </td></tr>
                         <tr><td colspan="3">
                             <i><p>
                             text4
                             </p></i>
                         </td></tr>
                     </table>
                     </form>
                 </ion-content>
             </ion-view>
         </script>

         <script id="page2.html" type="text/ng-template">
             <ion-view title="TITLE1">
                 <ion-content padding="true">
                     <form>
                     <table border="1">
                         <tr>
                             <td><input type="button" value="Save/Load" /></td>
                             <td><input type="button" value="Share" /></td>
                             <td><input type="button" value="Help" /></td>
                         </tr>
                     </table>
                     <table border="1">
                         <tr>
                             <td>Desired</td>
                             <td><input type="text" size="6" value="1.5" /></td>
                             <td>years</td>
                         </tr>
                         <tr>
                             <td>&nbsp;</td>
                             <th>CURRENT</th>
                             <th>FUTURE</th>
                         </tr>
                         <tr>
                             <td>Text5</td>
                             <td> </td>
                             <td> </td>
                         </tr>
                         <tr>
                             <td>Text6</td>
                             <td><input type="text" size="3" value="4"></td>
                             <td><input type="text" size="3" value="1"></td>
                         </tr>
                         <tr>
                             <td>Text7</td>
                             <td><input type="text" size="3" value="20"></td>
                             <td><input type="text" size="3" value="30"></td>
                         </tr>
                         <tr>
                             <td>Text8</td>
                             <td><input type="text" size="3" value="40%"></td>
                             <td><input type="text" size="3" value="40%"></td>
                         </tr>
                         <tr>
                             <td>Text9</td>
                             <td><input type="text" size="3" value="2"></td>
                             <td><input type="text" size="3" value="1"></td>
                         </tr>
                     </table>
                     </form>
                 </ion-content>
             </ion-view>
         </script>

         <script id="page3.html" type="text/ng-template">
             <ion-view title="Page 3">
                 <ion-content padding="true">
                     <h1>PAGE 3</h1>
                 </ion-content>
             </ion-view>
         </script>

         <script id="page4.html" type="text/ng-template">
             <ion-view title="Page 4">
                 <ion-content padding="true">
                     <h1>PAGE 4</h1>
                 </ion-content>
             </ion-view>
         </script>

         <script id="page5.html" type="text/ng-template">
             <ion-view title="Page 5">
                 <ion-content padding="true">
                     <h1>PAGE 5</h1>
                 </ion-content>
             </ion-view>
         </script>

         <script id="page6.html" type="text/ng-template">
             <ion-view title="Page 6">
                 <ion-content padding="true">
                     <h1>PAGE 6</h1>
                 </ion-content>
             </ion-view>
         </script>

         <script id="page7.html" type="text/ng-template">
             <ion-view title="Page 7">
                 <ion-content padding="true">
                     <h1>PAGE 7</h1>
                 </ion-content>
             </ion-view>
         </script>

     </body>
 </html>

解决方案

Table elements are reset by the CSS, so you'd have to reapply the all CSS styles you wish for your table. In mobile, they are rarely the item you want.

What you probably want to do is to use the Ionic css grids. http://ionicframework.com/docs/components/#grid You get much the same layout as a table but avoid the use of tables. Tables should not be used for layouts.

Here is your first view redone for you.

     <script id="about.html" type="text/ng-template">
         <ion-view title="About">
             <ion-content padding="true">
                 <div class="row">
                   <div class="col"><input type="button" value="Save/Load" /></div>
                   <div class="col"><input type="button" value="Share" /></div>
                   <div class="col"><input type="button" value="Help" /></div>
               </div>
               <div class="row">
                 <div class="col">Text</div>
               </div>
               <div class="row">
                 <div class="col">Instructions</div>
               </div>
               <div class="row">
                 <div class="col">
                   <ol>
                     <li>text1</li>
                     <li>text2</li>
                     <li>text3</li>
                   </ol>
                 </div>
               </div>
               <div class="row">
                 <div class="col">
                   <p><i>text4</i></p>
                 </div>
               </div>
             </ion-content>
         </ion-view>
     </script>

Ionic is designed to make things look like the native SDK makes things appear. The CSS reset they use resets everything well, but no additional styles are setup for tables (probably other elements too). The <ol> element also lacks styles, because the intent is you will use the list component.

这篇关于有什么可以在从侧面菜单中显示的离子导航视图中显示的内容显示？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！