### Install Framework7 with NPM

Source: https://github.com/framework7io/v5.framework7.io/blob/master/docs/installation.html

Installs the Framework7 library using the Node Package Manager (NPM). This is a common method for including framework dependencies in web projects.

```bash
$ npm install framework7
```

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

### Prepare Ad - Framework7

Source: https://github.com/framework7io/v5.framework7.io/blob/master/docs-demos/core/vi.html

Creates and prepares an ad for later playback. It ensures the ad is loaded and ready to start when needed. This example uses Framework7's vi API and handles SDK readiness.

```javascript
var theme = 'ios';
if (location.href.indexOf('theme=md') >= 0) theme = 'md';
if (location.href.indexOf('theme=aurora') >= 0) theme = 'aurora';

var plugin = {
  params: {
    theme: theme,
    root: '#app',
  }
};

if (Framework7.use) Framework7.use(plugin);
else if (Framework7.Class && Framework7.Class.use) Framework7.Class.use(plugin);

var app = new Framework7({
  id: 'io.framework7.testapp',
  vi: {
    placementId: 'pltd4o7ibb9rc653x14',
  }
});

var $$ = Dom7;

// Create prepaire ad
var prepairedAd;
if (!app.vi.sdkReady) {
  app.on('viSdkReady', function () {
    prepairedAd = app.vi.createAd({
      autoplay: false,
    });
  })
} else {
  prepairedAd = app.vi.createAd({
    autoplay: false,
  });
}

// Show prepaired ad
$$('.show-prepaired').on('click', function () {
  prepairedAd.start();
});
```

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

### Install Project Dependencies (Shell)

Source: https://github.com/framework7io/v5.framework7.io/blob/master/docs/custom-build.html

This command installs all the necessary dependencies required for the Framework7 project, as defined in its `package.json` file. Navigate to the Framework7 repository folder before executing.

```shell
$ npm install
```

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

### Framework7 Calendar Initialization and Configuration Examples

Source: https://github.com/framework7io/v5.framework7.io/blob/master/docs-demos/core/calendar.html

This snippet demonstrates the basic initialization of the Framework7 Calendar component and showcases various configuration options. It covers default setup, custom date formatting, enabling time pickers, selecting multiple dates, range selection, modal presentation, event display, disabling specific dates, and creating an inline calendar with a custom toolbar.

```javascript
var theme = 'ios';
if (location.href.indexOf('theme=md') >= 0) theme = 'md';
if (location.href.indexOf('theme=aurora') >= 0) theme = 'aurora';

var plugin = {
  params: {
    theme: theme,
    root: '#app',
  }
};

if (Framework7.use) Framework7.use(plugin);
else if (Framework7.Class && Framework7.Class.use) Framework7.Class.use(plugin);

var app = new Framework7();

// Default
var calendarDefault = app.calendar.create({
  inputEl: '#demo-calendar-default',
});

// With custom date format
var calendarDateFormat = app.calendar.create({
  inputEl: '#demo-calendar-date-format',
  dateFormat: {
    weekday: 'long',
    month: 'long',
    day: '2-digit',
    year: 'numeric'
  },
});

// Date + Time
var calendarDateTime = app.calendar.create({
  inputEl: '#demo-calendar-date-time',
  timePicker: true,
  dateFormat: {
    month: 'numeric',
    day: 'numeric',
    year: 'numeric',
    hour: 'numeric',
    minute: 'numeric'
  },
});

// With multiple values
var calendarMultiple = app.calendar.create({
  inputEl: '#demo-calendar-multiple',
  dateFormat: {
    month: 'short',
    day: 'numeric'
  },
  multiple: true
});

// Range Picker
var calendarRange = app.calendar.create({
  inputEl: '#demo-calendar-range',
  rangePicker: true
});

// Custom modal
var calendarModal = app.calendar.create({
  inputEl: '#demo-calendar-modal',
  openIn: 'customModal',
  header: true,
  footer: true,
});

// With events
var now = new Date();
var today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
var weekLater = new Date().setDate(today.getDate() + 7);

var calendarEvents = app.calendar.create({
  inputEl: '#demo-calendar-events',
  events: [
    { from: today, to: weekLater },
    //- more events this day
    { date: today, color: '#ff0000' },
    { date: today, color: '#00ff00' },
  ]
});

// Disabled
var today = new Date();
var weekLater = new Date().setDate(today.getDate() + 7);

var calendarDisabled = app.calendar.create({
  inputEl: '#demo-calendar-disabled',
  disabled: {
    from: today,
    to: weekLater
  }
});

// Inline with custom toolbar
var $$ = Dom7;
var monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

var calendarInline = app.calendar.create({
  containerEl: '#demo-calendar-inline-container',
  value: [new Date()],
  weekHeader: false,
  renderToolbar: function () {
    return '<div class="toolbar calendar-custom-toolbar no-shadow">' +
      '<div class="toolbar-inner">' +
        '<div class="left">' +
          '<a href="#" class="link icon-only"><i class="icon icon-back ' + (app.theme === 'md' ? 'color-black' : '') + '"></i></a>' +
        '</div>' +
        '<div class="center"></div>' +
        '<div class="right">' +
          '<a href="#" class="link icon-only"><i class="icon icon-forward ' + (app.theme === 'md' ? 'color-black' : '') + '"></i></a>' +
        '</div>' +
      '</div>' +
    '</div>';
  },
  on: {
    init: function (c) {
      $$('.calendar-custom-toolbar .center').text(monthNames[c.currentMonth] + ', ' + c.currentYear);
      $$('.calendar-custom-toolbar .left .link').on('click', function () {
        calendarInline.prevMonth();
      });
      $$('.calendar-custom-toolbar .right .link').on('click', function () {
        calendarInline.nextMonth();
      });
    },
    monthYearChangeStart: function (c) {
      $$('.calendar-custom-toolbar .center').text(monthNames[c.currentMonth] + ', ' + c.currentYear);
    }
  }
});
```

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

### Framework7 Initialization and Login Screen Route

Source: https://github.com/framework7io/v5.framework7.io/blob/master/docs-demos/core/login-screen.html

Initializes a Framework7 application, allowing theme selection based on URL parameters. It defines a route for a login screen, loading its content directly from a string. This snippet demonstrates core Framework7 setup and routing.

```javascript
var theme = 'ios';
if (location.href.indexOf('theme=md') >= 0) theme = 'md';
if (location.href.indexOf('theme=aurora') >= 0) theme = 'aurora';

var plugin = {
  params: {
    theme: theme,
    root: '#app',
  }
};

if (Framework7.use) Framework7.use(plugin);
else if (Framework7.Class && Framework7.Class.use) Framework7.Class.use(plugin);

var $$ = Dom7;

var app = new Framework7({
  routes: [
    {
      path: '/login-screen/',
      /* We can load it from url like: url: 'login-screen.html'
         But in this example we load it just from content string */
      content: '\ <div class="page no-navbar no-toolbar no-swipeback">\ 
<div class="page-content login-screen-content">\ 
<div class="login-screen-title">My App</div>\ 
<form>\ 
<div class="list">\ 
<ul>\ 
<li class="item-content item-input">\ 
<div class="item-inner">\ 
<div class="item-title item-label">Username</div>\ 
<div class="item-input-wrap">\ 
<input type="text" name="username" placeholder="Your username">\ 
</div>\ 
</div>\ 
</li>\ 
<li class="item-content item-input">\ 
<div class="item-inner">\ 
<div class="item-title item-label">Password</div>\ 
<div class="item-input item-input-wrap">\ 
<input type="password" name="password" placeholder="Your password">\ 
</div>\ 
</div>\ 
</li>\ 
</ul>\ 
</div>\ 
<div class="list">\ 
<ul>\ 
<li><a href="#" class="list-button">Sign In</a></li>\ 
</ul>\ 
<div class="block-footer">\ 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>\ 
<p><a href="#" class="link back">Close Login Screen</a></p>\ 
</div>\ 
</div>\ 
</form>\ 
</div>\ 
</div>'
    }
  ]
});
```

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

### Framework7 Plugin Installation

Source: https://github.com/framework7io/v5.framework7.io/blob/master/docs/plugins-api.html

Demonstrates how to install a custom Framework7 plugin using the `.use()` method. Plugins must be installed before initializing the Framework7 app instance.

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

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

### Framework7 Text Editor: Default Setup and Placeholder

Source: https://github.com/framework7io/v5.framework7.io/blob/master/docs-demos/react/text-editor.html

Demonstrates the basic usage of the Framework7 Text Editor component, including how to set up a default editor and how to use a placeholder for user input. No external dependencies are required beyond the Framework7 library.

```javascript
class AppComponent extends React.Component {
  constructor() {
    super();
    this.state = {
      customButtons: {
        hr: {
          content: '&lt;hr&gt;',
          onClick(editor, buttonEl) {
            document.execCommand('insertHorizontalRule', false);
          },
        },
      },
      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> <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>`,
      listEditorValue: '',
    };
  }
  render() {
    return (
      <App>
        <View main>
          <Page>
            <Navbar title="Text Editor"></Navbar>
            <BlockTitle>Default Setup</BlockTitle>
            <TextEditor />
            <BlockTitle>With Placeholder</BlockTitle>
            <TextEditor placeholder="Enter text..." />
            <BlockTitle>With Default Value</BlockTitle>
            <TextEditor placeholder="Enter text..." value={this.state.customValue} onTextEditorChange={(value) => this.setState({ customValue: value })} />
            <BlockTitle>Specific Buttons</BlockTitle>
            <BlockHeader>It is possible to customize which buttons (commands) to show.</BlockHeader>
            <TextEditor placeholder="Enter text..." buttons= {[
              ['bold', 'italic', 'underline', 'strikeThrough'],
              ['orderedList', 'unorderedList']
            ]} />
            <BlockTitle>Custom Button</BlockTitle>
            <BlockHeader>It is possible to create custom editor buttons. Here is the custom "hr" button that adds horizontal rule:</BlockHeader>
            <TextEditor placeholder="Enter text..." customButtons={this.state.customButtons} buttons= {[
              ['bold', 'italic', 'underline', 'strikeThrough'],
              'hr'
            ]} />
            <BlockTitle>Resizable</BlockTitle>
            <BlockHeader>Editor will be resized based on its content.</BlockHeader>
            <TextEditor placeholder="Enter text..." resizable buttons= {['bold', 'italic', 'underline', 'strikeThrough']} />
            <BlockTitle>Popover Mode</BlockTitle>
            <BlockHeader>In this mode, there is no toolbar with buttons, but they appear as popover when you select any text in editor.</BlockHeader>
            <TextEditor placeholder="Enter text..." mode="popover" buttons= {['bold', 'italic', 'underline', 'strikeThrough']} style={{'--f7-text-editor-height': '150px'}} />
            <BlockTitle>Keyboard Toolbar Mode</BlockTitle>
            <BlockHeader>In this mode, toolbar with buttons will appear on top of virtual keyboard when editor is in the focus. It is supported only in iOS, Android cordova apps and in Android Chrome. When not supported it will fallback to "popover" mode.</BlockHeader>
            <TextEditor placeholder="Enter text..." mode="keyboard-toolbar" style={{'--f7-text-editor-height': '150px'}} />
            <BlockTitle>As List Input</BlockTitle>
            <BlockHeader>Text editor can be used in list with other inputs. In this example it is enabled with "keyboard-toolbar"/"popover" type for "About" field.</BlockHeader>
            <List>
              <ListInput type="text" label="Name" placeholder="Your name" />
              <ListInput type="texteditor" label="About" placeholder="About" resizable textEditorParams={{ mode: 'popover', buttons: ['bold', 'italic', 'underline', 'strikeThrough'] }} value={this.state.listEditorValue} onTextEditorChange={(value) => this.setState({listEditorValue: value})} />
            </List>
          </Page>
        </View>
      </App>
    )
  }
}
```

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

### Initialize Framework7 App with Configuration and Routes (JavaScript)

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

Demonstrates the basic initialization of a Framework7 application. This includes setting up core configurations such as app ID, name, theme, root element, and defining application-wide data, methods, routes, and event handlers. It requires the Framework7 library to be included in the project.

```javascript
var app = new Framework7({
  // App identification
  id: 'com.myapp.test',
  name: 'My Application',
  version: '1.0.0',

  // Root element selector
  root: '#app',

  // Theme: 'auto', 'ios', 'md', or 'aurora'
  theme: 'auto',

  // App data accessible throughout the app
  data: function () {
    return {
      user: {
        firstName: 'John',
        lastName: 'Doe',
      },
    };
  },

  // App-wide methods
  methods: {
    helloWorld: function () {
      app.dialog.alert('Hello World!');
    },
  },

  // Application routes
  routes: [
    {
      path: '/',
      url: './index.html',
    },
    {
      path: '/about/',
      url: './pages/about.html',
    },
  ],

  // Component-specific parameters
  panel: {
    swipe: true,
  },

  dialog: {
    title: 'My App',
  },

  popup: {
    closeOnEscape: true,
  },

  // Event handlers
  on: {
    init: function () {
      console.log('App initialized');
    },
    pageInit: function () {
      console.log('Page initialized');
    },
  },
});

// The app instance provides access to all Framework7 APIs
console.log(app.name); // 'My Application'
console.log(app.theme); // 'ios', 'md', or 'aurora'
```

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

### Create Framework7 App and Photo Browser Instances (JavaScript)

Source: https://github.com/framework7io/v5.framework7.io/blob/master/docs-demos/core/photo-browser.html

Initializes a Framework7 application and creates multiple Photo Browser instances with different configurations. It handles theme selection based on URL parameters and sets up event listeners to open the photo browsers.

```javascript
var theme = 'ios';
if (location.href.indexOf('theme=md') >= 0) theme = 'md';
if (location.href.indexOf('theme=aurora') >= 0) theme = 'aurora';

var plugin = {
  params: {
    theme: theme,
    root: '#app',
  }
};

if (Framework7.use) Framework7.use(plugin);
else if (Framework7.Class && Framework7.Class.use) Framework7.Class.use(plugin);

var app = new Framework7();
var $$ = Dom7;

/*=== Default standalone ===*/
var myPhotoBrowserStandalone = app.photoBrowser.create({
  photos: [
    'https://cdn.framework7.io/placeholder/sports-1024x1024-1.jpg',
    'https://cdn.framework7.io/placeholder/sports-1024x1024-2.jpg',
    'https://cdn.framework7.io/placeholder/sports-1024x1024-3.jpg',
  ]
});

$$('.pb-standalone').on('click', function () {
  myPhotoBrowserStandalone.open();
});

/*=== Popup ===*/
var myPhotoBrowserPopup = app.photoBrowser.create({
  photos: [
    'https://cdn.framework7.io/placeholder/sports-1024x1024-1.jpg',
    'https://cdn.framework7.io/placeholder/sports-1024x1024-2.jpg',
    'https://cdn.framework7.io/placeholder/sports-1024x1024-3.jpg',
  ],
  type: 'popup'
});

$$('.pb-popup').on('click', function () {
  myPhotoBrowserPopup.open();
});

/*=== As Page ===*/
var myPhotoBrowserPage = app.photoBrowser.create({
  photos: [
    'https://cdn.framework7.io/placeholder/sports-1024x1024-1.jpg',
    'https://cdn.framework7.io/placeholder/sports-1024x1024-2.jpg',
    'https://cdn.framework7.io/placeholder/sports-1024x1024-3.jpg',
  ],
  type: 'page',
  pageBackLinkText: 'Back'
});

$$('.pb-page').on('click', function () {
  myPhotoBrowserPage.open();
});

/*=== Standalone Dark ===*/
var myPhotoBrowserDark = app.photoBrowser.create({
  photos: [
    'https://cdn.framework7.io/placeholder/sports-1024x1024-1.jpg',
    'https://cdn.framework7.io/placeholder/sports-1024x1024-2.jpg',
    'https://cdn.framework7.io/placeholder/sports-1024x1024-3.jpg',
  ],
  theme: 'dark'
});

$$('.pb-standalone-dark').on('click', function () {
  myPhotoBrowserDark.open();
});

/*=== Popup Dark ===*/
var myPhotoBrowserPopupDark = app.photoBrowser.create({
  photos: [
    'https://cdn.framework7.io/placeholder/sports-1024x1024-1.jpg',
    'https://cdn.framework7.io/placeholder/sports-1024x1024-2.jpg',
    'https://cdn.framework7.io/placeholder/sports-1024x1024-3.jpg',
  ],
  theme: 'dark',
  type: 'popup'
});

$$('.pb-popup-dark').on('click', function () {
  myPhotoBrowserPopupDark.open();
});

/*=== With Captions ===*/
var myPhotoBrowserCaptions = app.photoBrowser.create({
  photos: [
    {
      url: 'https://cdn.framework7.io/placeholder/sports-1024x1024-1.jpg',
      caption: 'Caption 1 Text'
    },
    {
      url: 'https://cdn.framework7.io/placeholder/sports-1024x1024-2.jpg',
      caption: 'Second Caption Text'
    },
    {
      url: 'https://cdn.framework7.io/placeholder/sports-1024x1024-3.jpg',
    },
  ],
  theme: 'dark',
  type: 'standalone'
});

$$('.pb-standalone-captions').on('click', function () {
  myPhotoBrowserCaptions.open();
});

/*=== With Video ===*/
var myPhotoBrowserVideo = app.photoBrowser.create({
  photos: [
    {
      html: '<iframe src="//www.youtube.com/embed/lmc21V-zBq0" frameborder="0" allowfullscreen></iframe>',
      caption: 'Woodkid - Run Boy Run (Official HD Video)'
    },
    {
      url: 'https://cdn.framework7.io/placeholder/sports-1024x1024-2.jpg',
      caption: 'Second Caption Text'
    },
    {
      url: 'https://cdn.framework7.io/placeholder/sports-1024x1024-3.jpg',
    },
  ],
  theme: 'dark',
  type: 'standalone'
});

$$('.pb-standalone-video').on('click', function () {
  myPhotoBrowserVideo.open();
});
```

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

### Framework7 React Radio Group with Icon Placement

Source: https://github.com/framework7io/v5.framework7.io/blob/master/react/radio.html

Illustrates creating a radio group where the radio icon can be positioned at the start or end of the list item. This example shows both 'radioIcon="start"' and 'radioIcon="end"' configurations.

```jsx
<BlockTitle>Radio Group</BlockTitle>
    <BlockHeader>Icon in the beginning of the list item</BlockHeader>
    <List>
      <ListItem
        radio
        radioIcon="start"
        title="Books"
        value="Books"
        name="demo-radio-start"
        defaultChecked
      ></ListItem>
      <ListItem
        radio
        radioIcon="start"
        title="Movies"
        value="Movies"
        name="demo-radio-start"
      ></ListItem>
      <ListItem
        radio
        radioIcon="start"
        title="Food"
        value="Food"
        name="demo-radio-start"
      ></ListItem>
      <ListItem
        radio
        radioIcon="start"
        title="Drinks"
        value="Drinks"
        name="demo-radio-start"
      ></ListItem>
    </List>
    
    <BlockHeader>Icon in the end of the list item</BlockHeader>
    <List>
      <ListItem
        radio
        radioIcon="end"
        title="Books"
        value="Books"
        name="demo-radio-end"
        defaultChecked
      ></ListItem>
      <ListItem
        radio
        radioIcon="end"
        title="Movies"
        value="Movies"
        name="demo-radio-end"
      ></ListItem>
      <ListItem
        radio
        radioIcon="end"
        title="Food"
        value="Food"
        name="demo-radio-end"
      ></ListItem>
      <ListItem
        radio
        radioIcon="end"
        title="Drinks"
        value="Drinks"
        name="demo-radio-end"
      ></ListItem>
    </List>
```

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

### Route Configuration Examples Framework7

Source: https://github.com/framework7io/v5.framework7.io/blob/master/docs/routes.html

Demonstrates various ways to define routes in Framework7, including loading pages from HTML files, dynamic content, existing DOM elements, templates, and components. It also shows how to handle dynamic URL parameters.

```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 template
  {
    path: '/template/:name/',
    template: '
      <div class="page">
        <div class="page-content">
          <div class="block">
            <p>Hello {{$route.params.name}}</p>
          </div>
        </div>
      </div>
    ',
  },
  // By template URL
  {
    path: '/blog/',
    templateUrl: './pages/blog.html',
  },
  // By component
  {
    path: '/posts/',
    component: {
      // component definition
    },
  },
  // By component url
  {
    path: '/post/:id/',
    componentUrl: './pages/component.html',
  },
  // Async loading
  {
    path: '/something/',
    async: function (routeTo, routeFrom, resolve, reject) {
      // Requested route
      console.log(routeTo);
      // Get external data and return template7 template
      this.app.request.json('http://some-endpoint/', function (data) {
        resolve(
          // How and what to load: template
          {
            template: '<div class="page">{{users}}</div>'
          },
          // Custom template context
          {
            context: {
              users: data,
            },
          }
        );
      });
    }
  }
]
```

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

### Install Gulp Globally (Shell)

Source: https://github.com/framework7io/v5.framework7.io/blob/master/docs/custom-build.html

This command installs Gulp, a JavaScript task runner, globally on your system. It's a prerequisite for using the Framework7 build process. Ensure Node.js is installed before running this command.

```shell
$ npm install --global gulp
```

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

### Swiper Minimal Layout Example (React)

Source: https://github.com/framework7io/v5.framework7.io/blob/master/react/swiper.html

A basic example of the Swiper component in React, displaying a minimal layout with three slides. This serves as a starting point for integrating Swiper into a React application.

```javascript
<Swiper>
  <SwiperSlide>Slide 1</SwiperSlide>
  <SwiperSlide>Slide 2</SwiperSlide>
  <SwiperSlide>Slide 3</SwiperSlide>
</Swiper>
```

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

### Smart Select Initialization with Parameters

Source: https://github.com/framework7io/v5.framework7.io/blob/master/docs/smart-select.html

Demonstrates how to create a new Smart Select instance using the `app.smartSelect.create` method, passing an object of configuration parameters. This example shows common parameters like `pageTitle`, `openIn`, and event handlers.

```javascript
var smartSelect = app.smartSelect.create({
  el: '#my-smart-select',
  openIn: 'popup',
  pageTitle: 'Select Option',
  on: {
    opened: function () {
      console.log('Smart select opened');
    }
  }
});
```

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

### Preloader Examples (HTML)

Source: https://github.com/framework7io/v5.framework7.io/blob/master/docs/preloader.html

Provides HTML examples for various preloader configurations, including default, color variations, multicolor (MD theme), and preloader modals. These examples showcase different ways to integrate and style the preloader.

```html
<div class="block-title">Default</div>
<div class="block block-strong align-items-stretch text-align-center">
  <div class="row text-align-center">
    <div class="col-25">
      <div class="preloader"></div>
    </div>
    <div class="col-25" style="background: #222">
      <div class="preloader color-white"></div>
    </div>
    <!-- Large preloaders -->
    <div class="col-25">
      <div class="preloader" style="width: 44px; height: 44px"></div>
    </div>
    <div class="col-25" style="background: #222">
      <div class="preloader color-white" style="width: 44px; height: 44px"></div>
    </div>
  </div>
</div>

<div class="block-title">Color Preloaders</div>
<div class="block block-strong">
  <div class="row">
    <div class="col-25">
      <div class="preloader color-red"></div>
    </div>
    <div class="col-25">
      <div class="preloader color-green"></div>
    </div>
    <div class="col-25">
      <div class="preloader color-orange"></div>
    </div>
    <div class="col-25">
      <div class="preloader color-blue"></div>
    </div>
  </div>
</div>

<div class="block-title">Multi-color (MD-theme only)</div>
<div class="block block-strong text-align-center">
  <div class="preloader color-multi"></div>
</div>

<div class="block-title">Preloader Modals</div>
<div class="block block-strong">
  <p>With <b>app.preloader.show()</b> you can show small overlay with preloader indicator.</p>
  <p>
    <a class="button button-raised open-preloader-indicator">Open Small Indicator</a>
  </p>
</div>
```

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

### Framework7 Messagebar Initialization with Parameters (JavaScript)

Source: https://github.com/framework7io/v5.framework7.io/blob/master/docs/messagebar.html

Example of creating a Framework7 Messagebar instance with specific parameters, including event handlers. This demonstrates how to configure the messagebar upon initialization.

```javascript
var messagebar = app.messagebar.create({
  el: '.messagebar',
  on: {
    change: function () {
      console.log('Textarea value changed')
    }
  }
})
```

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

### React: Framework7 Radio Groups with ListItems

Source: https://github.com/framework7io/v5.framework7.io/blob/master/docs-demos/react/radio.html

Illustrates creating radio groups using Framework7's List and ListItem components in React. It includes examples for placing radio icons at the start or end of list items and setting a default checked option.

```jsx
class AppComponent extends React.Component {
  constructor() {
    super();
    this.state = {};
  }

  render() {
    return (
      <App>
        <View main>
          <Page>
            <Navbar title="Radio"></Navbar>
            <BlockTitle>Radio Group</BlockTitle>
            <BlockHeader>Icon in the beginning of the list item</BlockHeader>
            <List>
              <ListItem radio radioIcon="start" title="Books" value="Books" name="demo-radio-start" defaultChecked></ListItem>
              <ListItem radio radioIcon="start" title="Movies" value="Movies" name="demo-radio-start"></ListItem>
              <ListItem radio radioIcon="start" title="Food" value="Food" name="demo-radio-start"></ListItem>
              <ListItem radio radioIcon="start" title="Drinks" value="Drinks" name="demo-radio-start"></ListItem>
            </List>
            <BlockHeader>Icon in the end of the list item</BlockHeader>
            <List>
              <ListItem radio radioIcon="end" title="Books" value="Books" name="demo-radio-end" defaultChecked></ListItem>
              <ListItem radio radioIcon="end" title="Movies" value="Movies" name="demo-radio-end"></ListItem>
              <ListItem radio radioIcon="end" title="Food" value="Food" name="demo-radio-end"></ListItem>
              <ListItem radio radioIcon="end" title="Drinks" value="Drinks" name="demo-radio-end"></ListItem>
            </List>
          </Page>
        </View>
      </App>
    )
  }
}
```

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

### Framework7 Text Editor: Default Setup and Custom Buttons

Source: https://github.com/framework7io/v5.framework7.io/blob/master/docs-demos/core/text-editor.html

This snippet demonstrates the default setup of the Framework7 Text Editor and how to define custom buttons, such as an 'hr' button for inserting horizontal rules. It initializes the editor with specific custom buttons and defines their behavior.

```javascript
var theme = 'ios';
if (location.href.indexOf('theme=md') >= 0) theme = 'md';
if (location.href.indexOf('theme=aurora') >= 0) theme = 'aurora';
var plugin = {
  params: {
    theme: theme,
    root: '#app',
  }
};
if (Framework7.use) Framework7.use(plugin);
else if (Framework7.Class && Framework7.Class.use) Framework7.Class.use(plugin);

var app = new Framework7();

var textEditorCustomButtons = app.textEditor.create({
  el: '.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"
  ],
});
```

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

### Framework7 Autocomplete: Dropdown with Placeholder Text (JavaScript)

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

This JavaScript example demonstrates a Framework7 Autocomplete dropdown that displays placeholder text within the dropdown itself, guiding the user on what to type. The `dropdownPlaceholderText` option is used for this purpose, alongside a `source` function for filtering fruit names.

```javascript
// Dropdown with placeholder
self.autocompleteDropdownPlaceholder = app.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);
  }
});
```

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

### Initialize Framework7 App

Source: https://github.com/framework7io/v5.framework7.io/blob/master/docs/app.html

Demonstrates the basic initialization of a Framework7 application with essential parameters like ID and panel configuration. This is the foundational step for using Framework7.

```javascript
var app = new Framework7({
  // App id
  id: 'com.myapp.test',
  // Enable swipe panel
  panel: {
    swipe: true,
  },
  // ... other parameters
});
```

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

### Dom7 - Attribute Manipulation (Get, Set, Remove)

Source: https://github.com/framework7io/v5.framework7.io/blob/master/docs/dom7.html

Details the usage of Dom7's `.attr()` and `.removeAttr()` methods for handling HTML attributes. Examples include getting an attribute's value, setting a single attribute, setting multiple attributes with an object, and removing an attribute.

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

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

```javascript
//Set all links to google
$$('a').attr('href', 'http://google.com');
```

```javascript
$$('a').attr({
  id: 'new-id',
  title: 'Link to Google',
  href: 'http://google.com'
})
```

```javascript
//Remove "src" attribute from all images
$$('img').removeAttr('src');
```

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

### App Initialization and Parameters

Source: https://github.com/framework7io/v5.framework7.io/blob/master/docs/app.html

This section details how to initialize a new Framework7 app using the `Framework7` constructor and outlines the various parameters available for configuration, such as app ID, theme, routes, data, methods, and event handlers.

```APIDOC
## App Initialization

Initialize a new Framework7 app using the `new Framework7()` constructor with an object of main app parameters.

### Method

`new Framework7(parameters)`

### Parameters

#### App Parameters

- **root** (string) - Optional - App root element. Defaults to `body`.
- **component** (Router Component) - Optional - Load app layout from a main app component. (Framework7 Core only).
- **componentUrl** (string) - Optional - Path to a Single File main app component to load via XHR. (Framework7 Core only).
- **id** (string) - Optional - App bundle ID. Defaults to `io.framework7.testapp`.
- **name** (string) - Optional - App name. Defaults to `Framework7`.
- **version** (string) - Optional - App version. Defaults to `1.0.0`.
- **theme** (string) - Optional - App theme. Can be `ios`, `md`, `aurora`, or `auto`. Defaults to `auto`.
- **language** (string) - Optional - App language. Defaults to browser's `navigator.language`.
- **routes** (array) - Optional - Array with default routes for all views. Defaults to `[]`.
- **data** (function) - Optional - App root data. Must be a function that returns an object with root data.
- **methods** (object) - Optional - App root methods. An object with methods.
- **lazyModulesPath** (string) - Optional - Path to Framework7's lazy components.
- **autoDarkTheme** (boolean) - Optional - Automatically enables dark theme based on system preference. Defaults to `false`.
- **init** (boolean) - Optional - If `false`, prevents automatic initialization. Defaults to `true`.
- **initOnDeviceReady** (boolean) - Optional - If `init` is `true` and running in Cordova, initializes on `deviceready` event. Defaults to `true`.
- **iosTranslucentBars** (boolean) - Optional - Enable translucent effect for navigation bars in iOS theme. Defaults to `true`.
- **iosTranslucentModals** (boolean) - Optional - Enable translucent effect for modals in iOS theme. Defaults to `true`.
- **on** (object) - Optional - Object with event handlers.

#### Clicks Module Parameters

- **clicks** (object) - Optional - Object with clicks-module related parameters.
  - **externalLinks** (string) - Optional - CSS selector for links to be treated as external. Defaults to `'.external'`.

#### Touch Module Parameters

- **touch** (object) - Optional - Object with touch-module related parameters.
  - **touchClicksDistanceThreshold** (number) - Optional - Distance threshold for touch clicks. Defaults to `5`.

### Request Example

```javascript
var app = new Framework7({
  id: 'com.myapp.test',
  panel: {
    swipe: true,
  },
  data: function () {
    return {
      username: 'vladimir',
      firstName: 'Vladimir',
      lastName: 'Kharlampidi'
    };
  },
  methods: {
    showAlert: function() {
      app.dialog.alert('Hello World');
    }
  },
  on: {
    init: function () {
      console.log('App initialized');
    },
  }
});
```

### Response

The constructor returns the main app Framework7 instance.
```

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

### Framework7 Vue Toggle Component Examples

Source: https://github.com/framework7io/v5.framework7.io/blob/master/vue/toggle.html

This snippet shows how to implement Framework7 v5 toggle switches within a Vue.js application. It includes examples of basic toggles, toggles with predefined colors, and disabled toggles. The component is part of the Framework7 Vue library and requires proper setup of the Framework7 Vue environment.

```html
<f7-block-title>Super Heroes</f7-block-title>
<f7-list simple-list>
  <f7-list-item>
    <span>Batman</span>
    <f7-toggle checked></f7-toggle>
  </f7-list-item>
  <f7-list-item>
    <span>Aquaman</span>
    <f7-toggle checked color="blue"></f7-toggle>
  </f7-list-item>
  <f7-list-item>
    <span>Superman</span>
    <f7-toggle checked color="red"></f7-toggle>
  </f7-list-item>
  <f7-list-item>
    <span>Hulk</span>
    <f7-toggle color="green"></f7-toggle>
  </f7-list-item>
  <f7-list-item>
    <span>Spiderman (Disabled)</span>
    <f7-toggle disabled></f7-toggle>
  </f7-list-item>
  <f7-list-item>
    <span>Ironman (Disabled)</span>
    <f7-toggle checked disabled></f7-toggle>
  </f7-list-item>
  <f7-list-item>
    <span>Thor</span>
    <f7-toggle checked color="orange"></f7-toggle>
  </f7-list-item>
  <f7-list-item>
    <span>Wonder Woman</span>
    <f7-toggle color="pink"></f7-toggle>
  </f7-list-item>
</f7-list>
```

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

### Install Project Dependencies

Source: https://github.com/framework7io/v5.framework7.io/blob/master/docs/kitchen-sink.html

Installs all the necessary dependencies for the Framework7 project. This command should be executed within the root directory of the downloaded Framework7 repository after cloning or downloading it. It reads the `package.json` file to determine which packages to install.

```bash
npm install
```

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

### Framework7 Chips Examples (Text, Outline, Icon)

Source: https://github.com/framework7io/v5.framework7.io/blob/master/docs/chips.html

Provides various examples of Framework7 chips, including basic text chips, outline style chips, and chips with media icons. These examples showcase different use cases and styling options within blocks.

```html
<div class="block-title">Chips With Text</div>
<div class="block block-strong">
  <div class="chip">
    <div class="chip-label">Example Chip</div>
  </div>
  <div class="chip">
    <div class="chip-label">Another Chip</div>
  </div>
  <div class="chip">
    <div class="chip-label">One More Chip</div>
  </div>
  <div class="chip">
    <div class="chip-label">Fourth Chip</div>
  </div>
  <div class="chip">
    <div class="chip-label">Last One</div>
  </div>
</div>

<div class="block-title">Outline Chips</div>
<div class="block block-strong">
  <div class="chip chip-outline">
    <div class="chip-label">Example Chip</div>
  </div>
  <div class="chip chip-outline">
    <div class="chip-label">Another Chip</div>
  </div>
  <div class="chip chip-outline">
    <div class="chip-label">One More Chip</div>
  </div>
  <div class="chip chip-outline">
    <div class="chip-label">Fourth Chip</div>
  </div>
  <div class="chip chip-outline">
    <div class="chip-label">Last One</div>
  </div>
</div>

<div class="block-title">Icon Chips</div>
<div class="block block-strong">
  <div class="chip">
    <div class="chip-media bg-color-blue">
      <i class="icon f7-icons if-not-md">plus_circle</i>
      <i class="icon material-icons md-only">add_circle</i>
    </div>
    <div class="chip-label">Add Contact</div>
  </div>
  <div class="chip">
    <div class="chip-media bg-color-green">
      <i class="icon f7-icons if-not-md">compass</i>
      <i class="icon material-icons md-only">location_on</i>
    </div>
    <div class="chip-label">London</div>
  </div>
  <div class="chip">
    <div class="chip-media bg-color-red">
      <i class="icon f7-icons if-not-md">person</i>
    </div>
  </div>
```

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

### Navbar with All Parts Configured

Source: https://github.com/framework7io/v5.framework7.io/blob/master/vue/navbar.html

An example combining left navigation elements, a title, and right-side action links within the Framework7 Navbar component. This illustrates a comprehensive navbar setup.

```vue
<f7-navbar>
  <f7-nav-left back-link="Back"></f7-nav-left>
  <f7-nav-title>My App</f7-nav-title>
  <f7-nav-right>
    <f7-link icon="icon-bars" panel-open="right"></f7-link>
  </f7-nav-right>
</f7-navbar>
```

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

### Framework7 Date Picker Input Examples (HTML)

Source: https://github.com/framework7io/v5.framework7.io/blob/master/react/inputs.html

Illustrates the usage of Framework7's date picker input component. Demonstrates default setup, custom date formatting, multiple date selection, range selection, and opening the date picker in a modal. All examples utilize the 'ListInput' component with 'type="datepicker"'.

```html
<List noHairlinesMd>
  <ListInput
    label="Default setup"
    type="datepicker"
    placeholder="Your birth date"
    readonly
  />
  <ListInput
    label="Custom date format"
    type="datepicker"
    placeholder="Select date"
    readonly
    calendarParams={{dateFormat: 'DD, MM dd, yyyy'}}
  />
  <ListInput
    label="Multiple Values"
    type="datepicker"
    placeholder="Select multiple dates"
    readonly
    calendarParams={{ dateFormat: 'M dd yyyy', multiple: true }}
  />
  <ListInput
    label="Range Picker"
    type="datepicker"
    placeholder="Select date range"
    readonly
    calendarParams={{ dateFormat: 'M dd yyyy', rangePicker: true }}
  />
  <ListInput
    label="Open in Modal"
    type="datepicker"
    placeholder="Select date"
    readonly
    calendarParams={{openIn: 'customModal', header: true, footer: true, dateFormat: 'MM dd yyyy'}}
  />
</List>
```

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

### Framework7 Media List HTML Example

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

Provides an HTML example of a media list in Framework7, showcasing how to include images (avatars) and detailed information for each list item, such as names, status, titles, and descriptions.

```html
// Media list with avatars and descriptions
var mediaListHTML = "\n  <div class=\"list media-list\">\n    <ul>\n      <li>\n        <a href=\"/user/1/\" class=\"item-link item-content\">\n          <div class=\"item-media\">\n            <img src=\"avatar.jpg\" width=\"44\" />\n          </div>\n          <div class=\"item-inner\">\n            <div class=\"item-title-row\">\n              <div class=\"item-title\">John Doe</div>\n              <div class=\"item-after\">Online</div>\n            </div>\n            <div class=\"item-subtitle\">Software Developer</div>\n            <div class=\"item-text\">Last message preview...</div>\n          </div>\n        </a>\n      </li>\n    </ul>\n  </div>\n";
```