### Installing Framework7 via NPM

Source: https://github.com/sksar/framework7-docs/blob/main/docs/docs/installation.html

This command installs the Framework7 library using npm, the Node.js package manager. It's the recommended method for manual installation, fetching the latest stable version from the npm registry.

```Shell
$ npm install framework7
```

--------------------------------

### Installing a Framework7 Plugin (JavaScript)

Source: https://github.com/sksar/framework7-docs/blob/main/docs/docs/plugins-api.html

This code demonstrates how to install a Framework7 plugin using the `.use()` method. It's crucial to install the plugin on the `Framework7` class before any instance of `Framework7` is initialized to ensure the plugin's functionality is available from the start.

```JavaScript
Framework7.use(myPlugin);
```

--------------------------------

### Installing Framework7 Project Dependencies (Bash)

Source: https://github.com/sksar/framework7-docs/blob/main/docs/svelte/kitchen-sink.html

This command installs all required Node.js dependencies for the Framework7 project, as specified in the package.json file. It must be executed within the root directory of the downloaded Framework7 repository.

```bash
npm install
```

--------------------------------

### Launching Framework7 Svelte Kitchen Sink (Bash)

Source: https://github.com/sksar/framework7-docs/blob/main/docs/svelte/kitchen-sink.html

This command starts the Framework7 Svelte Kitchen Sink application. It executes the 'svelte' script defined in the project's package.json, typically launching a development server.

```bash
npm run svelte
```

--------------------------------

### Installing Framework7 CLI Globally

Source: https://github.com/sksar/framework7-docs/blob/main/docs/cli/installation.html

This command installs the Framework7 CLI globally, allowing you to create and manage Framework7 projects from your command line. `sudo` privileges might be necessary for successful installation.

```Shell
npm install -g framework7-cli
```

--------------------------------

### Installing Framework7-React Plugin via NPM (Shell)

Source: https://github.com/sksar/framework7-docs/blob/main/docs/react/installation.html

This command installs the Framework7-React plugin, a crucial dependency for integrating Framework7 with React applications. It uses npm, the Node.js package manager, to fetch and install the package from the npm registry.

```shell
npm install framework7-react
```

--------------------------------

### Installing Gulp Globally (Bash)

Source: https://github.com/sksar/framework7-docs/blob/main/docs/svelte/kitchen-sink.html

This command installs Gulp globally on your system using npm, which is a prerequisite for building and running Framework7 projects. It ensures Gulp's command-line interface is available system-wide.

```bash
npm install --global gulp
```

--------------------------------

### Installing Project Dependencies (Shell)

Source: https://github.com/sksar/framework7-docs/blob/main/docs/vue/kitchen-sink.html

Installs all required project dependencies listed in the 'package.json' file for the Framework7 repository. This command should be executed in the root directory of the downloaded repository.

```Shell
npm install
```

--------------------------------

### Integrating Framework7 Store with Main App Component - Vue.js

Source: https://github.com/sksar/framework7-docs/blob/main/docs/vue/store.html

This example demonstrates how to integrate the created Framework7 store into the main application component. It shows passing the `store` instance as a prop to the `<f7-app>` component in the template and importing/returning the store in the `<script>` section using the Vue 3 `setup` function.

```HTML
<template>
  <!-- pass store to the App's "store" prop -->
  <f7-app store={store}>
    <f7-view main>
      <!-- ... -->
    </f7-view>
  </f7-app>
</template>
<script>
// import our store
import store from 'path/to/store.js';

export default {
  setup() {
    return {
      store,
    }
  }
}
</script>
```

--------------------------------

### Installing Node.js Dependencies for Framework7 Kitchen Sink

Source: https://github.com/sksar/framework7-docs/blob/main/docs/docs/kitchen-sink.html

This command installs all required Node.js dependencies for the Framework7 project. It must be executed in the root directory of the downloaded Framework7 repository after Node.js is installed, ensuring all necessary packages are available for development.

```Shell
$ npm install
```

--------------------------------

### Installing Project Dependencies via npm (Shell)

Source: https://github.com/sksar/framework7-docs/blob/main/docs/react/kitchen-sink.html

This command installs all the required project dependencies listed in the 'package.json' file within the Framework7 repository. It must be executed from the root directory of the downloaded repository.

```Shell
npm install
```

--------------------------------

### Basic HTML Structure for Framework7 Picker Examples

Source: https://github.com/sksar/framework7-docs/blob/main/docs/docs/picker.html

This HTML template provides the foundational markup for integrating Framework7 Picker components. It includes a page structure with a navbar, content block, and list items containing input fields configured as `readonly` to be associated with Picker instances, demonstrating setups for single and multi-value pickers.

```HTML
<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="title">Picker</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block">
        <p>Picker is a powerful component that allows you to create custom overlay pickers which looks like native
          picker.</p>
        <p>Picker could be used as inline component or as overlay. Overlay Picker will be automatically converted to
          Popover on tablets (iPad).</p>
      </div>
      <div class="block-title">Picker with single value</div>
      <div class="list list-strong-ios list-outline-ios">
        <ul>
          <li>
            <div class="item-content item-input">
              <div class="item-inner">
                <div class="item-input-wrap">
                  <input type="text" placeholder="Your iOS device" readonly="readonly" id="demo-picker-device" />
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="block-title">2 values and 3d-rotate effect</div>
      <div class="list list-strong-ios list-outline-ios">
        <ul>
          <li>
            <div class="item-content item-input">
              <div class="item-inner">
                <div class="item-input-wrap">
                  <input type="text" placeholder="Describe yourself" readonly="readonly" id="demo-picker-describe" />
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="block-title">Dependent values</div>
      <div class="list list-strong-ios list-outline-ios">
        <ul>
          <li>
            <div class="item-content item-input">
              <div class="item-inner">
```

--------------------------------

### Complete Framework7 Store Definition Example

Source: https://github.com/sksar/framework7-docs/blob/main/docs/vue/store.html

This comprehensive example defines a Framework7 store with `state`, `actions`, and `getters`. It includes a `getUsers` action that simulates an asynchronous data load, updating `loading` and `users` state, and corresponding getters to expose these values.

```JavaScript
import { createStore } from 'framework7/lite';

const store = createStore({
  state: {
    loading: false,
    users: [],
  },
  actions: {
    getUsers({ state }) {
      state.loading = true;
      setTimeout(() => {
        state.users = ['User 1', 'User 2', 'User 3', 'User 4', 'User 5'];
        state.loading = false;
      }, 3000);
    },
  },
  getters: {
    loading({ state }) {
      return state.loading;
    },
    users({ state }) {
      return state.users;
    },
  },
});

export default store;
```

--------------------------------

### Installing Framework7-Svelte Plugin via npm

Source: https://github.com/sksar/framework7-docs/blob/main/docs/svelte/installation.html

This command installs the Framework7-Svelte plugin, which is essential for integrating Framework7 with Svelte applications. It uses npm, the Node.js package manager, to fetch and install the package into your project's `node_modules` directory.

```Shell
$ npm install framework7-svelte
```

--------------------------------

### Basic Framework7 Smart Select Page Example (HTML)

Source: https://github.com/sksar/framework7-docs/blob/main/docs/docs/smart-select.html

This HTML snippet presents a foundational Framework7 page structure incorporating a Smart Select component. It demonstrates how a standard HTML `<select>` element is transformed into an interactive, dynamic page within the Framework7 environment, showcasing the basic setup for a Smart Select.

```HTML
<div class="page">
      <div class="navbar">
        <div class="navbar-bg"></div>
        <div class="navbar-inner sliding">
          <div class="title">Smart Select</div>
        </div>
      </div>
      <div class="page-content">
        <div class="block">
          Framework7 allows you to easily convert your usual form selects to dynamic pages with radios:
        </div>
        <div class="list list-strong-ios list-outline-ios list-dividers-ios">
          <ul>
            <li>
              <a class="item-link smart-select smart-select-init">
                <select name="fruits">
                  <option value="apple" selected>Apple</option>
                  <option value="pineapple">Pineapple</option>
                  <option value="pear">Pear</option>
                  <option value="orange">Orange</option>
                  <option value="melon">Melon</option>
                  <option value="peach">Peach</option>
                  <option value="banana">Banana</option>
                </select>
```

--------------------------------

### Installing Cordova Globally

Source: https://github.com/sksar/framework7-docs/blob/main/docs/cli/installation.html

This command installs Cordova globally on your machine, which is required for developing Native/Hybrid applications with Framework7. It may require `sudo` privileges depending on your system configuration.

```Shell
npm install -g cordova
```

--------------------------------

### Comprehensive Framework7 Store Definition Example

Source: https://github.com/sksar/framework7-docs/blob/main/docs/docs/store.html

This comprehensive JavaScript example defines a Framework7 store with `loading` and `users` state properties, an asynchronous `getUsers` action that updates the state, and corresponding `loading` and `users` getters for reactive access to these state values.

```JavaScript
import { createStore } from 'store';

const store = createStore({
  state: {
    loading: false,
    users: [],
  },
  actions: {
    getUsers({ state }) {
      state.loading = true;
      setTimeout(() => {
        state.users = ['User 1', 'User 2', 'User 3', 'User 4', 'User 5'];
        state.loading = false;
      }, 3000);
    },
  },
  getters: {
    loading({ state }) {
      return state.loading;
    },
    users({ state }) {
      return state.users;
    },
  },
});

export default store;
```

--------------------------------

### Creating a Framework7 App using npx with UI

Source: https://github.com/sksar/framework7-docs/blob/main/docs/cli/create-app.html

This command uses `npx` to execute the Framework7 CLI's `create` command with the user interface, without requiring a global installation of the CLI. `npx` is useful for running CLI tools temporarily or when global installation is not desired.

```shell
$ npx framework7-cli create --ui
```

--------------------------------

### Installing Gulp Globally via npm (Shell)

Source: https://github.com/sksar/framework7-docs/blob/main/docs/react/kitchen-sink.html

This command installs the Gulp command-line interface (CLI) globally on your system using npm. Gulp is a JavaScript toolkit used for automating development tasks and is a prerequisite for running the Framework7 project.

```Shell
npm install --global gulp
```

--------------------------------

### Installing Node.js Dependencies for Framework7 Custom Build - Shell

Source: https://github.com/sksar/framework7-docs/blob/main/docs/docs/custom-build.html

This command installs all required Node.js dependencies listed in the `package.json` file of the Framework7 repository. It must be executed in the root directory of the downloaded Framework7 project to ensure all build tools and libraries are available.

```Shell
$ npm install
```

--------------------------------

### Installing Framework7 CLI and Creating a New Project

Source: https://github.com/sksar/framework7-docs/blob/main/docs/index.html

This snippet provides the command-line instructions required to set up a Framework7 development environment. It involves globally installing the Framework7 CLI and Cordova, followed by creating a new Framework7 project using the CLI's UI template, which scaffolds a basic application structure.

```Shell
$ npm i framework7-cli cordova -g
$ framework7 create --ui
```

--------------------------------

### Installing Framework7-Vue Plugin via NPM

Source: https://github.com/sksar/framework7-docs/blob/main/docs/vue/installation.html

This command installs the Framework7-Vue plugin using npm (Node Package Manager). This plugin is crucial for enabling Framework7 components and functionalities within a Vue.js application, allowing seamless integration between the two frameworks.

```Shell
$ npm install framework7-vue
```

--------------------------------

### Getting Attribute Value - JavaScript

Source: https://github.com/sksar/framework7-docs/blob/main/docs/docs/dom7.html

This method retrieves the value of a specified attribute for the first element in the set of matched elements. The example shows how to get the 'href' attribute of an anchor tag.

```JavaScript
var link = $$('a').attr('href'); //-> http://google.com
```

--------------------------------

### Initializing Framework7 Vue Application (my-app.js)

Source: https://github.com/sksar/framework7-docs/blob/main/docs/vue/init-app.html

This JavaScript snippet demonstrates the main application initialization file. It imports Vue's `createApp`, Framework7 core, and the Framework7-Vue plugin. It then initializes the Framework7-Vue plugin, imports the root Vue component (`App.vue`), creates the Vue app instance, registers Framework7 Vue components, and finally mounts the Vue app to the `#app` element.

```JavaScript
/* my-app.js */

import { createApp } from 'vue'

// Import F7 Bundle
import Framework7 from 'framework7/lite-bundle'

// Import F7-Vue Plugin Bundle (with all F7 components registered)
import Framework7Vue, { registerComponents } from 'framework7-vue/bundle'

// Init F7-Vue Plugin
Framework7.use(Framework7Vue);

// Import Main App component
import App from './app.vue';

// Init App
const app = createApp(App);

// Register all Framework7 Vue components
registerComponents(app);

// Mounte Vue App
app.mount('#app');
```

--------------------------------

### Getting Property Value - JavaScript

Source: https://github.com/sksar/framework7-docs/blob/main/docs/docs/dom7.html

This method retrieves the value of a specified property for the first element in the set of matched elements. The example shows how to get the 'checked' property of an input element.

```JavaScript
var isChecked = $$('input').prop('checked');
```

--------------------------------

### Complete Framework7 App and View Initialization - JavaScript

Source: https://github.com/sksar/framework7-docs/blob/main/docs/docs/init-app.html

This combined snippet illustrates the typical setup for a Framework7 application, integrating both the app initialization with custom parameters and the creation of the main view. This setup provides a fully functional app instance and its primary navigation router, ready for page loading and interaction.

```JavaScript
var app = new Framework7({
  // App root element
  el: '#app',
  // App Name
  name: 'My App',
  // Enable swipe panel
  panel: {
    swipe: true,
  },
  // Add default routes
  routes: [
    {
      path: '/about/',
      url: 'about.html',
    },
  ],
  // ... other parameters
});
    
var mainView = app.views.create('.view-main');
```

--------------------------------

### Getting Input Value - JavaScript

Source: https://github.com/sksar/framework7-docs/blob/main/docs/docs/dom7.html

This method retrieves the current value of the first element in the set of matched elements, typically used for form input fields. The example gets the value of an input field with a specific ID.

```JavaScript
var inputVal = $$('#myInput').val(); //-> 'Lorem ipsum'
```

--------------------------------

### Initializing Framework7 with Custom Components (ES Modules) - JavaScript

Source: https://github.com/sksar/framework7-docs/blob/main/docs/docs/custom-build.html

This snippet demonstrates how to import specific Framework7 components (like Popup) as ES modules and then register them with the Framework7 instance using the .use() method. It also shows the basic initialization of the Framework7 application. Dependencies include the framework7 library and the specific component modules.

```JavaScript
import Popup from 'framework7/components/popup';

// Install F7 Components using .use() method on Framework7 class:
Framework7.use([Searchbar, Calendar, Popup]);

// Init app
var app = new Framework7({/*...*/});
```

--------------------------------

### Comprehensive Framework7 Radio Examples (Vue Template)

Source: https://github.com/sksar/framework7-docs/blob/main/docs/vue/radio.html

This extensive Vue template showcases various ways to implement Framework7 radio components. It includes examples of inline radios within a block, radio groups with icons at the start and end, and complex media list items incorporating radio selections. Each example demonstrates different styling and layout options for radio inputs.

```Vue
<template>
      <f7-page>
        <f7-navbar title="Radio"></f7-navbar>
        <f7-block-title>Inline</f7-block-title>
    
        <f7-block strong-ios outline-ios>
          <p>
            Lorem <f7-radio name="demo-radio-inline" /> ipsum dolor sit amet, consectetur adipisicing
            elit. Alias beatae illo nihil aut eius commodi sint eveniet aliquid eligendi
            <f7-radio name="demo-radio-inline" checked /> ad delectus impedit tempore nemo, enim vel
            praesentium consequatur nulla mollitia!
          </p>
        </f7-block>
    
        <f7-block-title>Radio Group</f7-block-title>
        <f7-list strong-ios outline-ios dividers-ios>
          <f7-list-item radio radio-icon="start" title="Books" name="demo-radio-start" checked />
          <f7-list-item radio radio-icon="start" title="Movies" name="demo-radio-start" />
          <f7-list-item radio radio-icon="start" title="Food" name="demo-radio-start" />
          <f7-list-item radio radio-icon="start" title="Drinks" name="demo-radio-start" />
        </f7-list>
    
        <f7-list strong-ios outline-ios dividers-ios>
          <f7-list-item radio radio-icon="end" title="Books" name="demo-radio-end" checked />
          <f7-list-item radio radio-icon="end" title="Movies" name="demo-radio-end" />
          <f7-list-item radio radio-icon="end" title="Food" name="demo-radio-end" />
          <f7-list-item radio radio-icon="end" title="Drinks" name="demo-radio-end" />
        </f7-list>
    
        <f7-block-title>With Media Lists</f7-block-title>
        <f7-list media-list strong-ios outline-ios dividers-ios>
          <f7-list-item
            radio
            radio-icon="start"
            checked
            name="demo-media-radio"
            value="1"
            title="Facebook"
            after="17:14"
            subtitle="New messages from John Doe"
            text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
          />
          <f7-list-item
            radio
            radio-icon="start"
            name="demo-media-radio"
            value="2"
            title="John Doe (via Twitter)"
            after="17:11"
            subtitle="John Doe (@_johndoe) mentioned you on Twitter!"
            text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
          />
          <f7-list-item
            radio
            radio-icon="start"
            name="demo-media-radio"
            value="3"
            title="Facebook"
            after="16:48"
            subtitle="New messages from John Doe"
            text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
          />
          <f7-list-item

```

--------------------------------

### Framework7 Text Editor Usage Examples (Vue.js)

Source: https://github.com/sksar/framework7-docs/blob/main/docs/vue/text-editor.html

This Vue.js template demonstrates various configurations of the Framework7 Text Editor component. It includes examples for default setup, adding a placeholder, setting a default value with two-way binding, and customizing the visible buttons.

```Vue.js
<template>
  <f7-page>
    <f7-navbar title="Text Editor"></f7-navbar>
    <f7-block>
      <p>
        Framework7 comes with a touch-friendly Rich Text Editor component. It is based on modern
        "contenteditable" API so it should work everywhere as is.
      </p>
      <p>
        It comes with the basic set of formatting features. But its functionality can be easily
        extended and customized to fit any requirements.
      </p>
    </f7-block>

    <f7-block-title>Default Setup</f7-block-title>
    <f7-text-editor />

    <f7-block-title>With Placeholder</f7-block-title>
    <f7-text-editor placeholder="Enter text..." />

    <f7-block-title>With Default Value</f7-block-title>
    <f7-text-editor
      placeholder="Enter text..."
      :value="customValue"
      @texteditor:change="(v) => (customValue = v)"
    />

    <f7-block-title>Specific Buttons</f7-block-title>
    <f7-block-header>It is possible to customize which buttons (commands) to show.</f7-block-header>
    <f7-text-editor
      placeholder="Enter text..."
      :buttons="[
        ['bold', 'italic', 'underline', 'strikeThrough'],
        ['orderedList', 'unorderedList'],
      ]"
    />

    <f7-block-title>Custom Button</f7-block-title>
    <f7-block-header
      >It is possible to create custom editor buttons. Here is the custom "hr" button that adds
      horizontal rule:</f7-block-header
    >
    <f7-text-editor
      placeholder="Enter text..."
/>
</template>
```

--------------------------------

### Basic HTML Structure for Index File

Source: https://github.com/sksar/framework7-docs/blob/main/docs/vue/init-app.html

This snippet shows the typical comment indicating the `index.html` file, which serves as the main entry point for a Framework7 Vue application. It's a placeholder for the main HTML structure where the Vue app will be mounted.

```HTML
<!-- index.html -->
```

--------------------------------

### Google Analytics Initialization

Source: https://github.com/sksar/framework7-docs/blob/main/docs/docs/installation.html

This JavaScript snippet initializes Google Analytics (gtag.js) on the webpage. It sets up the dataLayer, defines the gtag function, and configures a Google Analytics property for tracking user interactions.

```JavaScript
window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-JP28Y9LMRE'); window.gtag = gtag;
```

--------------------------------

### Getting Component Instance in JavaScript

Source: https://github.com/sksar/framework7-docs/blob/main/docs/svelte/messages.html

This snippet shows a basic example of accessing a component's instance using `component.instance()`. It's typically used within a method to interact with the component's API.

```javascript
      let component;
    
      // to get instance in some method
      component.instance()
```

--------------------------------

### Initializing Framework7 Searchbar Instance

Source: https://github.com/sksar/framework7-docs/blob/main/docs/docs/searchbar.html

Initializes a new Framework7 Searchbar instance using the `app.searchbar.create` method. This method accepts a `parameters` object to configure the searchbar and returns the initialized instance. It's the primary way to programmatically set up a searchbar.

```JavaScript
app.searchbar.create(parameters)
```

--------------------------------

### Initializing Framework7 App with Panel Configuration (JavaScript)

Source: https://github.com/sksar/framework7-docs/blob/main/docs/docs/app.html

Initializes a new Framework7 application instance, demonstrating how to enable the swipe panel feature. The constructor takes an object of parameters, returning the main app instance for further use and configuration.

```javascript
var app = new Framework7({
  // Enable swipe panel
  panel: {
    swipe: true,
  },
  // ... other parameters
});
```

--------------------------------

### Initializing Spectrum Color Picker - Framework7 JavaScript

Source: https://github.com/sksar/framework7-docs/blob/main/docs/kitchen-sink/core/pages/color-picker.html

Initializes a Framework7 color picker using the spectrum module. It's rendered within the element #demo-color-picker-spectrum and starts with a predefined hexadecimal color.

```javascript
colorPickerSpectrum = app.colorPicker.create({
  containerEl: '#demo-color-picker-spectrum',
  modules: ['spectrum'],
  value: {
    hex: '#00ffff'
  }
});
```

--------------------------------

### Creating a Framework7 App using CLI

Source: https://github.com/sksar/framework7-docs/blob/main/docs/cli/create-app.html

This command initializes a new Framework7 application project. When executed, the CLI will prompt the user with a series of questions to configure the framework and template for the new app.

```shell
$ framework7 create
```

--------------------------------

### Initializing HSB Sliders Color Picker - Framework7 JavaScript

Source: https://github.com/sksar/framework7-docs/blob/main/docs/kitchen-sink/core/pages/color-picker.html

Initializes a Framework7 color picker using HSB (Hue-Saturation-Brightness) sliders. It's rendered within #demo-color-picker-hsb and starts with a predefined hexadecimal color.

```javascript
colorPickerHsb = app.colorPicker.create({
  containerEl: '#demo-color-picker-hsb',
  modules: ['hsb-sliders'],
  value: {
    hex: '#00ffff'
  }
});
```

--------------------------------

### Initializing Framework7 and Mounting Svelte App

Source: https://github.com/sksar/framework7-docs/blob/main/docs/svelte/init-app.html

This JavaScript code initializes Framework7 by importing its core bundle and the Svelte plugin, then registers the plugin with Framework7. Finally, it imports the main Svelte `App` component and mounts it to the DOM element with `id="app"`, establishing the entry point for the Svelte application.

```JavaScript
// Import F7 Bundle
import Framework7 from 'framework7/lite-bundle';

// Import F7-Svelte Plugin
import Framework7Svelte from 'framework7-svelte';

// Init F7-Svelte Plugin
Framework7.use(Framework7Svelte);

// Import Main App component
import App from './App.svelte';

// Mount Svelte App
const app = new App({
  target: document.getElementById('app'),
});
```

--------------------------------

### Initializing Framework7 Store and App in JavaScript

Source: https://github.com/sksar/framework7-docs/blob/main/docs/docs-demos/core/store_f7.html

This snippet demonstrates how to create a Framework7 store with state, actions, and getters, and then initialize a Framework7 application. It sets up a store to manage user data and a loading state, and configures the main view to load a specific component URL.

```javascript
const store = Framework7.createStore({
  state: {
    loading: false,
    users: [],
  },
  actions: {
    getUsers({ state }) {
      state.loading = true;
      setTimeout(() => {
        state.users = ['User 1', 'User 2', 'User 3', 'User 4', 'User 5'];
        state.loading = false;
      }, 3000);
    },
  },
  getters: {
    loading({ state }) {
      return state.loading;
    },
    users({ state }) {
      return state.users;
    },
  },
});

export default (props, { $f7, $onMounted }) => {
  $f7.store = store;
  $onMounted(() => {
    $f7.views.create('.view-main', {
      url: '/',
      routes: [
        {
          path: '/',
          componentUrl: './store_page_f7.html',
        }
      ]
    });
  });
  return $render;
}
```

--------------------------------

### Setting Up Date Range Picker in Framework7 Calendar - Vue

Source: https://github.com/sksar/framework7-docs/blob/main/docs/vue/calendar.html

This snippet shows how to implement a date range picker using the Framework7 calendar by simply setting `rangePicker: true` in the `calendar-params`, allowing users to select a start and end date.

```html
<f7-list-input
            type="datepicker"
            placeholder="Select date range"
            readonly
            :calendar-params="{ rangePicker: true }"
          />
```

--------------------------------

### Initializing Framework7 Text Editor - HTML

Source: https://github.com/sksar/framework7-docs/blob/main/docs/docs/text-editor.html

This snippet demonstrates the basic HTML structure for integrating the Framework7 Text Editor component into a page. It includes the navbar, page content, and the default text editor setup, providing a foundational example for its use.

```HTML
<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="title">Text Editor</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block">
        <p>Framework7 comes with a touch-friendly Rich Text Editor component. It is based on modern "contenteditable"
          API so it should work everywhere as is.</p>
        <p>It comes with the basic set of formatting features. But its functionality can be easily extended and
          customized to fit any requirements.</p>
      </div>

      <div class="block-title">Default Setup</div>
      <div class="text-editor text-editor-init">
        <div class="text-editor-content" contenteditable></div>
      </div>

      <div class="block-title">With Placeholder</div>
      <div class="text-editor text-editor-init" data-placeholder="Enter text...">
        <div class="text-editor-content" contenteditable></div>
      </div>

      <div class="block-title">With Default Value</div>
      <div class="text-editor text-editor-init" data-placeholder="Enter text...">
        <div class="text-editor-content" contenteditable>
          <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur sunt, sapiente quis eligendi
            consectetur hic asperiores assumenda quidem dolore quasi iusto tenetur commodi qui ullam sint sed alias!
            Consequatur, dolor!</p>
          <p>Provident reiciendis exercitationem reprehenderit amet repellat laborum, sequi id quam quis quo quos facere
            veniam ad libero dolorum animi. Nobis, illum culpa explicabo dolorem vitae ut dolor at reprehenderit magnam?
          </p>
          <p>Qui, animi. Dolores dicta, nobis aut expedita enim eum assumenda modi, blanditiis voluptatibus excepturi
            non pariatur. Facilis fugit facere sequi molestias nemo in, suscipit inventore consequuntur, repellat
            perferendis, voluptas odit.</p>
          <p>Tempora voluptates, doloribus architecto eligendi numquam facilis perspiciatis autem quam voluptas maxime
            ratione harum laudantium cum deleniti. In, alias deserunt voluptatibus eligendi libero nobis est unde et
            perspiciatis cumque voluptatum.</p>
          <p>Quam error doloribus qui laboriosam eligendi. Aspernatur quam pariatur perspiciatis reprehenderit atque
            dicta culpa, aut rem? Assumenda, quibusdam? Reprehenderit necessitatibus facere nemo iure maiores porro
            voluptates accusamus quibusdam. Nesciunt, assumenda?</p>
        </div>
      </div>

      <div class="block-title">Specific Buttons</div>
      <div class="block-header">It is possible to customize which buttons (commands) to show.</div>
      <div class="text-editor text-editor-init" data-placeholder="Enter text..."
        data-buttons='[["bold", "italic", "underline", "strikeThrough"], ["orderedList", "unorderedList"]]'>
        <div class="text-editor-content" contenteditable></div>
      </div>

      <div class="block-title">Custom Button</div>
      <div class="block-header">It is possible to create custom editor buttons. Here is the custom "hr" button that adds
        horizontal rule:</div>
      <div class="text-editor text-editor-custom-buttons">
        <div class="text-editor-content" contenteditable></div>
      </div>

      <div class="block-title">Resizable</div>
      <div class="block-header">Editor will be resized based on its content.</div>
      <div class="text-editor text-editor-init text-editor-resizable" data-placeholder="Enter text..."
        data-buttons='["bold", "italic", "underline", "strikeThrough"]'>
        <div class="text-editor-content" contenteditable></div>
      </div>

      <div class="block-title">Popover Mode</div>
      <div class="block-header">In this mode, there is no toolbar with buttons, but they appear as popover when you
        select any text in editor.</div>
      <div class="text-editor text-editor-init" data-placeholder="Enter text..."
        data-buttons='["bold", "italic", "underline", "strikeThrough"]' data-mode="popover"
        style="--f7-text-editor-height: 150px">
        <div class="text-editor-content" contenteditable></div>
      </div>

      <div class="block-title">Keyboard Toolbar Mode</div>
      <div class="block-header">In this mode, toolbar with buttons will appear on top of virtual keyboard when editor is
```

--------------------------------

### Launching Framework7 Core Kitchen Sink Locally

Source: https://github.com/sksar/framework7-docs/blob/main/docs/docs/kitchen-sink.html

This command initiates the Framework7 Core Kitchen Sink application, making it accessible locally. It should be run from the Framework7 repository's root directory, allowing developers to interact with and test various Framework7 components in a browser.

```Shell
$ npm run core
```

--------------------------------

### Initial React Component Imports for Tooltip Example

Source: https://github.com/sksar/framework7-docs/blob/main/docs/react/tooltip.html

This snippet shows the essential imports for a React component within a Framework7 application. It includes React and the Navbar component, indicating the start of a UI component that would likely incorporate a core Framework7 tooltip.

```jsx
import React, { useRef } from 'react';
import {
  Navbar,
```

--------------------------------

### Initializing Framework7 Virtual List (JavaScript)

Source: https://github.com/sksar/framework7-docs/blob/main/docs/docs/virtual-list.html

Demonstrates how to initialize a new instance of Framework7's Virtual List. The `app.virtualList.create()` method is called with an object to pass configuration parameters for the list.

```JavaScript
var virtualList = app.virtualList.create({ /* parameters */ })
```

--------------------------------

### Opening a Prompt Dialog with Chaining in Framework7 Svelte

Source: https://github.com/sksar/framework7-docs/blob/main/docs/svelte/dialog.html

This function illustrates how to use `f7.dialog.prompt` to get user input. It takes a message and a callback that receives the entered value. The example further demonstrates chaining dialogs by using the input in subsequent confirm and alert dialogs, showcasing sequential dialog flow.

```JavaScript
function openPrompt() {
  f7.dialog.prompt('What is your name?', (name) => {
    f7.dialog.confirm(`Are you sure that your name is ${name}?`, () => {
      f7.dialog.alert(`Ok, your name is ${name}`);
    });
  });
}
```

--------------------------------

### Defining the Page Initialization Function for Framework7 Pickers

Source: https://github.com/sksar/framework7-docs/blob/main/docs/svelte/picker.html

Defines the `onPageInit` function, which is executed when the Svelte page is initialized. This function serves as the primary entry point for creating and configuring all Framework7 picker instances used on the page, ensuring they are ready when the UI loads.

```javascript
function onPageInit() {
  const today = new Date();
```

--------------------------------

### Initializing Dropdown Autocomplete with Typeahead in Framework7 React

Source: https://github.com/sksar/framework7-docs/blob/main/docs/react/autocomplete.html

This snippet initializes a dropdown autocomplete with `typeahead: true`, enabling predictive text completion. The `source` function filters the `fruits` array, pushing only items that *start with* the query string into the results array, providing more precise suggestions.

```JavaScript
        // Dropdown with typeahead
        autocompleteDropdownTypeahead.current = f7.autocomplete.create({
          inputEl: '#autocomplete-dropdown-typeahead',
          openIn: 'dropdown',
          dropdownPlaceholderText: 'Try to type "Pineapple"',
          typeahead: true,
          source(query, render) {
            const results = [];
            if (query.length === 0) {
              render(results);
              return;
            }
            // Find matched items
            for (let i = 0; i < fruits.length; i += 1) {
              if (fruits[i].toLowerCase().indexOf(query.toLowerCase()) === 0) results.push(fruits[i]);
            }
            // Render items by passing array with result items
            render(results);
          }
        });
```

--------------------------------

### Basic HTML Structure for Framework7 React App

Source: https://github.com/sksar/framework7-docs/blob/main/docs/react/init-app.html

This HTML snippet defines the basic page structure for a Framework7 React application. It includes the necessary viewport meta tags, links to the Framework7 CSS bundle, and a root `div` element with `id="app"` where the React application will be mounted.

```html
<!DOCTYPE html>
<html>
  <head>
    <!-- ... metas and styles ... -->
    <link rel="stylesheet" href="path/to/framework7-bundle.min.css">
  </head>
  <body>
    <!-- App Root Element -->
    <div id="app"></div>

    <!-- Scripts will be auto injected -->
  </body>
</html>
```

--------------------------------

### Defining a Strong Framework7 Block with External Header and Footer

Source: https://github.com/sksar/framework7-docs/blob/main/docs/docs/block.html

This HTML example shows a 'block-strong' content area with its header and footer positioned outside the primary block div. This setup is useful when the strong block's content needs distinct styling from its header and footer, allowing them to float independently.

```HTML
            <div class="block-header">Block Header</div>
            <div class="block block-strong">
              <p>Here comes paragraph within content block. Donec et nulla auctor massa pharetra adipiscing ut sit amet sem.
                Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis, vulputate turpis vel, sagittis
                felis. </p>
            </div>
            <div class="block-footer">Block Footer</div>
```

--------------------------------

### Initializing Inline Color Picker with Change Event - Framework7 JavaScript

Source: https://github.com/sksar/framework7-docs/blob/main/docs/kitchen-sink/core/pages/color-picker.html

Initializes an inline Framework7 color picker with SB spectrum, HSB sliders, and an alpha slider. It includes a change event handler to update a variable and trigger a UI update, starting with a specific hexadecimal color.

```javascript
colorPickerInline = app.colorPicker.create({
  containerEl: '#demo-color-picker-inline',
  modules: ['sb-spectrum', 'hsb-sliders', 'alpha-slider'],
  on: {
    change(cp, value) {
      colorPickerInlineValue = value;
      $update();
    }
  },
  value: {
    hex: '#77ff66'
  }
});
```

--------------------------------

### Creating Framework7 Dialog with Event Handler (JavaScript)

Source: https://github.com/sksar/framework7-docs/blob/main/docs/docs/dialog.html

This snippet demonstrates how to create a Framework7 Dialog instance using `app.dialog.create()` and attach an event handler. It configures the dialog with a simple 'Hello World' text and logs a message to the console when the dialog is fully opened, showcasing the use of the `on.opened` callback.

```JavaScript
var dialog = app.dialog.create({
      text: 'Hello World',
      on: {
        opened: function () {
          console.log('Dialog opened')
        }
      }
    })
```

--------------------------------

### Full TextEditor Svelte Component Example - Script

Source: https://github.com/sksar/framework7-docs/blob/main/docs/svelte/text-editor.html

This comprehensive Svelte script block demonstrates importing necessary Framework7 components for the TextEditor. It includes the definition of a custom 'hr' button with its click handler and sets an initial HTML value for the editor, providing a complete setup for a TextEditor instance.

```Svelte
<script>
  import {
    Page,
    Navbar,
    BlockTitle,
    BlockHeader,
    Block,
    TextEditor,
    List,
    ListInput,
  } from 'framework7-svelte';

  const customButtons = {
    hr: {
      content: '<hr>',
      // eslint-disable-next-line
      onClick(editor, buttonEl) {
        document.execCommand('insertHorizontalRule', false);
      },
    },
  };

  let customValue = `<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur sunt, sapiente quis eligendi consectetur hic asperiores assumenda quidem dolore quasi iusto tenetur commodi qui ullam sint sed alias! Consequatur, dolor!</p>
          <p>Provident reiciendis exercitationem reprehenderit amet repellat laborum, sequi id quam quis quo quos facere veniam ad libero dolorum animi. Nobis, illum culpa explicabo dolorem vitae ut dolor at reprehenderit magnam?</p>
          <p>Qui, animi. Dolores dicta, nobis aut expedita enim eum assumenda modi, blanditiis voluptatibus excepturi non pariatur. Facilis fugit facere sequi molestias nemo in, suscipit inventore consequuntur, repellat perferendis, voluptas odit.</p>
```

--------------------------------

### Configuring HSB Sliders with Framework7 Color Picker

Source: https://github.com/sksar/framework7-docs/blob/main/docs/svelte/color-picker.html

This snippet illustrates the setup of a Framework7 Color Picker using HSB (Hue, Saturation, Brightness) sliders. It includes options for displaying slider values and labels, targeting a specific element, and formatting the output value as 'hsb(H, S%, B%)'.

```javascript
type="colorpicker"
          placeholder="Color"
          readonly
          value={hsbPickerValue}
          onColorPickerChange={(value) => hsbPickerValue = value}
          colorPickerParams={{
            modules: ['hsb-sliders'],
            sliderValue: true,
            sliderLabel: true,
            targetEl: '.hsb-picker-target',
            formatValue(value) {
              return `hsb(${value.hsb[0]}, ${value.hsb[1] * 1000 / 10}%, ${value.hsb[2] * 1000 / 10}%)`;
            },
          }}
        >
          <i
            slot="media"
            style={`background-color: ${hsbPickerValue.hex}`}
            class="icon demo-list-icon hsb-picker-target"
          />
        </ListInput>
```

--------------------------------

### Importing and Installing Specific Framework7 Components (ES Module)

Source: https://github.com/sksar/framework7-docs/blob/main/docs/docs/package.html

Shows how to import the core Framework7 library along with specific additional components (Searchbar, Calendar, Popup) and their corresponding styles. It then demonstrates installing these components using the Framework7.use() method to enable them in the application, followed by app initialization. This modular approach optimizes bundle size.

```JavaScript
// Import core framework
import Framework7 from 'framework7';

// Import additional components
import Searchbar from 'framework7/components/searchbar/';
import Calendar from 'framework7/components/calendar/';
import Popup from 'framework7/components/popup/';

// Import components styles
import 'framework7/components/searchbar/css';
import 'framework7/components/calendar/css';
import 'framework7/components/popup/css';

// Install F7 Components using .use() method on class:
Framework7.use([Searchbar, Calendar, Popup]);

// Init app
var app = new Framework7({/*...*/});
```

--------------------------------

### Creating Basic Framework7 React App Layout

Source: https://github.com/sksar/framework7-docs/blob/main/docs/react/app-layout.html

This snippet demonstrates a fundamental Framework7 React application structure. It includes the main App component, a View marked as main, a Page with a Navbar and Toolbar, and basic content with a Link. It shows how to set up a single-view application.

```JavaScript
// App.jsx
import { App, View, Page, Navbar, Toolbar, Link } from 'framework7-react';

export default () => (
  // Main Framework7 App component where we pass Framework7 params
  <App theme="auto" name="My App">

    {/* Your main view, should have "main" prop */}
    <View main>
      {/*  Initial Page */}
      <Page>
        {/* Top Navbar */}
        <Navbar title="Awesome App"></Navbar>
        {/* Toolbar */}
        <Toolbar bottom>
          <Link>Link 1</Link>
          <Link>Link 2</Link>
        </Toolbar>
        {/* Page Content */}
        <p>Page content goes here</p>
        <Link href="/about/">About App</Link>
      </Page>
    </View>
  </App>
)
```

--------------------------------

### Implementing User Sign-In with Framework7 JavaScript

Source: https://github.com/sksar/framework7-docs/blob/main/docs/kitchen-sink/core/pages/login-screen-page.html

This snippet defines a `signIn` function that retrieves username and password from specific input fields. It then uses Framework7's dialog to display these credentials and subsequently closes the login screen and navigates back using the router. It depends on Framework7's `$`, `$f7`, and `$f7router` instances.

```javascript
export default (props, { $, $f7, $f7router }) => {
  const signIn = () => {
    let username = $('input#demo-username-2').val();
    let password = $('input#demo-password-2').val();
    $f7.dialog.alert('Username: ' + username + '<br />Password: ' + password, function () {
      $f7.loginScreen.close();
      $f7router.back();
    })
  }
  return $render;
};
```

--------------------------------

### Basic HTML Structure for Framework7 Vue App

Source: https://github.com/sksar/framework7-docs/blob/main/docs/vue/init-app.html

This HTML snippet provides the foundational structure for a Framework7 Vue application. It includes the necessary stylesheet link for Framework7 and defines a root div element with `id="app"` where the Vue application will be mounted.

```HTML
<!DOCTYPE html>
<html>
  <head>
    <!-- ... metas and styles ... -->
    <link rel="stylesheet" href="path/to/framework7-bundle.min.css">
  </head>
  <body>
    <!-- App Root Element -->
    <div id="app"></div>

    <!-- Scripts will be auto injected -->
  </body>
</html>
```

--------------------------------

### Opening Multiple Alert Dialogs in Framework7 (JavaScript)

Source: https://github.com/sksar/framework7-docs/blob/main/docs/kitchen-sink/core/pages/dialog.html

This function demonstrates opening several alert dialogs sequentially. Framework7 handles the queuing of these dialogs automatically.

```JavaScript
const openAlerts = () => { $f7.dialog.alert('Alert 1'); $f7.dialog.alert('Alert 2'); $f7.dialog.alert('Alert 3'); $f7.dialog.alert('Alert 4'); $f7.dialog.alert('Alert 5'); }
```

--------------------------------

### Disabling Dates From a Specific Point in Framework7 Calendar JavaScript

Source: https://github.com/sksar/framework7-docs/blob/main/docs/docs/calendar.html

This snippet shows how to disable all dates from a specific point onwards in a Framework7 Calendar using an object with only a `from` property for the `disabled` parameter. In this example, all dates starting from December 1st, 2015, are disabled. This is useful for preventing selections beyond a certain past or future date.

```JavaScript
var calendar = app.calendar.create({
    ...
    //Disable everyting since December 2015
    disabled: {
        from: new Date(2015, 11, 1)
    },
    ...
});
```