Polymer2.0 iron-flex-layout

最新推荐文章于 2024-08-26 08:28:45 发布

原创最新推荐文章于 2024-08-26 08:28:45 发布 · 353 阅读

0 ·

CC 4.0 BY-SA版权

polymer 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一个使用Polymer框架创建的自定义HTML元素，该元素可以实现视频列表的自适应布局。根据视频数量的不同，组件能够调整每个视频的大小和布局，确保在不同屏幕尺寸上都能提供良好的观看体验。

<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<dom-module id="my-video">
    <template>
        <custom-style>
            <style is="custom-style" include="iron-flex">
                #container{
                    width: var(--video-container-width,100vw);
                    height: var(--video-container-height, 56.25vw);
                }
                #container > div{
                    box-sizing: border-box;
                    padding: 10px;
                }
            </style>
        </custom-style>
        <section id="container" class$="layout horizontal wrap around-justified [[alignV]] ">
            <dom-repeat items="[[videoList]]" >
                <template>
                    <!--替换成视频-->
                    <div style$="[[style]]">
                        <img src="" alt="video-content" style="width: 100%; height: 100%;">
                    </div>
                </template>
            </dom-repeat>
        </section>
    </template>
    <script>
        class MyVideo extends Polymer.Element {
            static get is()
            {
                return 'my-video';
            }

            static get properties()
            {
                return {
                    videoList: Array,
                    alignV: String
                }
            }

            static get observers()
            {
                return [
                    'videoListChanged(videoList)'
                ]
            }

            videoListChanged(videos){
                this.initVideoView(videos.length)
            }
            initVideoView(len){
                if(len == 3 || len > 4){
                    this.style=  "width: 33.3333%; height:33.3333%;"
                }else if(len == 2 || len == 4){
                    this.style = "width: 50%; height:50%;"
                }
                else{
                    this.style = "width: 100%; height:100%;"
                }
                if(len < 7) this.alignV = 'center-aligned';
                else this.alignV = null;
            }
        }

        customElements.define(MyVideo.is, MyVideo);
    </script>
</dom-module>

<style>
      html, body{
        margin: 0;
        padding: 0;
     }
</style>
<my-video video-list='[1,2,3,4,5,6,7,8,9,10]'></my-video>