valnub /
Toast-for-Framework7
A toast component plugin for iOS Framework7
Active repositoryHas homepage
JavaScriptNo license#css#framework7#html#javascript
⑂ 17 forks◯ 0 issuesUpdated May 7, 2025
Project homepage ↗Loading repository data…
Loading repository data…
valnub / repository
A plugin for Framework7 that displays a swipeable welcome screen to guide the user through a tutorial
This plugin will show a tutorial screen when starting Framework7 apps and websites. (Note: There is also a generic version that does not rely on Framework7 available)
You can find a running demo here.
$ yarn add f7-welcomescreen
In your main js file do:
import F7WelcomescreenPlugin from 'f7-welcomescreen';
In your stylesheet add F7 styles (if not exist yet!). This is when using Webpack:
@import '~f7-welcomescreen/styles.css';
For Vite
@import 'f7-welcomescreen/styles.css';
f7-welcomescreen.min.js and f7-welcomescreen.min.css from dist into your project folder.<head>
<link rel="stylesheet" href="f7-welcomescreen.min.css"></link>
<script src="f7-welcomescreen.min.js"></script>
</head>
var welcomescreen_slides = [
{
id: 'slide0',
title: 'Slide 0', // optional
picture: '<div class="tutorialicon">♥</div>',
text: 'Welcome to this tutorial. In the next steps we will guide you through a manual that will teach you how to use this app.',
},
{
id: 'slide1',
title: 'Slide 1', // optional
picture: '<div class="tutorialicon">✲</div>',
text: 'This is slide 2',
},
{
id: 'slide2',
title: 'Slide 2', // optional
picture: '<div class="tutorialicon">♫</div>',
text: 'This is slide 3',
},
{
id: 'slide3',
//title: 'NO TITLE',
picture: '<div class="tutorialicon">☆</div>',
text: 'Thanks for reading! Enjoy this app.<br><br><a id="tutorial-close-btn" href="#">End Tutorial</a>',
},
];
Used parameters are:
id Set an id for this slidepicture Set free html heretext You can set html here but I recommend using just plain textFramework7.use(F7WelcomescreenPlugin);
// Define options for welcomescreen plugin
var options = {
bgcolor: '#0da6ec',
fontcolor: '#fff',
};
var app = new Framework7({
root: '#app', // or what ever your root is
name: 'welcomescreen-demo', // choose a name
welcomescreen: {
// Setup welcomescreen plugin
slides: welcomescreen_slides,
options: options,
},
});
app.js
Framework7.use(F7WelcomescreenPlugin);
app.jsx
var options = {
bgcolor: '#0da6ec',
fontcolor: '#fff',
};
const f7params = {
name: 'welcomescreen-demo',
theme: 'auto',
store: store,
routes: routes,
welcomescreen: {
slides: welcomescreen_slides,
options: options,
},
};
app.js
Framework7.use(F7WelcomescreenPlugin);
const app = createApp(App);
registerComponents(app);
app.mount('#app');
In your component add parameters in onMounted() and initilize:
onMounted(() => {
f7ready((f7) => {
f7.welcomescreen.init(welcomescreen_slides, options);
});
});
You can use same values for welcomescreen_slides and options as with React and Core version above.
The following methods are available on a welcomescreen instance
app.welcomescreen.open(); // Open the screen
app.welcomescreen.close(); // Closes it
app.welcomescreen.next(); // Go to next slide
app.welcomescreen.previous(); // Go to previous slide
app.welcomescreen.slideTo(i); // Go to slide with index i
See demo directory. The demo has the following scripts:
yarn start Starts a http server and serves content from demo/buildyarn build Creates a new build into the demo/build directoryyarn watch Watches for changes in .js files and runs yarn buildI recommend to just run yarn start from the demo directory. Then open http://127.0.0.1:8080 in your browser.
Made with <3 by www.timo-ernst.net
My YouTube channel about Framework7: http://www.timoernst.tv
Thanks for helping @nolimits4web
Selected from shared topics, language and repository description—not editorial ratings.
valnub /
A toast component plugin for iOS Framework7