聚合物的模態

注意

我猜你知道

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 湯好多了呃！

當然，你可以進一步縮短它，並通過抽象自定義元素中的英雄影象實現使其完全可以合併，但讓我們暫時擱置，作為後來的關注點。