### Install Dependencies

Source: https://github.com/framework7io/framework7/blob/master/README.md

Run this command in your project's root directory to install all necessary dependencies for Framework7 development.

```bash
$ npm install
```

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

### Framework7 Component Setup

Source: https://github.com/framework7io/framework7/blob/master/kitchen-sink/core/pages/page-loader-component.html

Defines a Framework7 component with props, context, data, methods, store integration, and lifecycle hooks.

```javascript
export default (props, { $f7, $update, $on, $onBeforeMount, $onMounted, $onBeforeUpdate, $onUpdated, $onBeforeUnmount, $onUnmounted, $store, }) => { // Component Data const age = 25; const like = 
	['Tennis', 'Chess', 'Football'];
let name = 'Jimmy';
let clickCounter = 0;
let listItems = null;
let listLoading = null;
// Component Methods function openAlert() {
	$f7.dialog.alert('Hello World');
}
function onInput(e) {
	name = e.target.value;
	$update();
}
function onButtonClick() {
	clickCounter += 1;
	$update();
}
function loadList() {
	listLoading = true;
	$update();
	// Emulate Ajax request
	setTimeout(() => {
		listLoading = false;
		listItems = [1, 2, 3, 4, 5];
		$update();
	}, 2000);
}
// Store
let users = $store.getters.users;
let usersLoading = $store.getters.usersLoading;
window.users = users;
function loadUsers() {
	$store.dispatch('loadUsers');
}
// Lifecycle Hooks
$onBeforeMount(() => {
	console.log('Component BeforeMount')
})
$onMounted(() => {
	console.log('Component Mounted')
})
$onBeforeUpdate(() => {
	console.log('Component BeforeUpdate')
})
$onUpdated(() => {
	console.log('Component Updated')
})
$onBeforeUnmount(() => {
	console.log('Component BeforeUnmount')
})
$onUnmounted(() => {
	console.log('Component Unmounted')
})
// Page Events
$on('pageMounted', function (e, page) {
	console.log('pageMounted', page);
})
$on('pageInit', function (e, page) {
	console.log('pageInit', page);
})
$on('pageBeforeIn', function (e, page) {
	console.log('pageBeforeIn', page);
})
$on('pageAfterIn', function (e, page) {
	console.log('pageAfterIn', page);
})
$on('pageBeforeOut', function (e, page) {
	console.log('pageBeforeOut', page);
})
$on('pageAfterOut', function (e, page) {
	console.log('pageAfterOut', page);
})
$on('pageBeforeRemove', function (e, page) {
	console.log('pageBeforeRemove', page);
})
return $render;
}
```

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

### Open Alert Dialog - JavaScript

Source: https://github.com/framework7io/framework7/blob/master/kitchen-sink/core/pages/dialog.html

Use this to display a simple alert message to the user. It requires no additional setup beyond the Framework7 instance.

```javascript
const openAlert = () => {
  $f7.dialog.alert('Hello!');
}
```

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

### Button Loading State Example

Source: https://github.com/framework7io/framework7/blob/master/kitchen-sink/core/pages/buttons.html

Demonstrates how to implement a loading state for buttons using component state and the $update function. Useful for asynchronous operations.

```javascript
export default (props, { $update }) => {
  let isLoading1 = false;
  let isLoading2 = false;

  const load1 = () => {
    if (isLoading1) return;
    isLoading1 = true;
    $update();
    setTimeout(() => {
      isLoading1 = false;
      $update();
    }, 4000);
  };

  const load2 = () => {
    if (isLoading2) return;
    isLoading2 = true;
    $update();
    setTimeout(() => {
      isLoading2 = false;
      $update();
    }, 4000);
  };

  return $render;
}
```

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

### Scrollable Tab Bar Example

Source: https://github.com/framework7io/framework7/blob/master/kitchen-sink/core/pages/tabbar-scrollable.html

This example shows a basic setup for a scrollable tab bar with multiple tabs. It includes a JavaScript component that manages the tab state and toolbar position.

```javascript
export default (props, { $update }) => {
  let toolbarPosition = 'bottom';
  const tabs = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  const toggleToolbarPosition = () => {
    toolbarPosition = toolbarPosition === 'top' ? 'bottom' : 'top';
    $update();
  }
  return $render;
};
```

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

### Open Prompt Dialog - JavaScript

Source: https://github.com/framework7io/framework7/blob/master/kitchen-sink/core/pages/dialog.html

Use this to get text input from the user. It accepts a callback function that receives the user's input.

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

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

### Initialize Calendar for Multiple Date Selection

Source: https://github.com/framework7io/framework7/blob/master/kitchen-sink/core/pages/calendar.html

Allows the user to select multiple dates by setting the `multiple` option to `true`. The `dateFormat` is also customized for this example.

```javascript
calendarMultiple = $f7.calendar.create({
  inputEl: '#demo-calendar-multiple',
  dateFormat: {
    month: 'short',
    day: 'numeric'
  },
  multiple: true
});
```

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

### Standalone Autocomplete (AJAX)

Source: https://github.com/framework7io/framework7/blob/master/kitchen-sink/core/pages/autocomplete.html

This example demonstrates fetching autocomplete data from an external JSON file using AJAX. It supports multiple selections, specifies value and text properties, and includes a preloader.

```javascript
var autocompleteStandaloneAjax = $f7.autocomplete.create({
  openIn: 'page',
  openerEl: '#autocomplete-standalone-ajax',
  multiple: true,
  valueProperty: 'id',
  textProperty: 'name',
  limit: 50,
  preloader: true,
  source: function (query, render) {
    var autocomplete = this;
    var results = [];
    if (query.length === 0) {
      render(results);
      return;
    }
    autocomplete.preloaderShow();
    fetch(`./js/autocomplete-languages.json?query=${query}`)
      .then((res) => res.json())
      .then((data) => {
        for (let i = 0; i < data.length; i += 1) {
          if (data[i].name.toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(data[i]);
        }
        autocomplete.preloaderHide();
        render(results);
      });
  },
  on: {
    change: function (value) {
      var itemText = [], inputValue = [];
      for (var i = 0; i < value.length; i++) {
        itemText.push(value[i].name);
        inputValue.push(value[i].id);
      }
      $('#autocomplete-standalone-ajax').find('.item-after').text(itemText.join(', '));
      $('#autocomplete-standalone-ajax').find('input').val(inputValue.join(', '));
    },
  },
});
```

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

### Initialize Framework7 App with Store and Routes

Source: https://context7.com/framework7io/framework7/llms.txt

Initializes a new Framework7 application instance. Requires a root element selector, theme, and optionally a store and routes configuration. The store can be created using Framework7.createStore.

```javascript
import Framework7 from 'framework7/bundle';

const store = Framework7.createStore({
  state: { user: null, cart: [] },
  actions: { setUser({ state }, user) { state.user = user; }, addToCart({ state }, item) { state.cart = [...state.cart, item]; } },
  getters: { cartCount({ state }) { return state.cart.length; } },
});

const app = new Framework7({
  el: '#app',
  name: 'My App',
  theme: 'auto',         // 'ios' | 'md' | 'auto'
  darkMode: false,
  store,
  routes: [
    { path: '/', url: './pages/home.html', name: 'home' },
    { path: '/product/:id/', componentUrl: './pages/product.html' },
    { path: '(.*)', url: './pages/404.html' },
  ],
  dialog: {
    title: 'My App',
    buttonOk: 'OK',
    buttonCancel: 'Cancel',
  },
  popup: { closeOnEscape: true },
  sheet: { closeOnEscape: true },
  panel: { swipe: true, swipeOnlyClose: true },
});

// app.theme => 'ios' or 'md'
// app.device => { ios, android, desktop, ... }
// app.router => main router instance

```

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

### App Initialization

Source: https://context7.com/framework7io/framework7/llms.txt

Initializes the Framework7 application instance. This should only be called once and accepts various parameters for configuration.

```APIDOC
## App Initialization — `new Framework7(params)`

Creates and initializes the single Framework7 application instance. Must only be called once. Accepts an `el` selector for the root element, a `theme` (`'ios'`, `'md'`, or `'auto'`), `routes` array, `store`, and per-component configuration objects.

```js
import Framework7 from 'framework7/bundle';

const store = Framework7.createStore({
  state: { user: null, cart: [] },
  actions: {
    setUser({ state }, user) { state.user = user; },
    addToCart({ state }, item) { state.cart = [...state.cart, item]; },
  },
  getters: {
    cartCount({ state }) { return state.cart.length; },
  },
});

const app = new Framework7({
  el: '#app',
  name: 'My App',
  theme: 'auto',         // 'ios' | 'md' | 'auto'
  darkMode: false,
  store,
  routes: [
    { path: '/', url: './pages/home.html', name: 'home' },
    { path: '/product/:id/', componentUrl: './pages/product.html' },
    { path: '(.*)', url: './pages/404.html' },
  ],
  dialog: {
    title: 'My App',
    buttonOk: 'OK',
    buttonCancel: 'Cancel',
  },
  popup: { closeOnEscape: true },
  sheet: { closeOnEscape: true },
  panel: { swipe: true, swipeOnlyClose: true },
});

// app.theme => 'ios' or 'md'
// app.device => { ios, android, desktop, ... }
// app.router => main router instance
```
```

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

### Create and Manage Dynamic Panel

Source: https://context7.com/framework7io/framework7/llms.txt

Initialize a dynamic panel with `app.panel.create`, specifying its element, side, effect, and swipe behavior. Configure `visibleBreakpoint` and `collapsedBreakpoint` for responsive behavior, and `resizable` for user resizing. Use `panel.open()` to display it.

```javascript
// Create a dynamic panel
const panel = app.panel.create({
  el: '.panel-right',
  side: 'right',
  effect: 'cover',          // 'cover' | 'reveal' | 'push' | 'floating'
  swipe: true,
  swipeActiveArea: 30,      // px from edge to start swipe
  visibleBreakpoint: 1024,  // always visible >= 1024px viewport
  collapsedBreakpoint: 768, // collapsed icon at 768–1024px
  resizable: true,
  on: {
    opened() { console.log('Panel opened'); },
    closed() { console.log('Panel closed'); },
    breakpoint() { console.log('Breakpoint triggered'); },
  },
});
panel.open();
```

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

### Create and Show Toast with Large Message

Source: https://github.com/framework7io/framework7/blob/master/kitchen-sink/core/pages/toast.html

Demonstrates a toast displaying a longer message. This example highlights how toasts can accommodate more extensive text content.

```javascript
const showToastLargeMessage = () => {
// Create toast
if (!toastLargeMessage) {
t oastLargeMessage = $f7.toast.create({
text: 'This toast contains a lot of text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, quae, ab. Delectus amet optio facere autem sapiente quisquam beatae culpa dolore.',
closeTimeout: 2000,
});
}
// Open it
t oastLargeMessage.open();
}
```

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

### Framework7 React App Initialization

Source: https://context7.com/framework7io/framework7/llms.txt

Sets up a Framework7 application using React components. It includes routing, theme configuration, and basic dialog settings. The `<View>` component manages the main navigation.

```jsx
import React from 'react';
import {
  App, View, Page, Navbar, NavRight, Link,
  Block, Button, List, ListItem,
  Popup, Sheet, Dialog,
  f7, f7ready,
} from 'framework7-react';
import routes from './routes.js';

const MyApp = () => (
  <App
    id="my-app"
    theme="auto"
    routes={routes}
    dialog={{ title: 'My App' }}
    popup={{ closeOnEscape: true }}
  >
    <View main url="/" />
  </App>
);
```

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

### Run Kitchen Sink

Source: https://github.com/framework7io/framework7/blob/master/README.md

Execute these npm scripts to build the development version of a specific Framework7 package and then run its corresponding Kitchen Sink application.

```bash
npm run core
```

```bash
npm run react
```

```bash
npm run vue
```

```bash
npm run svelte
```

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

### Initialize Calendar for Range Selection

Source: https://github.com/framework7io/framework7/blob/master/kitchen-sink/core/pages/calendar.html

Configures the calendar to allow selection of a date range by setting `rangePicker: true`. This is useful for selecting start and end dates.

```javascript
calendarRange = $f7.calendar.create({
  inputEl: '#demo-calendar-range',
  rangePicker: true
});
```

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

### Standalone Autocomplete (Popup)

Source: https://github.com/framework7io/framework7/blob/master/kitchen-sink/core/pages/autocomplete.html

Implement an autocomplete that opens within a popup. This example also supports single value selection and updates associated elements upon selection.

```javascript
var autocompleteStandalonePopup = $f7.autocomplete.create({
  openIn: 'popup',
  openerEl: '#autocomplete-standalone-popup',
  closeOnSelect: true,
  source: function (query, render) {
    var results = [];
    if (query.length === 0) {
      render(results);
      return;
    }
    for (var i = 0; i < fruits.length; i++) {
      if (fruits[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(fruits[i]);
    }
    render(results);
  },
  on: {
    change: function (value) {
      $('#autocomplete-standalone-popup').find('.item-after').text(value[0]);
      $('#autocomplete-standalone-popup').find('input').val(value[0]);
    },
  },
});
```

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

### Open Login Dialog - JavaScript

Source: https://github.com/framework7io/framework7/blob/master/kitchen-sink/core/pages/dialog.html

Use this to prompt the user for a username and password. The callback receives both values.

```javascript
const openLogin = () => {
  $f7.dialog.login('Enter your username and password', function (username, password) {
    $f7.dialog.alert('Thank you!<br />Username:' + username + '<br />Password:' + password);
  });
}
```

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

### Dropdown Autocomplete with Typeahead Functionality

Source: https://github.com/framework7io/framework7/blob/master/kitchen-sink/core/pages/autocomplete.html

Enables typeahead functionality for a dropdown autocomplete, meaning results are filtered as the user types. It specifically matches items that start with the query.

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

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

### Build Production Versions

Source: https://github.com/framework7io/framework7/blob/master/README.md

These npm scripts are used to build production-ready versions of Framework7 packages. Compiled results are located in the 'packages/' folder.

```bash
npm run build:prod
```

```bash
npm run build-core:prod
```

```bash
npm run build-react:prod
```

```bash
npm run build-vue:prod
```

```bash
npm run build-svelte:prod
```

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

### Dropdown Autocomplete with Placeholder Text

Source: https://github.com/framework7io/framework7/blob/master/kitchen-sink/core/pages/autocomplete.html

Implements a dropdown autocomplete that shows a placeholder text when the input is empty, guiding the user on what to type. It filters a list of fruits based on the query.

```javascript
autocompleteDropdownPlaceholder = $f7.autocomplete.create({
    inputEl: '#autocomplete-dropdown-placeholder',
    openIn: 'dropdown',
    dropdownPlaceholderText: 'Try to type "Apple"',
    source: function (query, render) {
      var results = [];
      if (query.length === 0) {
        render(results);
        return;
      }
      // Find matched items
      for (var i = 0; i < fruits.length; i++) {
        if (fruits[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(fruits[i]);
      }
      // Render items by passing array with result items
      render(results);
    }
  });
```

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

### Build Development Versions

Source: https://github.com/framework7io/framework7/blob/master/README.md

Use these npm scripts to build development versions of Framework7 packages. Compiled results are placed in the 'build/' folder.

```bash
npm run build:dev
```

```bash
npm run build-core:dev
```

```bash
npm run build-react:dev
```

```bash
npm run build-vue:dev
```

```bash
npm run build-svelte:dev
```

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

### Create iOS Device Picker

Source: https://github.com/framework7io/framework7/blob/master/kitchen-sink/core/pages/picker.html

Initializes an iOS-style picker for selecting a device. Requires an input element with the ID 'demo-picker-device'.

```javascript
pickerDevice = $f7.picker.create({
    inputEl: '#demo-picker-device',
    cols: [
      {
        textAlign: 'center',
        values: ['iPhone 4', 'iPhone 4S', 'iPhone 5', 'iPhone 5S', 'iPhone 6', 'iPhone 6 Plus', 'iPad 2', 'iPad Retina', 'iPad Air', 'iPad mini', 'iPad mini 2', 'iPad mini 3']
      }
    ]
  });
```

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

### Create a Simple Pie Chart

Source: https://github.com/framework7io/framework7/blob/master/kitchen-sink/core/pages/pie-chart.html

Initializes a basic pie chart with datasets. Ensure the target element exists in the DOM before initialization. The chart will be destroyed on component unmount.

```javascript
export default (props, { $f7, $onMounted, $onBeforeUnmount }) => {
  let pieSimple;
  $onMounted(() => {
    pieSimple = $f7.pieChart.create({
      el: '.pie-chart-1',
      datasets: [
        { value: 100, color: '#f00' },
        { value: 200, color: '#0f0' },
        { value: 300, color: '#00f' },
      ],
    });
  });
  $onBeforeUnmount(() => {
    pieSimple.destroy();
  });
  return $render;
}
```

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

### Handle Multiple Checkbox Changes

Source: https://github.com/framework7io/framework7/blob/master/kitchen-sink/core/pages/checkbox.html

This example demonstrates how to toggle between different states of a movie list based on the number of selected checkboxes. It resets the list to predefined states when a specific condition is met.

```javascript
export default (props, { $update }) => {
  let movies = ['Movie 1'];
  // ... onMovieChange function
  const onMoviesChange = (e) => {
    if (movies.length === 1 || movies.length === 0) {
      movies = ['Movie 1', 'Movie 2'];
    } else if (movies.length === 2) {
      movies = [];
    }
    $update();
  }
  return $render;
};
```

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

### Create a Pie Chart with Tooltip

Source: https://github.com/framework7io/framework7/blob/master/kitchen-sink/core/pages/pie-chart.html

Initializes a pie chart with tooltips enabled. Each slice can have a label displayed when hovering. The chart will be destroyed on component unmount.

```javascript
export default (props, { $f7, $onMounted, $onBeforeUnmount }) => {
  let pieTooltip;
  $onMounted(() => {
    pieTooltip = $f7.pieChart.create({
      el: '.pie-chart-2',
      tooltip: true,
      datasets: [
        { label: 'JavaScript', value: 150, color: '#ff0' },
        { label: 'Vue.js', value: 150, color: '#0f0' },
        { label: 'TypeScript', value: 400, color: '#00f' },
      ],
    });
  });
  $onBeforeUnmount(() => {
    pieTooltip.destroy();
  });
  return $render;
}
```

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

### Create a Pie Chart with Custom Tooltip

Source: https://github.com/framework7io/framework7/blob/master/kitchen-sink/core/pages/pie-chart.html

Initializes a pie chart with a custom tooltip format. The `formatTooltip` function allows for dynamic HTML content in the tooltip. The chart will be destroyed on component unmount.

```javascript
export default (props, { $f7, $onMounted, $onBeforeUnmount }) => {
  let pieCustomTooltip;
  $onMounted(() => {
    pieCustomTooltip = $f7.pieChart.create({
      el: '.pie-chart-3',
      tooltip: true,
      datasets: [
        { label: 'JavaScript', value: 1000, color: '#ff0' },
        { label: 'Vue.js', value: 100, color: '#0f0' },
        { label: 'TypeScript', value: 200, color: '#00f' },
      ],
      formatTooltip(data) {
        const { value, label, color } = data;
        return `You have <span style="color: ${color}">${value} points</span> for ${label}`;
      }
    });
  });
  $onBeforeUnmount(() => {
    pieCustomTooltip.destroy();
  });
  return $render;
}
```

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

### Create and Open Notification

Source: https://context7.com/framework7io/framework7/llms.txt

Initialize a notification banner using `app.notification.create`, configuring its content, icons, and behavior like `closeOnClick` and `swipeToClose`. Open it with `notification.open()`. The `on.click` and `on.close` events allow for custom actions.

```javascript
const notification = app.notification.create({
  icon: '<i class="f7-icons">bell_fill</i>',
  title: 'Framework7',
  titleRightText: 'now',
  subtitle: 'New message from John',
  text: 'Hey! Are you coming to the meeting?',
  closeOnClick: true,
  closeTimeout: 6000,
  swipeToClose: true,
  on: {
    click() {
      app.views.main.router.navigate('/messages/');
    },
    close() {
      console.log('Notification dismissed');
    },
  },
});
notification.open();
```

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

### Initialize Color Picker with Palette Module

Source: https://github.com/framework7io/framework7/blob/master/kitchen-sink/core/pages/color-picker.html

Initializes a color picker using the 'palette' module, allowing users to select colors from predefined swatches. Configured to open in 'auto' mode on desktop and 'sheet' on phone.

```javascript
colorPickerPalette = app.colorPicker.create({
  inputEl: '#demo-color-picker-palette',
  targetEl: '#demo-color-picker-palette-value',
  targetElSetBackgroundColor: true,
  modules: ['palette'],
  openIn: 'auto',
  openInPhone: 'sheet',
  palette: [
    ['#FFEBEE', '#FFCDD2', '#EF9A9A', '#E57373', '#EF5350', '#F44336', '#E53935', '#D32F2F', '#C62828', '#B71C1C'],
    ['#F3E5F5', '#E1BEE7', '#CE93D8', '#BA68C8', '#AB47BC', '#9C27B0', '#8E24AA', '#7B1FA2', '#6A1B9A', '#4A148C'],
    ['#E8EAF6', '#C5CAE9', '#9FA8DA', '#7986CB', '#5C6BC0', '#3F51B5', '#3949AB', '#303F9F', '#283593', '#1A237E'],
    ['#E1F5FE', '#B3E5FC', '#81D4FA', '#4FC3F7', '#29B6F6', '#03A9F4', '#039BE5', '#0288D1', '#0277BD', '#01579B'],
    ['#E0F2F1', '#B2DFDB', '#80CBC4', '#4DB6AC', '#26A69A', '#009688', '#00897B', '#00796B', '#00695C', '#004D40'],
    ['#F1F8E9', '#DCEDC8', '#C5E1A5', '#AED581', '#9CCC65', '#8BC34A', '#7CB342', '#689F38', '#558B2F', '#33691E'],
    ['#FFFDE7', '#FFF9C4', '#FFF59D', '#FFF176', '#FFEE58', '#FFEB3B', '#FDD835', '#FBC02D', '#F9A825', '#F57F17'],
    ['#FFF3E0', '#FFE0B2', '#FFCC80', '#FFB74D', '#FFA726', '#FF9800', '#FB8C00', '#F57C00', '#EF6C00', '#E65100'],
  ],
  value: {
    hex: '#FFEBEE',
  },
  formatValue: function (value) {
    return value.hex;
  },
});
```

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

### Initialize Color Picker with SB Spectrum and Hue Slider

Source: https://github.com/framework7io/framework7/blob/master/kitchen-sink/core/pages/color-picker.html

Initializes a color picker using the 'sb-spectrum' and 'hue-slider' modules. This provides a saturation-brightness spectrum and a hue slider for color selection. Configured to open in a popover.

```javascript
colorPickerSpectrum = app.colorPicker.create({
  inputEl: '#demo-color-picker-spectrum',
  targetEl: '#demo-color-picker-spectrum-value',
  targetElSetBackgroundColor: true,
  modules: ['sb-spectrum', 'hue-slider'],
  openIn: 'popover',
  value: {
    hex: '#ff0000',
  },
});
```

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

### Create Virtual List

Source: https://context7.com/framework7io/framework7/llms.txt

Initialize a high-performance virtual list for rendering thousands of items efficiently. Configure item rendering, fixed or dynamic heights, and search functionality.

```js
const vl = app.virtualList.create({
  el: '.virtual-list',
  items: Array.from({ length: 10000 }, (_, i) => ({
    id: i + 1,
    name: `Item ${i + 1}`,
    subtitle: `Subtitle for item ${i + 1}`,
  })),
  renderItem(item) {
    return `
      <li>
        <a href="/items/${item.id}/" class="item-link item-content">
          <div class="item-inner">
            <div class="item-title-row">
              <div class="item-title">${item.name}</div>
            </div>
            <div class="item-subtitle">${item.subtitle}</div>
          </div>
        </a>
      </li>
    `;
  },
  height: 64,    // fixed item height in px (or function for dynamic)
  searchAll(query, items) {
    // Called by searchbar; return array of matching indexes
    return items.reduce((acc, item, i) => {
      if (item.name.toLowerCase().includes(query.toLowerCase())) acc.push(i);
      return acc;
    }, []);
  },
  on: {
    itemBeforeInsert(list, el, item) {
      // Mutate el before DOM insert
    },
  },
});
```

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

### Create Swipeout Actions

Source: https://github.com/framework7io/framework7/blob/master/kitchen-sink/core/pages/swipeout.html

This code snippet demonstrates how to create and manage swipeout actions using Framework7's API. It initializes actions on component mount and destroys them on unmount.

```javascript
export default (props, { $f7, $onMounted, $onBeforeUnmount }) => {
  let actions;

  const more = () => {
    actions.open();
  }

  const mark = () => {
    $f7.dialog.alert('Mark');
  }

  const reply = () => {
    $f7.dialog.alert('Reply');
  }

  const forward = () => {
    $f7.dialog.alert('Forward');
  }

  const onDeleted = () => {
    $f7.dialog.alert('Thanks, item removed!');
  }

  $onBeforeUnmount(() => {
    actions.destroy();
  })

  $onMounted(() => {
    actions = $f7.actions.create({
      buttons: [
        [
          {
            text: 'Here comes some optional description or warning for actions below',
            label: true,
          },
          {
            text: 'Action 1',
          },
          {
            text: 'Action 2',
          },
        ],
        [
          {
            text: 'Cancel',
            strong: true,
          }
        ]
      ],
    })
  })

  return $render;
}
```

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

### Create Reactive Store with Framework7

Source: https://context7.com/framework7io/framework7/llms.txt

Use `createStore` to build a Flux-like state management system. Define state, actions for mutations, and getters for derived data. Changes to state trigger callbacks automatically.

```javascript
import { createStore } from 'framework7/bundle';

const store = createStore({
  state: {
    products: [],
    loading: false,
    filterCategory: 'all',
  },
  actions: {
    async fetchProducts({ state }) {
      state.loading = true;
      const res = await fetch('/api/products');
      state.products = await res.json();
      state.loading = false;
    },
    setFilter({ state }, category) {
      state.filterCategory = category;
    },
  },
  getters: {
    filteredProducts({ state }) {
      if (state.filterCategory === 'all') return state.products;
      return state.products.filter(p => p.category === state.filterCategory);
    },
    productCount({ state }) {
      return state.products.length;
    },
  },
});

// Dispatch an action
store.dispatch('fetchProducts');
store.dispatch('setFilter', 'electronics');

// Read state
console.log(store.state.products);

// Use a getter (returns { value, onUpdated })
const filtered = store.getters.filteredProducts;
console.log(filtered.value);                 // current computed value
filtered.onUpdated((newVal) => {
  console.log('Products updated:', newVal);
});
```

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

### Initialize Calendar with Events

Source: https://github.com/framework7io/framework7/blob/master/kitchen-sink/core/pages/calendar-page.html

Initializes a Framework7 calendar instance with specific dates, events, and event handlers for date changes and initialization. Use this to create an interactive calendar view.

```javascript
export default (props, { $f7, $, $el, $update, $on }) => {
  const date = new Date();
  const year = date.getFullYear();
  const month = date.getMonth();
  const day = date.getDate();
  let calendar;
  let eventItems = [];
  const today = new Date(year, month, day);
  const events = [
    { date: new Date(year, month, day), hours: 12, minutes: 30, title: 'Meeting with Vladimir',
      color: '#2196f3',
    },
    { date: new Date(year, month, day), hours: 18, minutes: 0, title: 'Shopping',
      color: '#4caf50',
    },
    { date: new Date(year, month, day), hours: 21, minutes: 0, title: 'Gym',
      color: '#e91e63',
    },
    { date: new Date(year, month, day + 2), hours: 16, minutes: 0, title: 'Pay loan',
      color: '#2196f3',
    },
    { date: new Date(year, month, day + 2), hours: 21, minutes: 0, title: 'Gym',
      color: '#ff9800',
    },
  ];

  const renderEvents = (calendar) => {
    var currentDate = calendar.value[0];
    var currentEvents = events.filter(function (event) {
      return (
        event.date.getTime() >= currentDate.getTime() &&
        event.date.getTime() < currentDate.getTime() + 24 * 60 * 60 * 1000
      );
    });
    eventItems = [];
    if (currentEvents.length) {
      currentEvents.forEach(function (event) {
        const hours = event.hours;
        let minutes = event.minutes;
        if (minutes < 10) minutes = `0${minutes}`;
        eventItems.push({
          title: event.title,
          time: `${hours}:${minutes}`,
          color: event.color,
        });
      });
    }
    $update();
  }

  $on('pageInit', () => {
    var monthNames = [
      'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August',
      'September', 'October', 'November', 'December',
    ];
    calendar = $f7.calendar.create({
      containerEl: '#calendar',
      toolbar: false,
      value: [today],
      events: events,
      on: {
        init: function (calendar) {
          $('.navbar-calendar-title').text(
            monthNames[calendar.currentMonth] + ', ' + calendar.currentYear
          );
          $f7.navbar.size($f7.navbar.getElByPage($el.value));
          calendar.$el.addClass('no-safe-area-right');
          renderEvents(calendar);
        },
        monthYearChangeStart: function (calendar) {
          $('.navbar-calendar-title').text(
            monthNames[calendar.currentMonth] + ', ' + calendar.currentYear
          );
          $f7.navbar.size($f7.navbar.getElByPage($el.value));
        },
        change: function (calendar) {
          renderEvents(calendar);
        },
      }
    });
  })

  $on('pageBeforeRemove', () => {
    calendar.destroy();
  })

  return $render;
};
```

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

### Create Text Editor with Custom Buttons

Source: https://github.com/framework7io/framework7/blob/master/kitchen-sink/core/pages/text-editor.html

Initializes a Framework7 text editor instance with custom buttons, including a 'hr' button for inserting horizontal rules. Ensure the target element exists and the page is initialized before creating the editor. The editor instance should be destroyed when the page is removed to prevent memory leaks.

```javascript
export default (props, { $f7, $el, $on }) => {
  let textEditorCustomButtons;
  $on('pageInit', () => {
    textEditorCustomButtons = $f7.textEditor.create({
      el: $el.value.find('.text-editor-custom-buttons'),
      // define custom "hr" button
      customButtons: {
        hr: {
          content: '&lt;hr&gt;',
          onClick(editor, buttonEl) {
            document.execCommand('insertHorizontalRule', false);
          },
        },
      },
      buttons: [
        ["bold", "italic", "underline", "strikeThrough"],
        "hr"
      ],
    });
  });

  $on('pageBeforeRemove', () => {
    textEditorCustomButtons.destroy()
  });

  return $render;
};
```

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

### Create Describe Yourself Picker

Source: https://github.com/framework7io/framework7/blob/master/kitchen-sink/core/pages/picker.html

Creates a picker with two columns for descriptive selections, enabling rotation effects. Uses input element with ID 'demo-picker-describe'.

```javascript
pickerDescribe = $f7.picker.create({
    inputEl: '#demo-picker-describe',
    rotateEffect: true,
    cols: [
      {
        textAlign: 'left',
        values: ('Super Amazing Bat Iron Rocket Lex Beautiful Wonderful Raining Happy Funny Cool Hot').split(' ')
      },
      {
        values: ('Man Luthor Woman Boy Girl Person Cutie Babe Raccoon').split(' ')
      },
    ]
  });
```

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

### Initialize Color Picker with RGB Bars

Source: https://github.com/framework7io/framework7/blob/master/kitchen-sink/core/pages/color-picker.html

Initializes a color picker with the 'rgb-bars' module, displaying RGB values as bars. Includes options for `barValue` and `barLabel`. The `openIn` property is set to 'auto'.

```javascript
colorPickerRgbBars = app.colorPicker.create({
  inputEl: '#demo-color-picker-rgb-bars',
  targetEl: '#demo-color-picker-rgb-bars-value',
  targetElSetBackgroundColor: true,
  modules: ['rgb-bars'],
  openIn: 'auto',
  barValue: true,
  barLabel: true,
  formatValue: function (value) {
    return 'rgb(' + value.rgb.join(', ') + ')';
  },
  value: {
    hex: '#0000ff',
  },
});
```

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

### Initialize Color Picker with HS Spectrum and Brightness Slider

Source: https://github.com/framework7io/framework7/blob/master/kitchen-sink/core/pages/color-picker.html

Initializes a color picker with 'hs-spectrum' and 'brightness-slider' modules. This configuration allows selection based on hue-saturation spectrum and a brightness slider. It opens in a popover.

```javascript
colorPickerHsSpectrum = app.colorPicker.create({
  inputEl: '#demo-color-picker-hs-spectrum',
  targetEl: '#demo-color-picker-hs-spectrum-value',
  targetElSetBackgroundColor: true,
  modules: ['hs-spectrum', 'brightness-slider'],
  openIn: 'popover',
  value: {
    hex: '#ff0000',
  },
});
```

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

### Initialize Color Picker with Wheel Module

Source: https://github.com/framework7io/framework7/blob/master/kitchen-sink/core/pages/color-picker.html

Initializes a color picker with the 'wheel' module. Use this for a circular color selection interface. It's configured to open in a popover.

```javascript
colorPickerWheel = app.colorPicker.create({
  inputEl: '#demo-color-picker-wheel',
  targetEl: '#demo-color-picker-wheel-value',
  targetElSetBackgroundColor: true,
  modules: ['wheel'],
  openIn: 'popover',
  value: {
    hex: '#00ff00',
  },
});
```

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

### Initialize Calendar with Date and Time Picker

Source: https://github.com/framework7io/framework7/blob/master/kitchen-sink/core/pages/calendar.html

Enables both date and time selection by setting `timePicker: true` and configuring the `dateFormat` to include time components.

```javascript
calendarDateTime = $f7.calendar.create({
  inputEl: '#demo-calendar-date-time',
  timePicker: true,
  dateFormat: {
    month: 'numeric',
    day: 'numeric',
    year: 'numeric',
    hour: 'numeric',
    minute: 'numeric'
  },
});
```

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

### Initialize Advanced Color Picker with Multiple Modules

Source: https://github.com/framework7io/framework7/blob/master/kitchen-sink/core/pages/color-picker.html

Initializes a comprehensive color picker ('pro' version) with multiple modules including 'initial-current-colors', 'sb-spectrum', 'hsb-sliders', 'rgb-sliders', 'alpha-slider', 'hex', and 'palette'. It allows for editable sliders and hex values, grouped modules, and opens in 'auto' mode.

```javascript
colorPickerRgbPro = app.colorPicker.create({
  inputEl: '#demo-color-picker-pro',
  targetEl: '#demo-color-picker-pro-value',
  targetElSetBackgroundColor: true,
  modules: ['initial-current-colors', 'sb-spectrum', 'hsb-sliders', 'rgb-sliders', 'alpha-slider', 'hex', 'palette'],
  openIn: 'auto',
  sliderValue: true,
  sliderValueEditable: true,
  sliderLabel: true,
  hexLabel: true,
  hexValueEditable: true,
  groupedModules: true,
  palette: [
    ['#FFEBEE', '#FFCDD2', '#EF9A9A', '#E57373', '#EF5350', '#F44336', '#E53935', '#D32F2F', '#C62828', '#B71C1C'],
    ['#F3E5F5', '#E1BEE7', '#CE93D8', '#BA68C8', '#AB47BC', '#9C27B0', '#8E24AA', '#7B1FA2', '#6A1B9A', '#4A148C'],
    ['#E8EAF6', '#C5CAE9', '#9FA8DA', '#7986CB', '#5C6BC0', '#3F51B5', '#3949AB', '#303F9F', '#283593', '#1A237E'],
    ['#E1F5FE', '#B3E5FC', '#81D4FA', '#4FC3F7', '#29B6F6', '#03A9F4', '#039BE5', '#0288D1', '#0277BD', '#01579B'],
    ['#E0F2F1', '#B2DFDB', '#80CBC4', '#4DB6AC', '#26A69A', '#009688', '#00897B', '#00796B', '#00695C', '#004D40'],
    ['#F1F8E9', '#DCEDC8', '#C5E1A5', '#AED581', '#9CCC65', '#8BC34A', '#7CB342', '#689F38', '#558B2F', '#33691E'],
    ['#FFFDE7', '#FFF9C4', '#FFF59D', '#FFF176', '#FFEE58', '#FFEB3B', '#FDD835', '#FBC02D', '#F9A825', '#F57F17'],
    ['#FFF3E0', '#FFE0B2', '#FFCC80', '#FFB74D', '#FFA726', '#FF9800', '#FB8C00', '#F57C00', '#EF6C00', '#E65100'],
  ],
  value: {
    hex: '#ffff00',
  },
  formatValue: function (value) {
    return 'rgb(' + value.rgb.join(', ') + ')';
  },
});
```

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

### Create Picker with Custom Columns

Source: https://context7.com/framework7io/framework7/llms.txt

Initialize a slot-machine style picker with custom values and display formats for each column. Useful for selecting dates, times, or other structured data.

```js
const picker = app.picker.create({
  inputEl: '#picker-input',
  rotateEffect: true,
  cols: [
    {
      values: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
      displayValues: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
      textAlign: 'left',
    },
    {
      values: (function buildDays() {
        const arr = [];
        for (let i = 1; i <= 31; i++) arr.push(String(i));
        return arr;
      }()),
    },
    {
      values: ['2025', '2026', '2027', '2028'],
    },
  ],
  formatValue(values) {
    return `${values[0]} ${values[1]}, ${values[2]}`;
  },
  on: {
    change(picker, values, displayValues) {
      console.log('Picked:', displayValues.join(' '));
    },
  },
});
```

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

### Create and Show Toast with Callback

Source: https://github.com/framework7io/framework7/blob/master/kitchen-sink/core/pages/toast.html

Demonstrates using a callback function that executes when the toast is closed. This allows for performing actions after a toast is dismissed.

```javascript
const showToastWithCallback = () => {
// Create toast
if (!toastWithCallback) {
t oastWithCallback = $f7.toast.create({
text: 'Callback on close',
closeButton: true,
on: {
close: function () {
$f7.dialog.alert('Toast closed');
},
}
});
}
// Open it
t oastWithCallback.open();
}
```

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

### Initialize Color Picker with Initial/Current Colors and RGB Sliders

Source: https://github.com/framework7io/framework7/blob/master/kitchen-sink/core/pages/color-picker.html

Initializes a color picker that displays both the initial and current color selections, combined with 'rgb-sliders'. Useful for comparing color changes. Opens in a popover.

```javascript
colorPickerRgbPrevCurrentColors = app.colorPicker.create({
  inputEl: '#demo-color-picker-rgb-initial-current-colors',
  targetEl: '#demo-color-picker-rgb-initial-current-colors-value',
  targetElSetBackgroundColor: true,
  modules: ['initial-current-colors', 'rgb-sliders'],
  openIn: 'popover',
  sliderValue: true,
  sliderLabel: true,
  formatValue: function (value) {
    return 'rgb(' + value.rgb.join(', ') + ')';
  },
  value: {
    hex: '#ffff00',
  },
});
```

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

### Open Multiple Alerts - JavaScript

Source: https://github.com/framework7io/framework7/blob/master/kitchen-sink/core/pages/dialog.html

Demonstrates opening several alert dialogs sequentially. Each alert must be closed before the next appears.

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