<fwc-main>
Installation
npm i @fortit/fwc-main
Example usage
Standard
<script type="module">
import '@fortit/fwc-main';
</script>
<fwc-main>
<h1 slot="title">${msg(`Benutzer`)}</h1>
<mwc-button
slot="primary"
label="${msg('Erstellen')}"
@click="${() => this.addDialog.open()}"
unelevated
>
</mwc-button>
<fwc-card slot="content" padded>
<div>Some content</div>
</fwc-card>
</fwc-main>
With back button
<script type="module">
import '@fortit/fwc-main';
</script>
<fwc-main back>
<h1 slot="title">${msg(`Benutzer`)}</h1>
<mwc-button
slot="primary"
label="${msg('Erstellen')}"
@click="${() => this.addDialog.open()}"
unelevated
>
</mwc-button>
<fwc-card slot="content" padded>
<div>Some content</div>
</fwc-card>
</fwc-main>
With primary and secondary button
<script type="module">
import 'fortit/fwc-main';
</script>
<fwc-main>
<h1 slot="title">${this.goal.name}</h1>
<mwc-button
slot="primary"
label="${msg('Erstellen')}"
@click="${() => this.editDialog.open(id)}"
unelevated
>
</mwc-button>
<mwc-button
slot="secondary"
label="${msg('Canvas')}"
@click="${() => this.canvasDialog.open(id)}"
>
</mwc-button>
<fwc-card slot="content" padded>
<div>Some content</div>
</fwc-card>
</fwc-main>
API
Slots
Name | Description |
---|---|
content |
Display the main content. |
primary |
Primary button at the right top. |
secondary |
Secondary button at the right top. |
title |
Display the main title. |
Properties/Attributes
Name | Type | Default | Description |
---|---|---|---|
back |
boolean |
false |
Display the back button |
Methods
None
Events
None