I would like to add a tab that pushes a page in fullscreen to take a photo.
My code is like:
return (
<App params={ f7params }>
{/* Status bar overlay for fullscreen mode*/ }
<Statusbar></Statusbar>
{/* Views/Tabs container */ }
<Views tabs className="safe-areas">
{/* Tabbar for switching views-tabs */ }
<Toolbar tabbar labels bottom>
<Link tabLink="#view-home" tabLinkActive iconIos="f7:home_fil" iconAurora="f7:home_fil"
iconMd="material:home"/>
<Link iconIos="f7:camera" iconAurora="f7:camera" iconMd="material:camera" href={'/camera/'}/>
<Link tabLink="#view-catalog" iconIos="f7:list_fill" iconAurora="f7:list_fill"
iconMd="material:view_list"/>
<Link tabLink="#view-settings" iconIos="f7:settings_fill" iconAurora="f7:settings_fill"
iconMd="material: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>
{/* Camera */}
<View id="view-camera" name="camera" url="/camera/"/>
</App>
)
If I click on camera’s tab from Home, the behavior is what I want to.
If I change to another tab then click on camera, my perception is that it’s behind all because the nav bar is hidden. If I back to Home, then it appear.
I recorded a video for easy understanding: https://gofile.io/?c=cnKhFs.