聚合物的模态

注意

我猜你知道

Web 组件规范

来自 Google 的聚合物

如果，我们可以只有一个自定义元素，比如说

<tool-bar></tool-bar>

它神奇地做了一切凌乱的 Modal 标记吗？

诱人的呃！

如何指定哪个 Modal 属于哪个项目？

简单！ 写吧

<tool-bar modal-id="Project-cats"></tool-bar>

因此，例如，为猫项目保留标记为“Project-cats”的标记。

你如何写出模态中的内容？简单！ 只需在自定义标记“”中编写正常的标记即可。

像这样：

<tool-bar modal-id="Project-cats">
 
<div class="col-12 modal-desc">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
 
</tool-bar>

这不够简单吗？

如果你想知道完整标记的外观如何？包括 share 和 fork 链接，见下文。

<div class=row>
 
    <div class="col-12"> <img src="path-to-hero-image"></img></div>
 
</div>
 
<div class="row">
 
    <tool-bar
 
    modal-id="Project-cats"
 
    link2-share="http://www.project-cats.com/kitten"
 
    link2-fork="https://github.com/myusername/my-project-cats">
 
        <div class="col-12 modal-desc">
 
            <p> yadda yadda blah blah</p>
 
        </div>
 
    </tool-bar>
 
</div>

比重写完整的 div 汤好多了呃！

当然，你可以进一步缩短它，并通过抽象自定义元素中的英雄图像实现使其完全可以合并，但让我们暂时搁置，作为后来的关注点。