DOCSEARCHbyAlgolia
Submit Docs

Framework7 Svelte Components

website·Indexed 36 days ago

https://framework7.io

Documentation and implementation examples for Framework7 Svelte components. Includes guides for UI elements such as Navbar, List View, Tabs, Sheet Modal, Floating Action Button, and various form inputs, detailing available properties, events, and slots for building Svelte applications.

Tokens
446.7K
Snippets
2.2K
Records
3K
Agent score
72%

What's inside Framework7

  1. Overview of the Navbar Svelte Component

    The Navbar Svelte component provides a fixed area at the top of a screen (when using Fixed or Through layout types) used to display the page title and navigation elements. It is the Svelte implementation of the standard Framework7 Navbar.

  2. Overview of Framework7 Vue Input Components

    Framework7 provides specialized Vue components for creating form layouts. These components are built upon the List View system (using f7-list and f7-list-item) but include specific input-focused elements for data entry.

  3. Overview of the Link Svelte Component

    The Link component in Framework7 Svelte is the primary tool for creating navigation links, triggering custom actions, switching tabs, and opening or closing panels.

  4. Overview of the Photo Browser Vue Component

    The f7-photo-browser component is used to display a collection of photos or images. It supports optional zooming and panning. Unlike many other components, the Photo Browser Vue component does not render direct HTML output; instead, it is used to create and control a JavaScript Photo Browser instance within a Vue component.

  6. Overview of the TextEditor Svelte Component

    The TextEditor Svelte component is a wrapper for the Framework7 Text Editor, providing a rich text editing interface within Svelte applications.

  7. Overview of Framework7 Vue

    Framework7 Vue allows developers to build mobile applications by combining the power of Vue.js (component syntax, structured data, and data bindings) with the comprehensive mobile UI components of Framework7.
    <f7-app>

  <f7-panel left cover dark>
    <f7-navbar title="Left Panel" />
    <f7-block>Left panel content</f7-block>
  </f7-panel>

  <f7-panel right reveal>
    <f7-navbar title="Right Panel" />
    <f7-block>Right panel content</f7-block>
  </f7-panel>

  <f7-view main>
    <f7-page>
      <f7-navbar title="My App" />
      <f7-block>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
      </f7-block>
      <f7-block>
        <f7-segmented>
          <f7-button panel-open="left">Left Panel</f7-button>
          <f7-button panel-open="right">Right Panel</f7-button>
        </f7-segmented>
      </f7-block>
      <f7-list>
        <f7-list-item
          v-for="n in 3"
          :key="n"
          :title="`Item ${n}`"
        />
      </f7-list>
    </f7-page>
  </f7-view>

</f7-app>

  8. Overview of Messagebar Vue components

    The Messagebar Vue component provides a set of elements to build a messaging interface in Framework7. The available components include:

    • f7-messagebar: The main messagebar container.
    • f7-messagebar-sheet: The messagebar sheet element.
    • f7-messagebar-sheet-image: An image item within a messagebar sheet.
    • f7-messagebar-sheet-item: A general item within a messagebar sheet.
    • f7-messagebar-attachments: A container for messagebar attachments.
    • f7-messagebar-attachment: A single attachment element within the attachments container.

  9. Overview of Framework7 Svelte

    Framework7 Svelte allows developers to use Svelte's component-based syntax, structured data, and data bindings to build mobile applications using the Framework7 UI library. It provides a set of Svelte components that wrap Framework7's core functionality, enabling a more declarative approach to building mobile interfaces.
    <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...</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>

  10. Overview of the Link React Component

    The Link component in Framework7 React is the primary tool for creating navigation links, triggering custom actions, switching tabs, and controlling the open/close state of panels.

  11. Overview of AreaChart Svelte Component

    The AreaChart component in Framework7 for Svelte is used to create responsive, SVG-based area charts for data visualization within a mobile application interface.

  12. Overview of Framework7 Statusbar component

    The Statusbar component is a wrapper around the cordova-plugin-statusbar. It allows developers to customize the app's status bar behavior and appearance. This functionality is only available when the app is running in a Cordova or Capacitor environment with the cordova-plugin-statusbar plugin installed.