{{item.text}}
16 |├── .babelrc ├── .gitignore ├── .postcssrc.js ├── README.md ├── build ├── build.js ├── check-versions.js ├── dev-client.js ├── dev-server.js ├── utils.js ├── vue-loader.conf.js ├── webpack.base.conf.js ├── webpack.dev.conf.js └── webpack.prod.conf.js ├── config ├── dev.env.js ├── index.js └── prod.env.js ├── index.html ├── package-lock.json ├── package.json ├── src ├── app.vue ├── assets │ ├── card1.jpg │ ├── card2.jpg │ ├── card3.jpg │ └── photo1.jpg ├── css │ └── app.css ├── main.js ├── pages │ ├── Cards.vue │ ├── about.vue │ ├── accordion.vue │ ├── animation.vue │ ├── autocomplete.vue │ ├── calendarDatepicker.vue │ ├── chipsTags.vue │ ├── colorThemes.vue │ ├── contacts.vue │ ├── coreFeatures.vue │ ├── floatingAction │ │ ├── floatingAction.vue │ │ ├── speedDial.vue │ │ └── staticFloating.vue │ ├── forms │ │ ├── buttons.vue │ │ ├── checkboxesAndRadios.vue │ │ ├── formElements.vue │ │ ├── formStorage.vue │ │ ├── forms.vue │ │ └── smartSelects.vue │ ├── grid.vue │ ├── icons.vue │ ├── infiniteScroll.vue │ ├── lazyLoadImages.vue │ ├── listView.vue │ ├── loginScreen │ │ ├── loginScreen.vue │ │ └── loginScreenEmbedded.vue │ ├── mainPage.vue │ ├── mediaList.vue │ ├── messages.vue │ ├── modals.vue │ ├── navbarsAndToolbars │ │ ├── deep2.vue │ │ ├── deep3.vue │ │ ├── deepNavbar.vue │ │ ├── diffScrollTabbar.vue │ │ ├── hide.vue │ │ ├── hideBarsOnScroll.vue │ │ ├── hideBoth.vue │ │ ├── hideNavbar.vue │ │ ├── hideToolbar.vue │ │ ├── navbarsAndToolbars.vue │ │ ├── subNavbar.vue │ │ ├── tab1.vue │ │ ├── tab2.vue │ │ ├── tab3.vue │ │ ├── tab4.vue │ │ ├── tabbar.vue │ │ └── tabbarWithLabel.vue │ ├── notifications.vue │ ├── photoBrowser.vue │ ├── picker.vue │ ├── popover.vue │ ├── preloader.vue │ ├── progressBar.vue │ ├── pullToRefresh.vue │ ├── searchBar.vue │ ├── sidePanels │ │ ├── panelRight2.vue │ │ ├── panelRight3.vue │ │ └── sidePanels.vue │ ├── sortableList.vue │ ├── swipeToDelete.vue │ ├── swiperSlider │ │ ├── 3DCoverflow.vue │ │ ├── 3DCube.vue │ │ ├── 3DFlip.vue │ │ ├── controlGallery.vue │ │ ├── customSwiper.vue │ │ ├── fadeEffect.vue │ │ ├── fractionPagination.vue │ │ ├── loopSlider.vue │ │ ├── multipleSlider.vue │ │ ├── nestedSliders.vue │ │ ├── parallax.vue │ │ ├── progressPagination.vue │ │ ├── scrollbarSwiper.vue │ │ ├── sliderLazyloading.vue │ │ ├── spaceBetweenSwiper.vue │ │ ├── swiperHorizontal.vue │ │ ├── swiperSlider.vue │ │ ├── swiperVertical.vue │ │ └── zoom.vue │ ├── tabs │ │ ├── animatedTabs.vue │ │ ├── staticTabs.vue │ │ ├── swipeableTabs.vue │ │ └── tabs.vue │ ├── timeline │ │ ├── calendarTimeline.vue │ │ ├── horizontalTimeline.vue │ │ ├── timeline.vue │ │ └── verticalTimeline.vue │ ├── transitions.vue │ └── virtualList.vue └── routes.js └── static ├── .gitkeep ├── data └── autocomplete-languages.json └── image ├── 1024.jpg ├── animal1.jpg ├── bScenery4.jpg ├── beach.jpg ├── bnightlife2.jpg ├── bscenery1.jpg ├── bscenery2.jpg ├── bscenery3.jpg ├── bscenery5.jpg ├── bscenery6.jpg ├── bscenery7.jpg ├── bscenery8.jpg ├── bscenery9.jpg ├── icon.png ├── lock.jpg ├── monkey.jpg ├── mountains.jpg ├── nightlife1.jpg ├── nightlife2.jpg ├── nightlife3.jpg ├── nightlife4.jpg ├── nightlife5.jpg ├── nightlife6.jpg ├── nightlife7.jpg ├── photo1.jpg ├── photo10.jpg ├── photo11.jpg ├── photo12.jpg ├── photo13.jpg ├── photo14.jpg ├── photo2.jpg ├── photo3.jpg ├── photo4.jpg ├── photo5.jpg ├── photo6.jpg ├── photo7.jpg ├── photo8.jpg ├── photo9.jpg ├── scenery1.jpg ├── scenery10.jpg ├── scenery11.jpg ├── scenery2.jpg ├── scenery3.jpg ├── scenery4.jpg ├── scenery5.jpg ├── scenery6.jpg ├── scenery7.jpg ├── scenery8.jpg ├── scenery9.jpg ├── slider1.jpg ├── slider2.jpg ├── slider3.jpg ├── slider4.jpg ├── slider5.jpg ├── slider6.jpg ├── slider7.jpg ├── slider8.jpg ├── slider9.jpg ├── xlscenery1.jpg ├── xlscenery10.jpg ├── xlscenery2.jpg ├── xlscenery3.jpg ├── xlscenery4.jpg ├── xlscenery5.jpg ├── xlscenery6.jpg ├── xlscenery7.jpg ├── xlscenery8.jpg └── xlscenery9.jpg /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { "modules": false }], 4 | "stage-2" 5 | ], 6 | "plugins": ["transform-runtime"], 7 | "comments": false, 8 | "env": { 9 | "test": { 10 | "presets": ["env", "stage-2"], 11 | "plugins": [ "istanbul" ] 12 | } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | 6 | # Runtime data 7 | pids 8 | *.pid 9 | *.seed 10 | 11 | # Directory for instrumented libs generated by jscoverage/JSCover 12 | lib-cov 13 | 14 | # Coverage directory used by tools like istanbul 15 | coverage 16 | 17 | # nyc test coverage 18 | .nyc_output 19 | 20 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 21 | .grunt 22 | 23 | # node-waf configuration 24 | .lock-wscript 25 | 26 | # Compiled binary addons (http://nodejs.org/api/addons.html) 27 | build/Release 28 | 29 | # Dependency directories 30 | node_modules 31 | jspm_packages 32 | 33 | # Optional npm cache directory 34 | .npm 35 | 36 | # Optional REPL history 37 | .node_repl_history 38 | 39 | .DS_Store 40 | node_modules/ 41 | dist/ 42 | npm-debug.log -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | // to edit target browsers: use "browserlist" field in package.json 6 | "autoprefixer": {} 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 使用Framework7-Vue重构的Framework7官网 Demo 2 | 3 | Framwork7-Vue 将 Framework7 和 Vue 结合起来,但官方文档有些地方描述的不清楚,而且在实际开发中也可能会遇到各种各样的问题,所以我就使用Framework7-Vue 重构了官网的 Demo,同时对重构过程中遇到的问题和解决方案写了几篇博客,博客地址:https://yawuling.com/tags/framework7/ 4 | 5 | ## 运行程序 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | ``` 17 | 18 | ## 项目结构 19 | 20 | * `src/assets` - 静态资源(图片)目录 21 | * `src/css` - css文件目录 22 | * `src/pages` - app的页面目录 23 | * `src/main.js` - 引入包并初始化App 24 | * `src/routes.js` - App的路由控制 25 | * `src/app.vue` 26 | 27 | > 之前把Demo重构完后就以为工作结束了,后面一看,发现没有加上自己写的关于Framework7的博客地址,另外也没有很好地对这个项目做个简介,不好意思,现在才补上 28 | -------------------------------------------------------------------------------- /build/build.js: -------------------------------------------------------------------------------- 1 | require('./check-versions')() 2 | 3 | process.env.NODE_ENV = 'production' 4 | 5 | var ora = require('ora') 6 | var rm = require('rimraf') 7 | var path = require('path') 8 | var chalk = require('chalk') 9 | var webpack = require('webpack') 10 | var config = require('../config') 11 | var webpackConfig = require('./webpack.prod.conf') 12 | 13 | var spinner = ora('building for production...') 14 | spinner.start() 15 | 16 | rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => { 17 | if (err) throw err 18 | webpack(webpackConfig, function (err, stats) { 19 | spinner.stop() 20 | if (err) throw err 21 | process.stdout.write(stats.toString({ 22 | colors: true, 23 | modules: false, 24 | children: false, 25 | chunks: false, 26 | chunkModules: false 27 | }) + '\n\n') 28 | 29 | console.log(chalk.cyan(' Build complete.\n')) 30 | console.log(chalk.yellow( 31 | ' Tip: built files are meant to be served over an HTTP server.\n' + 32 | ' Opening index.html over file:// won\'t work.\n' 33 | )) 34 | }) 35 | }) 36 | -------------------------------------------------------------------------------- /build/check-versions.js: -------------------------------------------------------------------------------- 1 | var chalk = require('chalk') 2 | var semver = require('semver') 3 | var packageConfig = require('../package.json') 4 | 5 | function exec (cmd) { 6 | return require('child_process').execSync(cmd).toString().trim() 7 | } 8 | 9 | var versionRequirements = [ 10 | { 11 | name: 'node', 12 | currentVersion: semver.clean(process.version), 13 | versionRequirement: packageConfig.engines.node 14 | }, 15 | { 16 | name: 'npm', 17 | currentVersion: exec('npm --version'), 18 | versionRequirement: packageConfig.engines.npm 19 | } 20 | ] 21 | 22 | module.exports = function () { 23 | var warnings = [] 24 | for (var i = 0; i < versionRequirements.length; i++) { 25 | var mod = versionRequirements[i] 26 | if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) { 27 | warnings.push(mod.name + ': ' + 28 | chalk.red(mod.currentVersion) + ' should be ' + 29 | chalk.green(mod.versionRequirement) 30 | ) 31 | } 32 | } 33 | 34 | if (warnings.length) { 35 | console.log('') 36 | console.log(chalk.yellow('To use this template, you must update following to modules:')) 37 | console.log() 38 | for (var i = 0; i < warnings.length; i++) { 39 | var warning = warnings[i] 40 | console.log(' ' + warning) 41 | } 42 | console.log() 43 | process.exit(1) 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /build/dev-client.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | require('eventsource-polyfill') 3 | var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true') 4 | 5 | hotClient.subscribe(function (event) { 6 | if (event.action === 'reload') { 7 | window.location.reload() 8 | } 9 | }) 10 | -------------------------------------------------------------------------------- /build/dev-server.js: -------------------------------------------------------------------------------- 1 | require('./check-versions')() 2 | 3 | var config = require('../config') 4 | if (!process.env.NODE_ENV) { 5 | process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV) 6 | } 7 | 8 | var opn = require('opn') 9 | var path = require('path') 10 | var express = require('express') 11 | var webpack = require('webpack') 12 | var proxyMiddleware = require('http-proxy-middleware') 13 | var webpackConfig = require('./webpack.dev.conf') 14 | 15 | // default port where dev server listens for incoming traffic 16 | var port = process.env.PORT || config.dev.port 17 | // automatically open browser, if not set will be false 18 | var autoOpenBrowser = !!config.dev.autoOpenBrowser 19 | // Define HTTP proxies to your custom API backend 20 | // https://github.com/chimurai/http-proxy-middleware 21 | var proxyTable = config.dev.proxyTable 22 | 23 | var app = express() 24 | var compiler = webpack(webpackConfig) 25 | 26 | var devMiddleware = require('webpack-dev-middleware')(compiler, { 27 | publicPath: webpackConfig.output.publicPath, 28 | quiet: true 29 | }) 30 | 31 | var hotMiddleware = require('webpack-hot-middleware')(compiler, { 32 | log: () => {} 33 | }) 34 | // force page reload when html-webpack-plugin template changes 35 | compiler.plugin('compilation', function (compilation) { 36 | compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) { 37 | hotMiddleware.publish({ action: 'reload' }) 38 | cb() 39 | }) 40 | }) 41 | 42 | // proxy api requests 43 | Object.keys(proxyTable).forEach(function (context) { 44 | var options = proxyTable[context] 45 | if (typeof options === 'string') { 46 | options = { target: options } 47 | } 48 | app.use(proxyMiddleware(options.filter || context, options)) 49 | }) 50 | 51 | // handle fallback for HTML5 history API 52 | app.use(require('connect-history-api-fallback')()) 53 | 54 | // serve webpack bundle output 55 | app.use(devMiddleware) 56 | 57 | // enable hot-reload and state-preserving 58 | // compilation error display 59 | app.use(hotMiddleware) 60 | 61 | // serve pure static assets 62 | var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory) 63 | app.use(staticPath, express.static('./static')) 64 | 65 | var uri = 'http://localhost:' + port 66 | 67 | devMiddleware.waitUntilValid(function () { 68 | console.log('> Listening at ' + uri + '\n') 69 | }) 70 | 71 | module.exports = app.listen(port, function (err) { 72 | if (err) { 73 | console.log(err) 74 | return 75 | } 76 | 77 | // when env is testing, don't need open it 78 | if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') { 79 | opn(uri) 80 | } 81 | }) 82 | -------------------------------------------------------------------------------- /build/utils.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var config = require('../config') 3 | var ExtractTextPlugin = require('extract-text-webpack-plugin') 4 | 5 | exports.assetsPath = function (_path) { 6 | var assetsSubDirectory = process.env.NODE_ENV === 'production' 7 | ? config.build.assetsSubDirectory 8 | : config.dev.assetsSubDirectory 9 | return path.posix.join(assetsSubDirectory, _path) 10 | } 11 | 12 | exports.cssLoaders = function (options) { 13 | options = options || {} 14 | 15 | var cssLoader = { 16 | loader: 'css-loader', 17 | options: { 18 | minimize: process.env.NODE_ENV === 'production', 19 | sourceMap: options.sourceMap 20 | } 21 | } 22 | 23 | // generate loader string to be used with extract text plugin 24 | function generateLoaders (loader, loaderOptions) { 25 | var loaders = [cssLoader] 26 | if (loader) { 27 | loaders.push({ 28 | loader: loader + '-loader', 29 | options: Object.assign({}, loaderOptions, { 30 | sourceMap: options.sourceMap 31 | }) 32 | }) 33 | } 34 | 35 | // Extract CSS when that option is specified 36 | // (which is the case during production build) 37 | if (options.extract) { 38 | return ExtractTextPlugin.extract({ 39 | use: loaders, 40 | fallback: 'vue-style-loader', 41 | publicPath: '../../' 42 | }) 43 | } else { 44 | return ['vue-style-loader'].concat(loaders) 45 | } 46 | } 47 | 48 | // http://vuejs.github.io/vue-loader/en/configurations/extract-css.html 49 | return { 50 | css: generateLoaders(), 51 | postcss: generateLoaders(), 52 | less: generateLoaders('less'), 53 | sass: generateLoaders('sass', { indentedSyntax: true }), 54 | scss: generateLoaders('sass'), 55 | stylus: generateLoaders('stylus'), 56 | styl: generateLoaders('stylus') 57 | } 58 | } 59 | 60 | // Generate loaders for standalone style files (outside of .vue) 61 | exports.styleLoaders = function (options) { 62 | var output = [] 63 | var loaders = exports.cssLoaders(options) 64 | for (var extension in loaders) { 65 | var loader = loaders[extension] 66 | output.push({ 67 | test: new RegExp('\\.' + extension + '$'), 68 | use: loader 69 | }) 70 | } 71 | return output 72 | } 73 | -------------------------------------------------------------------------------- /build/vue-loader.conf.js: -------------------------------------------------------------------------------- 1 | var utils = require('./utils') 2 | var config = require('../config') 3 | var isProduction = process.env.NODE_ENV === 'production' 4 | 5 | module.exports = { 6 | loaders: utils.cssLoaders({ 7 | sourceMap: isProduction 8 | ? config.build.productionSourceMap 9 | : config.dev.cssSourceMap, 10 | extract: isProduction 11 | }) 12 | } 13 | -------------------------------------------------------------------------------- /build/webpack.base.conf.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var utils = require('./utils') 3 | var config = require('../config') 4 | var vueLoaderConfig = require('./vue-loader.conf') 5 | 6 | function resolve (dir) { 7 | return path.join(__dirname, '..', dir) 8 | } 9 | 10 | module.exports = { 11 | entry: { 12 | app: './src/main.js' 13 | }, 14 | output: { 15 | path: config.build.assetsRoot, 16 | filename: '[name].js', 17 | publicPath: process.env.NODE_ENV === 'production' 18 | ? config.build.assetsPublicPath 19 | : config.dev.assetsPublicPath 20 | }, 21 | resolve: { 22 | extensions: ['.js', '.vue', '.json'], 23 | alias: { 24 | 'vue$': 'vue/dist/vue.esm.js', 25 | '@': resolve('src'), 26 | } 27 | }, 28 | module: { 29 | rules: [ 30 | { 31 | test: /\.vue$/, 32 | loader: 'vue-loader', 33 | options: vueLoaderConfig 34 | }, 35 | { 36 | test: /\.js$/, 37 | loader: 'babel-loader', 38 | include: [resolve('src'), resolve('test')] 39 | }, 40 | { 41 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 42 | loader: 'url-loader', 43 | query: { 44 | limit: 10000, 45 | name: utils.assetsPath('img/[name].[hash:7].[ext]') 46 | } 47 | }, 48 | { 49 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 50 | loader: 'url-loader', 51 | query: { 52 | limit: 10000, 53 | name: utils.assetsPath('fonts/[name].[hash:7].[ext]') 54 | } 55 | } 56 | ] 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /build/webpack.dev.conf.js: -------------------------------------------------------------------------------- 1 | var utils = require('./utils') 2 | var webpack = require('webpack') 3 | var config = require('../config') 4 | var merge = require('webpack-merge') 5 | var baseWebpackConfig = require('./webpack.base.conf') 6 | var HtmlWebpackPlugin = require('html-webpack-plugin') 7 | var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') 8 | 9 | // add hot-reload related code to entry chunks 10 | Object.keys(baseWebpackConfig.entry).forEach(function (name) { 11 | baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name]) 12 | }) 13 | 14 | module.exports = merge(baseWebpackConfig, { 15 | module: { 16 | rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap }) 17 | }, 18 | // cheap-module-eval-source-map is faster for development 19 | devtool: '#cheap-module-eval-source-map', 20 | plugins: [ 21 | new webpack.DefinePlugin({ 22 | 'process.env': config.dev.env 23 | }), 24 | // https://github.com/glenjamin/webpack-hot-middleware#installation--usage 25 | new webpack.HotModuleReplacementPlugin(), 26 | new webpack.NoEmitOnErrorsPlugin(), 27 | // https://github.com/ampedandwired/html-webpack-plugin 28 | new HtmlWebpackPlugin({ 29 | filename: 'index.html', 30 | template: 'index.html', 31 | inject: true 32 | }), 33 | new FriendlyErrorsPlugin() 34 | ] 35 | }) 36 | -------------------------------------------------------------------------------- /build/webpack.prod.conf.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var utils = require('./utils') 3 | var webpack = require('webpack') 4 | var config = require('../config') 5 | var merge = require('webpack-merge') 6 | var baseWebpackConfig = require('./webpack.base.conf') 7 | var CopyWebpackPlugin = require('copy-webpack-plugin') 8 | var HtmlWebpackPlugin = require('html-webpack-plugin') 9 | var ExtractTextPlugin = require('extract-text-webpack-plugin') 10 | var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin') 11 | 12 | var env = config.build.env 13 | 14 | var webpackConfig = merge(baseWebpackConfig, { 15 | module: { 16 | rules: utils.styleLoaders({ 17 | sourceMap: config.build.productionSourceMap, 18 | extract: true 19 | }) 20 | }, 21 | devtool: config.build.productionSourceMap ? '#source-map' : false, 22 | output: { 23 | path: config.build.assetsRoot, 24 | filename: utils.assetsPath('js/[name].[chunkhash].js'), 25 | chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') 26 | }, 27 | plugins: [ 28 | // http://vuejs.github.io/vue-loader/en/workflow/production.html 29 | new webpack.DefinePlugin({ 30 | 'process.env': env 31 | }), 32 | new webpack.optimize.UglifyJsPlugin({ 33 | compress: { 34 | warnings: false 35 | }, 36 | sourceMap: true 37 | }), 38 | // extract css into its own file 39 | new ExtractTextPlugin({ 40 | filename: utils.assetsPath('css/[name].[contenthash].css') 41 | }), 42 | // Compress extracted CSS. We are using this plugin so that possible 43 | // duplicated CSS from different components can be deduped. 44 | new OptimizeCSSPlugin(), 45 | // generate dist index.html with correct asset hash for caching. 46 | // you can customize output by editing /index.html 47 | // see https://github.com/ampedandwired/html-webpack-plugin 48 | new HtmlWebpackPlugin({ 49 | filename: config.build.index, 50 | template: 'index.html', 51 | inject: true, 52 | minify: { 53 | removeComments: true, 54 | collapseWhitespace: true, 55 | removeAttributeQuotes: true 56 | // more options: 57 | // https://github.com/kangax/html-minifier#options-quick-reference 58 | }, 59 | // necessary to consistently work with multiple chunks via CommonsChunkPlugin 60 | chunksSortMode: 'dependency' 61 | }), 62 | // split vendor js into its own file 63 | new webpack.optimize.CommonsChunkPlugin({ 64 | name: 'vendor', 65 | minChunks: function (module, count) { 66 | // any required modules inside node_modules are extracted to vendor 67 | return ( 68 | module.resource && 69 | /\.js$/.test(module.resource) && 70 | module.resource.indexOf( 71 | path.join(__dirname, '../node_modules') 72 | ) === 0 73 | ) 74 | } 75 | }), 76 | // extract webpack runtime and module manifest to its own file in order to 77 | // prevent vendor hash from being updated whenever app bundle is updated 78 | new webpack.optimize.CommonsChunkPlugin({ 79 | name: 'manifest', 80 | chunks: ['vendor'] 81 | }), 82 | // copy custom static assets 83 | new CopyWebpackPlugin([ 84 | { 85 | from: path.resolve(__dirname, '../static'), 86 | to: config.build.assetsSubDirectory, 87 | ignore: ['.*'] 88 | } 89 | ]) 90 | ] 91 | }) 92 | 93 | if (config.build.productionGzip) { 94 | var CompressionWebpackPlugin = require('compression-webpack-plugin') 95 | 96 | webpackConfig.plugins.push( 97 | new CompressionWebpackPlugin({ 98 | asset: '[path].gz[query]', 99 | algorithm: 'gzip', 100 | test: new RegExp( 101 | '\\.(' + 102 | config.build.productionGzipExtensions.join('|') + 103 | ')$' 104 | ), 105 | threshold: 10240, 106 | minRatio: 0.8 107 | }) 108 | ) 109 | } 110 | 111 | if (config.build.bundleAnalyzerReport) { 112 | var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin 113 | webpackConfig.plugins.push(new BundleAnalyzerPlugin()) 114 | } 115 | 116 | module.exports = webpackConfig 117 | -------------------------------------------------------------------------------- /config/dev.env.js: -------------------------------------------------------------------------------- 1 | var merge = require('webpack-merge') 2 | var prodEnv = require('./prod.env') 3 | 4 | module.exports = merge(prodEnv, { 5 | NODE_ENV: '"development"' 6 | }) 7 | -------------------------------------------------------------------------------- /config/index.js: -------------------------------------------------------------------------------- 1 | // see http://vuejs-templates.github.io/webpack for documentation. 2 | var path = require('path') 3 | 4 | module.exports = { 5 | build: { 6 | env: require('./prod.env'), 7 | index: path.resolve(__dirname, '../dist/index.html'), 8 | assetsRoot: path.resolve(__dirname, '../dist'), 9 | assetsSubDirectory: 'static', 10 | assetsPublicPath: '', 11 | productionSourceMap: true, 12 | // Gzip off by default as many popular static hosts such as 13 | // Surge or Netlify already gzip all static assets for you. 14 | // Before setting to `true`, make sure to: 15 | // npm install --save-dev compression-webpack-plugin 16 | productionGzip: false, 17 | productionGzipExtensions: ['js', 'css'], 18 | // Run the build command with an extra argument to 19 | // View the bundle analyzer report after build finishes: 20 | // `npm run build --report` 21 | // Set to `true` or `false` to always turn it on or off 22 | bundleAnalyzerReport: process.env.npm_config_report 23 | }, 24 | dev: { 25 | env: require('./dev.env'), 26 | port: 8080, 27 | autoOpenBrowser: true, 28 | assetsSubDirectory: 'static', 29 | assetsPublicPath: '/', 30 | proxyTable: {}, 31 | // CSS Sourcemaps off by default because relative paths are "buggy" 32 | // with this option, according to the CSS-Loader README 33 | // (https://github.com/webpack/css-loader#sourcemaps) 34 | // In our experience, they generally work as expected, 35 | // just be aware of this issue when enabling this option. 36 | cssSourceMap: false 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /config/prod.env.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | NODE_ENV: '"production"' 3 | } 4 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 | 6 | 7 | 8 | 9 |Here is About page!
10 |You can go
Mauris posuere sit amet metus id venenatis. Ut ante dolor, tempor nec commodo rutrum, varius at sem. Nullam ac nisi non neque ornare pretium. Nulla mauris mauris, consequat et elementum sit amet, egestas sed orci. In hac habitasse platea dictumst.
12 |Fusce eros lectus, accumsan eget mi vel, iaculis tincidunt felis. Nulla tincidunt pharetra sagittis. Fusce in felis eros. Nulla sit amet aliquam lorem, et gravida ipsum. Mauris consectetur nisl non sollicitudin tristique. Praesent vitae metus ac quam rhoncus mattis vel et nisi. Aenean aliquet, felis quis dignissim iaculis, lectus quam tincidunt ligula, et venenatis turpis risus sed lorem. Morbi eu metus elit. Ut vel diam dolor.
13 |10 | Framework7 comes with own simple and fast animation helper library to create custom JS animations: 11 |
12 |
13 |
10 | Calendar is a touch optimized component that provides an easy way to handle dates. 11 |
12 |13 | Calendar could be used as inline component or as overlay. Overlay Calendar will be automatically converted to Popover on tablets (iPad). 14 |
15 |10 | Framework7 comes with default 10 iOS color themes set and three layout color themes (default, dark and pure white): 11 |
12 |11 | To create iOS or Android apps using Framework7 is so easy as website creation. Try to start and you will be surprised how easy is it. All you need to make it work is a simple HTML layout and attached framework's CSS and JS files! Framework7 doesn't force you to write some custom tags that will be converted by JavaScript to something else. It doesn't force you to write and describe all your content in JavaScript (or JSON). Just plain HTML and you always get exactly the same that you expect to get when you write this HTML. 12 |
13 |17 | It can sound even curious but one of the most important Framework7 feature is that it uses only native scrolling. Moreover - it multiplies its advantages! So you can still have this awesome scrolling with momentum and resistance bounce without any scrolling issues! 18 |
19 |23 | Framework7 doesn't use and does not depend on any third party libraries. That is why it is ultra lightweight, performance and flexible. 24 |
25 |29 | Framework7 doesn't use any third party library, even for DOM operation, even jQuery. It has its own custom DOM library that utilizes most edge and high-performance methods for DOM manipulation. You can also use it and you don’t need to learn something new for that, it has the same syntax as well known jQuery library with support of the most popular and widely used methods and jQuery-like chaining. 30 |
31 |35 | This is an unbeatable combination to make your app routing as perfect as possible. Framework7 is ready to route your app pages using XHR (optional) with its own internal methods and internal HTML configurable caching that allow to load pages faster and save a lot of time and traffic for your users! It loads page via Ajax only ones per specified caching period (10 minutes by default), other times it just gets it from memory. It allows to make further requests immediately! 36 |
37 |41 | Framework7 supports unlimited number of different isolated views. And the fun thing is that you can easily control each single view without any line of JavaScript just using "data-view" attribute on links. 42 |
43 |47 | It is all about performance and Framework7 uses only high performance hardware accelerated css animations and transitions to achieve the best result. 48 |
49 |53 | With Framework7 everything is simple, all styles are divided by parts into small .less files, so you can really easy bring your own custom styles to your app 54 |
55 |Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae porta enim. Sed ultricies lacinia mauris, non tincidunt sem eleifend eget. Duis convallis quis sem non volutpat. Morbi risus lorem, dapibus et nulla ac, pharetra maximus elit. Etiam vitae lacus a dui hendrerit ornare vitae id est. Pellentesque ut tortor id sem maximus lobortis at egestas nulla. Nulla pretium, nunc et porta ullamcorper, sem lorem elementum massa, rhoncus ullamcorper odio dui vel mauris. Ut lobortis neque congue eros posuere blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. In sem dolor, tempus eu tellus quis, vulputate malesuada felis.
27 |In iaculis nisi id ligula condimentum consequat. Fusce a massa lorem. Morbi id nisl ut tellus volutpat pulvinar a vel dolor. Phasellus eu purus tincidunt augue hendrerit posuere. Ut bibendum tincidunt nisi, sed cursus arcu pulvinar sed. Fusce accumsan ante et libero feugiat, congue maximus urna blandit. Nunc a est eu urna auctor congue. Aenean euismod ipsum sed nulla pretium rutrum.
28 |Nunc id augue libero. Donec quis metus risus. Donec posuere vulputate purus, a semper justo consectetur at. Cras porta vestibulum pulvinar. Fusce in leo lacinia massa fringilla pellentesque ac sit amet sem. Nullam accumsan ante leo, eu faucibus lorem iaculis in. Duis id gravida libero.
29 |Nulla facilisi. Duis tempus egestas eros et venenatis. Maecenas dictum ipsum sem, vitae aliquam diam viverra eget. Curabitur dui turpis, fermentum eleifend ornare id, pellentesque vitae metus. Duis a est faucibus, maximus nunc feugiat, rutrum ipsum. Integer in odio nisl. Quisque tortor sem, sollicitudin eget cursus nec, lobortis quis eros. Integer a sapien semper, vulputate ex at, tempor ante.
30 |Donec at est ut quam pharetra fermentum. In auctor quam ut velit porttitor, sit amet convallis sapien interdum. Suspendisse sed magna molestie purus iaculis ultrices. Ut convallis facilisis bibendum. Aenean vitae velit quis felis congue aliquam vitae ac felis. Nulla ipsum augue, elementum quis venenatis ullamcorper, auctor at augue. Vestibulum varius tortor sit amet mauris finibus, at consectetur leo dictum. Duis a odio rutrum, efficitur orci a, congue ipsum. Nulla efficitur, velit non pellentesque pretium, tellus tortor auctor purus, nec mollis mauris felis quis elit. Etiam efficitur eleifend mi, vel sagittis neque auctor ut.
31 |Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae porta enim. Sed ultricies lacinia mauris, non tincidunt sem eleifend eget. Duis convallis quis sem non volutpat. Morbi risus lorem, dapibus et nulla ac, pharetra maximus elit. Etiam vitae lacus a dui hendrerit ornare vitae id est. Pellentesque ut tortor id sem maximus lobortis at egestas nulla. Nulla pretium, nunc et porta ullamcorper, sem lorem elementum massa, rhoncus ullamcorper odio dui vel mauris. Ut lobortis neque congue eros posuere blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. In sem dolor, tempus eu tellus quis, vulputate malesuada felis.
32 |In iaculis nisi id ligula condimentum consequat. Fusce a massa lorem. Morbi id nisl ut tellus volutpat pulvinar a vel dolor. Phasellus eu purus tincidunt augue hendrerit posuere. Ut bibendum tincidunt nisi, sed cursus arcu pulvinar sed. Fusce accumsan ante et libero feugiat, congue maximus urna blandit. Nunc a est eu urna auctor congue. Aenean euismod ipsum sed nulla pretium rutrum.
33 |Nunc id augue libero. Donec quis metus risus. Donec posuere vulputate purus, a semper justo consectetur at. Cras porta vestibulum pulvinar. Fusce in leo lacinia massa fringilla pellentesque ac sit amet sem. Nullam accumsan ante leo, eu faucibus lorem iaculis in. Duis id gravida libero.
34 |Nulla facilisi. Duis tempus egestas eros et venenatis. Maecenas dictum ipsum sem, vitae aliquam diam viverra eget. Curabitur dui turpis, fermentum eleifend ornare id, pellentesque vitae metus. Duis a est faucibus, maximus nunc feugiat, rutrum ipsum. Integer in odio nisl. Quisque tortor sem, sollicitudin eget cursus nec, lobortis quis eros. Integer a sapien semper, vulputate ex at, tempor ante.
35 |Donec at est ut quam pharetra fermentum. In auctor quam ut velit porttitor, sit amet convallis sapien interdum. Suspendisse sed magna molestie purus iaculis ultrices. Ut convallis facilisis bibendum. Aenean vitae velit quis felis congue aliquam vitae ac felis. Nulla ipsum augue, elementum quis venenatis ullamcorper, auctor at augue. Vestibulum varius tortor sit amet mauris finibus, at consectetur leo dictum. Duis a odio rutrum, efficitur orci a, congue ipsum. Nulla efficitur, velit non pellentesque pretium, tellus tortor auctor purus, nec mollis mauris felis quis elit. Etiam efficitur eleifend mi, vel sagittis neque auctor ut.
36 |Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae porta enim. Sed ultricies lacinia mauris, non tincidunt sem eleifend eget. Duis convallis quis sem non volutpat. Morbi risus lorem, dapibus et nulla ac, pharetra maximus elit. Etiam vitae lacus a dui hendrerit ornare vitae id est. Pellentesque ut tortor id sem maximus lobortis at egestas nulla. Nulla pretium, nunc et porta ullamcorper, sem lorem elementum massa, rhoncus ullamcorper odio dui vel mauris. Ut lobortis neque congue eros posuere blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. In sem dolor, tempus eu tellus quis, vulputate malesuada felis.
13 |In iaculis nisi id ligula condimentum consequat. Fusce a massa lorem. Morbi id nisl ut tellus volutpat pulvinar a vel dolor. Phasellus eu purus tincidunt augue hendrerit posuere. Ut bibendum tincidunt nisi, sed cursus arcu pulvinar sed. Fusce accumsan ante et libero feugiat, congue maximus urna blandit. Nunc a est eu urna auctor congue. Aenean euismod ipsum sed nulla pretium rutrum.
14 |Nunc id augue libero. Donec quis metus risus. Donec posuere vulputate purus, a semper justo consectetur at. Cras porta vestibulum pulvinar. Fusce in leo lacinia massa fringilla pellentesque ac sit amet sem. Nullam accumsan ante leo, eu faucibus lorem iaculis in. Duis id gravida libero.
15 |Nulla facilisi. Duis tempus egestas eros et venenatis. Maecenas dictum ipsum sem, vitae aliquam diam viverra eget. Curabitur dui turpis, fermentum eleifend ornare id, pellentesque vitae metus. Duis a est faucibus, maximus nunc feugiat, rutrum ipsum. Integer in odio nisl. Quisque tortor sem, sollicitudin eget cursus nec, lobortis quis eros. Integer a sapien semper, vulputate ex at, tempor ante.
16 |Donec at est ut quam pharetra fermentum. In auctor quam ut velit porttitor, sit amet convallis sapien interdum. Suspendisse sed magna molestie purus iaculis ultrices. Ut convallis facilisis bibendum. Aenean vitae velit quis felis congue aliquam vitae ac felis. Nulla ipsum augue, elementum quis venenatis ullamcorper, auctor at augue. Vestibulum varius tortor sit amet mauris finibus, at consectetur leo dictum. Duis a odio rutrum, efficitur orci a, congue ipsum. Nulla efficitur, velit non pellentesque pretium, tellus tortor auctor purus, nec mollis mauris felis quis elit. Etiam efficitur eleifend mi, vel sagittis neque auctor ut.
17 |Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae porta enim. Sed ultricies lacinia mauris, non tincidunt sem eleifend eget. Duis convallis quis sem non volutpat. Morbi risus lorem, dapibus et nulla ac, pharetra maximus elit. Etiam vitae lacus a dui hendrerit ornare vitae id est. Pellentesque ut tortor id sem maximus lobortis at egestas nulla. Nulla pretium, nunc et porta ullamcorper, sem lorem elementum massa, rhoncus ullamcorper odio dui vel mauris. Ut lobortis neque congue eros posuere blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. In sem dolor, tempus eu tellus quis, vulputate malesuada felis.
18 |In iaculis nisi id ligula condimentum consequat. Fusce a massa lorem. Morbi id nisl ut tellus volutpat pulvinar a vel dolor. Phasellus eu purus tincidunt augue hendrerit posuere. Ut bibendum tincidunt nisi, sed cursus arcu pulvinar sed. Fusce accumsan ante et libero feugiat, congue maximus urna blandit. Nunc a est eu urna auctor congue. Aenean euismod ipsum sed nulla pretium rutrum.
19 |Nunc id augue libero. Donec quis metus risus. Donec posuere vulputate purus, a semper justo consectetur at. Cras porta vestibulum pulvinar. Fusce in leo lacinia massa fringilla pellentesque ac sit amet sem. Nullam accumsan ante leo, eu faucibus lorem iaculis in. Duis id gravida libero.
20 |Nulla facilisi. Duis tempus egestas eros et venenatis. Maecenas dictum ipsum sem, vitae aliquam diam viverra eget. Curabitur dui turpis, fermentum eleifend ornare id, pellentesque vitae metus. Duis a est faucibus, maximus nunc feugiat, rutrum ipsum. Integer in odio nisl. Quisque tortor sem, sollicitudin eget cursus nec, lobortis quis eros. Integer a sapien semper, vulputate ex at, tempor ante.
21 |Donec at est ut quam pharetra fermentum. In auctor quam ut velit porttitor, sit amet convallis sapien interdum. Suspendisse sed magna molestie purus iaculis ultrices. Ut convallis facilisis bibendum. Aenean vitae velit quis felis congue aliquam vitae ac felis. Nulla ipsum augue, elementum quis venenatis ullamcorper, auctor at augue. Vestibulum varius tortor sit amet mauris finibus, at consectetur leo dictum. Duis a odio rutrum, efficitur orci a, congue ipsum. Nulla efficitur, velit non pellentesque pretium, tellus tortor auctor purus, nec mollis mauris felis quis elit. Etiam efficitur eleifend mi, vel sagittis neque auctor ut.
22 |Grid cells have different size on Phone/Tablet
113 |
14 |
17 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet rhoncus odio. Suspendisse vel lectus neque. Mauris tincidunt dolor a felis vulputate, at accumsan risus convallis. Sed pulvinar malesuada enim, a consequat felis lobortis a. Morbi faucibus felis in libero lacinia blandit. Pellentesque vitae volutpat metus. In venenatis mauris massa, sed hendrerit augue pulvinar nec. Sed justo magna, lacinia vel tincidunt sed, tristique sit amet est. Nam iaculis dictum laoreet. Donec sed risus sed mauris ultricies aliquam sit amet in enim. Nullam tellus est, imperdiet et adipiscing consequat, consectetur vel nibh. Cras massa nibh, volutpat sit amet velit vel, suscipit tincidunt enim. Curabitur luctus elit id pharetra bibendum. Nulla ut dui eget nulla hendrerit commodo. Pellentesque placerat mi eget dolor rutrum, consectetur mattis mi tincidunt. 18 |
19 |20 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet rhoncus odio. Suspendisse vel lectus neque. Mauris tincidunt dolor a felis vulputate, at accumsan risus convallis. Sed pulvinar malesuada enim, a consequat felis lobortis a. Morbi faucibus felis in libero lacinia blandit. Pellentesque vitae volutpat metus. In venenatis mauris massa, sed hendrerit augue pulvinar nec. Sed justo magna, lacinia vel tincidunt sed, tristique sit amet est. Nam iaculis dictum laoreet. Donec sed risus sed mauris ultricies aliquam sit amet in enim. Nullam tellus est, imperdiet et adipiscing consequat, consectetur vel nibh. Cras massa nibh, volutpat sit amet velit vel, suscipit tincidunt enim. Curabitur luctus elit id pharetra bibendum. Nulla ut dui eget nulla hendrerit commodo. Pellentesque placerat mi eget dolor rutrum, consectetur mattis mi tincidunt. 21 |
22 |
14 |
17 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet rhoncus odio. Suspendisse vel lectus neque. Mauris tincidunt dolor a felis vulputate, at accumsan risus convallis. Sed pulvinar malesuada enim, a consequat felis lobortis a. Morbi faucibus felis in libero lacinia blandit. Pellentesque vitae volutpat metus. In venenatis mauris massa, sed hendrerit augue pulvinar nec. Sed justo magna, lacinia vel tincidunt sed, tristique sit amet est. Nam iaculis dictum laoreet. Donec sed risus sed mauris ultricies aliquam sit amet in enim. Nullam tellus est, imperdiet et adipiscing consequat, consectetur vel nibh. Cras massa nibh, volutpat sit amet velit vel, suscipit tincidunt enim. Curabitur luctus elit id pharetra bibendum. Nulla ut dui eget nulla hendrerit commodo. Pellentesque placerat mi eget dolor rutrum, consectetur mattis mi tincidunt. 18 |
19 |20 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet rhoncus odio. Suspendisse vel lectus neque. Mauris tincidunt dolor a felis vulputate, at accumsan risus convallis. Sed pulvinar malesuada enim, a consequat felis lobortis a. Morbi faucibus felis in libero lacinia blandit. Pellentesque vitae volutpat metus. In venenatis mauris massa, sed hendrerit augue pulvinar nec. Sed justo magna, lacinia vel tincidunt sed, tristique sit amet est. Nam iaculis dictum laoreet. Donec sed risus sed mauris ultricies aliquam sit amet in enim. Nullam tellus est, imperdiet et adipiscing consequat, consectetur vel nibh. Cras massa nibh, volutpat sit amet velit vel, suscipit tincidunt enim. Curabitur luctus elit id pharetra bibendum. Nulla ut dui eget nulla hendrerit commodo. Pellentesque placerat mi eget dolor rutrum, consectetur mattis mi tincidunt. 21 |
22 |15 | This demo demonstrates Framework7 exclusive behavior of dynamic sliding navigation bars. Just click the button below and look how navbar links will change. And don't forget to try swipe-back gesture on next pages: 16 |
17 |10 | Sometimes you may need to hide top Navbar or bottom Toolbar. Framework7 allows this by adding additional classes to pages. Check examples: 11 |
12 |13 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at luctus dui. Praesent venenatis libero orci, in scelerisque enim tincidunt eget. Pellentesque id odio id enim consectetur condimentum. Maecenas dapibus tempus diam. Suspendisse cursus, est ut feugiat tempus, lectus odio aliquam dui, non suscipit lectus sapien vitae velit. Vestibulum tempus faucibus massa, et rutrum odio luctus finibus. Praesent aliquet accumsan magna, quis ornare elit scelerisque sit amet. Mauris commodo varius velit dictum dictum. Sed non sapien urna. Nunc porta vitae massa nec rutrum. Praesent et porttitor tortor, vitae tristique nibh. Morbi sed tempor tellus, sit amet pharetra ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis porta feugiat nisl sed blandit. 14 |
15 |6 | On this page Navbar and Toolbar were hidden dynamically. Just add "no-toolbar no-navbar" class to this page to make it work. 7 |
8 |
10 |
6 | On this page Navbar was hidden dynamically. All you need to make it work is just to add "no-navbar" class to this page. 7 |
8 |
10 |
11 | On this page Toolbar was hidden dynamically. Just add "no-toolbar" class to this page to make it work. 12 |
13 |
15 |
21 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at luctus dui. Praesent venenatis libero orci, in scelerisque enim tincidunt eget. Pellentesque id odio id enim consectetur condimentum. Maecenas dapibus tempus diam. Suspendisse cursus, est ut feugiat tempus, lectus odio aliquam dui, non suscipit lectus sapien vitae velit. Vestibulum tempus faucibus massa, et rutrum odio luctus finibus. Praesent aliquet accumsan magna, quis ornare elit scelerisque sit amet. Mauris commodo varius velit dictum dictum. Sed non sapien urna. Nunc porta vitae massa nec rutrum. Praesent et porttitor tortor, vitae tristique nibh. Morbi sed tempor tellus, sit amet pharetra ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis porta feugiat nisl sed blandit. 22 |
23 |This is tab 1 content
4 |6 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum mi quis felis scelerisque faucibus. Aliquam ut commodo justo. Mauris vitae pharetra arcu. Sed tincidunt dui et nibh auctor pretium. Nam accumsan fermentum sem. Suspendisse potenti. Nulla sed orci malesuada, pellentesque elit vitae, cursus lorem. Praesent et vehicula sapien, ut rhoncus quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae mi nec lorem aliquet venenatis quis nec nibh. Aenean sit amet leo ligula. Fusce in massa et nisl dictum ultricies et vitae dui. Sed sagittis quis diam sed lobortis. Donec in massa pharetra, tristique purus vitae, consequat mauris. Aliquam tellus ante, pharetra in mattis ut, dictum quis erat. 7 |
8 |9 | Ut ac lobortis lacus, non pellentesque arcu. Quisque sodales sapien malesuada, condimentum nunc at, viverra lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus eu pulvinar turpis, id tristique quam. Aenean venenatis molestie diam, sit amet condimentum nisl pretium id. Donec diam tortor, mollis in vehicula id, vehicula consectetur nulla. Quisque posuere rutrum mauris, eu rutrum turpis blandit at. Proin volutpat tortor sit amet metus porttitor accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut dapibus posuere dictum. 10 |
11 |12 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum mi quis felis scelerisque faucibus. Aliquam ut commodo justo. Mauris vitae pharetra arcu. Sed tincidunt dui et nibh auctor pretium. Nam accumsan fermentum sem. Suspendisse potenti. Nulla sed orci malesuada, pellentesque elit vitae, cursus lorem. Praesent et vehicula sapien, ut rhoncus quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae mi nec lorem aliquet venenatis quis nec nibh. Aenean sit amet leo ligula. Fusce in massa et nisl dictum ultricies et vitae dui. Sed sagittis quis diam sed lobortis. Donec in massa pharetra, tristique purus vitae, consequat mauris. Aliquam tellus ante, pharetra in mattis ut, dictum quis erat. 13 |
14 |This is tab 2 content
4 |5 | Ut ac lobortis lacus, non pellentesque arcu. Quisque sodales sapien malesuada, condimentum nunc at, viverra lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus eu pulvinar turpis, id tristique quam. Aenean venenatis molestie diam, sit amet condimentum nisl pretium id. Donec diam tortor, mollis in vehicula id, vehicula consectetur nulla. Quisque posuere rutrum mauris, eu rutrum turpis blandit at. Proin volutpat tortor sit amet metus porttitor accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut dapibus posuere dictum. 6 |
7 |8 | Fusce luctus turpis nunc, id porta orci blandit eget. Aenean sodales quam nec diam varius, in ornare ipsum condimentum. Aenean eleifend, nulla sit amet volutpat adipiscing, ligula nulla pharetra risus, vitae consequat leo tortor eu nunc. Vivamus at fringilla metus. Duis neque lectus, sagittis in volutpat a, pretium vel turpis. Nam accumsan auctor libero, quis sodales felis faucibus quis. Etiam vestibulum sed nisl vel aliquet. Aliquam pellentesque leo a lacus ultricies scelerisque. Vestibulum vestibulum fermentum tincidunt. Proin eleifend metus non quam pretium, eu vehicula ipsum egestas. Nam eget nibh enim. Etiam sem leo, pellentesque a elit vel, egestas rhoncus enim. Morbi ultricies adipiscing tortor, vitae condimentum lacus hendrerit nec. Phasellus laoreet leo quis purus elementum, ut fringilla justo eleifend. Nunc ultricies a sapien vitae auctor. Aliquam id erat elementum, laoreet est et, dapibus ligula. 9 |
10 |11 | Ut ac lobortis lacus, non pellentesque arcu. Quisque sodales sapien malesuada, condimentum nunc at, viverra lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus eu pulvinar turpis, id tristique quam. Aenean venenatis molestie diam, sit amet condimentum nisl pretium id. Donec diam tortor, mollis in vehicula id, vehicula consectetur nulla. Quisque posuere rutrum mauris, eu rutrum turpis blandit at. Proin volutpat tortor sit amet metus porttitor accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut dapibus posuere dictum. 12 |
13 |This is tab 3 content
4 |5 | Nulla gravida libero eget lobortis iaculis. In sed elit eu nibh adipiscing faucibus. Sed ac accumsan lacus. In ut diam quis turpis fringilla volutpat. In ultrices dignissim consequat. Cras pretium tortor et lorem condimentum posuere. Nulla facilisi. Suspendisse pretium egestas lacus ac laoreet. Mauris rhoncus quis ipsum quis tristique. Vivamus ultricies urna quis nunc egestas, in euismod turpis fringilla. Nam tellus massa, vehicula eu sapien non, dapibus tempor lorem. Fusce placerat orci arcu, eu dignissim enim porttitor vel. Nullam porttitor vel dolor sed feugiat. Suspendisse potenti. Maecenas ac mattis odio. Sed vel ultricies lacus, sed posuere libero. 6 |
7 |8 | Nulla gravida libero eget lobortis iaculis. In sed elit eu nibh adipiscing faucibus. Sed ac accumsan lacus. In ut diam quis turpis fringilla volutpat. In ultrices dignissim consequat. Cras pretium tortor et lorem condimentum posuere. Nulla facilisi. Suspendisse pretium egestas lacus ac laoreet. Mauris rhoncus quis ipsum quis tristique. Vivamus ultricies urna quis nunc egestas, in euismod turpis fringilla. Nam tellus massa, vehicula eu sapien non, dapibus tempor lorem. Fusce placerat orci arcu, eu dignissim enim porttitor vel. Nullam porttitor vel dolor sed feugiat. Suspendisse potenti. Maecenas ac mattis odio. Sed vel ultricies lacus, sed posuere libero. 9 |
10 |11 | Nulla gravida libero eget lobortis iaculis. In sed elit eu nibh adipiscing faucibus. Sed ac accumsan lacus. In ut diam quis turpis fringilla volutpat. In ultrices dignissim consequat. Cras pretium tortor et lorem condimentum posuere. Nulla facilisi. Suspendisse pretium egestas lacus ac laoreet. Mauris rhoncus quis ipsum quis tristique. Vivamus ultricies urna quis nunc egestas, in euismod turpis fringilla. Nam tellus massa, vehicula eu sapien non, dapibus tempor lorem. Fusce placerat orci arcu, eu dignissim enim porttitor vel. Nullam porttitor vel dolor sed feugiat. Suspendisse potenti. Maecenas ac mattis odio. Sed vel ultricies lacus, sed posuere libero. 12 |
13 |This is tab 4 content
4 |5 | Fusce luctus turpis nunc, id porta orci blandit eget. Aenean sodales quam nec diam varius, in ornare ipsum condimentum. Aenean eleifend, nulla sit amet volutpat adipiscing, ligula nulla pharetra risus, vitae consequat leo tortor eu nunc. Vivamus at fringilla metus. Duis neque lectus, sagittis in volutpat a, pretium vel turpis. Nam accumsan auctor libero, quis sodales felis faucibus quis. Etiam vestibulum sed nisl vel aliquet. Aliquam pellentesque leo a lacus ultricies scelerisque. Vestibulum vestibulum fermentum tincidunt. Proin eleifend metus non quam pretium, eu vehicula ipsum egestas. Nam eget nibh enim. Etiam sem leo, pellentesque a elit vel, egestas rhoncus enim. Morbi ultricies adipiscing tortor, vitae condimentum lacus hendrerit nec. Phasellus laoreet leo quis purus elementum, ut fringilla justo eleifend. Nunc ultricies a sapien vitae auctor. Aliquam id erat elementum, laoreet est et, dapibus ligula. 6 |
7 |8 | Fusce luctus turpis nunc, id porta orci blandit eget. Aenean sodales quam nec diam varius, in ornare ipsum condimentum. Aenean eleifend, nulla sit amet volutpat adipiscing, ligula nulla pharetra risus, vitae consequat leo tortor eu nunc. Vivamus at fringilla metus. Duis neque lectus, sagittis in volutpat a, pretium vel turpis. Nam accumsan auctor libero, quis sodales felis faucibus quis. Etiam vestibulum sed nisl vel aliquet. Aliquam pellentesque leo a lacus ultricies scelerisque. Vestibulum vestibulum fermentum tincidunt. Proin eleifend metus non quam pretium, eu vehicula ipsum egestas. Nam eget nibh enim. Etiam sem leo, pellentesque a elit vel, egestas rhoncus enim. Morbi ultricies adipiscing tortor, vitae condimentum lacus hendrerit nec. Phasellus laoreet leo quis purus elementum, ut fringilla justo eleifend. Nunc ultricies a sapien vitae auctor. Aliquam id erat elementum, laoreet est et, dapibus ligula. 9 |
10 |11 | Fusce luctus turpis nunc, id porta orci blandit eget. Aenean sodales quam nec diam varius, in ornare ipsum condimentum. Aenean eleifend, nulla sit amet volutpat adipiscing, ligula nulla pharetra risus, vitae consequat leo tortor eu nunc. Vivamus at fringilla metus. Duis neque lectus, sagittis in volutpat a, pretium vel turpis. Nam accumsan auctor libero, quis sodales felis faucibus quis. Etiam vestibulum sed nisl vel aliquet. Aliquam pellentesque leo a lacus ultricies scelerisque. Vestibulum vestibulum fermentum tincidunt. Proin eleifend metus non quam pretium, eu vehicula ipsum egestas. Nam eget nibh enim. Etiam sem leo, pellentesque a elit vel, egestas rhoncus enim. Morbi ultricies adipiscing tortor, vitae condimentum lacus hendrerit nec. Phasellus laoreet leo quis purus elementum, ut fringilla justo eleifend. Nunc ultricies a sapien vitae auctor. Aliquam id erat elementum, laoreet est et, dapibus ligula. 12 |
13 |10 | Framework7 comes with simple Notifications component that allows you to show some useful messages to user. 11 |
12 |
13 |
16 |
19 |
22 |
10 | Photo Browser is a standalone and highly configurable component that allows to open window with photo viewer and navigation elements with the following features: 11 |
12 |19 | Photo Browser could be opened in a three ways - as a Standalone component, in Popup, and as separate Page: 20 |
21 |35 | For Popup and Standalone types, Photo Browser suppots 2 default themes - default Light (like in previous examples) and Dark theme. Here is a Dark theme examples: 36 |
37 |48 | Photo Browser also supports lazy loading for passed images: 49 |
50 |
51 |
10 | Of course, Framework7 has Popovers. Popovers may be called on absolutely any element with dynamic positioning. Note that due to Apple guide lines it is not recommended to use popovers on iPhone, only on bigger screens (iPad), so on small screen it may have wrong positioning because it is not fit to screen. For iPhone it is recommended to use
13 |
16 | Mauris fermentum neque et luctus venenatis. Vivamus a sem rhoncus, ornare tellus eu, euismod mauris. In porta turpis at semper convallis. Duis adipiscing leo eu nulla lacinia, quis rhoncus metus condimentum. Etiam nec malesuada nibh. Maecenas quis lacinia nisl, vel posuere dolor. Vestibulum condimentum, nisl ac vulputate egestas, neque enim dignissim elit, rhoncus volutpat magna enim a est. Aenean sit amet ligula neque. Cras suscipit rutrum enim. Nam a odio facilisis, elementum tellus non,
19 | In hac habitasse platea dictumst. Etiam varius, ante vel ornare facilisis, velit massa rutrum dolor, ac porta magna magna lacinia nunc. Curabitur
22 | Duis et ultricies nibh. Sed facilisis turpis urna, ac imperdiet erat venenatis eu. Proin sit amet faucibus tortor, et varius sem. Etiam vitae lacinia neque. Aliquam nisi purus, interdum in arcu sed, ultrices rutrum arcu. Nulla mi turpis, consectetur vel enim quis, facilisis viverra dui. Aliquam quis convallis tortor, quis semper ligula. Morbi ullamcorper
10 | How about an activity indicator? Framework 7 has a nice one. The F7 preloader is made with SVG and animated with CSS so it can be easily resized. Two options are available: the default is for light background and another one is for dark background. The HTML is pretty easy, just add a .preloader class to any element. For the dark background option, also add a .preloader-white class. Here are some examples: 11 |
12 |35 | Preloader also support all default color themes: 36 |
37 |54 | With app.showIndicator() you can call small overlay with indicator: 55 |
56 |58 | With app.showPreloader() you can call modal window with preloader: 59 |
60 |With app.showPreloader('My text...') you can call it with custom title:
62 |17 |
6 | This is a panel page 2 7 |
8 |9 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo saepe aspernatur inventore dolorum voluptates consequatur tempore ipsum! Quia, incidunt, aliquam sit veritatis nisi aliquid porro similique ipsa mollitia eaque ex! 10 |
11 |6 | This is a panel page 3 7 |
8 |9 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo saepe aspernatur inventore dolorum voluptates consequatur tempore ipsum! Quia, incidunt, aliquam sit veritatis nisi aliquid porro similique ipsa mollitia eaque ex! 10 |
11 |10 | Framework7 comes with 2 panels (on left and on right), both are optional. They have two different layouts/effects - cover above the content (like left panel here) and reveal (like right panel). You can put absolutely anything inside: data lists, forms, custom content, and even other isolated app view (like in right panel now) with its own dynamic navbar. Checkout panels: 11 |
12 |10 | Just click "Edit" button on navigation bar to enable sorting 11 |
12 |10 | Framework7 comes with powerful and most modern touch slider ever - Swiper Slider with super flexible configuration and lot, lot of features. Just check the following demos: 11 |
12 |19 | This is tab 1 content 20 |
21 |22 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum mi quis felis scelerisque faucibus. Aliquam ut commodo justo. Mauris vitae pharetra arcu. Sed tincidunt dui et nibh auctor pretium. Nam accumsan fermentum sem. Suspendisse potenti. Nulla sed orci malesuada, pellentesque elit vitae, cursus lorem. Praesent et vehicula sapien, ut rhoncus quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae mi nec lorem aliquet venenatis quis nec nibh. Aenean sit amet leo ligula. Fusce in massa et nisl dictum ultricies et vitae dui. Sed sagittis quis diam sed lobortis. Donec in massa pharetra, tristique purus vitae, consequat mauris. Aliquam tellus ante, pharetra in mattis ut, dictum quis erat. 23 |
24 |25 | Ut ac lobortis lacus, non pellentesque arcu. Quisque sodales sapien malesuada, condimentum nunc at, viverra lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus eu pulvinar turpis, id tristique quam. Aenean venenatis molestie diam, sit amet condimentum nisl pretium id. Donec diam tortor, mollis in vehicula id, vehicula consectetur nulla. Quisque posuere rutrum mauris, eu rutrum turpis blandit at. Proin volutpat tortor sit amet metus porttitor accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut dapibus posuere dictum. 26 |
27 |32 | This is tab 2 content 33 |
34 |35 | Ut ac lobortis lacus, non pellentesque arcu. Quisque sodales sapien malesuada, condimentum nunc at, viverra lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus eu pulvinar turpis, id tristique quam. Aenean venenatis molestie diam, sit amet condimentum nisl pretium id. Donec diam tortor, mollis in vehicula id, vehicula consectetur nulla. Quisque posuere rutrum mauris, eu rutrum turpis blandit at. Proin volutpat tortor sit amet metus porttitor accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut dapibus posuere dictum. 36 |
37 |38 | Fusce luctus turpis nunc, id porta orci blandit eget. Aenean sodales quam nec diam varius, in ornare ipsum condimentum. Aenean eleifend, nulla sit amet volutpat adipiscing, ligula nulla pharetra risus, vitae consequat leo tortor eu nunc. Vivamus at fringilla metus. Duis neque lectus, sagittis in volutpat a, pretium vel turpis. Nam accumsan auctor libero, quis sodales felis faucibus quis. Etiam vestibulum sed nisl vel aliquet. Aliquam pellentesque leo a lacus ultricies scelerisque. Vestibulum vestibulum fermentum tincidunt. Proin eleifend metus non quam pretium, eu vehicula ipsum egestas. Nam eget nibh enim. Etiam sem leo, pellentesque a elit vel, egestas rhoncus enim. Morbi ultricies adipiscing tortor, vitae condimentum lacus hendrerit nec. Phasellus laoreet leo quis purus elementum, ut fringilla justo eleifend. Nunc ultricies a sapien vitae auctor. Aliquam id erat elementum, laoreet est et, dapibus ligula. 39 |
40 |45 | This is tab 3 content 46 |
47 |48 | Nulla gravida libero eget lobortis iaculis. In sed elit eu nibh adipiscing faucibus. Sed ac accumsan lacus. In ut diam quis turpis fringilla volutpat. In ultrices dignissim consequat. Cras pretium tortor et lorem condimentum posuere. Nulla facilisi. Suspendisse pretium egestas lacus ac laoreet. Mauris rhoncus quis ipsum quis tristique. Vivamus ultricies urna quis nunc egestas, in euismod turpis fringilla. Nam tellus massa, vehicula eu sapien non, dapibus tempor lorem. Fusce placerat orci arcu, eu dignissim enim porttitor vel. Nullam porttitor vel dolor sed feugiat. Suspendisse potenti. Maecenas ac mattis odio. Sed vel ultricies lacus, sed posuere libero. 49 |
50 |51 | Nulla gravida libero eget lobortis iaculis. In sed elit eu nibh adipiscing faucibus. Sed ac accumsan lacus. In ut diam quis turpis fringilla volutpat. In ultrices dignissim consequat. Cras pretium tortor et lorem condimentum posuere. Nulla facilisi. Suspendisse pretium egestas lacus ac laoreet. Mauris rhoncus quis ipsum quis tristique. Vivamus ultricies urna quis nunc egestas, in euismod turpis fringilla. Nam tellus massa, vehicula eu sapien non, dapibus tempor lorem. Fusce placerat orci arcu, eu dignissim enim porttitor vel. Nullam porttitor vel dolor sed feugiat. Suspendisse potenti. Maecenas ac mattis odio. Sed vel ultricies lacus, sed posuere libero. 52 |
53 |19 | This is tab 1 content 20 |
21 |22 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum mi quis felis scelerisque faucibus. Aliquam ut commodo justo. Mauris vitae pharetra arcu. Sed tincidunt dui et nibh auctor pretium. Nam accumsan fermentum sem. Suspendisse potenti. Nulla sed orci malesuada, pellentesque elit vitae, cursus lorem. Praesent et vehicula sapien, ut rhoncus quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae mi nec lorem aliquet venenatis quis nec nibh. Aenean sit amet leo ligula. Fusce in massa et nisl dictum ultricies et vitae dui. Sed sagittis quis diam sed lobortis. Donec in massa pharetra, tristique purus vitae, consequat mauris. Aliquam tellus ante, pharetra in mattis ut, dictum quis erat. 23 |
24 |25 | Ut ac lobortis lacus, non pellentesque arcu. Quisque sodales sapien malesuada, condimentum nunc at, viverra lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus eu pulvinar turpis, id tristique quam. Aenean venenatis molestie diam, sit amet condimentum nisl pretium id. Donec diam tortor, mollis in vehicula id, vehicula consectetur nulla. Quisque posuere rutrum mauris, eu rutrum turpis blandit at. Proin volutpat tortor sit amet metus porttitor accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut dapibus posuere dictum. 26 |
27 |32 | This is tab 2 content 33 |
34 |35 | Ut ac lobortis lacus, non pellentesque arcu. Quisque sodales sapien malesuada, condimentum nunc at, viverra lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus eu pulvinar turpis, id tristique quam. Aenean venenatis molestie diam, sit amet condimentum nisl pretium id. Donec diam tortor, mollis in vehicula id, vehicula consectetur nulla. Quisque posuere rutrum mauris, eu rutrum turpis blandit at. Proin volutpat tortor sit amet metus porttitor accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut dapibus posuere dictum. 36 |
37 |38 | Fusce luctus turpis nunc, id porta orci blandit eget. Aenean sodales quam nec diam varius, in ornare ipsum condimentum. Aenean eleifend, nulla sit amet volutpat adipiscing, ligula nulla pharetra risus, vitae consequat leo tortor eu nunc. Vivamus at fringilla metus. Duis neque lectus, sagittis in volutpat a, pretium vel turpis. Nam accumsan auctor libero, quis sodales felis faucibus quis. Etiam vestibulum sed nisl vel aliquet. Aliquam pellentesque leo a lacus ultricies scelerisque. Vestibulum vestibulum fermentum tincidunt. Proin eleifend metus non quam pretium, eu vehicula ipsum egestas. Nam eget nibh enim. Etiam sem leo, pellentesque a elit vel, egestas rhoncus enim. Morbi ultricies adipiscing tortor, vitae condimentum lacus hendrerit nec. Phasellus laoreet leo quis purus elementum, ut fringilla justo eleifend. Nunc ultricies a sapien vitae auctor. Aliquam id erat elementum, laoreet est et, dapibus ligula. 39 |
40 |45 | This is tab 3 content 46 |
47 |48 | Nulla gravida libero eget lobortis iaculis. In sed elit eu nibh adipiscing faucibus. Sed ac accumsan lacus. In ut diam quis turpis fringilla volutpat. In ultrices dignissim consequat. Cras pretium tortor et lorem condimentum posuere. Nulla facilisi. Suspendisse pretium egestas lacus ac laoreet. Mauris rhoncus quis ipsum quis tristique. Vivamus ultricies urna quis nunc egestas, in euismod turpis fringilla. Nam tellus massa, vehicula eu sapien non, dapibus tempor lorem. Fusce placerat orci arcu, eu dignissim enim porttitor vel. Nullam porttitor vel dolor sed feugiat. Suspendisse potenti. Maecenas ac mattis odio. Sed vel ultricies lacus, sed posuere libero. 49 |
50 |51 | Nulla gravida libero eget lobortis iaculis. In sed elit eu nibh adipiscing faucibus. Sed ac accumsan lacus. In ut diam quis turpis fringilla volutpat. In ultrices dignissim consequat. Cras pretium tortor et lorem condimentum posuere. Nulla facilisi. Suspendisse pretium egestas lacus ac laoreet. Mauris rhoncus quis ipsum quis tristique. Vivamus ultricies urna quis nunc egestas, in euismod turpis fringilla. Nam tellus massa, vehicula eu sapien non, dapibus tempor lorem. Fusce placerat orci arcu, eu dignissim enim porttitor vel. Nullam porttitor vel dolor sed feugiat. Suspendisse potenti. Maecenas ac mattis odio. Sed vel ultricies lacus, sed posuere libero. 52 |
53 |19 | This is tab 1 content 20 |
21 |22 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum mi quis felis scelerisque faucibus. Aliquam ut commodo justo. Mauris vitae pharetra arcu. Sed tincidunt dui et nibh auctor pretium. Nam accumsan fermentum sem. Suspendisse potenti. Nulla sed orci malesuada, pellentesque elit vitae, cursus lorem. Praesent et vehicula sapien, ut rhoncus quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae mi nec lorem aliquet venenatis quis nec nibh. Aenean sit amet leo ligula. Fusce in massa et nisl dictum ultricies et vitae dui. Sed sagittis quis diam sed lobortis. Donec in massa pharetra, tristique purus vitae, consequat mauris. Aliquam tellus ante, pharetra in mattis ut, dictum quis erat. 23 |
24 |25 | Ut ac lobortis lacus, non pellentesque arcu. Quisque sodales sapien malesuada, condimentum nunc at, viverra lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus eu pulvinar turpis, id tristique quam. Aenean venenatis molestie diam, sit amet condimentum nisl pretium id. Donec diam tortor, mollis in vehicula id, vehicula consectetur nulla. Quisque posuere rutrum mauris, eu rutrum turpis blandit at. Proin volutpat tortor sit amet metus porttitor accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut dapibus posuere dictum. 26 |
27 |32 | This is tab 2 content 33 |
34 |35 | Ut ac lobortis lacus, non pellentesque arcu. Quisque sodales sapien malesuada, condimentum nunc at, viverra lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus eu pulvinar turpis, id tristique quam. Aenean venenatis molestie diam, sit amet condimentum nisl pretium id. Donec diam tortor, mollis in vehicula id, vehicula consectetur nulla. Quisque posuere rutrum mauris, eu rutrum turpis blandit at. Proin volutpat tortor sit amet metus porttitor accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut dapibus posuere dictum. 36 |
37 |38 | Fusce luctus turpis nunc, id porta orci blandit eget. Aenean sodales quam nec diam varius, in ornare ipsum condimentum. Aenean eleifend, nulla sit amet volutpat adipiscing, ligula nulla pharetra risus, vitae consequat leo tortor eu nunc. Vivamus at fringilla metus. Duis neque lectus, sagittis in volutpat a, pretium vel turpis. Nam accumsan auctor libero, quis sodales felis faucibus quis. Etiam vestibulum sed nisl vel aliquet. Aliquam pellentesque leo a lacus ultricies scelerisque. Vestibulum vestibulum fermentum tincidunt. Proin eleifend metus non quam pretium, eu vehicula ipsum egestas. Nam eget nibh enim. Etiam sem leo, pellentesque a elit vel, egestas rhoncus enim. Morbi ultricies adipiscing tortor, vitae condimentum lacus hendrerit nec. Phasellus laoreet leo quis purus elementum, ut fringilla justo eleifend. Nunc ultricies a sapien vitae auctor. Aliquam id erat elementum, laoreet est et, dapibus ligula. 39 |
40 |45 | This is tab 3 content 46 |
47 |48 | Nulla gravida libero eget lobortis iaculis. In sed elit eu nibh adipiscing faucibus. Sed ac accumsan lacus. In ut diam quis turpis fringilla volutpat. In ultrices dignissim consequat. Cras pretium tortor et lorem condimentum posuere. Nulla facilisi. Suspendisse pretium egestas lacus ac laoreet. Mauris rhoncus quis ipsum quis tristique. Vivamus ultricies urna quis nunc egestas, in euismod turpis fringilla. Nam tellus massa, vehicula eu sapien non, dapibus tempor lorem. Fusce placerat orci arcu, eu dignissim enim porttitor vel. Nullam porttitor vel dolor sed feugiat. Suspendisse potenti. Maecenas ac mattis odio. Sed vel ultricies lacus, sed posuere libero. 49 |
50 |51 | Nulla gravida libero eget lobortis iaculis. In sed elit eu nibh adipiscing faucibus. Sed ac accumsan lacus. In ut diam quis turpis fringilla volutpat. In ultrices dignissim consequat. Cras pretium tortor et lorem condimentum posuere. Nulla facilisi. Suspendisse pretium egestas lacus ac laoreet. Mauris rhoncus quis ipsum quis tristique. Vivamus ultricies urna quis nunc egestas, in euismod turpis fringilla. Nam tellus massa, vehicula eu sapien non, dapibus tempor lorem. Fusce placerat orci arcu, eu dignissim enim porttitor vel. Nullam porttitor vel dolor sed feugiat. Suspendisse potenti. Maecenas ac mattis odio. Sed vel ultricies lacus, sed posuere libero. 52 |
53 |11 | One of the main target of Framework7 is to have native look and feeling of iOS application. And Framework7 is the only framework that solves it and offers 1:1 page animation with smooth parallax effect, changing opacity and shadow when loading new page. 12 |
13 |17 | One of Framework7' killing feature is supporting of iOS well known swipe back gesture from left border of screen when you want to get to the previous page. It simply works, and works perfectly as you expect it to do. Just swipe from left (or drag with mouse) area of the page to see smooth transition to the previous page. It is not just A-B transition. It really follows your finger with parallax animation while touch! 18 |
19 |23 | As was mentioned already Framework7 makes everything to give you a feel of native iOS app. And one of the significant feature that improves this feeling is the dynamic navigation bar (navbar). You can see how its elements sliding and fading during pages transition and when you swipe back. 24 |
25 |11 | Virtual List allows to render lists with huge amount of elements without loss of performance. And it is fully compatible with all Framework7 list components such as Search Bar, Infinite Scroll, Pull To Refresh, Swipeouts (swipe-to-delete) and Sortable. 12 |
13 |14 | Here is the example of virtual list with 10 000 items: 15 |
16 |