Vue multiselect slots caret dropdown option show and hide - javascript

<v-multiselect
ref="tagMultiselect"
v-model="sort"
:options="sorts"
class="filter"
>
<span
slot="caret"
slot-scope="{ toggle }"
class="arrow"
#mousedown.prevent.stop="toggle"
>
<font-awesome-icon
class="icon"
icon="chevron-down"
/>
</span>
</v-multiselect>
I just want to change caret to chevron up when dropdown options show.
Thank you in advance.

They use the class multiselect--active, all you need to do is use that and add a transform on it (again, the same as them)
.multiselect--active .icon {
transform: rotate(180deg);
}

Related

vueJS List Transition not activating

I have a scenario in a Vue JS App where I have a list of items which randomly change order after having the user presses a button. I can get the list elements to dynamically change their position with Vue.set however when I add a list transition via the <transition-group> tag the change remains, well, transition-less, and I don't know why.
I am displaying my list of items using the v-for attribute like so:
<transition-group name="shuffle" tag="ul">
<li class="content column" v-for="card in notecards" v-bind:key="card.u_id">
<div v-bind:key="card.u_id" v-on:click="card.show=!card.show">
<transition mode="out-in" name="flip">
<span v-bind:key="card.term" v-if="card.show" class="card-pad box card card-content media">
<div class="media-content has-text-centered">
<strong>{{card.term}}</strong>
</div>
</span>
<span v-bind:key="card.def" v-else class="card card-content box media">
<div class="media-content has-text-centered">
<strong>{{card.def}}</strong>
</div>
</span>
</transition>
</div>
</li>
</transition-group>
The key card.u_id is a unique key for each element. I have also defined the css style "shuffle-move" with the following rule:
shuffle-move{
transition: all 1s;
}
Additionally I am updating the position using a shuffle method in my Vue instance which looks like so:
shuffle_cards: function() {
let entries = this.notecards.length;
while (entries){
let random_index = Math.floor(Math.random() * entries--);
let intermediate = this.notecards[random_index];
Vue.set(this.notecards, random_index, this.notecards[entries]);
Vue.set(this.notecards, entries, intermediate);
}
}
I am using Vue 2.
Where am I going wrong?
You are missing a dot in your css rule:
.shuffle-move{
transition: all 1s;
}
Live example of your code : https://codepen.io/hans-felix/pen/oNXqbKE

How to change toggle icon of mat-expansion-panel?

The default icon for toggling a mat-expansion-panel is >. Setting hideToggle true just hides the toggle icon. Is there any way to change it? I found nothing in the official documentation. I want to use + or - icon if the state is closed or opened respectively.
As stated on the Angular Material Expansion Panel documentation, we can customise the stylings of the mat-extension-panel-header, which will in turn allow you to customise the icons.
First and foremost, you hide the original icon by setting the hideToggle attribute to true. In addition, we assign the event bindings (opened) and (closed) to the panelOpenState property. You may check out the other properties of mat-expansion-panel over here.
<mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false"hideToggle="true">
Next, on your mat-panel-description, you include the custom icons required. The icons shown will be dependent on the state of the panel. For this example, we are using the icons from Material Icons.
<mat-panel-description>
<mat-icon *ngIf="!panelOpenState">add</mat-icon>
<mat-icon *ngIf="panelOpenState">remove</mat-icon>
</mat-panel-description>
I have edited the original sample from the Angular documentation, such that it is using the custom + and minus icons to denote the expanded/collapsed state of the mat-extension-panel. You may access the demo over here.
There is a class .mat-expanded which is applied to a <mat-expansion-panel>
So you can just use CSS to change the icon, no JS required.
To change arrow down to up:
.mat-expanded .mat-expansion-panel-header-title .material-icons{
transform: rotate(180deg);
}
<mat-panel-title>
<span class="material-icons">expand_more</span>
Panel with icon `transform`
</mat-panel-title>
To swap icons:
.mat-expansion-panel-header-title .open,
.mat-expanded .mat-expansion-panel-header-title .close{
display: inline-block;
}
.mat-expanded .mat-expansion-panel-header-title .open,
.mat-expansion-panel-header-title .close{
display: none;
}
<mat-panel-title>
<span class="material-icons open">open_in_full</span>
<span class="material-icons close">close_fullscreen</span>
Panel with open/close
</mat-panel-title>
Here is a link to a demo https://stackblitz.com/edit/angular-e2fnlm
CSS solution works with multiple Material Expansion Panels
Give the name to the mat-expansion-panel say panel in the example. Use expanded property of the mat-expansion-panel to show or hide the + or - icon.
<mat-expansion-panel #panel hideToggle>
<mat-expansion-panel-header>
<mat-panel-title>
Buttons
</mat-panel-title>
<mat-icon >{{panel.expanded? 'remove' : 'add'}}</mat-icon>
</mat-expansion-panel-header>
</mat-expansion-panel>
For those interested, here is an example that works with multiple Expansion Panels:
View:
<mat-accordion>
<mat-expansion-panel *ngFor="let panel of panels; let i = index"
(opened)="panelOpenState[i] = true" (closed)="panelOpenState[i] = false"
hideToggle>
<mat-expansion-panel-header>
<mat-panel-title>
{{panel.title}}
</mat-panel-title>
<span *ngIf="!panelOpenState[i]">Show</span>
<span *ngIf="panelOpenState[i]">Hide</span>
</mat-expansion-panel-header>
Panel Content
</mat-expansion-panel>
</mat-accordion>
Component:
export class PanelComponent implements OnInit {
panels: [];
panelOpenState: boolean[] = [];
ngOnInit() {
// loop to add panels
for (let i = 0; i < 5; i++) {
this.panels.push({ title: i });
this.panelOpenState.push(false);
}
}
}
You can use mat-icon in the mat-expansion-panel-header.
Please check this working example on stackblitz.
For a + icon you can use <mat-icon>add</mat-icon>
<mat-accordion>
<mat-expansion-panel hideToggle>
<mat-expansion-panel-header>
<mat-panel-title>
Personal data
</mat-panel-title>
<mat-icon>add</mat-icon>
</mat-expansion-panel-header>
<mat-form-field>
<input matInput placeholder="First name">
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Age">
</mat-form-field>
</mat-expansion-panel>
add hideToggle to mat-expansion-panel :
<mat-expansion-panel (opened)="panelOpenState = true"
(closed)="panelOpenState = false" hideToggle>
and add icon:
<mat-expansion-panel-header>
<mat-icon>add</mat-icon>

Style not working on angular sidebar toggle button

I am new to Angular and installed ng-sidebar component through NPM, I have designed my sidebar:
component.html:
<ng-sidebar-container>
<ng-sidebar
[(opened)]="_opened"
mode="push"
autoCollapseWidth=500>
<div>
<!-- Sidebar-content goes here -->
</div>
</ng-sidebar>
<div ng-sidebar-content>
<router-outlet></router-outlet>
<a id="show-sidebar" class="btn btn-sm btn-dark" href="#" (click)="_toggleSidebar()">
<i class="fas fa-bars"></i>
</a>
</div>
</ng-sidebar-container>
Now, I have a toggle button above with id #show-sidebar, I want to apply left: 300px; on it when sidebar opened, for that I looked up the console and found an attribute on ng-sidebar tag as ng-reflect-opened, then I wrote the following style:
ng-sidebar[ng-reflect-opened=true] + div[_ngcontent-oer-c1] > div[_ngcontent-ocs-c0] a#show-sidebar {
left: 300px;
}
But it's not working! Any suggestions?
Note: Sidebar is toggling just to add style to toggle button.
This can be done by class binding, just make a class in your CSS as:
.toggled {
left: 300px;
}
As you have a property _opened in your .ts file which is Boolean so just add this to your desired element: [ngClass]="{toggled : _opened}".
Hope it will help :)

Onclick toggle class of individual list items icon Angular 4 5 Todo application

I am battling with this and tried to find solution but failed.
I have this piece of code that list all items from input and I need for check icon to be toggled on and off on click. For now its toggle ALL icons and not individual.
<p *ngFor="let task of tasks; let i = index" class=tasks #fade>
<span class="task">
<fa name="check" (click)="status=!status"
[ngClass]="status ? 'check' : 'uncheck'"></fa>
{{task}}</span>
<button class="remove" (click)="removeItem(i)"><fa name="trash"
class="delete"></fa></button>
</p>
CSS:
.check{
color: rgb(81, 255, 0);
cursor: pointer;
}
.uncheck{
color: red;
cursor: pointer;
}
Any suggestions would be helpful.
Have a great day
UPDATE:
For someone who have similar problem I found workaround. Just place input tag in your list item and style it how you wish. It will work independently for each item.
You could add the status properties in the task Object and it'd result in something like this:
<p *ngFor="let task of tasks; let i = index" class=tasks #fade>
<span class="task">
<fa name="check" (click)="task.status=!task.status"
[ngClass]="task.status ? 'check' : 'uncheck'"></fa>
{{task}}
</span>
<button class="remove" (click)="removeItem(i)"><fa name="trash"
class="delete"></fa></button>
</p>

How to show edit action icon when mouse-over on particular text

How to show / hide edit icon on mouseover and mouseout on particular text.
Here is my html code snippet
<ul>
<li>
<a id="pop" href="javascript:;;" data-content="test Desc" data-id="123">
<span class="testNameInfo">Test</span>
</a>
<div class="pull-right icons-align">
<i class="fa fa-pencil"></i>..
<i class="fa fa-plus"></i>
<i class="fa fa-times"></i>
</div>
</li>
</ul>
when page loads the fa-pencil icon is in hide state. When i mouse over on text, it should show fa-pencil icon. Remaining icons (add and delete) are always in show state.
Here is my javascript to hide the fa-pencil icon
$("a.editInline").css("display","none");
Am using backbone and marionette js frameworks, so i need to register the events in view.
Please let me know what is the best way to get out from my issue.
You can do as below:
$('.testNameInfo').on('mouseover mouseout',function(){
$(this).closest('li').find('.editInline').toggle();
//find the closest li and find its children with class editInLine and
//toggle its display using 'toggle()'
});
UPDATE
DEMO
#JamieBarker made his point which is valid here so I would suggest to try below code instead
$("a.editInline").css("display","none");
$('li').on('mouseover mouseout',function(){
$(this).find('.editInline').toggle();
//find its children with class .editInLine and
//toggle its display using 'toggle()'
});
Better to use CSS than JavaScript if you can:
a.editInline {
display:none;
}
li:hover a.editInline {
display:inline-block;
}
UPDATE
Performance/Simplicity wise I'd advise going with the CSS solution provided. If all else you can use then JS solution.
Optional CSS Solution
.editInline {
display: none;
}
#pop:hover .icons-align .editInline {
display: inline-block;
}
JS Solution
$(function() {
$(".editInline").hide(); // Use this if CSS is not wanted
$("#pop").hover(function() {
$(".editInline").show();
}, function() {
$(".editInline").hide();
});
});

Categories