I am using font awesome icons and I need to have a disabled state of the icons. is there any way to do this. I am also using bootstrap.
This is how I am using icons.
<i class="fa fa-slack"><i/>
I just need the icon to look like grayed out.
Write a custom class for disabled
Something like
.fa-disabled {
opacity: 0.6;
cursor: not-allowed;
}
Adding cursor type is important for users experience.
You could define your "Bootstrap-like" disabled class
.fa.disabled,
.fa[disabled],
.disabled > .fa,
[disabled] > .fa {
opacity: 0.5;
/*optional*/ cursor: not-allowed;
/*optional*/ pointer-events: none;
}
and then use it like
<i class="fa fa-slack disabled"></i> <!-- or -->
<i class="fa fa-slack" disabled></i> <!-- or -->
<a class="btn btn-primary disabled"><i class="fa fa-slack"></i></a> <!-- or -->
<a class="btn btn-primary" disabled><i class="fa fa-slack"></i></a>
The basic idea is just to color its style
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<div>Disabled <i class="fa fa-slack" style="color: grey"></i></div>
<div>Enabled <i class="fa fa-slack"></i></div>
You can decrease the opacity and disable the pointer events:
.disabled-button{
opacity: 0.5;
pointer-events: none;
}
$("button[title='Aceptar']").prop("disabled", true); where you can select the button by any of its property (first) and change property disabled.
Related
I'm using this accordion on my vue project: https://github.com/tkhquang/vue-simple-accordion#html-structure
I'm having trouble overriding the style on the button. The class name is "vsa-item__trigger" but I can't figure out a way to attach my style to it. The scss is in a style tag within my component. This is what my code looks like now:
<vsa-list>
<vsa-item v-for="item in listOfItems" :key="item.id">
<vsa-heading>
<label for="acc1 acc-label"> {{ item.heading }} </label>
</vsa-heading>
<vsa-content>
<ul class="mobile-ul-accordian">
<li class="mobile-li-accordian">
<a :href="item.url">{{ item.content }}</a>
</li>
</ul>
</vsa-content>
</vsa-item>
</vsa-list>
button.vsa-item__trigger[type="button"][aria-expanded="false"] [data-vsa-list="14"] [data-vsa-item="15"] [data-vsa-active="false"] [aria-controls="vsa-panel-15"]{
border: none !important;
}
I just simplyfied your selector and this worked for me. Also on JSFiddle.
<button
class="vsa-item__trigger"
type="button"
aria-expanded="true"
aria-controls="vsa-panel-{item_id}"
{data_attrs}
>
<span
class="vsa-item__trigger__content"
{data_attrs}
>
This is the heading
</span>
<span
class="vsa-item__trigger__icon vsa-item__trigger__icon--is-active"
{data_attrs}
>
</span>
</button>
button.vsa-item__trigger {
border: none !important;
}
<style src="./LoginButton.scss" lang="scss"></style>
<i18n src="./LoginButton.txt"></i18n>
<script src="./LoginButton.js"></script>
<template>
<div class="header-login component-same ml-10">
<span v-if="showLoggedIn">
<router-link :to="{ name: 'user' }" data-test="login-info-name">
<i class="dl-icon-user12"></i>
<span class="target-text hidden-xs hidden-sm">{{
$t('myAccount')
}}</span>
</router-link>
</span>
<!-- <span v-if="showLoggedIn" class="hidden-xs">
<a #click="logout" data-test="logout-button">
<span>{{ $t("signOut") }}</span>
</a>
</span>-->
<span v-else data-test="login-button">
<router-link :to="{ name: 'login' }">
<i class="dl-icon-user12"></i>
<span class="target-text hidden-xs hidden-sm">{{ $t('Register') }}</span>
</router-link>
</span>
</div>
</template>
I have written the above code for login, Where in this particular line
User has a register button, As soon as the user clicks on the register button, the User will be redirected to another page where he can fill up the basic details, So Instead of redirecting into another page, I want the Register button as a Popup, wherein the popup user can enter details.
also, I tried bootstarp-vue but I wasn't able to find the solution.
It's easier than what you think and mostly you won't need a special CSS lib for that, so the thing to do is just to make another component and call it whatever you want(but modal.vue makes sense here):
//inside modal.vue:
<template>
<div className="modal__wrapper">
<div className="modal">
<slot/>
</div>
</div>
</template>
<style lang="scss" scoped>
.modal{
width: 300px;
height: 100px;
border-radius: 10px;
background-color: white;
padding: 20px 20px;
z-index: 1200;
&__wrapper{
background-color: rgba(0,0,0,0.4);
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
position: absolute;
top: o;
}
}
</style>
in its simplest form, it's just a component with some styling to make it look like a modal (a transparent background(to make it look it's over the previous page) and an absolute position for its wrapper(the transparent one) and some centering techniques for its actual content),I didn't put any script in it(because it's just a simple modal I'm showing you to give the idea how to make yours) and then there is this slot part meaning you can pass your registration form to this modal component, from your parent component and use a boolean flag to just show it on register click
(sure you might need to add some more CSS to the .modal class):
<i18n src="./LoginButton.txt"></i18n>
<script src="./LoginButton.js"></script> <!-- the cleaner thing would
be to import them in your script section somehow -->
<template>
<div class="header-login component-same ml-10">
<span v-if="showLoggedIn">
<router-link :to="{ name: 'user' }" data-test="login-info-name">
<i class="dl-icon-user12"></i>
<span class="target-text hidden-xs hidden-sm">{{
$t('myAccount')
}}</span>
</router-link>
</span>
<span v-else data-test="login-button">
<!-- no need to rerouting to another path -->
<Modal>
<!--your template for registration will go here-->
<i class="dl-icon-user12"></i>
<span class="target-text hidden-xs hidden-sm">{{ $t('Register') }}</span>
</Modal>
</span>
</div>
</template>
//you gotta import the modal component so in your script section you have sth like this(BTW what type of structure are you using for your project? are you using vue-cli's scaffold or what? Are you using babel? cuz I'm gonna assume you are!)
<script>
import Modal from 'The_Relative_Path_to_the_Modal_you_just_created';
export default {
components:{
Modal
},
data(){
return{
showLoggedIn: false
}
}
}
</script>
<style src="./LoginButton.scss" lang="scss"></style>
i am using vs dropdown for notification and i need to trigger the function "abc()" when dropdown feather icon is clicked but on clicking the function is not triggered
<div class="bellicon" >
<feather-icon icon="BellIcon" class="cursor-pointer mt-1 sm:mr-6 mr-2" :badge="length1" >
</feather-icon>
</div>
<vs-dropdown-menu class="notification-dropdown dropdown-custom" #change="abc()">
<div class="notification-top text-center p-5 bg-primary text-white">
<h3 class="text-white">{{ unreadNotifications.length }} New</h3>
<p class="opacity-75">App Notifications</p>
</div>
<VuePerfectScrollbar ref="mainSidebarPs" class="scroll-area--nofications-dropdown p-0 mb-10" :settings="settings">
<ul class="bordered-items">
<li v-for="ntf in unreadNotifications" :key="ntf.index" class="flex justify-between px-4 py-4 notification cursor-pointer">
<div class="flex items-start">
<feather-icon :icon="ntf.icon" :svgClasses="[`text-${ntf.category}`, 'stroke-current mr-1 h-6 w-6']"></feather-icon>
<div class="mx-2">
<span class="font-medium block notification-title" :class="[`text-${ntf.category}`]">{{ ntf.title }}</span>
<small>{{ ntf.start }} {{ ntf.total }}{{ ntf.msg }}</small>
</div>
</div>
<small class="mt-1 whitespace-no-wrap">{{ elapsedTime(ntf.time) }}</small>
</li>
</ul>
</VuePerfectScrollbar>
<div class="
checkout-footer
fixed
pin-b
rounded-b-lg
text-primary
w-full
p-2
font-semibold
text-center
border
border-b-0
border-l-0
border-r-0
border-solid
border-grey-light
cursor-pointer">
<span>View All Notifications</span>
</div>
</vs-dropdown-menu>
</vs-dropdown>
the function abc() contains console.log but it is not working
The #change will not be invoked on click. This will only be invoked when an option is selected. Try changing it to #click. If you're having issues with the framework, you can make your own drop-down that will work. Something like that is done here: https://codepen.io/diemah77/pen/avabWG
Also, please keep in mind that VS is, as stated by their developers, not ready for production code, so there may be bugs in the framework itself that cause unexpected behavior even if your code is proper.
The truth is, Vuesax has a long way to go in terms of development. Components must be created, improved and fixed. For now, Vuesax should not be used for a real application. However, we are working very hard to achieve the stable version and have the strength to use it in any application.
vsDropdown component emits click event when you click on dropdown:
Source Code
So your code just needs a little bit of update:
First of all, you didn't add full code because vs-dropdown start tag is missing. That's where you should listen to click event.
So code looks like this:
<template lang="html">
<div class="examplex">
<!-- ATTENTION 👀 -->
<vs-dropdown #click="hello">
<a class="a-icon" href="#">
Dropdown hover
<vs-icon icon="expand_more"></vs-icon>
</a>
<vs-dropdown-menu>
<vs-dropdown-item>
Option 1
</vs-dropdown-item>
</vs-dropdown>
</div>
</template>
<script>
export default {
methods: {
hello() {
console.log('object');
}
}
}
</script>
<style lang="stylus">
.examplex
display: flex;
align-items: center;
justify-content: center;
.a-icon
outline: none;
text-decoration: none !important;
display: flex;
align-items: center;
justify-content: center;
i
font-size: 18px;
</style>
Notice that <vs-dropdown #click="hello"> that's your way out.
I hope this will resolve your issue. 🥂
<div style='cursor: pointer' v-for="row in rows" class="list-group-item list-group-item-action bg-light sidebar-item pl-2" :active="row.active">
<div v-on:mouseout.stop="controls = null" v-on:mouseover="controls = row.id" class="row">
<div class="col-9">{{ row.title }}</div>
<div v-if="controls == row.id" class="col-1">
<i class="fa fa-edit text-primary"></i>
</div>
<div v-if="controls == row.id" class="col-1">
<i class="text-danger fa fa-trash"></i>
</div>
</div>
</div>
This is my code. #mouseout fires when the mouse hovers over the icons, even though they are still in the div and you haven't mouseout-ed practically.
I have tried with #mouseover and #mouseout on the parent div - same result. I have also tried all event modifiers I could think of.
This is the default behaviours of the eventlisteners mouseover or mouseout. If you want to ignore children you will have to either:
set the css property pointer-events: none on children, or
Check whether the cursor is inside the parent element in your event handler
However, for your use case (reveal an element when parent is hovered) css is more suitable.
E.g.
.col-1 {
display: none;
}
.row:focus > .col-1,
.row:focus-within > col-1,
.row:hover > col-1 {
display: block;
}
I am using Bootstrap's grid to align an input, a button and an alert message.
However, I found the height of alert message is much higher than that of button and input.
Is there a way to make the height of all elements in grid consistent?
Here is example and code:
https://jsfiddle.net/rktg0L2w/
<div class="container-fluid">
<div class="row" >
<div class="col-xs-3 col-xs-offset-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Search</button>
</span>
</div>
</div>
<div class="col-xs-3">
<div class="alert alert-success"> Result: </div>
</div>
</div>
</div>
Thanks
Derek
Alert div isn't made to place inside your views. It has it's own padding and margin. It is usually put at the top of page.
However if you want to put it inside your view. You could either make it small by removing padding or make your view vertical align.
I made both alternatives in this https://jsfiddle.net/rktg0L2w/1/
1) For small alter div that matches your input change padding:
.alert-small{
padding: 7px;
}
2) In case you want to make both input and alter vertical align:
Place vcenter class on your row div and alert-large on your alter div.
.vcenter {
display: flex;
align-items: center;
}
.alert-large{
margin-bottom: 0px;
}
Bootstrap has its own standard, however you can change the code by edit the raw bootstrap css or override the bootstrap css code. For example :
padding is the problem in your case, click here for 1st picture
hola, click here for 2nd picture
However, you can make it specific by adding new class or with your superpower and your handsomeness tho
t(.__.t) my life