I am using Ionic 5 and like all Ionic frameworks in md mode all button text is all capital. So I have maintained the following in global.scss file.
ion-button{
text-transform:none!important;
}
It's working for normal buttons but the Alert buttons are still all capital. How can I set global parameters for the Alert button?
For Ionic Alert buttons use .alert-button or .alert-button-inner inside .alert-wrapper class.
.alert-wrapper {
.alert-button {
color: red;
text-transform: none;
}
}
global.scss
Related
I think I have a very basic problem but I can't resolve it. So what I am trying to do is to implement a button in Ionic that when pressed change the style of a style. To keep it simple for now I try and change the background color of a div. However, it does not work neither does it give an error. (I use console page of browser to view changes, look for errors etc)
The code in the card.page.html page is
<ion-button
(click)="setStyle('red')"
[style.--background]="'pink'"
>
Some Button
</ion-button>
The code in the card.page.ts is
setStyle(value: string): void {
console.log('read More Works');
this.aColor = '#yellow';
console.log('read More still Works');
}
and that is it. Clicking on 'Some Button' button does not do anything except the logging but I am pretty sure it is not two way binding that is the issue as I tried just using for example trying with just some text as being the 'variable' I want to change and that worked fine.
I do appreciate any help :(
Thanks
You can use pre defined CSS styles for that. Something like this:
card.page.scss
#somediv {
&.initial-style {
background: #000;
}
&.dinamic-style {
background: #fff;
}
}
card.page.html
<div id="somediv" [class]="apply_styles ? 'dinamic-style' : 'initial-style'">
styles applied: {{ apply_styles }}
</div>
<ion-button (click)="changeStyle()">Change Style</ion-button>
card.page.ts
apply_styles: boolean = false;
changeStyle() {
this.apply_styles = !this.apply_styles;
}
Of course this is very simple. But I hope it can put you in the right direction.
While developing a card, I used a pseudo-class for a component to implement a color changing effect. However, the color cannot be restored.
For example, the original background color of a picture was yellow.See Image
This figure shows the new background color after using the pseudo-class. It is red now.
See Image
In normal cases, the card’s background color is changed upon tapping, and will return to the original color when you lift your finger. So how to achieve this?
Simply add a tap event to the component using the pseudo-class. No logic processing is needed.
Sample code:
<div class="sitetype_box" widgetid="8e4bf1ca-f716-46f8-8614-16d1b35002c5" onclick="test">
</div>
CSS style:
.sitetype_box {
flex-direction: column;
background-color:#FFBF00;
padding: dpConvert(0) dpConvert($elementsMarginHorizontalL) dpConvert(0) dpConvert($elementsMarginHorizontalL);
}
/** Pseudo-class */
.sitetype_box :active{
background-color: #E40078;
}
Method:
test(){
console.log("message");
}
For Details,check Pseudo-classes for quick apps
I'm having trouble finding documentation on this.
In Ionic, the menu has functionality where if you click on the backdrop, the menu dismisses. So basically click anywhere except the menu and the menu goes away. I want to disable this functionality so users can interact with items below the backdrop.
I've tried disabling pointer events on the backdrop and the menu, but the dismiss still seems to occur. Any thoughts?
Interesting discovery; the menu dismiss functionality actually looks like it might be on the ion-content. Which leads to an issue:
I want users to be able to interact with the content with ion-content without dismissing the menu.
For me, this helped:
ion-menu {
pointer-events: none;
}
ion-menu > * {
pointer-events: all;
}
Here is the sample code how you can do this in your ionic application.
import { Platform, MenuController } from 'ionic-angular';
// ... Other code
constructor(menuCtrl: MenuController /* ... other code ...*/)
// ... Other code
let menu = menuCtrl.get();
menu.swipeEnable(false); // Disable drag to open/close
// Override default behaviour of closing the menu on
// content or backdrop click
menu['onBackdropClick'] = () => {
// No-op
};
menu.ionOpen.subscribe(() => {
// When the menu is open ...
// Remove Ionic's CSS rules for menu-content-open class that restricts
// mouse events on ion-nav
menu.getContentElement().classList.remove("menu-content-open");
// Reduce the size of the content pane so that it does not
// overflow off the screen
menu.getContentElement().style.width =
`calc(100% - ${menu.getMenuElement().clientWidth}px)`;
});
menu.ionClose.subscribe(() => {
// When the menu is closed ...
// Restore the size of the content pane
menu.getContentElement().style.width = '';
});
I made a stackblitz project you can check it out. You can check it out from here.
I changed the header to a darker color using this:
<ion-nav-bar class="bar-royal">
When I run it on ios, the status bar text (time, carrier, battery, etc) at the top is black and difficult to see on the dark background. How do I make this text white?
With the plugin statusbar and ngCordova is pretty simple:
var app = angular.module('ionicApp', ['ionic', 'ngCordova']);
app.run(function($cordovaStatusbar) {
$cordovaStatusbar.overlaysWebView(true);
$cordovaStatusBar.style(1); //Light
$cordovaStatusBar.style(2); //Black, transulcent
$cordovaStatusBar.style(3); //Black, opaque
});
Take a look to the full article here:
http://learn.ionicframework.com/formulas/customizing-the-status-bar/
UPDATE - Without ngCordova:
Default Ionic project comes with the statusbar plugin installed. If you have this statement inside you run probably your project already have:
if(window.StatusBar) {
StatusBar.styleDefault();
}
So the code become:
var app = angular.module('ionicApp', ['ionic']);
app.run(function() {
if(window.StatusBar) {
StatusBar.overlaysWebView(true);
StatusBar.style(1); //Light
StatusBar.style(2); //Black, transulcent
StatusBar.style(3); //Black, opaque
}
});
UPDATE II
With a new version 2.x of the cordova-plugin-statusbar the StatusBar.style() method was substituted with these new methods:
StatusBar.styleLightContent();
StatusBar.styleBlackTranslucent();
StatusBar.styleBlackOpaque();
Check the plugin's documentation
In ionic 4 with angular app we can change the status bar color as well as its text color by following code how to change status bar's text color
this.platform.ready().then(() => {
this.splashScreen.hide();
this.statusBar.overlaysWebView(true);
this.statusBar.styleDefault();
});
I need to hide dockbar for non logged in guests. I did that by creating custom theme that uses welcome-theme as a parent, and the following snippet:
#if($is_signed_in)
#dockbar()
#end
in theme's templates\portal_normal.vm.
This presents another problem - when page reorders to fit a mobile screen, menu collapses to a button in the dockbar which is hidden. I would love to have it collapse somewhere else, just that it isn't hidden - for example next to the small logo / site title, or as a first breadcrumbs item.
How to do it, or where to begin. I appreciate any help.
Menu collapses by default for phone and tablet viewports. You can create your own button to open/close collapsed menu in phone/tablet viewport. Check following simplified example:
Theme velocity template:
#if(!$is_signed_in)
<div id="mainNavigationToggle" class="btn btn-secondary">
<i class="icon-reorder"></i>
</div>
#end
Theme main.js:
AUI().ready(function (A) {
var navigationToggleBtn = A.one('#mainNavigationToggle'); // get our toggle button
var navigationUl = A.one(Liferay.Data.NAV_SELECTOR); // get default navigation ul element
if (navigationToggleBtn && navigationUl) { // do nothing when toggle button not present (user not signed in) or if navigation is not present
navigationToggleBtn.on( // otherwise assign simple function that'll toggle 'open' menu class on default navigation which will cause it to open, same for menu toggle button
'click',
function (event) {
navigationToggleBtn.toggleClass('open');
navigationUl.toggleClass('open');
}
);
}
}
);
Theme custom.css:
#mainNavigationToggle {
display: none; /* hide by default */
#include respond-to(phone, tablet) {
display: block; /* show only for phone and tablet viewports */
}
}