Skip to content

Instantly share code, notes, and snippets.

@GavinJoyce
Last active March 2, 2020 15:22
Show Gist options
  • Save GavinJoyce/18a6425ad00589be5b2753b8ea831292 to your computer and use it in GitHub Desktop.
Save GavinJoyce/18a6425ad00589be5b2753b8ea831292 to your computer and use it in GitHub Desktop.
Contextual components
<Modal
@title="This is the title"
@body="This is the <i>body</i>"
/>
<Modal as |modal|>
<modal.Title as |title|>
This is the <i>title</i>!
</modal.Title>
<modal.Body as |body|>
This is the <i>body</i>!
</modal.Body>
</Modal>
<div class="bg-yellow-200 p-4">
{{#if hasBlock}}
{{yield}} {{@name}}
{{else}}
{{@body}} {{@name}}
{{/if}}
</div>
<div class="bg-orange-200 p-4">
{{#if hasBlock}}
{{yield}}
{{else}}
{{@title}}
{{/if}}
</div>
<div class="bg-green-200 p-2 m-2">
<div class="bg-blue-200">
{{#if @title}}
<ModalHeader @title={{@title}} />
{{else}}
{{yield (hash
Title=(component 'modal-header' title=title)
)}}
{{/if}}
{{#if @body}}
<ModalBody @body={{@body}} @name="Alex" />
{{else}}
{{yield (hash
Body=(component 'modal-body' body=body name="Alex")
)}}
{{/if}}
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment