在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:valnub/Framework7-Plugin-Welcomescreen开源软件地址:https://github.com/valnub/Framework7-Plugin-Welcomescreen开源编程语言:JavaScript 81.0%开源软件介绍:Framework7 Plugin WelcomescreenThis 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) ScreenshotLive demoYou can find a running demo here. Install1. Add dependencyWith module bundler (Webpack, Vite...)$ yarn add f7-welcomescreen In your main js file do:
In your stylesheet add F7 styles (if not exist yet!). This is when using Webpack:
For Vite
Alternative: Without bundler (direct linking)
3. Define slidesvar 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:
4. Initialize & optionsFor Framework7 Core versionFramework7.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,
},
}); For Framework7 React versionapp.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,
},
}; For Framework7 Vue versionapp.js
In your component add parameters in
You can use same values for welcomescreen_slides and options as with React and Core version above. Available options (if not set, default will be used)
Note:
APIThe 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 Example projectSee demo directory. The demo has the following scripts:
I recommend to just run CreditsMade with <3 by www.timo-ernst.net My YouTube channel about Framework7: http://www.timoernst.tv Thanks for helping @nolimits4web |
2022-08-15
2022-08-17
2022-09-23
2023-10-27
2022-08-18
请发表评论