Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save ajohnston-skedulo/82c4a75e970968df6ae2d3b04ce663fe to your computer and use it in GitHub Desktop.
Save ajohnston-skedulo/82c4a75e970968df6ae2d3b04ce663fe to your computer and use it in GitHub Desktop.
Low Code Ep 6 - Adding Tabs
{% block body %}
<sp-tabs>
<sp-tab slot="tabs" name="details">Details</sp-tab>
<sp-tab slot="tabs" name="aircraft-parts">Aircraft Parts</sp-tab>
<sp-tab slot="tabs" name="fleet-assignments">Fleet Assignments</sp-tab>
<sp-tab-panel name="details" shown>
<sp-responsive-columns>
<div>
<sp-heading size="base" style="margin-bottom: var(--sp-spacing-4)">Description</sp-heading>
<sp-record-row>
<span slot="label">Hyperspace</span>
<platform-component package-name="recordpage" name="RecordFieldView" field-name="Hyperspace"></platform-component>
</sp-record-row>
<sp-record-row>
<span slot="label"># of Seats</span>
<platform-component package-name="recordpage" name="RecordFieldView" field-name="Seats"></platform-component>
</sp-record-row>
<sp-record-row>
<span slot="label">Release Date</span>
<platform-component package-name="recordpage" name="RecordFieldView" field-name="ReleaseDate"></platform-component>
</sp-record-row>
<sp-record-row>
<span slot="label">Last Service Date</span>
<platform-component package-name="recordpage" name="RecordFieldView" field-name="LastService"></platform-component>
</sp-record-row>
</div>
<div>
<sp-record-row>
<span slot="label">Branding</span>
<platform-component package-name="recordpage" name="RecordTemplate"
template="{{ '{% if Branding == "Rebellion" %}
<img src="https://starwarsblog.starwars.com/wp-content/uploads/2015/11/rebel-symbol-536x536.jpg" alt="Rebellion" width="100" height="100">
{% else %}
<img src="https://starwarsblog.starwars.com/wp-content/uploads/2016/02/imperialseal-536x536.jpg" alt="Empire" width="100" height="100">
{% endif %}' }}"></platform-component>
</sp-record-row>
<sp-record-row>
<span slot="label">Image</span>
<platform-component package-name="recordpage" name="RecordTemplate" template="{{ '<img src="{{Image}}" alt="{{name}}" width="200" height="200">' }}"></platform-component>
</sp-record-row>
</div>
</sp-responsive-columns>
</sp-tab-panel>
<sp-tab-panel name="aircraft-parts">
</sp-tab-panel>
<sp-tab-panel name="fleet-assignments">
</sp-tab-panel>
</sp-tabs>
{% endblock body %}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment