使用聚合物 ui 元素选项卡选择选项卡时切换内容

2024-01-30

我正在尝试使用polymer-ui-tabs传统选项卡组件的组件,您可以根据选择的选项卡切换内容。除非我错过了一些东西polymer-ui-tabs组件似乎只提供选项卡选择器位,没有用于切换内容的内置机制。那是对的吗?

如果没有,那么我如何在其之上构建它?我发现的最有可能的是onPolymerSelect in polymer_selector但该方法目前看起来像这样

Stream<CustomEvent> get onPolymerSelect {
  Element selection = $['selection'];
  if(selection != null) {
    // TODO return selection.onPolymerSelect;
  }
}

我刚刚遇到http://kevmoo.github.io/widget.dart/#tabswidget http://kevmoo.github.io/widget.dart/#tabswidget我会调查一下,但只是想确保在引入另一个库之前我没有遗漏任何东西


虽然它不在 Dart 中,但这里有一个如何使用的示例polymer-ui-tabs and polymer-ui-animated-pages共同达到预期的效果(demo http://jsbin.com/raqel/1/edit):

索引.html:

<!-- <script src="platform.js"></script>
     not necessary anymore with Polymer >= 0.14.0 -->
<script src="packages/web_components/dart_support.js"></script>

<link rel="import" href="s-app.html">
<s-app></s-app>

s-app.html:

<link rel="import" href="polymer.html">
<link rel="import" href="polymer-ui-tabs/polymer-ui-tabs.html">
<link rel="import" href="polymer-ui-animated-pages/polymer-ui-animated-pages.html">
<link rel="import" href="polymer-flex-layout/polymer-flex-layout.html">

<polymer-element name="s-app">  
  <template>
    <style>
      :host {
        display: block;
      }
      polymer-ui-tabs {
        border-top: 1px solid #000;
      }
      polymer-ui-tabs > * {
        border-right: 1px solid #000;
      }
      header {
        padding: 10px;
        background: black;
        color: white;
      }
      polymer-ui-animated-pages > * {
        padding: 10px;
      }

    </style>
    <polymer-flex-layout vertical></polymer-flex-layout>
    <header>
      Header
    </header>
    <polymer-ui-animated-pages selected="{{page}}" flex>
      <div>Page One</div>
      <div>Page Two</div>
      <div>Page Three</div>
    </polymer-ui-animated-pages>
    <polymer-ui-tabs selected="{{page}}">
      <span flex>One</span>
      <span flex>Two</span>
      <span flex>Three</span>
    </polymer-ui-tabs>
  </template>

  <script>
    // switch page on tab
    Polymer('s-app', {page:0});
  </script>

</polymer-element>

如您所见,绑定选项卡元素和动画页面之间的当前选择允许您切换到选项卡所需的内容。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用聚合物 ui 元素选项卡选择选项卡时切换内容 的相关文章

随机推荐

  • SQL 其中日期时间列等于今天的日期?

    如何从创建日期是今天日期的数据库中获取记录 SELECT Title Firstname Surname Company name Interest FROM dbo EXTRANET users WHERE DATE Submission
  • 引用 dll 时忽略内部版本号

    我有一个 NET 4 0 项目 C 的解决方案 它生成一个延迟签名的 dll 我对其进行点模糊处理和签名 EDIT 这就是我对 dll 进行版本控制的方式 assembly AssemblyVersion 0 7 0 assembly As
  • Flutter:检测到滚动时隐藏和显示应用栏

    我在使用应用栏动画时遇到问题SilverAppBar 在我的应用程序中 因此 问题是当我位于列表中间并向上滚动时 应用程序栏不会出现 但当滚动到达项目列表顶部时它就会出现 我已经测试过snap参数并给出true 但不是我期望的结果 我有关于
  • ipdb 显示颜色代码而不是颜色

    Use import ipdb ipdb set trace 插入断点 第一次断点时颜色很好 但第二次断点时显示颜色代码而不是真实颜色 按c 等等 1 32m 72 1 33m 1 32mimport 0m 0mipdb 0m 1 33m
  • cellmap中找不到Frame的解决方法

    下列 在单元格图中找不到框架 https github com dompdf dompdf issues 657 https github com dompdf dompdf issues 657 是互联网上众所周知的问题 但我找不到解决办
  • 打印出Python脚本中的所有代码

    如何打印Python脚本的内容 例如 如果我有这个 毫无意义的示例 脚本 my var 1 1 another thing this is my string 我可以添加哪一行来恢复全部内容 my var 1 1 another thing
  • 如何使用excel-vba创建word文档删除部分

    您好 提前谢谢您 我正在使用 VBA 从 Excelfile 创建一个非常复杂的 Word 文档 应可以激活某些内容 并且单元格中写入的文本应传输到 Word 文档 我已经做好了 但如果它没有被激活 标签 将被删除 不留下任何东西 这意味着
  • ReactiveCrudRepository 永远不会从 SaveAll 返回

    启动时 我检查一些数据 如果不存在 则尝试保存一些默认值 暂时用于测试 val subs repo findAll toIterable if subs none repo saveAll defaults map Source it li
  • WatchKit 拉动刷新

    是否可以实现类似于 Watch 电子邮件应用程序的拉动刷新 如果不是 我还应该如何处理更新WKInterfaceTable 我真的不希望应用程序在加载时自动刷新 因为这违背了快速观看应用程序的目的 不幸的是 目前这是不可能的 WKInter
  • 使用 pandoc 将 html 转换为 docx

    我试图转换这个html p font color SHILPI font p 使用 pandoc 和此命令到 docx pandoc s o test docx t html5 t docx html file 但它失去了颜色 我只得到文本
  • 运行 rspec 时如何让 Rails.logger 打印到控制台/stdout?

    同标题 如何获得Rails logger运行 rspec 时打印到控制台 标准输出 例如 Rails logger info I WANT this to go to console stdout when rspec is running
  • best_in_place gem 初始化

    导轨 3 2 11 Gemfile gem jquery rails gem best in place 应用程序 js require jquery require jquery ujs require best in place 后js
  • 如何通过 Groovy 获取文件 build.gradle 的完整路径?

    我需要在我的 java 项目中靠近 buiid gradle 文件创建文件 我必须在 build gradle 文件中创建任务 Groovy 任务 我的任务必须在项目中的 buiid gradle 附近创建文件 但我不知道 如何获取 bui
  • 如何重新加载一个 UITableView 单元格/行并为其设置动画?

    如何重新加载一个单元格 行并为其设置动画 现在我下载一些文件 每次文件下载完成时 我都会调用它的完成委托并调用 tableview reload 但随后整个表都会重新加载 我怎样才能为表格设置动画 这样它就不会闪烁 例如淡入淡出效果等 问候
  • 发布后将模型插入到集合中

    我正在将一个模型插入带有帖子的矩形集合中 var collectionService restAngular all collection var collection collectionService getList var item
  • 在WPF中,MVVM应该让ViewModel参与打开窗口,例如关于窗口?

    我有一个标准的 WPF 树视图 并绑定了查看模型类的项目 我现在希望处理双击项目时的行为 打开视觉工作室风格的文档 我可以让事件处理程序在包含树视图的控件中触发 显示 xaml 但是如何绑定到视图模型类上的特定行为 例如项目视图模型 最好绑
  • Jquery - 简单数组,如果项目不存在则将其推入,如果存在则删除项目

    我正在构建一个简单的过滤系统 我只想将一个字符串添加到数组中 并在单击链接时将其删除 如果它已经存在 我会尽力解释 document ready function so I start with an empty array var fil
  • 配置啤酒 - 我收到此错误:未定义的解析转换'lager_transform'

    我正在测试这个https github com saleyn erws example https github com saleyn erws example在 R16B03 上 在 Windows 和 Ubuntu 上 gt erws
  • Grails 会话创建,如何防止它

    在以下错误报告的最后一行 https github com grails grails core issues 5296 https github com grails grails core issues 5296 据称 In an id
  • 使用聚合物 ui 元素选项卡选择选项卡时切换内容

    我正在尝试使用polymer ui tabs传统选项卡组件的组件 您可以根据选择的选项卡切换内容 除非我错过了一些东西polymer ui tabs组件似乎只提供选项卡选择器位 没有用于切换内容的内置机制 那是对的吗 如果没有 那么我如何在