The React system is developed by Facebook. Framework7 React  is javascript based, but you can easy build it as a webb app so ios, PC and android can view the app like this at your homepage: http://www.viska.se/app

Framework7 React is in a way simpler to use than ordinary Framework7, but less powerful.

Here you can download the Framwork7 React template here:

https://github.com/framework7io/framework7-template-react

Download also:

https://github.com/framework7io/framework7

In a submenu you will find Kitchenzink for Framework7 React and there you will find your code that you need.

Open the file HomePage.jsx in Framework7, where you add the content of your app like menu and searchbar:

If you add accordionIem and AccordionContent you have to add them at the end of the list at the top of page:

import {
Page,
Navbar,
NavLeft,
NavTitle,
NavRight,
Searchbar,
S ubnavbar,
Toolbar,
Block,
List,
ListItem,
AccordionContent,
AccordionItem

I recommend a simple list because accordion menus gave problem at search, as the list item was not displayed but instead the name of the list, which users found confusing.

A simple list look like this:

<List className="search-list searchbar-found" simple-list>
<ListItem link="http://www.viska.se/sjalvhjalp-2/sjalvhjalpsrad/2261-negativa-symptom" external title="Negativa symptom"></ListItem>
<ListItem link="http://www.viska.se/sjalvhjalp-2/sjalvhjalpsrad/2239-daligt-minne-och-koncentrationsfoermaga" external title="Koncentration & Minne"></ListItem>

</List>

Note: You must have external for external links.

Build your menu with code from the Kitchenzink:

kitchen-zink\react\src\pages

accordion.jsz

list.jsz

When your menus are ready add your links.

If you want a title for a group of links use this

<BlockTitle className="searchbar-hide-on-search" title>Psykosymptom</BlockTitle>

searchbar-hide-on-search means that this block title will not appear in search results.

If you want to use css for different elements:

<BlockTitle className="awar" title>Psykosymptom</BlockTitle>

Then you can add CSS code to .awar in /src/css/app.css. It is like ordinary css.

Now you add the Seachbar:

<Toolbar>

<Searchbar
placeholder="Sök"
searchContainer=".search-list"
searchIn=".item-title"
clearButton={true}
></Searchbar>

</Toolbar>

<Block strong>
<List className="searchbar-not-found">
<ListItem title="Fann inget"></ListItem>
</List>

As you see the Searchbar is partly within Toolbar.

For each list you want to be searched you have to add so it looks like this;

<List className="search-list searchbar-found" simple-list>

Then the list item can be searched.

Note: You have to define Searchbar like AccordionItem.

Now maybe you like a logo at the top:

I did like this:

<NavTitle>Viska-appen</NavTitle> <img src= { './img/viskaappen.png' } />

However when you deployed your app in your web space you must upload /img/ folder and then your logo will be visible,

If your app does not look good and need adjustments. You can add CSS -code directly in the menues:

Just before the code of the accordion menu I put this:

<li style={{ listStyleType: "none",
"margin-left": "19px",
"margin-top": "-1

margin-bottom": "-10px",

fontSize: "16px"
}}>

And last at the accordion menu put </li>

listStyleType: "none", is to take away the bullet before the list name.

margin-left, margin-top, margin-bottom is a way to adjust the text of Listitem.

fontSize: must be in px otherwize I could not adjust font size.

After that you have to take away code from the page that you dont need.

After that:

npm run build

Its for deployment:

npm install -g serve

and next:

serve -s build

Now you can check your app in webb browser:

If it looks OK you can add to:

package.json

{
"name": "framework7-react-app-template",
"version": "1.0.0",
"private": true,

After this add:

"homepage": "http://www.viska.se/app",

This the folder on your site where you upload your webb app.

After this

npm run build

after that:

serve -s build

Inside your app folder is /build folder.

Its content you shall upload to your app-folder of your site.

If you have a img-folder for logo upload it too.

Now when you visit your app-folder with android, iPhone or PC you will be able to use the app.

First time I got blank page and its was due to I had not added "homepage": "http://www.viska.se/app"

But remember if you afterwards want to build a test build to check on your PC you have to remove the line: "homepage": "http://www.viska.se/app"

Otherwize you will have to upload it to your site to view it in action.

The links that are opened you have to use Back on your smartphone to return to the app.

You can view my app at: http://www.viska.se/app

 

Lägg till kommentar