草庐IT

ionic 头部和底部

runoob 2023-04-07 原文

ionic 头部和底部

ion-header-bar

这个是固定在屏幕顶部的一个头部标题栏。如果给它加上'bar-subheader' 这个样式，它就是副标题。

用法

<ion-header-bar align-title="left" class="bar-positive">
  <div class="buttons">
    <button class="button" ng-click="doSomething()">Left Button</button>
  </div>
  <h1 class="title">Title!</h1>
  <div class="buttons">
    <button class="button">Right Button</button>
  </div>
</ion-header-bar>
<ion-content>
  Some content!
</ion-content>

API

属性 类型 描述
align-title
(optional)
 string

这个是对齐 title 的。如果没有设置，它将会按照手机的默认排版(Ios的默认是居中，Android默认是居左)。它的值可以是 'left','center','right'。
no-tap-scroll
(optional)
 boolean

默认情况下，头部标题栏在点击屏幕时内容会滚动到头部，可以将 no-tap-scroll 设置为 true 来禁止该动作。。它的值是布尔值（true/false）。

ion-footer-bar

知道了 ion-header-bar ，理解ion-footer-bar就轻松多啦！只是 ion-footer-bar 是在屏幕的底部。

用法

<ion-content>
  Some content!
</ion-content>
<ion-footer-bar align-title="left" class="bar-assertive">
  <div class="buttons">
    <button class="button">Left Button</button>
  </div>
  <h1 class="title">Title!</h1>
  <div class="buttons" ng-click="doSomething()">
    <button class="button">Right Button</button>
  </div>
</ion-footer-bar>

API

与 ion-header-bar 不同的是，ion-footer-bar 只有 align-title 这个 API。

属性 类型 描述
align-title
(optional)
 string

这个是对齐 title 的。如果没有设置，它将会按照手机的默认排版(Ios的默认是居中，Android默认是居左)。它的值可以是 'left','center','right'。
ionic头部classbuttongt

有关ionic 头部和底部的更多相关文章

  1. ruby-on-rails - 在页面的最底部包含 javascript 文件 - 2

    我有一个Rails应用程序。还有一个javascript(javascript1.js)文件必须包含在每个View的最底部。我把它放在/assets/javascripts文件夹中。Application.js包含以下代码//=requirejquery//=requirejquery_ujs//=someotherfiles//=require_directory.即使Application.js中不包含javascript1.js，它也会自动包含，不是吗？那么我怎样才能做我想做的事呢？ 最佳答案 单独定义、包含和执行您的java

  2. 脚本底部的 Ruby 方法？ - 2

    我使用的是ruby​​1.8.7。我可以发誓我之前已经在脚本底部编写了我的函数并且运行良好。我必须将它们放在顶部吗？这似乎是他们现在唯一的工作方式。没什么大不了的。我只是更喜欢将它们放在底部，所以我想我会问。 最佳答案 您可以在一个或多个BEGINblock中执行初始化代码(继承自Perl，后者继承自awk)。can_i_do_this?#=>yesBEGIN{defcan_i_do_this?puts"yes"end}为了完整起见，还有ENDblock:END{can_i_do_this?#=>yes}defcan_i_do_th

  3. ruby-on-rails - ruby on rails 如何在没有布局和其他头部字段的情况下呈现页面 - 2

    elserespond_todo|format|format.html{render"tabelle/show"}endend我想呈现页面......只有该页面中的代码......不添加...布局和rubyonrails中的字段。我只想在页面tabelle/show.html.haml中显示代码的结果 最佳答案 你可以这样做:format.html{render"tabelle/show",:layout=>false} 关于ruby-on-rails-rubyonrails如何在没有布

  4. javascript - 带有 ionic 搜索栏焦点的 ionic 触发模式打开功能 - 单击不起作用 - 2

    我有一个ion-searchbar，单击它会打开一个模式。然而，目前click过程实际上需要两次点击，一次聚焦，一次打开模式。我试图将点击添加到它包含的ion-toolbar中，并尝试使用[disabled]="true"禁用ion-searchbar"，但禁用的功能对ion-searchbar不可用。如何在无需双击的情况下触发新模式打开，并且焦点不会出现在原始搜索栏上？HTMLJSopenSearchModal(){letmyModal=this.modalCtrl.create(SearchmodalPage);myModal.present();} 最

  5. javascript - 从 IONIC 3 的 Assets 文件夹下载 CSV 文件 - 2

    我有一个demo-file.csv文件，它在assets/csv文件夹中，那么如何从手机下载它，这是我的HTML和组件代码。HTML代码DownloadDemoFile组件代码publicdownloadFile(link:any,fileName:any){if(link){letpath=null;this.showWaitingLoading();if(this.platform.is('ios')){path=this.file.documentsDirectory;}else{path=this.file.dataDirectory;}consttransfer=this.t

  6. javascript - 动画底部边框(从左到右) - 2

    我试图让底部边框从左到右。我似乎也无法将它直接定位在标题下方，并且它从中心向外动画。我不确定要更改什么。https://jsfiddle.net/81uo76hx/2/.slider{position:absolute;display:block;left:50%;top:90%;transform:translate(-50%,0);position:absolute;top:43%;margin:0auto;height:2px;background-color:#000;width:0%;} 最佳答案 希望你能用javascr

  7. javascript - ionic 应用程序中的计时器(setInterval)在后台运行一段时间后进入休眠状态 - 2

    我的ionic应用程序有一个计时器(一个简单的setInterval，每秒滴答一次)，当应用程序位于前台时，它工作得很好。然而，当应用程序进入后台并在10分钟后返回前台时，应用程序中显示的时间是错误的(时间比应该的少得多)。我试过将计时器添加到指令中并使用nativeDOM操作api(document.getElementById等)方法，但它们都不起作用。我认为当应用程序进入后台时，ionic框架正在对View和绑定(bind)做一些事情。有没有人遇到过这样的问题？如果遇到过，你们是如何解决的？ 最佳答案 经过几个小时的寻找答案，

  8. javascript - ionic 避免 View 标题在 Android 上闪烁 - 2

    我正在尝试按照ionic模板示例所建议的“标准”方式来制作选项卡内容页面。但是，我发现在Android中切换标签时，view-title会闪烁。您不会在iOS或桌面浏览器上看到闪烁。但是，如果您将Chrome中的设备模式切换到Android设备，您会看到闪烁。我怎样才能克服它？菜单.htmlLeftTab1Content1标签.htmlcontent1.htmlContent1content2.htmlContent2 最佳答案 感谢@AndresRehn分享链接(http://forum.ionicframework.com/t/

  9. javascript - 带 ionic 切换而不是按钮的 ionic 输入插件 - 2

    我非常想合并一个item-input-inset用ion-toggle而不是按钮-因此用户可以选择禁用输入字段。我想要的是这样的:我确实希望将文本输入连接到一个模型，所以我总是有一个NotApplicable变量或用户输入的一些其他字符串(或空字符串)。但我的第一个问题是布局似乎乱七八糟。这是我得到的结果:给出下面乱七八糟的布局 最佳答案 @Norfeldt:请检查下面的代码片段，让我知道您的想法。希望它能像您期望的那样工作。angular.module('ionicApp',['ionic']).controller('MainC

  10. javascript - TinyMCE - 在底部插入内容 - 2

    我知道我们可以通过这种方式将代码插入到顶部。ed.selection.setCursorLocation(ed.getBody().firstChild,0);但是，我不确定如何为底部的内容实现这一点。 最佳答案 另一种方法:functiongetTextNodes(node,nodeType,result){varchildren=node.childNodes;varnodeType=nodeType?nodeType:3;varresult=!result?[]:result;if(node.nodeType==nodeTyp

随机推荐