Skip to content

Instantly share code, notes, and snippets.

Stefan Nieuwenhuis StefanNieuwenhuis

Block or report user

Report or block StefanNieuwenhuis

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View index.html
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">
<title>Stencil Component Starter</title>
<script src="/build/mycomponent.js"></script>
</head>
View my-component.css
.overlay {
opacity: 0;
visibility: hidden;
position:fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
View my-component.e2e.ts
import { newE2EPage } from '@stencil/core/testing';
describe('my-component', () => {
let page, component, element;
beforeEach(async () => {
page = await newE2EPage();
await page.setContent('<my-component></my-component>');
component = await page.find('my-component');
View my-component.tsx
import { Component, Prop } from '@stencil/core';
@Component({
tag: 'my-component',
styleUrl: 'my-component.css',
shadow: true
})
export class MyComponent {
@Prop() open = false;
@Prop() transparent = false;
View my-component.e2e.ts
import { newE2EPage } from '@stencil/core/testing';
describe('my-component', () => {
let page, component, element;
beforeEach(async () => {
page = await newE2EPage();
await page.setContent('<my-component></my-component>');
component = await page.find('my-component');
View my-component.tsx
import { Component } from '@stencil/core';
@Component({
tag: 'my-component',
styleUrl: 'my-component.css',
shadow: true
})
export class MyComponent {
render() {
return <div class="overlay">
View my-component.e2e.ts
import { newE2EPage } from '@stencil/core/testing';
describe('my-component', () => {
let page, component, element;
beforeEach(async () => {
page = await newE2EPage();
await page.setContent('<my-component></my-component>');
component = await page.find('my-component');
View stenciljs-modal-overlay__styling.css
.modal {
display:none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.2);
View stenciljs-modal-overlay__render-template.tsx
import { Component } from '@stencil/core';
@Component({
tag: 'my-component',
styleUrl: 'my-component.css',
shadow: true
})
export class MyComponent {
@Prop({mutable: true}) isActive = false;
View stenciljs-modal-overlay__logic-step1.tsx
import { Component, Prop } from '@stencil/core';
@Component({
tag: 'my-component',
styleUrl: 'my-component.css',
shadow: true
})
export class MyComponent {
@Prop({mutable: true}) isActive = false;
You can’t perform that action at this time.