I'm trying to join tabs and side menu together, I'm confused on what I'm doing wrong. since root belongs to sidemenu..
import {App, IonicApp, Platform} from 'ionic-framework/ionic';
import {HelloIonicPage} from './pages/hello-ionic/hello-ionic';
import {ListPage} from './pages/list/list';
import {TabsPage} from './pages/tabs/tabs';
// https://angular.io/docs/ts/latest/api/core/Type-interface.html
import {Type} from 'angular2/core';
#App({
templateUrl: 'build/app.html',
config: {} // http://ionicframework.com/docs/v2/api/config/Config/
})
class MyApp {
// make HelloIonicPage the root (or first) page
rootPage: Type = HelloIonicPage;
pages: Array<{title: string, component: Type}>;
constructor(private app: IonicApp, private platform: Platform) {
this.initializeApp();
// set our app's pages
this.pages = [
{ title: 'Hello Ionic', component: HelloIonicPage },
{ title: 'My First List', component: ListPage },
{ title: 'testing tabs', component: TabsPage}
];
}
initializeApp() {
this.platform.ready().then(() => {
// The platform is now ready. Note: if this callback fails to fire, follow
// the Troubleshooting guide for a number of possible solutions:
//
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
//
// First, let's hide the keyboard accessory bar (only works natively) since
// that's a better default:
//
// Keyboard.setAccessoryBarVisible(false);
//
// For example, we might change the StatusBar color. This one below is
// good for dark backgrounds and light text:
// StatusBar.setStyle(StatusBar.LIGHT_CONTENT)
});
}
openPage(page) {
// close the menu when clicking a link from the menu
this.app.getComponent('leftMenu').close();
// navigate to the new page if it is not the current page
let nav = this.app.getComponent('nav');
nav.setRoot(page.component);
}
}
I'm new to ionic and I have follow following tutorial http://ionicframework.com/docs/v2/getting-started/tutorial/
It has tabs or side-menu, but does not have both. I have imported tabs, but I'm not sure what to do next, because rootPage belongs to HelloIonicPage, which I dont want to change.
It is not totally clear why you would need to do this but it is possible and the attached link has the code where I merged the two programs generated by the templates. The resulting program uses the tab1 page as the 'Getting Started' page. Menu for the sidebar is available from each of the tab pages.
I copied the folders in the pages folder of the 'tabs' program to the 'sidemenu' program.
From the 'Getting Started' I copied the nav bar code and the menu for the side bar. This seems to be inherited by the tab 2 and tab 3 pages including the specified title (not sure of the reason). So I added a h1 with a tab2 and tab3 title in each of the pages just as markers.
I modified the app.ts file to import the pages added in step 1.
I added import statements to import page1, page2 and page3 html files in the app.core.scss
The approach may allow to add a login screen and other utility screens (such as search) on the sidebar.
Merged Sidemenu and Tabs code in ionic 2
Related
From the docusaurus docs, the navbar items can only have certain types like link, dropdown and search.
How do I add custom buttons like if I want to add login button ?
This would really depend on the type of functionality you're wanting to see out of the item you add to the navbar, but the development patterns should be similar across various implementations.
If you're trying to trigger something like a login modal when the user clicks your custom button, you could specify the following in docusaurus.config.js:
module.exports = {
themeConfig: {
navbar: {
items: [
{
href: '#login',
label: 'Login'
}
]
}
},
scripts: [
'https://yourdomain.com/customscript.js'
]
};
Then in a script, customscript.js, you could include the following:
document.querySelector('[href="#login"]')
.addEventListener('click', () => {
console.log('Login button clicked.');
});
Docusaurus requires that either href or to is given on each navbar item, so that's why I chose the weird selector, but if you wished, you could also specify className on the item, and then use that as a selector too. If you want the item to be something other than a link, you could set the outerHTML in your custom script or use replaceWith().
Keep in-mind that depending on the way your site's routing is configured, you may need to re-apply the logic in your custom script if the link node is re-written to the DOM by React.
As far as I know, there isn't really a perfect way to accomplish this at the moment, but v2 is also still in development, so the plugin exposures are getting better with each release.
The temporary workaround works well
https://github.com/facebook/docusaurus/issues/7227
I want to change the text in my navigation bar depending on the content.
In my App.jsx file I have my routes as well as the navigation bar. Following a route should change it's text accordingly.
The quick and dirty solution of just copying the navbar into every component would definitely work, but I'm sure there are other ways.
As Mr. A said, you can have your Navbar component query for current page that is opened, via useLocation or useParams, and conditionally show different information.
This can be achieved by having an array of objects where you store given text for given page, such as
NAVBAR_TEXTS = [{page:"/", text: "Main page"}, {page:"/info", text: "Info page"}]
etc.
Then the text in the navbar would be
const location = useLocation();
const textToShow = NAVBAR_TEXTS.find(el => el.page === location.pathname)?.text
I am creating an application using react native/expo, using react-navigation for navigation.
I need a bottom tab navigator, and for every tab i need a stack navigator. I have followed the example on the website and it functionally works fine. (https://reactnavigation.org/docs/en/tab-based-navigation.html)
Everytime i select a different stack from on the tab navigator the new header renders (great)! but it then grows as if its adding padding to compensate for the status bar.
is there any way to solve this?
thankyou.
You can add the following to remove extra statusbar height for all screens in a navigator:
const MyStack = createStackNavigator({
// screens
}, {
defaultNavigationOptions: {
headerStatusBarHeight: 0
}
});
Or you can do it per screen:
static navigationOptions = {
headerStatusBarHeight: 0
}
You can also specify a custom value if you need.
When clicking on an icon in the AppBar that's supposed to take me to my Profile page there is some weirdness. The contents of the Profile page immediately show up on top of the previous page and then a second later the Profile page loads and everything is fine. Same thing happens when going back from Profile page to the previous page.
Here is a link to the screen recording https://vimeo.com/user99110764/review/339241883/a39312e6d8
Below is the code for the Profile button that is in the AppBar
class ProfileButton extends StatelessWidget {
final store = AppStore.store;
#override
Widget build(BuildContext context) {
return IconButton(
onPressed: () async {
if (store.state.userState.user == null) {
AppNavigator.signInPage();
} else {
AppNavigator.profilePage();
}
},
tooltip: 'Profile',
icon: Icon(Icons.person),
);
}
}
EDIT:
static profilePage() {
navigator.currentState.pushNamed('/profile');
}
static signInPage() {
navigator.currentState.pushNamed('/sign_in');
}
Since the video is not working I'll try to explain what's happening. I'm on the main page of the app that has a list view. I click on the profile button in the AppBar after I've already signed in so it navigates to the Profile page, but what happens is that the contents of the Profile page (image + logout button) get immediately rendered on top of the main page and after about a second, the background of the Profile page loads and everything looks how it's supposed to.
An async function uses the await expression. Hopefully, this could help...Dart asynchronous programming
Suppose,
i have tabs page which contained 3 index page. Index page 1 is home page and index page 2 is products page and index 3 is cart page. When i nav push to search page from home page , there is a button. I wanted to click that button to go to directly tabs index page 3. How can it possible?
Thanks in advance.
First, you need to import Tabs from ionic-angular in your search.ts
import { NavController, Tabs } from ionic-angular;
export class SearchPage {
// then assign the navctrl parent to the tab
constructor(public navCtrl: NavController, public tab: Tabs) {
this.tab = this.navCtrl.parent;
}
// create a method that will be called after click
goToTab(){
this.tab.select(3); // depends on what index of the tab you want to go
}
}
In your search.html
<button (click)="goToTab()"> To other tab </button>