1. Advisor
  2. @polymer/polymer
  3. functions
  4. @polymer/polymer.PolymerElement
View all @polymer/polymer analysis

How to use the @polymer/polymer.PolymerElement function in @polymer/polymer

To help you get started, we’ve selected a few @polymer/polymer examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github nodecg / nodecg / src / dashboard / elements / mixer / ncg-mixer.js View on Github external
import './ncg-sounds.js';
import * as Polymer from '@polymer/polymer';
class NcgMixer extends Polymer.PolymerElement {
	static get template() {
		return Polymer.html`
		<style>
			:host {
				white-space: nowrap;
				width: 100%;
				max-width: 600px;
				@apply --layout-vertical;
				@apply --layout-stretch;
			}

			#mixer-masterCard {
				background-color: #525F78;
				border-bottom: 5px solid var(--nodecg-brand-blue);
				margin-bottom: 16px;
			}</style>
github nodecg / nodecg / src / dashboard / elements / graphics / ncg-graphics-bundle.js View on Github external
import '@polymer/paper-button/paper-button.js';
import '@polymer/paper-dialog/paper-dialog.js';
import './ncg-graphic.js';
import * as Polymer from '@polymer/polymer';
import {MutableData} from '@polymer/polymer/lib/mixins/mutable-data';

/**
 * @customElement
 * @polymer
 * @appliesMixin MutableData
 */
class NcgGraphicsBundle extends MutableData(Polymer.PolymerElement) {
	static get template() {
		return Polymer.html`
		<style>
			:host {
				@apply --layout-flex-none;
				@apply --layout-vertical;
				@apply --shadow-elevation-2dp;
				background: #2F3A4F;
				color: white;
				margin-bottom: 20px;
			}

			#titleBar {
				@apply --layout-horizontal;
				background-color: #525F78;
				border-bottom: 5px solid var(--nodecg-brand-blue);</style>
github nodecg / nodecg / src / dashboard / elements / graphics / ncg-graphic-instance-diff.js View on Github external
import '@polymer/iron-icons/device-icons.js';
import '@polymer/iron-icons/iron-icons.js';
import '@polymer/paper-icon-button/paper-icon-button.js';
import * as Polymer from '@polymer/polymer';
import {MutableData} from '@polymer/polymer/lib/mixins/mutable-data';
let bundlesRep;

/**
 * @customElement
 * @polymer
 * @appliesMixin MutableData
 */
class NcgGraphicInstanceDiff extends MutableData(Polymer.PolymerElement) {
	static get template() {
		return Polymer.html`
		<style>
			:host {
				@apply --layout-center-center;
				@apply --layout-horizontal;
				background: #212121;
				font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace;
				font-size: 12px;
				max-width: 100%;
				padding: 0.5em 1em;
				padding-left: 0;
				position: absolute;
				white-space: normal;
			}
</style>
github nodecg / nodecg / src / dashboard / elements / graphics / ncg-graphic-instance.js View on Github external
import {MutableData} from '@polymer/polymer/lib/mixins/mutable-data';
const pulseElement = document.createElement('div');
setInterval(() =&gt; {
	pulseElement.dispatchEvent(new CustomEvent('pulse', {
		detail: {
			timestamp: Date.now()
		}
	}));
}, 1000);

/**
 * @customElement
 * @polymer
 * @appliesMixin MutableData
 */
class NcgGraphicInstance extends MutableData(Polymer.PolymerElement) {
	static get template() {
		return Polymer.html`
		<style>
			:host {
				@apply --layout-flex-none;
				@apply --layout-horizontal;
				box-sizing: border-box;
				font-size: 18px;
				font-style: normal;
				font-weight: 500;
				height: 35px;
				line-height: normal;
				margin-bottom: 5px;
				margin-left: 8px;
				margin-right: 8px;
				position: relative;</style>
github nodecg / nodecg / src / dashboard / elements / settings / ncg-settings.js View on Github external
import '@polymer/iron-flex-layout/iron-flex-layout.js';
import '@polymer/iron-icons/iron-icons.js';
import '@polymer/paper-button/paper-button.js';
import '@polymer/paper-card/paper-card.js';
import '@polymer/paper-dialog/paper-dialog.js';
import '@polymer/paper-toast/paper-toast.js';
import * as Polymer from '@polymer/polymer';
class NcgSettings extends Polymer.PolymerElement {
	static get template() {
		return Polymer.html`
		<style>
			:host {
				@apply --layout-vertical;
				max-width: 600px;
				width: 100%;
			}

			.card-actions {
				padding: 0;
				padding-top: 8px;
				@apply --layout-horizontal;
				@apply --layout-center;
				@apply --layout-end-justified;
			}</style>
github nodecg / nodecg / src / dashboard / elements / assets / ncg-asset-file.js View on Github external
import '@polymer/iron-flex-layout/iron-flex-layout.js';
import '@polymer/iron-icons/iron-icons.js';
import '@polymer/paper-button/paper-button.js';
import '@polymer/paper-spinner/paper-spinner-lite.js';
import * as Polymer from '@polymer/polymer';
class NcgAssetFile extends Polymer.PolymerElement {
	static get template() {
		return Polymer.html`
		<style>
			:host {
				@apply --layout-center;
				@apply --layout-horizontal;
				@apply --layout-justified;
				margin: 4px 0;
			}

			#name {
				line-height: 24px;
				overflow: hidden;
				text-overflow: ellipsis;
				text-transform: none;
			}</style>
github nodecg / nodecg / src / dashboard / elements / ui / ui-select.js View on Github external
import * as Polymer from '@polymer/polymer';
class UiSelect extends Polymer.PolymerElement {
	static get template() {
		return Polymer.html`
        <style>
			#label {
				color: #a9a9a9;
				cursor: default;
				left: 12px;
				pointer-events: none;
				position: absolute;
				top: 11px;
				-moz-user-select: none;
				-ms-user-select: none;
				-webkit-user-select: none;
				user-select: none;
			}
</style>
github nodecg / nodecg / src / dashboard / elements / assets / ncg-asset-category.js View on Github external
import '@polymer/iron-flex-layout/iron-flex-layout.js';
import '@polymer/iron-icons/iron-icons.js';
import '@polymer/paper-card/paper-card.js';
import '@polymer/paper-dialog-scrollable/paper-dialog-scrollable.js';
import '@polymer/paper-dialog/paper-dialog.js';
import '@polymer/paper-toast/paper-toast.js';
import '@vaadin/vaadin-upload/vaadin-upload.js';
import '../util-scrollable.js';
import './ncg-asset-file.js';
import * as Polymer from '@polymer/polymer';
import {MutableData} from '@polymer/polymer/lib/mixins/mutable-data';
class NcgAssetCategory extends MutableData(Polymer.PolymerElement) {
	static get template() {
		return Polymer.html`
		<style>
			:host {
				display: block;
				width: 100%;
				box-sizing: border-box;
			}

			#add {
				display: flex;
				align-items: center;
			}

			paper-card {
				width: 100%;</style>
github nodecg / nodecg / src / dashboard / elements / ncg-workspace.js View on Github external
import '@polymer/paper-spinner/paper-spinner.js';
import './ncg-dashboard-panel.js';
import {afterNextRender} from '@polymer/polymer/lib/utils/render-status.js';
import {Debouncer} from '@polymer/polymer/lib/utils/debounce.js';
import {timeOut} from '@polymer/polymer/lib/utils/async.js';
import * as Polymer from '@polymer/polymer';
class NcgWorkspace extends Polymer.PolymerElement {
	static get template() {
		return Polymer.html`
		<style>
			:host {
				display: block;
				width: 100%;
				height: 100%;
				pointer-events: none;
				box-sizing: border-box;
			}

			#panels {
				transform: translateY(40px);
				opacity: 0;
				transition: opacity 500ms ease, transform 600ms ease-out;
			}</style>
github nodecg / nodecg / src / dashboard / elements / ncg-dashboard.js View on Github external
import '@polymer/paper-icon-button/paper-icon-button.js';
import '@polymer/paper-item/paper-icon-item.js';
import '@polymer/paper-tabs/paper-tabs.js';
import '@polymer/paper-toast/paper-toast.js';
import '@polymer/polymer/lib/elements/custom-style.js';
import {Debouncer} from '@polymer/polymer/lib/utils/debounce.js';
import * as Polymer from '@polymer/polymer';
import '../css/nodecg-theme.js';
import './assets/ncg-assets.js';
import './graphics/ncg-graphics.js';
import './mixer/ncg-mixer.js';
import './ncg-dialog.js';
import './ncg-workspace.js';
import './settings/ncg-settings.js';
import {timeOut} from '@polymer/polymer/lib/utils/async.js';
class NcgDashboard extends Polymer.PolymerElement {
	static get template() {
		return Polymer.html`
		<style>
			:host {
				-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
				@apply --layout-fullbleed;
				overflow: hidden;
			}

			app-drawer-layout,
			app-header-layout {
				height: 100%;
			}

			app-header {
				background-color: #2F3A4F;</style>

@polymer/polymer

The Polymer library makes it easy to create your own web components. Give your element some markup and properties, and then use it on a site. Polymer provides features like dynamic templates and data binding to reduce the amount of boilerplate you need to

GitHub
BSD-3-Clause
Latest version published 3 months ago

Package Health Score

90 / 100
Full package analysis

Popular @polymer/polymer functions

Similar packages