I'm trying to add custom ripple effect in my custom button.
i have a layout
<GridLayout row="1" rows="*" columns="*,*"
class="text-center">
<StackLayout row="0" col="0" verticalAlignment="center"
touch="onTouch">
<Label text="btn1" />
</StackLayout>
<StackLayout row="0" col="1" verticalAlignment="center"
touch="onTouch">
<Label text="btn2" />
</StackLayout>
</GridLayout>
css
StackLayout{
border-width: 1;
border-color: #ecf3f8;
height:100%;
width:100%;
background-color: #c3edfa;
color:rgb(44, 23, 23);
font-size: 18;
text-align: center;
}
/* ~~~~~~~~~~~~~~
Ripple Effect
~~~~~~~~~~~~~~ */
.ripple {
width: 2px;
height: 2px;
position: absolute;
border-radius: 50%;
background-color:rgba(255, 255, 255, 0.288);
animation: rippleEffect 0.5s ease-in-out;
}
#keyframes rippleEffect {
0% {
opacity: 1;
transform: scale(10,10);
}
50% {
opacity: 1;
transform: scale(100,100);
}
100% {
opacity: 0;
transform: scale(0,0);
}
}
js
exports.onTouch = function (args) {
args.object.className = "ripple";
setTimeout(
function () {
args.object.className = "";
}, 500);
}
The animation effect is working fine.
But the ripple effect is overwriting my background color.
and also the ripple effect is not happening where i touch on button rather it will pop up from center.
the complete demo is here
https://play.nativescript.org/?template=play-js&id=Ds0KtG
Related
Hey I'm trying to create my own bottom nav in nativescript with vue, but I can't get the buttons to fill up the entire space. Any ideas why it isn't working? I have the buttons in a gridlayout component, and I set both height/width properties to 100% but there's still some space between buttons.
<template>
<GridLayout rows="*" columns="*,*,*" horizontalAlignment="stretch">
<Button
row="0"
col="0"
text="Potty Logger"
:class="{ active: active == 0, '-primary': active != 0 }"
#tap="goTo(0)"/>
<Button
row="0"
col="1"
:class="{ active: active == 1, '-primary': active != 1 }"
:isEnabled="active != 1"
text="Walk Tracker"
#tap="goTo(1)"/>
<Button
row="0"
col="2"
:class="{ active: active == 2, '-primary': active != 2 }"
text="History"
#tap="goTo(2)"
/></GridLayout>
</template>
<style lang="scss" scoped>
label {
vertical-align: center;
text-align: center;
}
button {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
border: none;
}
</style>
Try setting
button {
border-width: 1;
border-color: your-background-color;
}
If i give class with background color property but when i selected that layout color not change.
enter code here
<StackLayout verticalAlignment="middle" [ngClass]="{'iconLayout': item.selected}" class="backWhiteSelect" (tap)="drinkSelected(i)"></stackLayout>
CSS:
.iconLayout{
margin: 5;
height: 90;
width: 185;
text-align: center;
border-radius: 7;
background-color: rgba(112, 112, 112, 0.15);
}
add new StackLayout with ngClass
<ng-template let-item="item" let-i="index">
<StackLayout verticalAlignment="middle">
<StackLayout [ngClass]="item?.selected ? 'backWhiteSelect' : 'iconLayout'" (tap)="onTap(item)">
<Label [text]="item?.name" class="text-center gray-66 h3"></Label>
</StackLayout>
</StackLayout>
</ng-template>
tap event in componenet
onTap(item) {
this.interestsItems.forEach(m => m.selected = false);
item.selected = true;
}
I'm trying to make a progress bar that moves across the screen with some text below it.
Here's my template:
<StackLayout v-else id="loadingContainer">
<StackLayout class="progress-bar">
<StackLayout class="progress"></StackLayout>
</StackLayout>
<StackLayout horizontalAlignment="center">
<Label id="progressText" :text="loadingText" />
</StackLayout>
</StackLayout>
and here is the CSS:
.progress-bar {
height: 20px;
width: 100%;
position: relative;
background-color: #f8f8f8;
}
.progress {
position: relative;
height: 100%;
border-radius: 0px 2px 2px 0px;
animation-name: fill;
animation-duration: 2s;
animation-timing-function: ease-in;
animation-fill-mode: forwards;
animation-direction: normal;
width: 0%;
}
#keyframes fill {
0% {
width: 0%;
background-color: #6a2d91;
}
100% {
width: 100%;
background-color: #6a2d91;
}
}
Both display the text as I expect but the progress bar behaves very differently on iOS and Android. Android just shows the progress bar as full the whole time and never animates it. iOS shows the appropriate gray background until the `animation-duration is up and then the bar just shows full, it doesn't animate it. I have keyframes working on this page doing other things but I can't get this figured out.
By default child components in a vertical StackLayout will stretch out to fill the width. You should set horizontalAlignment to left on the progress bar layout, though it gets what you wanted on Android, on iOS horizontalAlignment / verticalAlignment is not respected during animation.
So I would suggest using JavaScript APIs to animate Width / Height, presented by Alex.
You may also use the default Progress and increment the value at internals to achieve similar look.
The text inside label is vertically aligned by default on iOS, however on Android it's not. How to center it vertically on Android (I'm interested in centering text inside Label, not wrapping label inside any other layout to get the same effect)?
To see what I mean run the next code on iOS and Android.
xml:
<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="onLoaded">
<Label text="test" />
</Page>
css:
Label {
width: 60;
height: 60;
text-align: center;
background-color: aquamarine;
border-radius: 30;
}
Set the padding accordingly to the (width - font-size) / 2 (rough approximation may differ for smaller boxes where Capital or small letters has different center point)
e.g.
Label {
width: 60;
height: 60;
border-radius: 30;
text-align:center;
background-color: aquamarine;
padding: 15;
font-size: 20;
}
or example with bigger sizes:
Label {
width: 200;
height: 200;
border-radius: 100;
text-align:center;
background-color: aquamarine;
padding: 80;
font-size: 20;
}
p.s If you wrap your label in StackLayout you won't need height
e.g.
<StackLayout>
<Label text="test" class="title"/>
</StackLayout>
Label {
width: 200;
border-radius: 100;
text-align:center;
background-color: aquamarine;
padding: 80;
font-size: 20;
}
Using padding will screw things up if you're using the same css on iOS. setGravity(17) will also horizontally align the text. If you want to just vertically align the text, and keep the normal behavior for the horizontal alignment, use
this.nativeView.android.setGravity(this.nativeView.android.getGravity() & 0xffffffdf);
this will remove the vertical-align=top flag from the label
I've created this directive that should change the default for labels:
import {AfterViewChecked, Directive, ElementRef, Input} from '#angular/core';
import { Label } from 'ui/label';
#Directive({
selector: 'Label',
})
export class UpdateLabelDirective implements AfterViewChecked {
private get nativeView(): Label {
return this.el.nativeElement;
}
constructor(private readonly el: ElementRef) {}
ngAfterViewChecked(): void {
if (this.nativeView.android && (this.nativeView.android.getGravity() & 0x00000020)) {
this.nativeView.android.setGravity(this.nativeView.android.getGravity() & 0xffffffdf);
}
}
}
Don't think of it as vertically centring your labels text. Instead put your Label in a container and centre it relative to the container.
<StackLayout verticalAlignment="center">
<Label text="test" />
</StackLayout>
This will centre align your Label (vertically) within the StackLayout. You'll also notice the StackLayout will now only take up the vertical space required by its children. If you want it to use up more vertical space you just need to give it a height.
The following creates a three row GridLayout with each row occupying 33.3...% of the screen with their labels centred within them.
<Page xmlns="http://www.nativescript.org/tns.xsd">
<GridLayout rows="*, *, *">
<StackLayout row="0" class="red stack">
<Label text="red" class="label"/>
</StackLayout>
<StackLayout row="1" class="green stack">
<Label text="green" class="label"/>
</StackLayout>
<StackLayout row="2" class="blue stack">
<Label text="blue" class="label"/>
</StackLayout>
</GridLayout>
</Page>
.stack {
height: 100%;
vertical-align: center;
}
.label { text-align: center; }
.red { backgroundColor: red; }
.green { backgroundColor: green; }
.blue { backgroundColor: blue; }
Here's a Playground of the above if you'd like to see it working on your device. Try commenting out the height property in home-page.css (line 13).
You can enable it natively, in the code:
myLabel.android.setGravity(17)
17 is value for Gravity.CENTER constant (https://developer.android.com/reference/android/view/Gravity.html#CENTER)
Most simple solution per css:
line-height: 100%;
Another option is to reconsider why you're trying to vertically align the contents of the label.
I came to this page trying to do the same thing but decided to remove the height css on the label and just let the label be the size of the text and vertically center the label within it's parent
After spent some time digging, I found this solution which will make vertical_center your default setting.
in your AndroidManifest.xml, add the following style
<style name="MyTextViewStyle" parent="android:Widget.TextView">
<item name="android:gravity">center_vertical</item>
</style>
Then apply the style in your theme
<style name="AppTheme" parent="AppThemeBase">
<item name="actionMenuTextColor">#color/ns_white</item>
<item name="android:actionMenuTextColor">#color/ns_white</item>
<item name="android:textViewStyle">#style/MyTextViewStyle</item>
</style>
I'm having some difficulty removing the border on a button that is inside the Nativescript-CardView plugin.
html
<CardView #item elevation="50" margin="10">
<GridLayout rows="auto, auto, auto" columns="*, *, *">
<Image src="~/images/shop.jpg" stretch="aspectFit" colSpan="3" row="0" ></Image>
<Button text="" class="Material btn" row="1" col="0" ></Button>
<Button text="" class="Material btn" row="1" col="1" ></Button>
<Button text="" class="Material btn" row="1" col="2" ></Button>
</GridLayout>
</CardView>
css
.btn {
font-size: 20;
margin:4;
border-color: transparent;
border: 0;
border-width: 0;
border-style: none;
background-color: transparent;
padding:5px;
}
Alright so it's nothing related to the CardView. Just buttons on Android 5.1 (Lollipop)+
Try these two rules with your class and it will work. You won't need border-color: transparent with this either.
border-width: 0.1;
background-color: transparent;
With the current versions of NativeScript, the 0.1-hack doesn't work anymore. Instead, set the border to 1 and make it transparent or match the background-color:
border-width: 1;
border-color: rgba(0, 0, 0, 0.0);
background-color: rgba(0, 0, 0, 0.0);
See here for more information: https://github.com/NativeScript/NativeScript/issues/2626#issuecomment-261493611