Использование Polymer 1.0 Paper-style Element

polymer polymer-1.0 paper-elements

3512 просмотра

2 ответа

247 Репутация автора

К сожалению, мне не хватает текущей документации / примеров использования стилей бумаги. Я не опытный CSS-парень (на самом деле, относительно новичок), поэтому я действительно мог бы использовать примеры того, как реализовать стилизацию Polymer 1.0 для всего приложения, чтобы использовать все его пользовательские элементы (то есть, применяя классы к любым тегам в локальные DOM этих пользовательских элементов). Я сделал это довольно легко в Polymer 0.5 с использованием основных стилей, но в 1.0 он изменился достаточно, чтобы сбить меня с толку, особенно без полных документов / примеров для работы. Также кажется, что может быть несколько способов сделать это. Мне также интересно, если бумажные стили все еще считаются экспериментальными в 1.0? Нет документов или примеров для его использования в онлайн-каталоге элементов полимера 1.0 (https://elements.polymer-project.org/elements/paper-styles ), хотя я встречал «некоторые» в его репозитории gitHub.

Автор: sinjins Источник Размещён: 16.07.2015 09:51

Ответы (2)

4 плюса

1482 Репутация автора

Решение

Одна вещь, которую вы можете сделать, когда отсутствует документация, - это поиск в других проектах, использующих код, который вы хотели бы использовать. paper-tabs, например, использует paper-styles. Вы можете увидеть пример импорта paper-styles/color.htmlв paper-tabs.html. Значение --paper-yellow-a100используется в paper-tabs.html. Ниже приведен пример использования различных переменных CSS ( var) и mixins ( @apply), определенных paper-stylesдля применения стиля к основному документу.

<!DOCTYPE html>
<html>
<head>
    <title>paper-styles Example</title>
    <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="bower_components/polymer/polymer.html" />
    <link rel="import" href="bower_components/paper-styles/paper-styles.html" />
    <style is="custom-style">
        .shadow {
            @apply(--shadow-elevation-16dp);
        }

        section {
            background-color: var(--google-blue-700);
        }

        p {
            @apply(--paper-font-display3);
        }
    </style>
</head>
<body>
    <section class="shadow">
        <h1>Example</h1>
        <p>
            This is an example using <em>paper-styles</em>.
        </p>
    </section>
</body>
</html>

Нажмите здесь, чтобы узнать больше о стилизации в Polymer 1.0.


Относительно вашего вопроса об экспериментальных стилях бумаги на домашней странице Polymer в разделе каталога говорится:

Пользовательские элементы, созданные командой Polymer, готовы к использованию в ваших приложениях.

Тем не менее, в различных местах на сайте, включая стили , есть упоминания об экспериментальных функциях.

пользовательские свойства shim, включенные в Polymer, включают экспериментальное расширение

В это время использование @applyбудет считаться экспериментальным.

На веб-сайте Polymer есть страница под названием « Экспериментальные функции и элементы», на которую можно посмотреть дополнительную информацию.

Автор: coderfin Размещён: 17.07.2015 06:58

5 плюса

3910 Репутация автора

Общее недоразумение, по-видимому, заключается в том, что, просто импортируя paper-stylesэлемент, документ оформляется в соответствии со спецификациями дизайна материала. Это не тот случай.

Вы просто получаете все переменные и миксины .

Затем вам нужно применить их к каждому элементу внутри вашего пользовательского элемента так, как вы считаете нужным.

Вот пример элемента:

<dom-module id="demo-element">
    <template>
        <style>
            :host {
                display: block;
                background: var(--paper-blue-500);
                padding: 20px;
            }

            .title { @apply(--paper-font-title); }

            button { @apply(--paper-font-button); }     
        </style>

        <h1 class="title">Hello World</h1>

        <button>Demo</button>

    </template>
    <script>
        Polymer({
            is: 'demo-element'
        });
    </script>
</dom-module>

К счастью, стили хорошо структурированы внутри всего четырех файлов, каждый из которых содержит максимум пару сотен строк.

Автор: LoveAndHappiness Размещён: 15.11.2015 12:56
32x32