Bottom Sheet

components.bottom-sheet.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: ['bottom-sheet'],
  
  title: 'Title',
});

components.fake-content.js

import Ember from 'ember';

export default Ember.Component.extend({
});

controllers.application.js

import Ember from 'ember';

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

styles.app.css

* {
  padding: 0;
  margin: 0;
}

li {
  list-style: none;
  background: #F0E68C;
  margin-bottom: 5px;
  min-height: 45px;
}

button {
  background: white;
  color: orange;
  border: 1px solid orange;
  width: 100%;
  padding: 10px 0;
}



body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
  width: 375px;
  height: 812px;
  background: #FAF0E6;
}

.bottom-sheet {
  box-sizing: border-box;
  border: 1px solid #ccc;
  padding-bottom: 30px;
/*   background: #DCDCDC; */
}

.header {
/*   display: flex; */
  background: #FFE4E1;
  padding: 15px 0;
/*   justify-content: center; */
}

.header > .title {
	text-align: center;

}

.action {
  width: 24px;
  height: 24px;
  background: blue;
  position: relative;
}

.content-wrapper {
  background: #F0FFFF;
  padding: 0 30px;
}

.cancel-section {
  margin-top: 10px;
  padding: 0 30px;
}

templates.application.hbs

{{bottom-sheet title="Tools" componentString="fake-content"}}

templates.components.bottom-sheet.hbs

{{yield}}

<div class="header">
	<div class="title">{{title}}</div>
</div>

<div class="content-wrapper">{{component componentString data}}</div>


<div class="cancel-section">
<button>Cancel</button>
</div>

templates.components.fake-content.hbs

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>

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"
  }
}