Skip to content

Instantly share code, notes, and snippets.

@patocallaghan
Last active March 2, 2022 10:17
Show Gist options
  • Save patocallaghan/89de8d131d2352eadea75296aab4b550 to your computer and use it in GitHub Desktop.
Save patocallaghan/89de8d131d2352eadea75296aab4b550 to your computer and use it in GitHub Desktop.
Component Inheritance
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';
export default class extends Component {
@tracked isOpen = false;
@action
togglePanel() {
this.isOpen = !this.isOpen;
}
}
import Component from '@glimmer/component';
import AlphaPanel from './alpha-panel';
export default class extends AlphaPanel {}
body {
margin: 12px 16px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 12pt;
}
.panel {
border: 1px solid grey;
border-radius: 4px;
padding: 10px 15px;
}
.panel-header {
cursor: pointer;
}
.panel-body {
padding: 10px 0 0;
}
<AlphaPanel />
<br>
<BetaPanel />
{{!--
Component inheritance
Mixins - clobbering, not standard in JS
Testing - do I retest everything or just my differing logic?
--}}
<div class="panel">
<div
class="panel-header"
style="background: {{if this.isOpen "lightblue"}}"
{{on "click" this.togglePanel}}
>
Alpha header
</div>
{{#if this.isOpen}}
<div class="panel-body">
Alpha body
</div>
{{/if}}
</div>
<div class="panel">
<div
class="panel-header"
style="background: {{if this.isOpen "hotpink"}}"
{{on "click" this.togglePanel}}
>
Beta header
</div>
{{#if this.isOpen}}
<div class="panel-body">
Beta body
</div>
{{/if}}
</div>
{
"version": "0.17.1",
"EmberENV": {
"FEATURES": {},
"_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
"_APPLICATION_TEMPLATE_WRAPPER": true,
"_JQUERY_INTEGRATION": true
},
"options": {
"use_pods": false,
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js",
"ember": "3.18.1",
"ember-template-compiler": "3.18.1",
"ember-testing": "3.18.1"
},
"addons": {
"@glimmer/component": "1.0.0"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment