带灯箱的 Polymer 单页应用

Question

关于 this 问题，我对我的 Polymer Spa 进行了一些更改以动态加载内容。
接下来是添加灯箱画廊。
我找到了一个非常轻量级的版本 here
作为独立的，它工作得很好，但在我的动态内容页面中，我无法完成这项工作。
我创建了一个 git 回购 here

非常感谢。
维多利亚

ps：接下来是联系方式，一些不错的效果，例如 wow.js、语言选择器和图标字体

Answer 1

如果您只打算在页面上放置静态内容（如自定义元素），那么我认为没有必要使用内容数组。所以我会改变你的 final.html

     <div layout horizontal center-center fit>
      <core-animated-pages id="pages" selected="{{route}}" valueattr="hash"
                           transitions="slide-from-right">
          <section hash="about" layout vertical center-center>
            <about-us></about-us>
          </section>
      </core-animated-pages>
    </div>

那么您有 1 个页面可以通过 http://address.com/#about

访问

要添加另一个页面，您需要做的就是添加另一个 <section>，其中包含您想要的路由的散列属性。

我假设您正在学习的教程使用自动绑定模板，并且在 javascript 中等待该模板被绑定。或者您正在自定义元素中工作。

要设置默认路线，您可以将 javascript 中的路线更改为

this.route = this.route || 'Single';

将 'Single' 更改为您想要的默认页面。

希望对您有所帮助。

注意我还删除了 on-tap 功能，因为我只看到它对那个演示有用。

带灯箱的 Polymer 单页应用

Polymer single page application with lightbox

polymer

lightbox

single-page-application