AngleBracket Yield

components.blank-template.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: ''
});

components.close-icon.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: ''
});

components.fancy-toolbar.js

import Component from '@ember/component';

export default Component.extend({
  classNames: ['toolbar'],
  attributeBindings: ['role'],
  role: 'toolbar',
  foo: 'hi',

  // This should be a passed in action
  closeAction() {
    console.log(this);
    console.warn('you did not pass in an action `closeAction` to `prodicle-toolbar`');
  }
});

controllers.application.js

import Ember from 'ember';

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

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

.toolbar {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 100;
  background: #fff;
  box-shadow: 0 -12px 16px -8px rgba(0,0,0,0.12), 0 0 8px 1px rgba(0,0,0,0.06), 0 -7px 8px -8px rgba(0,0,0,0.08);

  @media (max-width: 575px) {
    padding-right: 16px;
    padding-left: 16px;
    height: 64px;
  }

  @media (min-width: 576px) {
    height: 80px;
  }

  @media (min-width: 576px) and (max-width: 1023px) {
    padding-right: 24px;
    padding-left: 24px;
  }

  @media (min-width: 1024px) {
    padding-right: 48px;
    padding-left: 48px;
  }  
}

.toolbar__context,
.toolbar__actions {
  display: flex;
  align-items: center;
}

.toolbar__context__text {
  margin-left: 16px;
}

.toolbar__action:not(:last-of-type) {
  margin-right: 16px;
}

.button-filled {
  display: inline-flex;
  align-items: center;
  color: #fff;
  line-height: 1;
  font-size: 1.5rem;
  background-color: #0e6df3;
  border: 1px solid #0e6df3;
  border-radius: 4px;
  transition: .3s ease background-color;
  white-space: nowrap;
}

.button-filled:hover,
.button-filled:focus {
  background-color: #0b56bf;
  border-color: #0b56bf;
  }
}

templates.application.hbs

<h1>Check out this sweet toolbar</h1>
<h2>(It's at the bottom of the page)</h2>
<br>
<br>
{{outlet}}
<br>
<br>
<FancyToolbar as |toolbar|>
	<toolbar.context>
  	<p class="toolbar__context__text">Hi there</p>
  </toolbar.context>
  
  <toolbar.actions>
  	<button class="button-filled toolbar__action">Click me</button>
  </toolbar.actions>
</FancyToolbar>

templates.components.blank-template.hbs

{{yield}}

templates.components.close-icon.hbs

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" version="1.1" height="24px" viewBox="0 0 64 64" enable-background="new 0 0 64 64">
  <g>
    <path fill="#006DF0" d="M28.941,31.786L0.613,60.114c-0.787,0.787-0.787,2.062,0,2.849c0.393,0.394,0.909,0.59,1.424,0.59   c0.516,0,1.031-0.196,1.424-0.59l28.541-28.541l28.541,28.541c0.394,0.394,0.909,0.59,1.424,0.59c0.515,0,1.031-0.196,1.424-0.59   c0.787-0.787,0.787-2.062,0-2.849L35.064,31.786L63.41,3.438c0.787-0.787,0.787-2.062,0-2.849c-0.787-0.786-2.062-0.786-2.848,0   L32.003,29.15L3.441,0.59c-0.787-0.786-2.061-0.786-2.848,0c-0.787,0.787-0.787,2.062,0,2.849L28.941,31.786z"/>
  </g>
</svg>

templates.components.fancy-toolbar.hbs

<div class="toolbar__context">
	{{close-icon}}
  {{yield (hash context="blank-template")}}
</div>

<div class="toolbar__actions">
  {{yield (hash actions="blank-template")}}
</div>

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.4.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3"
  },
  "addons": {
    "ember-data": "3.4.2"
  }
}