I am using Ionic as a PWA. I use pages for navigation and I developed a component called common-header which displays the username and page name. It accepts an input called HeaderTitle and it displays the title. The component is declared in components.module.ts and I have imported the componentmodule in my PageModule. When I use the component in my page the component css styles does not work as expected.
If I remove the declaration of CommonHeader component in componentmodule and define in pagemodule the UI looks good.
This is the html code of CommonHeader.
<ion-navbar hideBackButton>
<ion-title>
{{UserName}}
</ion-title>
<ion-title>
{{HeaderTitle}}
</ion-title>
</ion-navbar>
Below is the Html code of my page
<ion-header>
<tr-header [HeaderTitle]="HeaderTitle"></tr-header>
</ion-header>
<ion-content padding>
Page Content
</ion-content>
The problem is CSS looks weird like the button does not have proper color/height. All this happens if I declare a component in componentmodule.ts and use the componentmodule file in my page module.
If I declare the component in my page module only it works great. But I need my custom component to be used in all the pages. What am I doing wrong?
Related
I have a header in a react app that is using semantic-ui react. I want to route my login button to a backend express route (/auth/login). I tried the composition method by passing in {Link} from react-router-dom, but this is not routing to the express route, rather looking at the React routing.. in hindsight, this is of course how it should work..
This leaves me with the question though, how can I pass in a link to the backend api's for this button component? If I pass in 'a' and a path, this renders as a hyperlink but the path isn't passed in.
What is the prop I need to pass in to make this work as I can't see one that makes sense in the semantic-ui docs on buttons.. Or am I doing this the completely wrong way (this has happened before surprisingly)?
My login component is below..
import React, {Component} from 'react';
import { Button, Icon } from 'semantic-ui-react';
export default class LoginButtonNav extends Component {
render() {
return (
<Button primary animated="vertical" as='a' path='/auth/login'>
<Button.Content visible>Login</Button.Content>
<Button.Content hidden>
<Icon name="cloud" />
</Button.Content>
</Button>
);
}
}
Okay, rubber ducked this one myself, passing in a value for href solved it!
Correct component:
import React, {Component} from 'react';
import { Button, Icon } from 'semantic-ui-react';
export default class LoginButtonNav extends Component {
render() {
return (
<Button primary animated="vertical" as='a' href='/auth/login'>
<Button.Content visible>Login</Button.Content>
<Button.Content hidden>
<Icon name="cloud" />
</Button.Content>
</Button>
);
}
}
Still interested if there's a better way to do this..
I want to share my mistake and thank OP for posting the answer. Below is what I did and you should NOT do it like this:
<Button>
<Link to="/yourURL/">Nav Button</Link>
</Button>
This works technically but creates a unique problem where user MUST click on the text directly ("Nav Button" in this case) because the button itself is not rendered as a hyperlink. So if you click within the button but not the text itself, it won't navigate. It would even create an odd behavior where if you have another button next to it. Say, you have a "Submit" and a "Cancel" button where the Cancel button navigates user to the previous URL, if you click within the Cancel button but not the "Cancel" text, it would trigger the Submit button action instead. Hope this helps someone learning React!
I started with learning EmberJS and maybe the answer is trivial, but after some researching, I still can't find a solution.
In my model template, I have some buttons(each for the different object) which after click should expand sidebar with its details.
What do I want to reach is something like this:
Could someone provide me with some simple twiddle?
There are two ways to achieve this effect.
Using controller's variable
{{#foreach model as |obj|}}
<button onclick={{action (mut activeModel) obj}}>{{obj.name}}</button>
{{/foreach}}
<!--Somewhere later in template-->
{{#if activeModel}}
<!--Code of overlay and sidebar, close button sets activeModel to undefined-->
{{/if}}
Using child (nested) route
Parent template:
{{#foreach model as |obj|}}
{{#link-to 'parentRoute.childRoute' obj tagName="button"}}
{{obj.name}}
{{/link-to}}
{{/foreach}}
<!--Somewhere later in template-->
{{outlet}}
Child template should contain code of overlay and sidebar, close button redirects back to parent route
well, one of the options is that you can create components and pass the modified model(modify the model using onclick function) as the data to that component.
for example,
let us just say that this is your main template
<button onclick="changeSideBar()">click</button>
<div style="display:none; //render it in the left-half(using bootstrap models)">
{{sidebar-component model=model.modified}}
</div>
in the javascript code (component.js),
function changeSideBar()
{
var modified= ;//set as per your convienince by iterating actual models or by any means
this.set('model.modified',modified);
//make display of sidebar div "block"
}
sidebar-component is your component. make the component as per your wish.
hope it helps.
I can't help much without your templates or codes. It would be great if you provide some of your works.
I need to build a scalable menu for an ionic 2/3 app (preferably using ion-menu). Following the guides on the docs the menu should be a sibling of the main content and they suggest to keep it inside app.html, which is a very high place inside the app that doesn't have to be crowded too much.
If we have a big menu or if we need to use several different menus, triggered by actions inside app, this place is not appropriate for this purpose.
I want to hide the complexity of the menu in it's own container/component and handle the logic outside app.component.ts.
app.html should stay slim and a construction like the one below may be useful.
<app-menu></app-menu> // this should be the enclosing container of the menu logic
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
If I do this, the following error comes up:
Menu: must have a [content] element to listen for drag events on. Example:
<ion-menu [content]="content"></ion-menu>
<ion-nav #content></ion-nav>
Any thoughts on how to implement this, avoiding to add code directly to app.html and app.component.ts?
Tks
error code just tells you to write <ion-nav #content></ion-nav> if you use <ion-menu [content]="content"></ion-menu>...
example toggle menu code below ...
<ion-header>
<ion-navbar color="danger">
<ion-buttons start>
<button ion-button icon-only menuToggle>
<ion-icon name="menu">
</ion-icon>
</button>
</ion-buttons>
</ion-navbar>
<ion-menu [content]="content">
<ion-content padding>
this is awkmal
</ion-content>
</ion-menu>
</ion-header>
<ion-nav #content></ion-nav>
I have one view in portrait mode and another in landscape mode where I want to show chart and I hide tabs and header (fullscreen mode, no scrolling). My view in landscape mode would look something like this:
<div showWhen="landscape" class="chart-settings split-container">
<ion-toolbar showWhen="landscape">
<ion-grid>
<ion-row>
<ion-col col-6>
<ion-item>
<ion-label>Period</ion-label>
<ion-select [(ngModel)]="period">
//options
</ion-select>
</ion-item>
</ion-col>
<ion-col col-6>
<ion-item>
<ion-label>Won/Lost</ion-label>
<ion-select [(ngModel)]="gender">
//options
</ion-select>
</ion-item>
</ion-col>
</ion-row>
</ion-grid>
</ion-toolbar>
<div class="flexChart">
<div id="chartdiv" [style.width.%]="100" [style.height.%]="100"></div>
</div>
I use flex to fill out the page and create "fullscreen effect with no scrolling".
Thanks
Well it seems there is this:
http://ionicframework.com/docs/api/platform/Platform/
It has:
isPortrait()
isLandscape()
so you can do:
platform.isPortrait() or platform.isLandscape()
if you inject platform into constructor.
Combine this with *NgIf:
https://angular.io/guide/template-syntax#ngif
CSS overflow, overflow-x, overflow-y is what you'd look to for prevent scrolling provided it's a block level container:
https://developer.mozilla.org/en/docs/Web/CSS/overflow
UPDATE
Based on this comment:
That was my initial thought. The problem with this is that it leaves
padding on top. I solved it by configuring styles, but it seemed
pretty dirty solution to me
You can fix that padding issue by getting the instance of the Content and call the resize() method like this:
import { Component, ViewChild } from '#angular/core';
import { Content } from 'ionic-angular';
#Component({...})
export class MyPage{
#ViewChild(Content) content: Content;
public yourMethod(): void {
this.content.resize();
}
}
https://ionicframework.com/docs/api/components/content/Content/#resize
Tell the content to recalculate its dimensions. This should be called
after dynamically adding/removing headers, footers, or tabs.
You can check landscape or portrait with platform, then you can get the ref of nav from template:
<ion-header>
<ion-navbar #navBar>
...
</ion-navbar>
</ion-header>
and call setHidden(true) in component with its ref:
#ViewChild('navBar') navBar: Navbar
// call in proper place
this.navBar.setHidden(true)
for tabs, I think you can do in the same way
My app is in cordova, ionic 3.2. I want global style for ion-navbar component. So I declared style with .toolbar-background in variables.scss file. Now the style of ion-navbar in all pages are changed. its working fine. Now I want to disable the style for a specific ion-navbar only. Can anybody help me on how it possible please?
eg:
I have below code in variable.scss;
.toolbar-background{
background-color: red !important;
}
I have below code for header in app.html page(for left side menu header);
The background of this toolbar is red.
<ion-header>
<ion-toolbar>
<ion-title text-center>
Hellow!
</ion-title>
</ion-toolbar>
</ion-header>
Below is the code for footer in the app.html;
The background of this toolbar is red. I do not want red color only for this component. How to disable this style that showing due to toolbar-background?
<ion-footer>
<ion-navbar secondary >
this is the footer
</ion-navbar>
</ion-footer>