Framework7

https://framework7.io/docs
Admin
Framework7 is a full-featured framework for building iOS and Android apps using HTML, CSS, and...
Tokens:473,662
Snippets:2,984
Trust Score:9.2
Update:10 hours ago
Show doc for...
Tokens:
Raw
### Import Framework7 with all components from 'framework7/bundle'

Source: https://framework7.io/docs/package.html

Use this import to include Framework7 with all components installed. The example initializes the app with a new Framework7 instance.

```javascript
// Import framework with all components
import Framework7 from 'framework7/bundle';

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

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

### Import core Framework7 and initial modules

Source: https://framework7.io/docs/lazy-modules.html

Shows how to import the core Framework7 and the modules needed for the initial page, install them with Framework7.use, and initialize the app. This is the starting point for using ES modules with a bundler.

```javascript
// import core framework with core components only:
import Framework7 from 'framework7';

// import framework7 modules/components we need on initial page
import Searchbar from 'framework7/components/searchbar';
import Accordion from 'framework7/components/accordion';

// install core modules
Framework7.use([Searchbar, Accordion]);

// init app
var app = new Framework7({
  // f7 params
});
```

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

### Install Framework7 via NPM

Source: https://framework7.io/docs/installation.html

Use this command to manually install Framework7 from NPM. This is the manual installation method, as opposed to using the CLI or ready-to-use templates.

```bash
npm install framework7
```

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

### Store Example with Loading State and Async Action

Source: https://framework7.io/docs/store.html

A complete store example with a 'loading' state, an async 'getUsers' action that simulates loading, and getters for 'loading' and 'users'. This store is used by the store_page.f7.html example.

```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;
```

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

### Install Plugin with Framework7.use()

Source: https://framework7.io/docs/plugins-api.html

Shows how to install a plugin on the Framework7 class using the .use() method. Must be called before creating a new Framework7 instance.

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

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

### Install project dependencies

Source: https://framework7.io/docs/custom-build.html

Execute this command in the Framework7 repository folder to install required dependencies.

```bash
npm install
```

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

### Install and Initialize App with Debug Plugin

Source: https://framework7.io/docs/plugins-api.html

Shows how to install the debug plugin, initialize the Framework7 app with the debugger parameter enabled, and later disable it via app.debugger.disable().

```javascript
/* myapp.js */

// install plugin first
Framework7.use(debugPlugin);

// init app
var app = new Framework7({
  //enable debugger
  debugger: true,
});

/*
  we can later disable it by calling
  app.debugger.disable();
*/
```

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

### Framework7 Form Data Example (form-data.f7.html)

Source: https://framework7.io/docs/form.html

Complete example showing a form with inputs and buttons. Uses $f7.form.convertToData('#my-form') to get form data and $f7.form.fillFromData('#my-form', formData) to fill the form. Note that each input must have a name attribute; checkboxes and multiple selects are returned as arrays.

```html
<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="title">Form To Data</div>
      </div>
    </div>
    <div class="page-content">
      <form class="list list-strong inset list-dividers-ios" id="my-form">
        <ul>
          <li>
            <div class="item-content item-input">
              <div class="item-inner">
                <div class="item-title item-label">Name</div>
                <div class="item-input-wrap">
                  <input type="text" name="name" placeholder="Your name" />
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content item-input">
              <div class="item-inner">
                <div class="item-title item-label">E-mail</div>
                <div class="item-input-wrap">
                  <input type="email" name="email" placeholder="E-mail" />
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content item-input">
              <div class="item-inner">
                <div class="item-title item-label">Gender</div>
                <div class="item-input-wrap">
                  <select name="gender">
                    <option value="male" selected="selected">Male</option>
                    <option value="female">Female</option>
                  </select>
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">Toggle</div>
                <div class="item-after">
                  <label class="toggle toggle-init">
                    <input type="checkbox" name="toggle" value="yes" /><i class="toggle-icon"></i>
                  </label>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </form>
      <div class="block block-strong inset grid grid-cols-2 grid-gap">
        <a class="button button-fill button-round convert-form-to-data" href="#">Get Data</a>
        <a class="button button-fill button-round fill-form-from-data" href="#">Fill Form</a>
      </div>
    </div>
  </div>
</template>
<script>
  export default (props, { $, $on, $f7 }) => {
    $on('pageInit', () => {
      $('.convert-form-to-data').on('click', function () {
        var formData = $f7.form.convertToData('#my-form');
        alert(JSON.stringify(formData));
      });

      $('.fill-form-from-data').on('click', function () {
        var formData = {
          'name': 'John',
          'email': 'john@doe.com',
          'gender': 'female',
          'toggle': ['yes'],
        }
        $f7.form.fillFromData('#my-form', formData);
      });
    });

    return $render;
  }
</script>
```

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

### Virtual List Creation Example

Source: https://framework7.io/docs/virtual-list.html

Example of creating a virtual list with 10,000 items, a custom search function, and a render function.

```APIDOC
## Virtual List Creation Example

### Description
Example of creating a virtual list with 10,000 items, a custom search function, and a render function.

### Code
```javascript
$f7.virtualList.create({
  // List Element
  el: $el.value.find('.virtual-list'),
  // Pass array with items
  items,
  // Custom search function for searchbar
  searchAll: function (query, items) {
    var found = [];
    for (var i = 0; i < items.length; i++) {
      if (items[i].title.toLowerCase().indexOf(query.toLowerCase()) >= 0 || query.trim() === '') found.push(i);
    }
    return found; //return array with matched indexes
  },
  // List item render
  renderItem(item) {
    return `
    <li>
      <a  class="item-link item-content">
        <div class="item-inner">
          <div class="item-title-row">
            <div class="item-title">${item.title}</div>
          </div>
          <div class="item-subtitle">${item.subtitle}</div>
        </div>
      </a>
    </li>`;
  },
  // Item height
  height: $theme.ios ? 65 : 69,
});
```
```

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

### Install Gulp globally

Source: https://framework7.io/docs/custom-build.html

Run this command in the terminal to install Gulp globally, which is required for building Framework7.

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

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

### Access utils via Framework7.utils and app.utils

Source: https://framework7.io/docs/utils.html

Shows how to access the utils module before app initialization using Framework7.utils and after initialization via app.utils. The example uses the now() method to get the current timestamp.

```javascript
// If we need it in place where we don't have access to app instance or before we init the app
var now = Framework7.utils.now();


// After we init the app we can access it as app instance property
var app = new Framework7({ /*...*/ });
var now = app.utils.now();
```

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

### Flexbox layout example with helper classes

Source: https://framework7.io/docs/typography.html

Example showing how to use flexbox helper classes to create a flex container with space-between justification, flex-start alignment, and individual item alignment overrides.

```html
<div class="display-flex justify-content-space-between align-items-flex-start">
  <div class="flex-shrink-0">Item 1</div>
  <div class="align-self-center">Item 2</div>
  <div class="align-self-flex-end">Item 3</div>
</div>
```

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

### Dom7 .css() get property

Source: https://framework7.io/docs/dom7.html

Gets the value of the specified CSS property for the first element. The example gets the 'left' property.

```javascript
$$('.content').css('left'); //-> 200px
```

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

### Example gauge.html template

Source: https://framework7.io/docs/gauge.html

A Framework7 page template with a navbar and back link, intended as a starting point for a Gauge example.

```html
<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="left">
          <a class="link back">
            <i class="icon icon-back"></i>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>
```

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

### Dom7 .offset() get coordinates

Source: https://framework7.io/docs/dom7.html

Gets the current coordinates of the first element relative to the document. The example shows accessing top and left properties.

```javascript
var coords = $$('.content').offset(); //-> {top: 100, left: 200}
var top = coords.top; //-> 100
var left = coords.left; //-> 200
```

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

### Import Framework7 with additional components

Source: https://framework7.io/docs/package.html

Shows how to import core Framework7, additional components (Searchbar, Calendar, Popup), their styles, install them via .use(), and initialize the app.

```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({/*...*/});
```

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

### now example

Source: https://framework7.io/docs/utils.html

Gets the current timestamp in milliseconds and measures elapsed time after a 2-second delay.

```javascript
var now = app.utils.now();
setTimeout(function () {
  var timeDiff = app.utils.now() - now;
  console.log(timeDiff + 'ms past');
}, 2000);
```

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

### Radio HTML Example

Source: https://framework7.io/docs/radio.html

Complete HTML example for the Radio component, showing inline radios, radio groups with icons at start and end, and media lists. Includes navbar and page structure.

```html
<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="left">
        <a class="link back">
          <i class="icon icon-back"></i>

        </a>
      </div>
      <div class="title">Radio</div>
    </div>
  </div>
  <div class="page-content">
    <div class="block-title">Inline</div>
    <div class="block block-strong inset">
      <p>Lorem <label class="radio"><input type="radio" name="demo-radio-inline"><i class="icon-radio"></i></label>
        ipsum dolor sit amet, consectetur adipisicing elit. Alias beatae illo nihil aut eius commodi sint eveniet
        aliquid eligendi <label class="radio"><input type="radio" name="demo-radio-inline"><i
            class="icon-radio"></i></label> ad delectus impedit tempore nemo, enim vel praesentium consequatur nulla
        mollitia!</p>
    </div>
    <div class="block-title">Radio Group</div>
    <div class="list list-strong inset list-dividers-ios">
      <ul>
        <li>
          <label class="item-radio item-radio-icon-start item-content">
            <input type="radio" name="demo-radio-start" value="Books" checked />
            <i class="icon icon-radio"></i>
            <div class="item-inner">
              <div class="item-title">Books</div>
            </div>
          </label>
        </li>
        <li>
          <label class="item-radio item-radio-icon-start item-content">
            <input type="radio" name="demo-radio-start" value="Movies" />
            <i class="icon icon-radio"></i>
            <div class="item-inner">
              <div class="item-title">Movies</div>
            </div>
          </label>
        </li>
        <li>
          <label class="item-radio item-radio-icon-start item-content">
            <input type="radio" name="demo-radio-start" value="Food" />
            <i class="icon icon-radio"></i>
            <div class="item-inner">
              <div class="item-title">Food</div>
            </div>
          </label>
        </li>
        <li>
          <label class="item-radio item-radio-icon-start item-content">
            <input type="radio" name="demo-radio-start" value="Drinks" />
            <i class="icon icon-radio"></i>
            <div class="item-inner">
              <div class="item-title">Drinks</div>
            </div>
          </label>
        </li>
      </ul>
    </div>
    <div class="list list-strong inset list-dividers-ios">
      <ul>
        <li>
          <label class="item-radio item-radio-icon-end item-content">
            <input type="radio" name="demo-radio-end" value="Books" checked />
            <i class="icon icon-radio"></i>
            <div class="item-inner">
              <div class="item-title">Books</div>
            </div>
          </label>
        </li>
        <li>
          <label class="item-radio item-radio-icon-end item-content">
            <input type="radio" name="demo-radio-end" value="Movies" />
            <i class="icon icon-radio"></i>
            <div class="item-inner">
              <div class="item-title">Movies</div>
            </div>
          </label>
        </li>
        <li>
          <label class="item-radio item-radio-icon-end item-content">
            <input type="radio" name="demo-radio-end" value="Food" />
            <i class="icon icon-radio"></i>
            <div class="item-inner">
              <div class="item-title">Food</div>
            </div>
          </label>
        </li>
        <li>
          <label class="item-radio item-radio-icon-end item-content">
            <input type="radio" name="demo-radio-end" value="Drinks" />
            <i class="icon icon-radio"></i>
            <div class="item-inner">
              <div class="item-title">Drinks</div>
            </div>
          </label>
        </li>
      </ul>
    </div>
    <div class="block-title">With Media Lists</div>
    <div class="list media-list list-strong inset list-dividers-ios">
      <ul>
        <li>
          <label class="item-radio item-radio-icon-start item-content">
            <input type="radio" name="demo-media-radio" value="1" checked />
            <i class="icon icon-radio" checked></i>
            <div class="item-inner">
```

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

### Initialize and Retrieve PTR Instance

Source: https://framework7.io/docs/pull-to-refresh.html

Shows how to manually create a PTR instance with app.ptr.create and how to retrieve an existing instance with app.ptr.get. Both methods return a PTR instance with methods and properties.

```javascript
// init ptr manually
var ptr = app.ptr.create('.ptr-content');

// or using get to retrieve already created instance
var ptr = app.ptr.get('.ptr-content');
```

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

### Vue Picker Example Script

Source: https://framework7.io/docs/picker.html

JavaScript setup function for the Vue Picker example. Declares variables for each picker instance (device, describe, dependent, custom toolbar) that will be initialized in the component logic.

```javascript
<script>
  export default (props, { $f7, $on }) => {
    let pickerDevice;
    let pickerDescribe;
    let pickerDependent;
    let pickerCustomToolbar;

```

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

### Get data by key

Source: https://framework7.io/docs/dom7.html

Returns the value at the named data store for the first element. Includes JavaScript and HTML examples.

```javascript
var user = $$('a').data('user');
//-> {id: '123', name: 'John', email: 'john@doe.com'}
```

```html
<p data-id="123">Lorem ipsum...</p>
```

```javascript
var id = $$('p').data('id'); //-> 123
```

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

### Framework7 routes array with all loading methods

Source: https://framework7.io/docs/routes.html

Defines a routes array with examples of loading pages via Ajax, dynamic content, page name, HTMLElement, component, componentUrl, and async. The async example uses fetch to get external data and resolves with page content.

```javascript
routes: [
  // Load via Ajax
  {
    path: '/about/',
    url: './pages/about.html',
  },
  // Dynamic page from content
  {
    path: '/news/',
    content: `
      <div class="page">
        <div class="page-content">
          <div class="block">
            <p>This page created dynamically</p>
          </div>
        </div>
      </div>
    `,
  },
  // By page name (data-name="services") presented in DOM
  {
    path: '/services/',
    pageName: 'services',
  },
  // By page HTMLElement
  {
    path: '/contacts/',
    el: document.querySelector('.page[data-name="contacts"]'),
  },
  // By component
  {
    path: '/posts/',
    component: {
      // look below
    },
  },
  // By component url
  {
    path: '/post/:id/',
    componentUrl: './pages/component.html',
  },
  // Async
  {
    path: '/something/',
    async: function ({ app, to, resolve }) {
      // Requested route
      console.log(to);
      // Get external data and return page content
      fetch('http://some-endpoint/')
        .then((res) => res.json())
        .then(function (data) {
          resolve(
            // How and what to load
            {
              content: `<div class="page">${data.users}</div>`
            },
          );
        });
      }
  }
],
```

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

### Checkbox HTML Example (checkbox.html)

Source: https://framework7.io/docs/checkbox.html

Complete HTML template for the checkbox example page. Shows an inline checkbox within a paragraph and two checkbox groups in lists: one with icons at the start (item-checkbox-icon-start) and one with icons at the end (item-checkbox-icon-end). Uses Framework7 classes and structure.

```html
<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="left">
          <a class="link back">
            <i class="icon icon-back"></i>

          </a>
        </div>
        <div class="title">Checkbox</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block-title">Inline</div>
      <div class="block block-strong inset">
        <p>Lorem <label class="checkbox"><input type="checkbox" /><i class="icon-checkbox"></i></label> ipsum dolor sit
          amet, consectetur adipisicing elit. Alias beatae illo nihil aut eius commodi sint eveniet aliquid eligendi
          <label class="checkbox"><input type="checkbox" /><i class="icon-checkbox"></i></label> ad delectus impedit
          tempore nemo, enim vel praesentium consequatur nulla mollitia!
        </p>
      </div>
      <div class="block-title">Checkbox Group</div>
      <div class="list list-strong inset list-dividers-ios">
        <ul>
          <li>
            <label class="item-checkbox item-checkbox-icon-start item-content">
              <input type="checkbox" name="demo-checkbox" value="Books" checked />
              <i class="icon icon-checkbox"></i>
              <div class="item-inner">
                <div class="item-title">Books</div>
              </div>
            </label>
          </li>
          <li>
            <label class="item-checkbox item-checkbox-icon-start item-content">
              <input type="checkbox" name="demo-checkbox" value="Movies" />
              <i class="icon icon-checkbox"></i>
              <div class="item-inner">
                <div class="item-title">Movies</div>
              </div>
            </label>
          </li>
          <li>
            <label class="item-checkbox item-checkbox-icon-start item-content">
              <input type="checkbox" name="demo-checkbox" value="Food" />
              <i class="icon icon-checkbox"></i>
              <div class="item-inner">
                <div class="item-title">Food</div>
              </div>
            </label>
          </li>
          <li>
            <label class="item-checkbox item-checkbox-icon-start item-content">
              <input type="checkbox" name="demo-checkbox" value="Drinks" />
              <i class="icon icon-checkbox"></i>
              <div class="item-inner">
                <div class="item-title">Drinks</div>
              </div>
            </label>
          </li>
        </ul>
      </div>

      <div class="list list-strong inset list-dividers-ios">
        <ul>
          <li>
            <label class="item-checkbox item-checkbox-icon-end item-content">
              <input type="checkbox" name="demo-checkbox" value="Books" checked />
              <i class="icon icon-checkbox"></i>
              <div class="item-inner">
                <div class="item-title">Books</div>
              </div>
            </label>
          </li>
          <li>
            <label class="item-checkbox item-checkbox-icon-end item-content">
              <input type="checkbox" name="demo-checkbox" value="Movies" />
              <i class="icon icon-checkbox"></i>
              <div class="item-inner">
                <div class="item-title">Movies</div>
              </div>
            </label>
          </li>
          <li>
            <label class="item-checkbox item-checkbox-icon-end item-content">
              <input type="checkbox" name="demo-checkbox" value="Food" />
              <i class="icon icon-checkbox"></i>
              <div class="item-inner">
                <div class="item-title">Food</div>
              </div>
            </label>
          </li>
          <li>
            <label class="item-checkbox item-checkbox-icon-end item-content">
              <input type="checkbox" name="demo-checkbox" value="Drinks" />
              <i class="icon icon-checkbox"></i>
              <div class="item-inner">
                <div class="item-title">Drinks</div>
              </div>
            </label>
          </li>
        </ul>
      </div>
```

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

### app.searchbar.create(parameters)

Source: https://framework7.io/docs/searchbar.html

Initializes a Searchbar with the given parameters and returns the Searchbar instance.

```APIDOC
## app.searchbar.create(parameters)

### Description
Initializes a Searchbar with the given parameters and returns the Searchbar instance.

### Method
create

### Parameters
- **parameters** (object) - Required - Object with Searchbar parameters.

### Returns
- **Searchbar instance** - The initialized Searchbar instance.
```

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

### app.messagebar.create(parameters)

Source: https://framework7.io/docs/messagebar.html

Initializes a Messagebar with the given parameters and returns the Messagebar instance.

```APIDOC
## app.messagebar.create(parameters)

### Description
Initializes a Messagebar with the given parameters and returns the Messagebar instance.

### Method
create

### Parameters
- **parameters** (object) - Required - Object with Messagebar parameters.

### Returns
- **Messagebar instance** - The initialized Messagebar instance.
```

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

### Access List Index Instance with app.listIndex.get

Source: https://framework7.io/docs/list-index.html

Use the 'app.listIndex.get' method to retrieve the auto-initialized List Index instance. The example shows how to get the instance and access its 'indexes' property.

```javascript
var listIndex = app.listIndex.get('.list-index');

var indexes = listIndex.indexes;
// do something with indexes
```

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

### Using Framework7.support and app.support

Source: https://framework7.io/docs/support.html

Shows how to check for touch support before app initialization using Framework7.support, and after initialization using app.support. Logs 'No touch support' if touch is not supported.

```javascript
// If we need it in place where we don't have access to app instance or before we init the app
if (!Framework7.support.touch) {
  console.log('No touch support');
}


// After we init the app we can access it as app instance property
var app = new Framework7({ /*...*/ });

if (!app.support.touch) {
  console.log('No touch support');
}
```

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

### HTML5 validation examples

Source: https://framework7.io/docs/inputs.html

Shows various input validation setups using required, validate, pattern, data-error-message, and data-validate-on-blur attributes. Validation is based on the input type and browser behavior.

```html
<!-- default validation, check for value is not empty -->
<input type="text" placeholder="Your name" required validate />

<!-- default email validation, value must be email -->
<input type="email" placeholder="Your e-mail" required validate />

<!-- default url validation -->
<input type="url" placeholder="Your URL" required validate />

<!-- pattern validation, value must be "apple" or "banana" -->
<input type="text" required validate pattern="apple|banana" placeholder="Type 'apple' or 'banana'" />

<!-- pattern validation with custom error message, value must be numbers only -->
<input type="text" placeholder="Enter number" required validate pattern="[0-9]*" data-error-message="Only numbers please!" />

<!-- this input will be validated only on blur -->
<input type="text" placeholder="Your name" required validate data-validate-on-blur="true" />
```

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

### app.virtualList.create(parameters)

Source: https://framework7.io/docs/virtual-list.html

Initializes a Virtual List with the given parameters and returns the Virtual List instance.

```APIDOC
## app.virtualList.create(parameters)

### Description
Initializes a Virtual List with the given parameters and returns the Virtual List instance.

### Method
create

### Parameters
- **parameters** (object) - Required - Object with virtual list parameters.

### Returns
- **VirtualList** - The initialized Virtual List instance.
```

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

### .touchstart()

Source: https://framework7.io/docs/dom7.html

Triggers the 'touchstart' event on the collection.

```APIDOC
## .touchstart()

### Description
Triggers the 'touchstart' event on the collection.

### Method
.touchstart()

### Parameters
None

### Returns
- (Dom7) - The Dom7 collection (for chaining).
```

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

### Build custom Framework7 version

Source: https://framework7.io/docs/custom-build.html

Run this command to build the custom Framework7 version using the specified config file and output folder.

```bash
npm run build-core:prod -- --config scripts/my-config.js --output path/to/output/folder
```

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

### Initialize Statusbar with iosOverlaysWebView Parameter

Source: https://framework7.io/docs/statusbar.html

Pass statusbar parameters on app initialization under the `statusbar` property. This example sets `iosOverlaysWebView` to true, making the statusbar overlay the WebView on iOS. Requires Cordova/Capacitor environment with cordova-plugin-statusbar installed.

```javascript
var app = new Framework7({
  statusbar: {
    iosOverlaysWebView: true,
  },
});
```

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

### Contacts List HTML Structure

Source: https://framework7.io/docs/contacts-list.html

HTML markup for a contacts list with multiple list groups. Each group has a title and list items with item content and inner wrappers. The example includes groups for names starting with C and V.

```html
<div class="item-title">Calvin</div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">Candy</div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">Carl</div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">Cherilyn</div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">Chester</div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">Chloe</div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="list-group">
        <ul>
          <li class="list-group-title">V</li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">Vladimir</div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
```

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

### Create a popup instance with app.popup.create

Source: https://framework7.io/docs/popup.html

Call app.popup.create with parameters to initialize a popup. The returned instance provides methods and properties listed in the documentation.

```javascript
var popup = app.popup.create({ /* parameters */ })
```

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

### new Framework7(parameters)

Source: https://framework7.io/docs/app.html

Creates a new Framework7 app instance. The constructor accepts an object with app parameters and returns the main app instance.

```APIDOC
## new Framework7(parameters)

### Description
Creates a new Framework7 app instance. The constructor accepts an object with app parameters and returns the main app instance.

### Method
Constructor

### Parameters
#### App Parameters
- **el** (string) - Optional - App root element. Default is `body`. Required if main app layout is not a direct child of `<body>`.
- **component** (Router Component) - Optional - Load app layout from passed main app component. Only for Framework7 Core version.
- **componentUrl** (string Component) - Optional - Path to Single File main app component to be loaded via XHR. Only for Framework7 Core version.
- **name** (string) - Optional - App name. Default is `Framework7`. Can be used by other components, e.g. as the default title for Dialog component.
- **theme** (string) - Optional - App theme. Can be `ios`, `md` or `auto`. Default is `auto`. In case of `auto` it will use iOS theme for iOS devices and MD theme for all other devices.
- **colors** (object) - Optional - App colors. Must be an object with mandatory `primary` key and other colors you may need. For all colors specified here, app will generate dynamic CSS styles with Material You color palette. Default is:
```
{
  primary: '#007aff',
  red: '#ff3b30',
  green: '#4cd964',
  blue: '#2196f3',
  pink: '#ff2d55',
  yellow: '#ffcc00',
  orange: '#ff9500',
  purple: '#9c27b0',
  deeppurple: '#673ab7',
  lightblue: '#5ac8fa',
  teal: '#009688',
  lime: '#cddc39',
  deeporange: '#ff6b22',
  white: '#ffffff',
  black: '#000000',
}
```
- **userAgent** (string) - Optional - User agent string. Required when used on server-side environments for correct device detection.
- **routes** (array) - Optional - Array with default routes to all views. Default is `[]`.
- **lazyModulesPath** (string) - Optional - Path to Framework7's lazy components. Required to use Lazy Modules with browser modules.
- **darkMode** (boolean|string) - Optional - If set to `true`, enables dark mode. If set to `false`, disables dark mode. If set to `auto` automatically enables dark theme based on user system color scheme preference. This feature support is based on `(prefers-color-scheme)` media query support. Default is `undefined`.
- **init** (boolean) - Optional - By default Framework7 will be initialized automatically when you call `new Framework7()`. If you want to prevent this behavior you can disable it with this option and then initialize it manually with `app.init()` when you need it. Default is `true`.
- **initOnDeviceReady** (boolean) - Optional - If automatic initialization is enabled with `init: true` parameter and app is running under cordova environment then it will be initialized on `deviceready` event. Default is `true`.
- **iosTranslucentBars** (boolean) - Optional - Enable translucent effect (blur background) on navigation bars for iOS theme (on iOS devices). Default is `true`.
- **iosTranslucentModals** (boolean) - Optional - Enable translucent effect (blur background) on modals (Dialog, Popover, Actions) for iOS theme (on iOS devices). Default is `true`.
- **on** (object) - Optional - Object with events handlers. Default is `{}`. Example:
```
var app = new Framework7({
  on: {
    init: function () {
      console.log('App initialized');
    },
    pageInit: function () {
      console.log('Page initialized');
    },
  }
})
```

#### Clicks Module Parameters
- **clicks** (object) - Optional - Object with clicks-module related parameters. Example:
```
var app = new Framework7({
  clicks: {
    externalLinks: '.external',
  }
})
```
- **clicks.externalLinks** (string) - Optional - CSS selector for links that should be treated as external and shouldn't be handled by Framework7. Default is `'.external'`. For example such '.external' value will match to links like `<a href="somepage.html" class="external">` (with class "external").

#### Touch Module Parameters
- **touch** (object) - Optional - Object with touch-module related parameters. Example:
```
var app = new Framework7({
  touch: {
    tapHold: true,
  }
})
```

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

### Response
Returns the main app Framework7 instance.
```

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

### Calendar component template with input fields for various modes

Source: https://framework7.io/docs/calendar.html

HTML template for the calendar example page. It includes input fields for default setup, custom date format, date+time, multiple values, range picker, modal, and a container for inline calendar. Each input has a unique ID used by the script to initialize the corresponding calendar.

```html
<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="left">
          <a class="link back">
            <i class="icon icon-back"></i>

          </a>
        </div>
        <div class="title">Calendar</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block">
        <p>Calendar is a touch optimized component that provides an easy way to handle dates.</p>
        <p>Calendar could be used as inline component or as overlay. Overlay Calendar will be automatically converted to
          Popover on tablets (iPad).</p>
      </div>
      <div class="block-title">Default setup</div>
      <div class="list list-strong inset">
        <ul>
          <li>
            <div class="item-content item-input">
              <div class="item-inner">
                <div class="item-input-wrap">
                  <input type="text" placeholder="Your birth date" readonly="readonly" id="demo-calendar-default" />
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="block-title">Custom date format</div>
      <div class="list list-strong inset">
        <ul>
          <li>
            <div class="item-content item-input">
              <div class="item-inner">
                <div class="item-input-wrap">
                  <input type="text" placeholder="Select date" readonly="readonly" id="demo-calendar-date-format" />
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="block-title">Date + Time</div>
      <div class="list list-strong inset">
        <ul>
          <li>
            <div class="item-content item-input">
              <div class="item-inner">
                <div class="item-input-wrap">
                  <input type="text" placeholder="Select date and time" readonly="readonly"
                    id="demo-calendar-date-time" />
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="block-title">Multiple Values</div>
      <div class="list list-strong inset">
        <ul>
          <li>
            <div class="item-content item-input">
              <div class="item-inner">
                <div class="item-input-wrap">
                  <input type="text" placeholder="Select multiple dates" readonly="readonly"
                    id="demo-calendar-multiple" />
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="block-title">Range Picker</div>
      <div class="list list-strong inset">
        <ul>
          <li>
            <div class="item-content item-input">
              <div class="item-inner">
                <div class="item-input-wrap">
                  <input type="text" placeholder="Select date range" readonly="readonly" id="demo-calendar-range" />
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="block-title">Open in Modal</div>
      <div class="list list-strong inset">
        <ul>
          <li>
            <div class="item-content item-input">
              <div class="item-inner">
                <div class="item-input-wrap">
                  <input type="text" placeholder="Select date" readonly="readonly" id="demo-calendar-modal" />
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="block-title">Calendar Page</div>
      <div class="list list-strong inset">
        <ul>
          <li>
            <a href="/calendar-page/" class="item-content item-link">
              <div class="item-inner">
                <div class="item-title">Open Calendar Page</div>
              </div>
            </a>
          </li>
        </ul>
      </div>
      <div class="block-title">Inline with custom toolbar</div>
      <div class="block block-strong inset no-padding">
        <div id="demo-calendar-inline-container"></div>
      </div>
    </div>
  </div>
</template>
```

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

### Framework7 App Initialization with Parameters

Source: https://framework7.io/docs/init-app.html

Initializes Framework7 with a configuration object specifying the root element (`el: '#app'`), app name, swipe panel settings, and default routes. Additional parameters can be added as needed.

```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
});
```

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

### Get property value

Source: https://framework7.io/docs/dom7.html

Gets the 'checked' property of the first input element.

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

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

### Initialize Framework7 with main app component

Source: https://framework7.io/docs/router-component.html

Specify the main app component on Framework7 init using the component option. Requires importing the component file.

```javascript
// import main app component
import App from './path/to/app.f7';

var app = new Framework7({
  // specify main app component
  component: App,
})
```

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

### Using $f7 to access Framework7 app instance

Source: https://framework7.io/docs/router-component.html

The `$f7` helper provides the Framework7 app instance. This example shows how to show a dialog alert.

```javascript
$f7.dialog.alert('Hello world!')
```

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

### app.init()

Source: https://framework7.io/docs/app.html

Initializes the app. Use this method if you disabled auto initialization with the 'init: false' parameter.

```APIDOC
## app.init()

### Description
Initializes the app. Use this method if you disabled auto initialization with the 'init: false' parameter.

### Method
init

### Parameters
None

### Example
```js
app.init();
```
```

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

### Get attribute value

Source: https://framework7.io/docs/dom7.html

Gets the href attribute of an anchor element. Includes HTML and JavaScript.

```html
<a href="http://google.com">Google</a>
```

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

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

### .touchstart(handler)

Source: https://framework7.io/docs/dom7.html

Adds a 'touchstart' event handler to the collection.

```APIDOC
## .touchstart(handler)

### Description
Adds a 'touchstart' event handler to the collection.

### Method
.touchstart(handler)

### Parameters
- **handler** (function) - Required - The event handler function.

### Returns
- (Dom7) - The Dom7 collection (for chaining).
```

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

### Create a Toast instance with app.toast.create

Source: https://framework7.io/docs/toast.html

Call app.toast.create with parameters to initialize a Toast instance. The returned instance provides methods and properties listed in the documentation.

```javascript
var toast = app.toast.create({ /* parameters */ })
```

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

### Get input value

Source: https://framework7.io/docs/dom7.html

Gets the current value of the first matched element. Includes HTML and JavaScript.

```html
<input id="myInput" type="text" value="Lorem ipsum"/>
```

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

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

### Using $f7ready to call Framework7 APIs safely

Source: https://framework7.io/docs/router-component.html

The main app component is mounted before app initialization finishes. Use $f7ready callback to safely call Framework7 APIs immediately.

```html
<template>
  <div id="app">
    ...
  </div>
</template>
<script>
  export default (props, { $f7ready, $f7 }) => {
    $f7ready(() => {
      // now it is safe to call Framework7 APIs
      $f7.dialog.alert('Hello!');
    })
  }
</script>
```

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

### Picker on event handler example

Source: https://framework7.io/docs/picker.html

Example of using the 'on' parameter to handle the 'opened' event of a picker.

```javascript
var picker = app.picker.create({
  ...
  on: {
    opened: function () {
      console.log('Picker opened')
    }
  }
})
```
Tokens:
Raw