Hi,
I’ve setup React - Tab View app using Framework7 CLI UI. On right panel, have links to other pages. But those are opening inside right panel.
I want to open those as separate pages.
routes.js
import HomePage from '../pages/home.jsx';
import AboutPage from '../pages/about.jsx';
import FormPage from '../pages/form.jsx';
import CatalogPage from '../pages/catalog.jsx';
import ProductPage from '../pages/product.jsx';
import SettingsPage from '../pages/settings.jsx';
import DynamicRoutePage from '../pages/dynamic-route.jsx';
import RequestAndLoad from '../pages/request-and-load.jsx';
import NotFoundPage from '../pages/404.jsx';
import LoginPage from '../pages/login.jsx';
var routes = [
{
path: '/',
component: HomePage,
},
{
path: '/login/',
component: LoginPage,
},
{
path: '/about/',
component: AboutPage,
},
{
path: '/form/',
component: FormPage,
},
{
path: '/catalog/',
component: CatalogPage,
},
{
path: '/product/:id/',
component: ProductPage,
},
{
path: '/settings/',
component: SettingsPage,
},
{
path: '/dynamic-route/blog/:blogId/post/:postId/',
component: DynamicRoutePage,
},
{
path: '/request-and-load/user/:userId/',
async: function (routeTo, routeFrom, resolve, reject) {
// Router instance
var router = this;
// App instance
var app = router.app;
// Show Preloader
app.preloader.show();
// User ID from request
var userId = routeTo.params.userId;
// Simulate Ajax Request
setTimeout(function () {
// We got user data from request
var user = {
firstName: 'Vladimir',
lastName: 'Kharlampidi',
about: 'Hello, i am creator of Framework7! Hope you like it!',
links: [
{
title: 'Framework7 Website',
url: 'http://framework7.io',
},
{
title: 'Framework7 Forum',
url: 'http://forum.framework7.io',
},
]
};
// Hide Preloader
app.preloader.hide();
// Resolve route to load page
resolve(
{
component: RequestAndLoad,
},
{
context: {
user: user,
}
}
);
}, 1000);
},
},
{
path: '(.*)',
component: NotFoundPage,
},
];
export default routes;
app.jsx
import React from 'react';
import { App, Panel, Views, View, Popup, Page, Navbar, Toolbar, NavRight, Link, Block, BlockTitle, LoginScreen, LoginScreenTitle, List, ListItem, Icon, ListInput, ListButton, BlockFooter } from 'framework7-react';
import routes from '../js/routes';
export default class extends React.Component {
constructor() {
super();
this.state = {
// Framework7 Parameters
f7params: {
name: 'My App', // App name
theme: 'auto', // Automatic theme detection
// App root data
data: function () {
return {
// Demo products for Catalog section
products: [
{
id: '1',
title: 'Apple iPhone 8',
description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi tempora similique reiciendis, error nesciunt vero, blanditiis pariatur dolor, minima sed sapiente rerum, dolorem corrupti hic modi praesentium unde saepe perspiciatis.'
},
{
id: '2',
title: 'Apple iPhone 8 Plus',
description: 'Velit odit autem modi saepe ratione totam minus, aperiam, labore quia provident temporibus quasi est ut aliquid blanditiis beatae suscipit odio vel! Nostrum porro sunt sint eveniet maiores, dolorem itaque!'
},
{
id: '3',
title: 'Apple iPhone X',
description: 'Expedita sequi perferendis quod illum pariatur aliquam, alias laboriosam! Vero blanditiis placeat, mollitia necessitatibus reprehenderit. Labore dolores amet quos, accusamus earum asperiores officiis assumenda optio architecto quia neque, quae eum.'
},
]
};
},
// App routes
routes: routes,
// Register service worker
serviceWorker: {
path: '/service-worker.js',
},
},
// Login screen demo data
username: '',
password: '',
}
}
render() {
return (
<App params={this.state.f7params}>
{/* Left panel with cover effect*/}
<Panel left cover>
<View>
<Page>
<Navbar title="Info" />
<BlockTitle>About Us</BlockTitle>
<Block>We're about to change sri lanka</Block>
</Page>
</View>
</Panel>
{/* Right panel with reveal effect*/}
<Panel right reveal>
<View>
<Page>
<Navbar title="My Profile" />
<BlockTitle>Profile Actions</BlockTitle>
<List>
<ListItem id="logInItem" link="#" title="Login">
<Icon slot="media" f7="person_badge_plus"></Icon>
</ListItem>
<ListItem id="logOutItem" link="#" title="Logout">
<Icon slot="media" f7="power"></Icon>
</ListItem>
<ListItem link="/about/" title="About" />
<ListItem link="/form/" title="Form" />
</List>
</Page>
</View>
</Panel>
{/* Views/Tabs container */}
<Views tabs className="safe-areas">
{/* Tabbar for switching views-tabs */}
<Toolbar tabbar labels bottom>
<Link tabLink="#view-home" tabLinkActive iconIos="f7:house_fill" iconAurora="f7:house_fill" iconMd="material:home" text="Home" />
<Link tabLink="#view-catalog" iconIos="f7:chat_bubble_2_fill" iconAurora="f7:chat_bubble_2_fill" iconMd="f7:chat_bubble_2_fill" text="Catalog" />
<Link tabLink="#view-settings" iconIos="f7:waveform_path" iconAurora="f7:waveform_path" iconMd="f7:waveform_path" text="Settings" />
</Toolbar>
{/* Your main view/tab, should have "view-main" class. It also has "tabActive" prop */}
<View id="view-home" main tab tabActive url="/" />
{/* Catalog View */}
<View id="view-catalog" name="catalog" tab url="/catalog/" />
{/* Settings View */}
<View id="view-settings" name="settings" tab url="/settings/" />
</Views>
</App>
)
}
alertLoginData() {
this.$f7.dialog.alert('Username: ' + this.state.username + '<br>Password: ' + this.state.password, () => {
this.$f7.loginScreen.close();
});
}
componentDidMount() {
this.$f7ready((f7) => {
// Call F7 APIs here
});
}
}
Please advice. Thanks