草庐IT

ionic tab(选项卡)

runoob 2023-04-07 原文

ionic tab(选项卡)

ionic tab(选项卡) 是水平排列的按钮或者链接,用以页面间导航的切换。它可以包含文字和图标的组合,是一种移动设备上流行的导航方法。

以下选项卡容器使用了 tabs 类,每个选项卡使用 tab-item 类。默认情况下,选项卡是文本的,并没有图标。

实例

<div class="tabs">
  <a class="tab-item">
    主页
  </a>
  <a class="tab-item">
    收藏
  </a>
  <a class="tab-item">
    设置
  </a>
</div>

默认情况,选项卡颜色为默认,你可以设置以下不同颜色样式:tabs-default ,tabs-light ,tabs-stable ,tabs-positive ,tabs-calm ,tabs-balanced ,tabs-energized ,tabs-assertive ,tabs-royal ,tabs-dark。

要隐藏选项卡栏,可使用 tabs-item-hide 类。

图标选项卡

在 tabs 类后添加 tabs-icon-only 类可设置只显示图标选项卡。

<div class="tabs tabs-icon-only">
  <a class="tab-item">
    <i class="icon ion-home"></i>
  </a>
  <a class="tab-item">
    <i class="icon ion-star"></i>
  </a>
  <a class="tab-item">
    <i class="icon ion-gear-a"></i>
  </a>
</div>

顶部图标+文字选项卡

在 tabs 类后添加 tabs-icon-top 类可设置顶部图标+文字选项卡。

<div class="tabs tabs-icon-top">
  <a class="tab-item" href="#">
    <i class="icon ion-home"></i>
    主页
  </a>
  <a class="tab-item" href="#">
    <i class="icon ion-star"></i>
    收藏
  </a>
  <a class="tab-item" href="#">
    <i class="icon ion-gear-a"></i>
    设置
  </a>
</div>

左侧图标+文字选项卡

在 tabs 类后添加 tabs-icon-left 类可设置左侧图标+文字选项卡。

<div class="tabs tabs-icon-left">
  <a class="tab-item">
    <i class="icon ion-home"></i>
    主页
  </a>
  <a class="tab-item">
    <i class="icon ion-star"></i>
    收藏
  </a>
  <a class="tab-item">
    <i class="icon ion-gear-a"></i>
    设置
  </a>
</div>

条纹样式选项卡

可以在带有 tabs 的样式名的元素上添加 tabs-striped 来实现像 Android 风格的 tabs。也可以添加 tabs-top 来实现选项卡在页面顶部。

条纹选项卡颜色可通过 tabs-background-{color} 和 tabs-color-{color} 来控制, {color} 值可以是:default, light, stable, positive, calm, balanced, energized, assertive, royal, 或 dark。

注意:如果要再选项卡上设置头部标题,需要使用 has-tabs-top 类。

<div class="tabs-striped tabs-top tabs-background-positive tabs-color-light">
    <div class="tabs">
      <a class="tab-item active" href="#">
        <i class="icon ion-home"></i>
        Test
      </a>
      <a class="tab-item" href="#">
        <i class="icon ion-star"></i>
        Favorites
      </a>
      <a class="tab-item" href="#">
        <i class="icon ion-gear-a"></i>
        Settings
      </a>
    </div>
  </div>
  <div class="tabs-striped tabs-color-assertive">
    <div class="tabs">
      <a class="tab-item active" href="#">
        <i class="icon ion-home"></i>
        Test
      </a>
      <a class="tab-item" href="#">
        <i class="icon ion-star"></i>
        Favorites
      </a>
      <a class="tab-item" href="#">
        <i class="icon ion-gear-a"></i>
        Settings
      </a>
    </div>
  </div>

运行效果如下:

有关ionic tab(选项卡)的更多相关文章

  1. ruby - 默认情况下使选项为 false - 2

    这是在Ruby中设置默认值的常用方法:classQuietByDefaultdefinitialize(opts={})@verbose=opts[:verbose]endend这是一个容易落入的陷阱:classVerboseNoMatterWhatdefinitialize(opts={})@verbose=opts[:verbose]||trueendend正确的做法是:classVerboseByDefaultdefinitialize(opts={})@verbose=opts.include?(:verbose)?opts[:verbose]:trueendend编写Verb

  2. ruby-on-rails - 使用 config.threadsafe 时从 lib/加载模块/类的正确方法是什么!选项? - 2

    我一直致力于让我们的Rails2.3.8应用程序在JRuby下正确运行。一切正常,直到我启用config.threadsafe!以实现JRuby提供的并发性。这导致lib/中的模块和类不再自动加载。使用config.threadsafe!启用:$rubyscript/runner-eproduction'pSim::Sim200Provisioner'/Users/amchale/.rvm/gems/jruby-1.5.1@web-services/gems/activesupport-2.3.8/lib/active_support/dependencies.rb:105:in`co

  3. Ruby on Rails regexp equals-tilde 与 array include 用于检查选项列表 - 2

    我正在使用Rails3.2.3和Ruby1.9.3p0。我发现我经常需要确定某个字符串是否出现在选项列表中。看来我可以使用Ruby数组.includemethod:或正则表达式equals-tildematchshorthand用竖线分隔选项:就性能而言,一个比另一个好吗?还有更好的方法吗? 最佳答案 总结:Array#include?包含String元素,在接受和拒绝输入时均胜出,对于您的示例只有三个可接受的值。对于要检查的更大的集合,看起来Set#include?和String元素可能会获胜。如何测试我们应该根据经验对此进行测试

  4. ruby - 选项卡的 Rubocop - 2

    我们想使用Rubocop来验证我们的ruby​​在语法上是否正确并遵循基本代码指南。除此之外我们有这个规则:我们使用制表符缩进以允许任何人决定他们希望如何呈现它们(将它们显示为2或4个空格)问题是rubocop似乎设计为完全拒绝缩进标签。我们怎样才能超越所有这些规则成为太空合规者?编辑:我正在考虑覆盖这个模块https://github.com/bbatsov/rubocop/blob/master/lib/rubocop/source_parser.rb将我文件中的所有制表符替换为2个空格,以创建gem的幻觉... 最佳答案 添加

  5. ruby - Ruby 中的选项菜单 - 2

    我正在尝试在Ruby中创建一个菜单,以便根据用户输入的内容,取决于调用的类。然后在这种情况下它将返回到“Main”或类“Options”。我希望有人能帮助我。这是我的代码。modulePhysicsG=21C=20000Pi=3.14D=100endclassOptionsputs"Pleaseselect1forAccelerationand2forEnergy."option=gets()ifoption==1thenputs"AccelCalc"#ThisisthebitthatneedstodirecttheusertotheclassAccelCalcelseputs"Ene

  6. ruby-on-rails - 用一系列时间增量填充选择,加上其他选项 - 2

    使用RubyonRails,我使用给定的增量(例如每30分钟)用时间填充“选择”。目前我正在YAML文件中写出所有的可能性,但我觉得有一种更巧妙的方法。我想我想提供一个开始时间、一个结束时间、一个增量,并且目前只提供一个名为“关闭”的选项(想想“business_hours”)。所以,我的选择可能会显示:'Closed'5:00am5:30am6:00am...[allthewayto]...11:30pm谁能想出更好的方法,或者只是将它们全部“拼写”出来的最佳方法? 最佳答案 此答案基于@emh的答案。defcreate_hour

  7. ruby - 如何获取适用于 ruby​​ 1.9.1 的 to_yaml 方法的格式化选项? - 2

    根据YAML文档,可以传递hashofoptions到.to_yaml方法。目前,当我按照文档中的建议传递选项时,它不起作用,哈希被忽略。irb(main):001:0>require'yaml'=>trueirb(main):002:0>user={"1"=>{"name"=>"john","age"=>44}}user.to_yaml=>"---\n\"1\":\nname:john\nage:44\n"现在,传递一些选项:irb(main):014:0>user.to_yaml(:Indent=>4,:UseHeader=>true,:UseVersion=>true)=>"--

  8. ruby - 如何在 Ruby 中设置 SSLContext 选项 - 2

    我需要在Ruby1.8+中创建一个SSLSocket来与加密服务对话。我想在SSLContext对象上设置SSL选项(它最终调用底层OpenSSL库中的SSL_CTX_set_options)。我没有看到任何明显的方法来做到这一点。这是使用OpenSSL::SSL::SSLContext接口(interface)。作为引用点,这类似于调用set_options()在Python的pyOpenSSL库中。 最佳答案 例子:ctx=OpenSSL::SSL::SSLContext.newctx.set_params(:options=>

  9. ruby 选项解析器 : hiding help text for a command option - 2

    Ruby“OptionParser将根据此描述自动为您生成帮助屏幕”[http://ruby.about.com/od/advancedruby/a/optionparser.htm]有没有办法删除命令选项的帮助文本。我可以使用隐藏命令,但有一个命令选项(开关)并隐藏其帮助上下文。 最佳答案 我能够为此拼凑出一个不太优雅的解决方案。它将隐藏主帮助屏幕中的选项,听起来它可能符合您的需要:require'optparse'options={}OptionParser.newdo|opts|opts.banner="Usage:#{$0}

  10. ruby - 如何在 Ruby 的 OptionParser 中只获得长选项? - 2

    我在Ruby(test.rb)中有这么简单的代码:#!/usr/bin/envrubyrequire'optparse'OptionParser.newdo|option|option.on("--sort","Sortdata")doputs"--sortpassed"endend.parse!然后我运行它:./test.rb-s并得到:--sortpassed我错过了什么吗?我希望唯一的--sort(长)选项有效,而不是短选项。如何获取? 最佳答案 我在optparse.rb的第1378-1380行中找到了导致此行为的代码:#i

随机推荐