Simon MacDonald
simonmacdonald.com
@macdonst
Framework7 is an open source HTML framework to develop apps with iOS & Android native look and feel
iOS
Material
<div id="app">
<!-- Statusbar -->
<f7-statusbar></f7-statusbar>
<!-- Main View -->
<f7-view id="main-view" url="/" main>
<f7-page>
<f7-navbar sliding title="Home"/>
<f7-block-title>
{{ title }}
</f7-block-title>
<f7-block inner>
Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Distinctio est aliquam
officiis quaerat placeat, cum explicabo
magni soluta totam maxime autem minima
accusamus eos suscipit dignissimos
corporis modi voluptatum fugiat!
</f7-block>
</f7-page>
</f7-view>
</div>
Framework7 Example
Vue is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.
<!DOCTYPE html>
<html lang="en">
<head>
<title>My App</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
import Vue from 'vue';
import Framework7 from 'framework7/dist/framework7.esm.bundle.js';
import Framework7Vue from 'framework7-vue/dist/framework7-vue.esm.bundle.js';
import Framework7Styles from 'framework7/dist/css/framework7.css';
import IconsStyles from './css/icons.css';
import AppStyles from './css/app.css';
import Routes from './routes.js';
import App from './app';
// Init F7 Vue Plugin
Vue.use(Framework7Vue, Framework7);
// Init App
const baseApp = new Vue({
el: '#app',
template: '<app/>',
framework7: {
id: 'io.framework7.testapp', // App bundle ID
name: 'Framework7', // App name
theme: 'auto', // Automatic theme detection
routes: Routes
},
components: {
app: App
}
});
<template>
<div id="app">
<!-- Statusbar -->
<f7-statusbar></f7-statusbar>
<!-- Main View -->
<f7-view id="main-view" url="/" main>
<f7-page>
<f7-navbar sliding title="Home"></f7-navbar>
<f7-block-title>{{ title }}</f7-block-title>
<f7-block inner>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Distinctio est aliquam officiis quaerat placeat, cum explicabo magni
soluta totam maxime autem minima accusamus eos suscipit dignissimos
corporis modi voluptatum fugiat!
</f7-block>
</f7-page>
</f7-view>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
title: 'Hello World',
};
}
};
</script>
Vue.js provides two way data binding so we'll setup a store in our main.js to store the art.
import Vue from 'vue';
import Framework7 from 'framework7/dist/framework7.esm.bundle.js';
import Framework7Vue from 'framework7-vue/dist/framework7-vue.esm.bundle.js';
import Framework7Styles from 'framework7/dist/css/framework7.css';
import IconsStyles from './css/icons.css';
import AppStyles from './css/app.css';
import Routes from './routes.js';
import App from './app';
// Store
window.pictureStore = JSON.parse(localStorage.getItem('pictures')) || [];
// Init F7 Vue Plugin
Vue.use(Framework7Vue, Framework7);
// Init App
const baseApp = new Vue({
el: '#app',
template: '<app/>',
framework7: {
id: 'io.framework7.testapp', // App bundle ID
name: 'Framework7', // App name
theme: 'auto', // Automatic theme detection
routes: Routes
},
components: {
app: App
}
});
<template>
<f7-page ptr @ptr:refresh="onRefresh">
<f7-navbar sliding title="Home"></f7-navbar>
<f7-block-title>{{ title }}</f7-block-title>
<f7-block inner>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Distinctio est aliquam officiis quaerat placeat, cum explicabo magni
soluta totam maxime autem minima accusamus eos suscipit dignissimos
corporis modi voluptatum fugiat!
</f7-block>
</f7-page>
</template>
<script>
/* globals pictureStore */
export default {
name: 'App',
data () {
return {
title: 'Hello World',
};
}
};
</script>
<script>
/* globals pictureStore */
export default {
name: 'App',
data () {
return {
title: 'Hello World',
};
},
methods: {
onRefresh (event, done) {
fetch('http://localhost:8974')
.then(response => response.json())
.then((data) => {
pictureStore.unshift(data);
localStorage.setItem('pictures', JSON.stringify(pictureStore));
done();
});
}
}
};
</script>
<template>
<div>
<f7-card v-for="pics in pictures" v-bind:key="pics.artist">
<f7-card-header>
<div class="facebook-name">{{ pics.artist }}</div>
</f7-card-header>
<f7-card-content>
<img :src="pics.image" width="100%"/>
</f7-card-content>
</f7-card>
</div>
</template>
<template>
<div>
<f7-card v-for="pics in pictures" v-bind:key="pics.artist">
<f7-card-header>
<div class="facebook-name">{{ pics.artist }}</div>
</f7-card-header>
<f7-card-content><img :src="pics.image" width="100%"/></f7-card-content>
</f7-card>
</div>
</template>
<script>
/* global pictureStore */
export default {
name: 'PictureList',
data () {
return { pictures: window.pictureStore, };
}
};
</script>
<template>
<f7-page ptr @ptr:refresh="onRefresh">
<f7-navbar sliding title="Home"></f7-navbar>
<picture-list/>
</f7-page>
</template>
<script>
/* globals pictureStore */
import PictureList from '../PictureList';
export default {
name: 'App',
data() {
return {
title: 'Hello World',
};
},
methods: {
onRefresh(event, done) {
fetch('http://localhost:8974')
.then(response => response.json())
.then((data) => {
pictureStore.unshift(data);
localStorage.setItem('pictures', JSON.stringify(pictureStore));
done();
});
},
}
};
</script>
<script>
/* globals pictureStore */
import PictureList from '../PictureList';
export default {
name: 'App',
data () {
return {
title: 'Hello World'
};
},
components: {
'picture-list': PictureList
},
methods: {
onRefresh (event, done) {
fetch('http://localhost:8974')
.then(response => response.json())
.then((data) => {
pictureStore.unshift(data);
localStorage.setItem('pictures', JSON.stringify(window.pictureStore));
done();
});
}
}
};
</script>
npm install cordova -g
cordova create MyAppName --template=phonegap-template-vue-f7-split-panel
cd MyAppName
npm install
npm run dev
You can then open the app in your browser by visiting localhost:8080
// Develop in the iOS simulator
cordova platform add ios
npm run cordova-run-ios
// Develop in the Android emulator
cordova platform add android
npm run cordova-run-android
// Build for production, removes hot module reloading server
npm run build
Then you are ready to deploy your app to the web, iOS App Store or Google Play Store.