├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public └── index.html └── src ├── components ├── App.jsx └── pages │ ├── AboutPage.jsx │ ├── DynamicRoutePage.jsx │ ├── FormPage.jsx │ ├── HomePage.jsx │ ├── NotFoundPage.jsx │ ├── PanelLeftPage.jsx │ └── PanelRightPage.jsx ├── css ├── app.css └── icons.css ├── index.js └── routes.js /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | 23 | src/fonts 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ⛔️ DEPRECATED 2 | 3 | **This repo is deprecated and not mainted any more. Use [Framework7-CLI](https://framework7.io/cli/) instead. Please, don't open new issues and don't send any PRs to this repository** 4 | 5 | # Framework7 v3 React App Template 6 | 7 | To get started, clone this repo as whatever you want to name your app: 8 | 9 | ``` 10 | git clone https://github.com/framework7io/framework7-react-app-template/ my-app 11 | ``` 12 | 13 | Running the app: 14 | 15 | ``` 16 | npm install 17 | npm start 18 | ``` 19 | 20 | To build your app for deployment, run: 21 | 22 | ``` 23 | npm run build 24 | ``` 25 | 26 | The build folder will then contain all of your app's files, optimized and ready for deployment. 27 | 28 | This template was created with [Create React App](https://github.com/facebookincubator/create-react-app). It is suggested that you read more about Create React App to understand the full capabilities of the toolset. 29 | 30 | ### Issues 31 | 32 | Please log any issues to the main [Framework7 repo](https://github.com/framework7io/framework7/issues). 33 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "framework7-react-app-template", 3 | "version": "4.0.0", 4 | "private": true, 5 | "dependencies": { 6 | "framework7": "^4.0.0", 7 | "framework7-react": "^4.0.0", 8 | "framework7-icons": "^2.2.0", 9 | "material-design-icons": "^3.0.1", 10 | "react": "^16.8.1", 11 | "react-dom": "^16.8.1", 12 | "react-scripts": "2.1.3" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test --env=jsdom", 18 | "eject": "react-scripts eject", 19 | "copy-fonts": "cpy node_modules/framework7-icons/fonts/*.* src/fonts && cpy node_modules/material-design-icons/iconfont/*.{eot,ttf,woff,woff2} src/fonts", 20 | "postinstall": "npm run copy-fonts" 21 | }, 22 | "devDependencies": { 23 | "babel-plugin-transform-object-rest-spread": "^6.26.0", 24 | "cpy-cli": "^2.0.0" 25 | }, 26 | "browserslist": { 27 | "development": [ 28 | "last 2 chrome versions", 29 | "last 2 firefox versions", 30 | "last 2 edge versions" 31 | ], 32 | "production": [ 33 | ">1%", 34 | "last 4 versions", 35 | "Firefox ESR", 36 | "not ie < 11" 37 | ] 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | My App 22 | 31 | 32 | 33 |
34 | 35 | 38 | 39 | 49 | 50 | -------------------------------------------------------------------------------- /src/components/App.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | App, 4 | Panel, 5 | View, 6 | Statusbar, 7 | Popup, 8 | Page, 9 | Navbar, 10 | NavRight, 11 | Link, 12 | Block, 13 | LoginScreen, 14 | LoginScreenTitle, 15 | List, 16 | ListInput, 17 | ListButton, 18 | BlockFooter 19 | } from 'framework7-react'; 20 | 21 | import routes from '../routes'; 22 | 23 | export default function (props) { 24 | 25 | // Framework7 parameters here 26 | const f7params = { 27 | id: 'io.framework7.testapp', // App bundle ID 28 | name: 'Framework7', // App name 29 | theme: 'auto', // Automatic theme detection 30 | // App routes 31 | routes, 32 | }; 33 | 34 | return ( 35 | 36 | {/* Statusbar */} 37 | 38 | 39 | {/* Left Panel */} 40 | 41 | 42 | 43 | 44 | {/* Right Panel */} 45 | 46 | 47 | 48 | 49 | {/* Main View */} 50 | 51 | 52 | {/* Popup */} 53 | 54 | 55 | 56 | 57 | 58 | Close 59 | 60 | 61 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, architecto. Cupiditate laudantium rem nesciunt numquam, ipsam. Voluptates omnis, a inventore atque ratione aliquam. Omnis iusto nemo quos ullam obcaecati, quod. 62 | 63 | 64 | 65 | 66 | {/* Login Screen */} 67 | 68 | 69 | 70 | Login 71 | 72 | 78 | 84 | 85 | 86 | 87 | 88 |

Click Sign In to close Login Screen

89 | 90 | 91 | 92 | 93 | 94 | 95 | ); 96 | }; 97 | -------------------------------------------------------------------------------- /src/components/pages/AboutPage.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Page, Navbar, Link, Block, BlockTitle } from 'framework7-react'; 3 | 4 | export default () => ( 5 | 6 | 7 | About My App 8 | 9 |

Here is About page!

10 |

You can go back.

11 |

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 | 14 | 15 | ); 16 | -------------------------------------------------------------------------------- /src/components/pages/DynamicRoutePage.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { Page, Navbar, Block, Link } from 'framework7-react'; 3 | 4 | export default class DynamicRoutePage extends Component { 5 | render() { 6 | return ( 7 | 8 | 9 | 10 |
    11 |
  • Url: {this.$f7route.url}
    • 12 |
  • Path: {this.$f7route.path}
    • 13 |
  • Hash: {this.$f7route.hash}
    • 14 |
  • Params: 15 |
      16 | {Object.keys(this.$f7route.params).map(key => ( 17 |
    • {key}: {this.$f7route.params[key]}
      • 18 | ))} 19 |
    20 |
    • 21 |
  • Query: 22 |
      23 | {Object.keys(this.$f7route.query).map(key => ( 24 |
    • {key}: {this.$f7route.query[key]}
      • 25 | ))} 26 |
    27 |
    • 28 |
  • Route: {JSON.stringify(this.$f7route.route)}
    • 29 |
30 | 31 | 32 | this.$f7router.back()}>Go back via Router API 33 | 34 | 35 | ); 36 | } 37 | } -------------------------------------------------------------------------------- /src/components/pages/FormPage.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | Page, 4 | Navbar, 5 | List, 6 | ListItem, 7 | ListInput, 8 | Toggle, 9 | BlockTitle, 10 | Row, 11 | Button, 12 | Range, 13 | Block 14 | } from 'framework7-react'; 15 | 16 | export default () => ( 17 | 18 | 19 | Form Example 20 | 21 | 26 | 31 | 36 | 41 | 46 | 51 | 52 | 53 | 54 | 59 | 60 | 61 | 62 | 66 | 67 | 68 | 73 | 79 | 80 | 81 | Checkbox group 82 | 83 | {Array.from(Array(3).keys()).map(n => ( 84 | 85 | ))} 86 | 87 | 88 | Radio buttons group 89 | 90 | {Array.from(Array(3).keys()).map(n => ( 91 | 92 | ))} 93 | 94 | 95 | Buttons 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | ); 132 | -------------------------------------------------------------------------------- /src/components/pages/HomePage.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | Page, 4 | Navbar, 5 | NavLeft, 6 | NavTitle, 7 | NavRight, 8 | Link, 9 | Toolbar, 10 | Block, 11 | BlockTitle, 12 | List, 13 | ListItem, 14 | Row, 15 | Col, 16 | Button 17 | } from 'framework7-react'; 18 | 19 | export default () => ( 20 | 21 | 22 | 23 | 24 | 25 | My App 26 | 27 | 28 | 29 | 30 | 31 | Left Link 32 | Right Link 33 | 34 | 35 |

Here is your blank Framework7 app. Let's see what we have here.

36 | 37 | Navigation 38 | 39 | 40 | 41 | 42 | Modals 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | Panels 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | ); 70 | -------------------------------------------------------------------------------- /src/components/pages/NotFoundPage.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Page, Navbar, Block } from 'framework7-react'; 3 | 4 | export default () => ( 5 | 6 | 7 | 8 |

Sorry

9 |

Requested content not found.

10 | 11 | 12 | ); 13 | -------------------------------------------------------------------------------- /src/components/pages/PanelLeftPage.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Page, Navbar, Block, BlockTitle, List, ListItem } from 'framework7-react'; 3 | 4 | export default () => ( 5 | 6 | 7 | 8 |

Left panel content goes here

9 | 10 | Load page in panel 11 | 12 | 13 | 14 | 15 | Load page in main view 16 | 17 | 18 | 19 | 20 | 21 | ); 22 | -------------------------------------------------------------------------------- /src/components/pages/PanelRightPage.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Page, Navbar, Block, BlockTitle, List, ListItem } from 'framework7-react'; 3 | 4 | export default () => ( 5 | 6 | 7 | 8 |

Right panel content goes here

9 | 10 | Load page in panel 11 | 12 | 13 | 14 | 15 | Load page in main view 16 | 17 | 18 | 19 | 20 | 21 | ); 22 | -------------------------------------------------------------------------------- /src/css/app.css: -------------------------------------------------------------------------------- 1 | /* Your app styles here */ -------------------------------------------------------------------------------- /src/css/icons.css: -------------------------------------------------------------------------------- 1 | /* Material Icons Font (for MD theme) */ 2 | @font-face { 3 | font-family: 'Material Icons'; 4 | font-style: normal; 5 | font-weight: 400; 6 | src: url(../fonts/MaterialIcons-Regular.eot); /* For IE6-8 */ 7 | src: local('Material Icons'), 8 | local('MaterialIcons-Regular'), 9 | url(../fonts/MaterialIcons-Regular.woff2) format('woff2'), 10 | url(../fonts/MaterialIcons-Regular.woff) format('woff'), 11 | url(../fonts/MaterialIcons-Regular.ttf) format('truetype'); 12 | } 13 | 14 | .material-icons { 15 | font-family: 'Material Icons'; 16 | font-weight: normal; 17 | font-style: normal; 18 | font-size: 24px; /* Preferred icon size */ 19 | display: inline-block; 20 | line-height: 1; 21 | text-transform: none; 22 | letter-spacing: normal; 23 | word-wrap: normal; 24 | white-space: nowrap; 25 | direction: ltr; 26 | 27 | /* Support for all WebKit browsers. */ 28 | -webkit-font-smoothing: antialiased; 29 | /* Support for Safari and Chrome. */ 30 | text-rendering: optimizeLegibility; 31 | 32 | /* Support for Firefox. */ 33 | -moz-osx-font-smoothing: grayscale; 34 | 35 | /* Support for IE. */ 36 | font-feature-settings: 'liga'; 37 | } 38 | 39 | /* Framework7 Icons Font (for iOS theme) */ 40 | @font-face { 41 | font-family: 'Framework7 Icons'; 42 | font-style: normal; 43 | font-weight: 400; 44 | src: url("../fonts/Framework7Icons-Regular.eot"); 45 | src: url("../fonts/Framework7Icons-Regular.woff2") format("woff2"), 46 | url("../fonts/Framework7Icons-Regular.woff") format("woff"), 47 | url("../fonts/Framework7Icons-Regular.ttf") format("truetype"); 48 | } 49 | 50 | .f7-icons { 51 | font-family: 'Framework7 Icons'; 52 | font-weight: normal; 53 | font-style: normal; 54 | font-size: 25px; 55 | line-height: 1; 56 | letter-spacing: normal; 57 | text-transform: none; 58 | display: inline-block; 59 | white-space: nowrap; 60 | word-wrap: normal; 61 | direction: ltr; 62 | -webkit-font-smoothing: antialiased; 63 | text-rendering: optimizeLegibility; 64 | -moz-osx-font-smoothing: grayscale; 65 | -webkit-font-feature-settings: "liga"; 66 | -moz-font-feature-settings: "liga=1"; 67 | -moz-font-feature-settings: "liga"; 68 | font-feature-settings: "liga"; 69 | text-align: center; 70 | } 71 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | // Import React and ReactDOM 2 | import React from 'react'; 3 | import ReactDOM from 'react-dom'; 4 | 5 | // Import Framework7 6 | import Framework7 from 'framework7/framework7.esm.bundle'; 7 | 8 | // Import Framework7-React plugin 9 | import Framework7React from 'framework7-react'; 10 | 11 | // Import main App component 12 | import App from './components/App.jsx'; 13 | 14 | // Framework7 styles 15 | import 'framework7/css/framework7.bundle.css'; 16 | 17 | // Icons 18 | import './css/icons.css'; 19 | 20 | // Custom app styles 21 | import './css/app.css'; 22 | 23 | // Init Framework7-React plugin 24 | Framework7.use(Framework7React); 25 | 26 | // Mount React App 27 | ReactDOM.render( 28 | React.createElement(App), 29 | document.getElementById('app'), 30 | ); 31 | -------------------------------------------------------------------------------- /src/routes.js: -------------------------------------------------------------------------------- 1 | import HomePage from './components/pages/HomePage'; 2 | import AboutPage from './components/pages/AboutPage'; 3 | import FormPage from './components/pages/FormPage'; 4 | import DynamicRoutePage from './components/pages/DynamicRoutePage'; 5 | import NotFoundPage from './components/pages/NotFoundPage'; 6 | import PanelLeftPage from './components/pages/PanelLeftPage'; 7 | import PanelRightPage from './components/pages/PanelRightPage'; 8 | 9 | export default [ 10 | { 11 | path: '/', 12 | component: HomePage, 13 | }, 14 | { 15 | path: '/panel-left/', 16 | component: PanelLeftPage, 17 | }, 18 | { 19 | path: '/panel-right/', 20 | component: PanelRightPage, 21 | }, 22 | { 23 | path: '/about/', 24 | component: AboutPage, 25 | }, 26 | { 27 | path: '/form/', 28 | component: FormPage, 29 | }, 30 | { 31 | path: '/dynamic-route/blog/:blogId/post/:postId/', 32 | component: DynamicRoutePage, 33 | }, 34 | { 35 | path: '(.*)', 36 | component: NotFoundPage, 37 | }, 38 | ]; 39 | --------------------------------------------------------------------------------