<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