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
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 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
I'm trying to design a label or button with some text inside it. I know how to give border radius and make it oval but I need an eye shape wide button or label like exactly below.
i follwed this link https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_shapes_oval with no results like rectangle shapes with round border button below
then,I tried the below code but only the corners are getting rounded.
.boc1 {
border-width: 1;
border-radius: 100;
padding: -2px;
margin: 10% 0 0 0;
padding: 10% 0 10% 0;
height:100%;
width:85%;
}
I hope you are clear about the problem..!
Change border-radius as border-radius:50px;
Use clip-path
XML
<GridLayout>
<StackLayout class="oval"></StackLayout>
<Label class="h2" text="Some text" color="white" verticalAlignment="center"
horizontalAlignment="center"></Label>
</GridLayout>
CSS
.oval {
width: 85%;
background-color: red;
clip-path: ellipse(50% 15% at 50% 50%);
}
I am building an app using ionic 2 following the documentation. I have implemented a fab button with a fab-list. I am trying to put a descriptive label next to the containing buttons. It seems that there is no way to put a label next to floating buttons with ionic 2 out of the box. I have looked to a couple questions about it on stackoverflow and on github.
It is strange that such a basic feature has not been implemented in ionic 2...
Is there an easy way to put a description label next to a floating button in ionic 2?
Thanks
This Worked For me Magnificently
<ion-fab bottom right>
<button ion-fab ><ion-icon name="add"></ion-icon></button>
<ion-fab-list side="top">
<button ion-fab >
<ion-icon name="logo-facebook"></ion-icon>
<div class="label">Facebook</div>
</button>
<button ion-fab >
<ion-icon name="logo-instagram"></ion-icon>
<div class="label" dir="rtl">Instagram </div>
</button>
<button ion-fab >
<ion-icon name="logo-twitter"></ion-icon>
<div class="label" dir="rtl">Twitter</div>
</button>
<button ion-fab >
<ion-icon name="logo-whatsapp"></ion-icon>
<div class="label" dir="rtl">Whatsapp</div>
</button>
</ion-fab-list>
</ion-fab>
CSS :
.fab {
contain: initial;
}
ion-fab {
ion-fab-list button[ion-fab] {
overflow: visible;
div.label {
position: absolute;
right: 48px;
background: rgba(0,0,0,0.7);
height: 24px;
line-height: 16px;
padding: 5px 8px;
border-radius: 3px;
color: #fff;
box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.14), 0 4px 5px rgba(0, 0, 0, 0.1);
}
}
Into the latest Ionic Framework you could show the labels for the IonFabButton as follows:
This is an Ionic-React example:
1. Paste the following into your corresponding .css file
ion-fab-button[data-desc] {
position: relative;
}
ion-fab-button[data-desc]::after {
position: absolute;
content: attr(data-desc);
z-index: 1;
right: 55px;
bottom: 4px;
background-color: var(--ion-color-light);
padding: 5px;
border-radius: 5px;
color: black;
box-shadow: 0 3px 5px -1px rgba(0,0,0,0.2), 0 6px 10px 0 rgba(0,0,0,0.14), 0 1px 18px 0 rgba(0,0,0,0.12);
}
2. You need to use data-desc attribute of your IonFabButton to set the label
<IonFab vertical="bottom" horizontal="end" slot="fixed">
<IonFabButton>
<IonIcon icon={add} />
</IonFabButton>
<IonFabList side="top">
<IonFabButton routerLink="/documents" data-desc="Upload Document">
<IonIcon icon={folderOpen} color="warning" />
</IonFabButton>
<IonFabButton routerLink="/leave" data-desc="Apply for Leave">
<IonIcon icon={calendarOutline} color="secondary" />
</IonFabButton>
<IonFabButton routerLink="/expenses" data-desc="New Expense">
<IonIcon icon={cardOutline} color="success" />
</IonFabButton>
<IonFabButton routerLink="/timesheet" data-desc="New Timesheet">
<IonIcon icon={timeOutline} color="primary" />
</IonFabButton>
</IonFabList>
</IonFab>