semanticpixel

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: '',
  
  init() {
    this.set('tagName', '');
    this._super(...arguments);
  },
  

semanticpixel

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

semanticpixel

import Ember from 'ember';
//import styled from '../styled';
/*
export default styled.h1`
	color: #333;
  font-size: 30px;
`;
*/
export default Ember.Component.extend({

semanticpixel

import Ember from 'ember';
import MainComponent from './main-component';

export default MainComponent.extend({
  //classNameBindings: ['_className', '_className'],
  
  _componentClassName: 'first-component',
  
  init() {
    this._super(...arguments);

semanticpixel

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

semanticpixel

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  imageURL: 'img/test.png',
  styles: {
   height: '300px',
   'background-image': 'url(img/test.png)',
  }
});

semanticpixel

import Ember from 'ember';
import { computed } from '@ember/object';

export default Ember.Component.extend({
  classNameBindings: [
  	'_isEdited',
  ],
  
  _isEdited: computed('isEdited', function() {
    return this.isEdited ? 'a b c' : '';

semanticpixel

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'button',
  classNames: ['button']
});

semanticpixel

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: ['my-component', 'display-flex'],
  classNameBindings: ['showComponent::hidden'],
  isVisible: true,
  showComponent: true,
  actions: {
   	onClick() {
      console.log('Hi');

semanticpixel

import Ember from 'ember';

export default Ember.Component.extend({
  attributeBindings: [
    'ariaLabelledBy:aria-labelled-by',
  ],
  
  ariaLabelledBy: 'hello-world',
});