Использование Polymer 1.0 Paper-style Element
3512 просмотра
2 ответа
К сожалению, мне не хватает текущей документации / примеров использования стилей бумаги. Я не опытный CSS-парень (на самом деле, относительно новичок), поэтому я действительно мог бы использовать примеры того, как реализовать стилизацию Polymer 1.0 для всего приложения, чтобы использовать все его пользовательские элементы (то есть, применяя классы к любым тегам в локальные DOM этих пользовательских элементов). Я сделал это довольно легко в Polymer 0.5 с использованием основных стилей, но в 1.0 он изменился достаточно, чтобы сбить меня с толку, особенно без полных документов / примеров для работы. Также кажется, что может быть несколько способов сделать это. Мне также интересно, если бумажные стили все еще считаются экспериментальными в 1.0? Нет документов или примеров для его использования в онлайн-каталоге элементов полимера 1.0 (https://elements.polymer-project.org/elements/paper-styles ), хотя я встречал «некоторые» в его репозитории gitHub.
Автор: sinjins Источник Размещён: 12.11.2019 09:52Ответы (2)
4 плюса
Одна вещь, которую вы можете сделать, когда отсутствует документация, - это поиск в других проектах, использующих код, который вы хотели бы использовать. 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:585 плюса
Общее недоразумение, по-видимому, заключается в том, что, просто импортируя 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Вопросы из категории :
- polymer ContentEditable в Shadow DOM?
- polymer Условно добавить класс CSS в полимер
- polymer Переменная ширина для вкладок из полимерной бумаги
- polymer Регистрация пользовательского элемента из расширения Chrome
- polymer Как запросить элементы DOM элемента с помощью Polymer
- polymer С iron-ajax, как читать заголовки ответа?
- polymer-1.0 Как сфокусировать бумажный ввод с помощью Polymer 1.0?
- polymer-1.0 Использование Polymer 1.0 Paper-style Element
- polymer-1.0 Полимерное обновление массива подвойств по модели
- polymer-1.0 Не удается найти исполняемый файл Python "/path/to/executable/python2.7", вы можете установить переменную env PYTHON
- paper-elements Бумага-слайдер Styling Polymer
- paper-elements Панель заголовка из полимерной бумаги не отображает содержимое на панели лотка для бумаги
- paper-elements how and when to set animationConfig on a paper-dialog
- paper-elements Полимер с помощью кнопки javascript
- paper-elements Uncaught TypeError paper-dialog polymer