Framework7 Svelte

https://framework7.io/svelte

Admin

Framework7 Svelte brings component-syntax, structured data, and data bindings to Framework7 using...

Tokens:367

Snippets:2

Trust Score:9.2

Update:5 months ago

Show doc for...

Tokens:

Raw

### Framework7 Svelte App Structure

Source: https://framework7.io/svelte

This is a basic Framework7 Svelte application structure. It includes panels, views, pages, navigation bars, blocks, segmented controls, and lists with dynamic item generation.

```svelte
<App>

  <Panel left cover dark>
    <Navbar title="Left Panel" />
    <Block>Left panel content</Block>
  </Panel>

  <Panel right reveal>
    <Navbar title="Right Panel" />
    <Block>Right panel content</Block>
  </Panel>

  <View main>
    <Page>
      <Navbar title="My App" />
      <Block>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend, elit vitae scelerisque vulputate, tortor velit tempus dui, et luctus tellus justo nec velit. Duis scelerisque in tellus et pretium. Ut faucibus fringilla risus, ut dapibus nunc vehicula sit amet. Donec posuere nunc non fermentum commodo.</p>
      </Block>
      <Block>
        <Segmented>
          <Button panelOpen="left">Left Panel</Button>
          <Button panelOpen="right">Right Panel</Button>
        </Segmented>
      </Block>
      <List>
        {#each [1, 2, 3] as n}
          <ListItem title={`Item ${n}`} />
        {/each}
      </List>
    </Page>
  </View>

</App>
         _square_on_square_
        _checkmark_alt_
      
```

Tokens:

Raw