I have tabs page app. I have a background image like so. How can I have transparent tabs as shown below?
home.html
<ion-content class="content" fullscreen>
<ion-grid>
<ion-row class="ion-margin-top row1">
<ion-col size="12" class="ion-text-center">
</ion-col>
</ion-row>
<ion-row class="ion-margin-top row2">
<ion-col size="6" *ngFor="let b of buttons;" class="padding">
<app-home-root [data]="b"></app-home-root>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
home.scss
ion-content {
--background: url('/assets/img/stella/background/background.png') no-repeat 100% 100%;
}
tabs.page.html
<ion-tabs>
<ion-tab-bar class="tab" slot="bottom" translucent="true">
<ion-tab-button (click)="profileAction()">
<ion-img [src]="myProfileSrc"></ion-img>
<ion-label>
My Profile
</ion-label>
</ion-tab-button>
<ion-tab-button (click)="openBooking()">
<ion-img [src]="bookNowSrc"></ion-img>
<ion-label>Book Now</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
This is what I have now with translucent="true"
Ion-content doesn't continue under the tabs (this can be seen when you inspect it when you run it in a browser), so making the tabs transparent would only show you the background color of the app. I don't know if it is possible to even make it transparent, but because it makes no difference you could always just apply a background color to ion-tabs (the same color as your ion-content is).
Edit:
And if you want to remove the border too, this should be enough:
ion-tab-bar {
--background: #FFF;
border-style: none;
}
If you still see a border you can always add border: 0;.
Related
I am using ionic inside an angular project. I try to make the ion-modal auto height, so there will not be extra white space for some modal.
However, after I set the height to auto in css, the modal only show the 2 buttons in ion-header, it won't show other ion-content anymore. How do I make it so the height is auto but includes the ion-content?
The code for the modal inside html is as followed.
<ion-modal [isOpen]="openSensor" [backdropDismiss]="false">
<ng-template>
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-button>ButtonA</ion-button>
</ion-buttons>
<ion-buttons slot="end">
<ion-button [strong]="true">ButtonB</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<ion-item>
<ion-label position="stacked">Tag</ion-label>
<ion-input type="text" placeholder="Full Name" [(ngModel)]="fullName"></ion-input>
</ion-item>
</ion-content>
</ng-template>
</ion-modal>
And this is the global style.css file that related to modal
ion-modal.stack-modal {
--box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
--backdrop-opacity: var(--ion-backdrop-opacity, 0.32);
}
ion-modal {
--height: auto;
--border-radius: 16px;
}
Thanks in advance.
You can find the answer to your question here
The default height of my ion-row is too much. See screenshot. It only contains an icon. I would like to restrict it to the minimum width possible. How? I tried it with no-margin but didn't work.
Below is the code
<ion-grid *ngIf="!drawerIsIdle()" class="ion-no-margin">
<ion-row class="ion-no-margin">
<ion-col size='5' class="ion-no-margin"></ion-col>
<ion-col size='2' class="ion-no-margin">
<ion-button fill="clear" size="small" (click)="hideDrawer()">
<ion-icon name="remove-outline"></ion-icon>
</ion-button>
</ion-col>
<ion-col size='5' class="ion-no-margin"></ion-col>
</ion-row>
</ion-grid>
<ion-grid *ngIf="drawerIsIdle()">
<ion-row>
<ion-col size="4" text-center><ion-button color="10-session" fill="clear" size="small">Hi</ion-button></ion-col>
You also need to remove some padding using class="ion-no-padding".
Inspect your(s) element(s) in the browser to check padding.
Chrome(in example)
I am having trouble positioning this picker at the top of the screen. I have tried overriding many css properties with no success.
I am unable to override the required classes. .sc-ion-picker-md-h
<ion-header>
<ion-toolbar color="custom">
<ion-buttons slot="start">
<ion-menu-toggle><ion-icon name="menu-outline" style="font-size: 30px; color: white !important;"></ion-icon>
</ion-menu-toggle>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-item>
<ion-label>Notification Time</ion-label>
<ion-grid>
<ion-row justify-content-center align-items-center>
<ion-datetime display-format="h:mm A" picker-format="h:mm A" value="1990-02-19T07:43Z" style="height: 100% !important;"></ion-datetime>
</ion-row>
</ion-grid>
</ion-item>
</ion-content>
I managed to get it on top by putting this in the theme/variables.css file:
/** Ionic CSS Variables **/
.picker-wrapper.sc-ion-picker-md {
bottom: auto;
top: 0;
}
(I tested using React, but I guess this should work the same way using Angular or pure js)
I designed table by using "ion-grid" but my problem in case to make it clickable like button. I could only call function by using (click)="functionX().
for example this is my grid,
<ion-grid style="padding:0px;" (click)="function1()">
<ion-row>
<ion-col col-6>
Text1<br>Text1<br>Text1
</ion-col>
<ion-col col-6>
Text2<br>Text2<br>Text2
</ion-col>
</ion-row>
</ion-grid>
<ion-grid style="padding:0px;" (click)="function2()">
<ion-row>
<ion-col col-6>
Text3<br>Text3<br>Text3
</ion-col>
<ion-col col-6>
Text4<br>Text4<br>Text4
</ion-col>
</ion-row>
</ion-grid>
I want to make each grid clickable like button (if possible) without change the design of grids
I had a problem like this one, but i wanted inside one of the col. The solution I found was to place a button tag inside the row, for your problem it should be something like this:
HTML
<ion-grid style="padding:0px;">
<button id='hidden-button' ion-button (click)="function1()">
<ion-row>
<ion-col col-6>
Text1<br>Text1<br>Text1
</ion-col>
<ion-col col-6>
Text2<br>Text2<br>Text2
</ion-col>
</ion-row>
</button>
</ion-grid>
CSS
#hidden-button{
height: 100%;
width: 100%;
box-shadow: none;
-webkit-box-shadow: none;
}
Using the <button> tag styles its contents according to the ionic button style. One of these effects is the onTouch animation (ripple effect) I think the OP is after.
You can also achieve this ripple effect by using ionic's <ion-ripple-effect> within any tag, as long as you assign the class ion-activatable to the parent element, like so:
<div class="ion-activatable">
<ion-ripple-effect></ion-ripple-effect>
Button Text
<div>
Documentation for ionic-ripple-effect
I am looking to add some labels to an Ionic 2 range element (the documentation for which can be found at http://ionicframework.com/docs/v2/api/components/range/Range/)
You can add a label at the beginning and end using the following markup
<ion-range min="-200" max="200" [(ngModel)]="saturation" color="secondary">
<!-- Setting the labels here -->
<ion-label range-left>-200</ion-label>
<ion-label range-right>200</ion-label>
</ion-range>
I would however like to add some labels throughout the range, on either side if possible in an attempt to make it look more like a progress bar. So you might have labels like 25%, 50% etc ..
What would be a good way to approach this, without interfering too much with the Ionic HTML?
My approach so far is just to create an ion-row above the range, then use css to place it.
HTML
<!-- TIMELINE -->
<div class='timeline'>
<ion-grid class="timeline-grid">
<ion-row class="timeline-labels">
<ion-col width-20>Label One</ion-col>
<ion-col width-20>Label Two</ion-col>
<ion-col width-20>Label Three</ion-col>
<ion-col width-20>Label Four</ion-col>
<ion-col width-20>Label Five</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-item>
<ion-range color='secondary' [(ngModel)]="progress">
</ion-range>
</ion-item>
</ion-col>
</ion-row>
</ion-grid>
</div>
CSS
ion-row.timeline-labels {
padding-left: 20px;
z-index: 1;
position: absolute;
top: 10px;
}
Which does in a way work, however I am thinking there is maybe a better/cleaner way to go about it.
Any advice would be great.
Thanks!
Wouldn't setting the pin="true" (in the range slider tag) basically do what you want?
It would show the current value of the slider like a progress bar would.
If you are looking to achieve more of a specified label at the bottom at specific points I think the best way would be to add a div with spans directly below the range slider and then toy with the CSS till its close enough to what you want.
main css issues will be removing padding or margin space around the Range element, and then getting the font size and spacing of the 'progress' in the right spots.
eg.
<ion-range min="0" max="100" pin="true">
<!-- Setting the labels here -->
<ion-label range-left>0</ion-label>
<ion-label range-right>100</ion-label>
</ion-range>
<div>
<span>20%<span>
<span>40%<span>
<span>80%<span>
<span>100%<span>
</div>
This might be too late but for others looking in the future I put my labels inside of spans within a label below and used css to style the padding and width.
Here is my HTML:
<div class="slide-rating">
<ion-range min="1" max="4" step="1" snaps="true" ticks="false" ></ion-
range>
<ion-label class="rating-labels">
<span> Beginner </span>
<span> Casual </span>
<span> Advanced </span>
<span> Expert </span>
</ion-label>
</div>
And my CSS:
span{
color: #354D37;
font-family: Gotham-Book;
font-size: small;
padding-left: 12px;
}
.slide-rating{
align-items: center;
width: 80%;
position: absolute;
top: 70%;
left: 50%;
transform: translate(-50%, -50%);
}
.rating-labels{
margin-left: -5%;
margin-right: -5%;
text-align: center;
}