Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import { Component, State, EventEmitter, Event, Prop, h } from '@stencil/core';
- @Component({
- tag: 'my-accordion',
- styleUrl: 'my-accordion.scss',
- shadow: true
- })
- export class MyComponent {
- @State() toggle: boolean = false;
- @Event() onToggle: EventEmitter;
- @Prop() label: string;
- @Prop() description: string;
- @Prop() width: string;
- @Prop() color: string;
- toggleComponent() {
- this.toggle = !this.toggle;
- this.onToggle.emit({ visible: this.toggle });
- }
- render() {
- return (
- <div>
- <button class="accordion"
- style={{
- width: this.width,
- backgroundColor: this.color,
- }}
- onClick={() => this.toggleComponent()}>
- {this.label}
- {this.toggle ? <span>▲</span> : <span>▼</span>}
- </button>
- <div class={`content-box ${this.toggle ? 'open' : 'close'}`}
- style={{width: this.width}}>
- <p>{this.description}</p>
- </div>
- </div>
- )
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement