Skip to content

Instantly share code, notes, and snippets.

@robomalo

robomalo/components.button-row\.js

Last active February 10, 2023 22:41
Show Gist options
  • Save robomalo/195b8f39b97eaa8d8a4d420fcd577b35 to your computer and use it in GitHub Desktop.
Save robomalo/195b8f39b97eaa8d8a4d420fcd577b35 to your computer and use it in GitHub Desktop.
Download ZIP
Button Bar
Raw
components.button-row\.js
import Component from '@glimmer/component';
const ALIGN = {
start: 'button-row--start',
center: 'button-row--center',
end: 'button-row--end',
stretch: 'button-row--stretch',
flush: 'button-row--flush',
'space-around': 'button-row--space-around',
'space-between': 'button-row--space-between',
'space-evenly': 'button-row--space-evenly',
};
const SPACING = {
none: 'button-row--spacing-none',
small: 'button-row--spacing-small',
}
export default class extends Component {
get alignmentClass() {
return ALIGN[this.args.align];
}
get spacingClass() {
const { spacing = 'small' } = this.args;
return SPACING[spacing];
}
}
Raw
components.button\.js
import Component from '@glimmer/component';
export default class extends Component {
}
Raw
controllers.application\.js
import Controller from '@ember/controller';
export default class ApplicationController extends Controller {
appName = 'Ember Twiddle';
}
Raw
styles.app\.css
body {
margin: 12px 16px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 12pt;
}
.button {
border: 1px solid magenta;
border-radius: 5px;
display: inline-block;
font-weight: bold;
padding: 8px 12px;
}
.button-row {
display: flex;
justify-content: left;
margin: 8px 0;
}
.button-row--spacing-none {
column-gap: 0;
}
.button-row--spacing-small {
column-gap: 8px;
}
.button-row--center {
justify-content: center;
}
.button-row--end {
justify-content: right;
}
.button-row--stretch .button {
flex-grow: 1;
border-radius: 0;
}
.button-row--spacing-none .button + .button {
border-left: 0;
}
Raw
templates.application\.hbs
<h1>Button Bar</h1>
<h2>Start</h2>
<ButtonRow @align="start">
<Button>One</Button>
<Button>Two</Button>
<Button>Three</Button>
</ButtonRow>
<h2>Center</h2>
<ButtonRow @align="center">
<Button>One</Button>
<Button>Two</Button>
<Button>Three</Button>
</ButtonRow>
<h2>End</h2>
<ButtonRow @align="end">
<Button>One</Button>
<Button>Two</Button>
<Button>Three</Button>
</ButtonRow>
<h2>Stretch</h2>
<ButtonRow @align="stretch">
<Button>One</Button>
</ButtonRow>
<ButtonRow @align="stretch">
<Button>One</Button>
<Button>Two</Button>
</ButtonRow>
<ButtonRow @align="stretch">
<Button>One</Button>
<Button>Two</Button>
<Button>Three</Button>
</ButtonRow>
<h2>Stretch (<code>@spacing='none'</code>)</h2>
<ButtonRow @align="stretch" @spacing="none">
<Button>One</Button>
</ButtonRow>
<ButtonRow @align="stretch" @spacing="none">
<Button>One</Button>
<Button>Two</Button>
</ButtonRow>
<ButtonRow @align="stretch" @spacing="none">
<Button>One</Button>
<Button>Two</Button>
<Button>Three</Button>
</ButtonRow>
Raw
templates.components.button-row\.hbs
<div class="button-row {{this.alignmentClass}} {{this.spacingClass}}">
{{yield}}
</div>
Raw
templates.components.button\.hbs
<button type="button" class="button">
{{yield}}
</button>
Raw
twiddle\.json
{
"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