Веб-компоненты - Как стилизовать перекрывающийся компонент - чтобы выглядеть как выпадающий - PullRequest
Новая
       6

Веб-компоненты - Как стилизовать перекрывающийся компонент - чтобы выглядеть как выпадающий

0 голосов
/ 14 мая 2018

Я новичок в веб-компонентах.

Я пытаюсь создать веб-компонент, который выглядит как «выпадающий / выберите».

когда элемент закрыт, но видим (не развернут), я бы хотел, чтобы он отображался на экране в обычном режиме веб-страницы. Под ним находится текст, который не является частью элемента управления.

Когда элемент управления развернут, развернутая часть должна охватывать (перейти выше) текст, отображаемый под элементом управления.

На практике текст выталкивается вниз. Изменение css элемента управления помещает визуальную часть поверх текста, который должен быть ниже.

Буду признателен за идеи, как решить проблему создания элемента управления, чтобы одна его часть находилась в «потоке» веб-страницы, а другая часть «плавала» над веб-страницей и находилась относительно визуальная часть.

Следующий код является веб-компонентом: drop-down.html

    <template id="drop-down">
    <style>
        .row {
            z-index: 5;
            position:relative;
            background-color: white;
        }
        .drop-down {
            z-index: 5;
            position: relative;
            background-color: red;
        }
    </style>
    <div class="drop-down">
        <div class="row">
            <button onclick="addListElement(this);">+</button>
            <input type="text" placeholder="Enter List Item">
        </div>
    </div>
</template>

<template id="list-item">
    <div class="row">
        <button onclick="addListElement(this);">+</button>
        <input type="text" placeholder="Enter List Item">
    </div>
</template>

<script>
    let ddTemplate = document.currentScript.ownerDocument.querySelector('#drop-down');
    let liTemplate = document.currentScript.ownerDocument.querySelector('#list-item');

    customElements.define('drop-down', class extends HTMLElement {
        constructor() {
            super(); // always call super() first in the ctor.
            let shadowRoot = this.attachShadow( {mode: 'open'} );
            shadowRoot.appendChild( ddTemplate.content.cloneNode( true ));
        }
     });

    function addListElement( el ) {
        var parent = el.parentNode;
        parent.parentNode.appendChild(liTemplate.content.cloneNode(true));
    }
</script>

HTML-код, который проверяет следующее: testDropDown.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Test Drop-Down</title>

        <link rel="import" href="./drop-down/drop-down.html">
    </head>
    <body>
        <drop-down>My Drop Down</drop-down>
        <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do<br/>
        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim<br/>
        ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut<br/>
        aliquip ex ea commodo consequat. Duis aute irure dolor in<br/>
        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla<br/>
        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in<br/>
        culpa qui officia deserunt mollit anim id est laborum."
        </p>
    </body>
</html>
...