草庐IT

ionic 头部与底部

runoob 2023-04-07 原文

ionic 头部与底部

Header(头部)

Header是固定在屏幕顶部的组件,可以包如标题和左右的功能按钮。

ionic 默认提供了许多种颜色样式，你可以调用不同的样式名，当然也可以自定义一个。

bar-light

<div class="bar bar-header bar-light">
  <h1 class="title">bar-light</h1>
</div>

尝试一下 »

bar-stable

<div class="bar bar-header bar-stable">
  <h1 class="title">bar-stable</h1>
</div>

尝试一下 »

bar-positive

<div class="bar bar-header bar-positive">
  <h1 class="title">bar-positive</h1>
</div>

尝试一下 »

bar-calm

<div class="bar bar-header bar-calm">
  <h1 class="title">bar-calm</h1>
</div>

尝试一下 »

bar-balanced

<div class="bar bar-header bar-balanced">
  <h1 class="title">bar-balanced</h1>
</div>

尝试一下 »

bar-energized

<div class="bar bar-header bar-energized">
  <h1 class="title">bar-energized</h1>
</div>

尝试一下 »

bar-assertive

<div class="bar bar-header bar-assertive">
  <h1 class="title">bar-assertive</h1>
</div>

尝试一下 »

bar-royal

<div class="bar bar-header bar-royal">
  <h1 class="title">bar-royal</h1>
</div>

尝试一下 »

bar-dark

<div class="bar bar-header bar-dark">
  <h1 class="title">bar-dark</h1>
</div>

尝试一下 »

Sub Header（副标题）

Sub Header同样是固定在顶部，只是是在Header的下面，就算没有写Header这个，Sub Header这个样式也会距离顶部有一个Header的距离。颜色样式同 Header 。

<div class="bar bar-header">
  <h1 class="title">Header</h1>
</div>
<div class="bar bar-subheader">
  <h2 class="title">Sub Header</h2>
</div>

尝试一下 »

Footer(底部)

Footer 是在屏幕的最下方，可以包含多种内容类型。

<div class="bar bar-footer bar-balanced">
  <div class="title">Footer</div>
</div>

尝试一下 »

Footer 同上面的 Header，只是把样式名 bar-header 换做 bar-footer 。

<div class="bar bar-footer">
  <button class="button button-clear">Left</button>
  <div class="title">Title</div>
  <button class="button button-clear">Right</button>
</div>

尝试一下 »

此外，如果底部没有标题，但是又需要右边的按钮，你需要在右侧按钮添加 pull-right如:

<div class="bar bar-footer">
  <button class="button button-clear pull-right">Right</button>
</div>

尝试一下 »

ionic头部barclassgt

有关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

随机推荐