Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Ember Component - Color Boxes (Work in Progress)
import Ember from 'ember';
export default Ember.Component.extend({
classNames: ['add_color_box'],
actions: {
addColorBox() {
console.log('Append component now');
}
}
});
<button class="add_color_box-button" {{action 'addColorBox'}}>Add Color Box</button>
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle'
});
<h1>Welcome to {{appName}}</h1>
<br>
<div class="color-boxes">
{{color-box}}
{{color-box}}
{{color-box}}
</div>
{{add-color-box}}
<br>
{{outlet}}
<br>
<br>
import Ember from 'ember';
export default Ember.Component.extend({
backgroundColor: '#bada55',
classNames: ['color_box'],
actions: {
destroyBox() {
this.destroy();
}
}
});
<div class="color_box-box" style="background: {{backgroundColor}}">
{{input value=backgroundColor class="color_box-input"}}
<button class="color_box-button" {{action 'destroyBox'}}>X</button>
</div>
body {
margin: 12px 16px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 12pt;
}
.color_box {
display: inline-block;
width: 100px;
height: 100px;
border: 1px solid #ddd;
overflow: hidden;
position: relative;
}
.color_box-box {
width: 100%;
height: 100%;
}
.color_box-input {
width: 100%;
background: transparent;
border: none;
font-size: 15px;
text-align: center;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.color_box-button {
position: absolute;
top: 5px;
right: 5px;
}
{
"version": "0.6.3",
"EmberENV": {
"FEATURES": {}
},
"options": {
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
"ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.4.1/ember.debug.js",
"ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.4.0/ember-data.js",
"ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.4.1/ember-template-compiler.js"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment