nolimits4web

<!-- new navbar-large class for navbar with large title -->
<div class="navbar navbar-large">
  <div class="navbar-bg"></div>
  <div class="navbar-inner">
    <!-- ... -->
    <div class="title-large">...</div>
  </div>
</div>

nolimits4web

// In v4 we had
app.request.promise(...)
  .then((data) => {
    console.log(`Response data is: ${data}`)
  })
  .catch((status) => {
    console.log(status);
  })
  
// In v5 it is

nolimits4web

const app = new Framework7(/*...*/);

if (app.online) {
  console.log('online!');
}
if (!app.online) {
  console.log('offline!');
}

app.on('online', () => {

nolimits4web

<!-- add navbar-large-transparent class -->
<div class="navbar navbar-large navbar-large-transparent">
  <div class="navbar-bg"></div>
  <div class="navbar-inner">
    <!-- ... -->
    <div class="title-large">...</div>
  </div>
</div>

nolimits4web

<div id="app">
  <div class="panel panel-left panel-reveal">
    ...
  </div>
  <div class="panel panel-right panel-cover">
    ...
  </div>
</div>
<script>
  var app = new Framework7({

nolimits4web

<div id="app">
  <!--
  * new "panel-init" class to auto init the panel
  * swipe and visibleBreakpoint passed as data- attributes
  -->
  <div class="panel panel-left panel-reveal panel-init" data-swipe="true" data-visible-breakpoint="768">
    ...
  </div>
  <div class="panel panel-right panel-cover panel-init" data-visible-breakpoint="1024">
    ...

nolimits4web

// return promise
{
  //...
  data() {
    return new Promise((resolve) => {
      fetch('some/path')
        .then(res => res.json())
        .then(user => resolve({ user }))
    });
  },

nolimits4web

this.$setState({foo: 'bar'});
this.$setState({john: 'doe'});
this.$tick(() => {
  // DOM updated
});

// Or with callback
this.$setState({foo: 'bar'}, () => {
  // DOM updated
});

nolimits4web

var myMixin = {
  data: function() {
    return {
      foo: 'bar',
    }
  },
  mounted: function() {
    console.log('mounted')
  }
}

nolimits4web

import { Component } from 'famework7';

export default class extends Component {
  data() {
    return { foo: 'bar' }
  }
  mounted() {
    console.log('mounted');
    this.onMounted(); // call method
  }