I'm trying to make my v-data-table on static height, so i decided to add empty rows.
After i add action which delete row, and now i have icons on empty rows to.
How can i delete them?
You can see image of what i mean here
<template v-slot:item.action="{ item }">
<v-icon
small
#click="deleteItem(item)"
>
mdi-delete
</v-icon>
</template>
Full code of component on codepen
Check to see if item has a property (e.g. name), since your defaultItem is an empty Object.
<v-icon
v-if="item.hasOwnProperty('name')"
...
>...</v-icon>
Related
I have an array that is getting data from an API, but I want to style each button differently so that the background colours differ. I am also using Material UI... Here is my code -
{options.map((data, id) => (
<Button className='p-3 md:w-[25wh] md:h-[25vh]' onClick={handleClickAnswer} fullWidth variant="contained">{decode(data)}</Button>
))}
Please tell me how to style them
There are several ways in which you can assign different styles to different buttons. It can be done majorly using string literals.
Few examples,
If you are using bootstrap/tailwind and your styling will majorly consist of that, then you can something like
{options.map((data, id) => (
<Button
className=`p-${id} md:w-[25wh] md:h-[25vh]`
onClick={handleClickAnswer}
fullWidth
variant="contained">
{decode(data)}
</Button>
))}
Notice p-${id} would get modified for each particular element in the array
Even if bootstrap isn't being used, you can use the above method, create custom classNames to assign styles to each button separately.
If you need to specifically assign a style to the first/last element, you can use first child selector (or) last child selector.
Is it possible to set transition to trigger only one way for the v-btn?
I created button with text that changes depending on the condition and use transition to change it smoothly. However if i change view and condition changes the transition reverses and it looks glitchy. I dont want this behaviour, and only would like to have transition trigger one way.
<v-btn
class="ma-1"
#click="addToList"
width
:disabled="isAdded"
>
<span v-if="!isAdded">
Add to List
</span>
<v-slide-x-transition>
<span v-if="isAdded">
Added
<v-icon>
mdi-check
</v-icon>
</span>
</v-slide-x-transition>
</v-btn>
Here is example how this works:
https://codepen.io/pokepim/pen/VwKNzxj?editors=101
In the carousel when you switch between slides you can see that button reverses back and it extends width and generally this looks somewhat glitchy. Is it possible to only keep transition when clicking on the button in this case (so no backward transition from disable to active button)?
EDIT:
I tried Dan's answer, and while it works fine with the carousel case it still does not solve glitchy transition in general, here is the example of same behaviour using method instead of computed property:
https://codesandbox.io/s/vuetifyvuex-store-testing-ground-wyl4n?file=/src/App.vue
There's only one isAdded condition being used for all of the slides. When that condition is false on the next slide, it gets set before the animation is finished and it looks bad.
Use a method instead of a computed for isAdded so each slide can maintain its own button state:
methods: {
addToList() {
this.btnlist.push(this.model);
},
isAdded(i) {
return this.btnlist.includes(i);
}
}
And change all isAdded in the template to isAdded(i).
Here's the updated demo
To your edit, try the hide-on-leave attribute on the transition:
<v-slide-x-transition hide-on-leave>
<span v-if="isAdded(this.idUn)">
Added
<v-icon> mdi-check </v-icon>
</span>
</v-slide-x-transition>
I have a loop where i display dynamically icons, the position of the icons are styled by css on style.css, but the classes name are actually an elements of json object.
The problem is how to use the value of the json element which is style in order to style the icons.
The *ngFor looks like this:
<div *ngFor="let count of counters; let i = index" class="{{count.style}} dispanserDiv ">
<span class="dispLabel"> {{count.name }}</span>
<img (click)="openStockModal(stockModal)" class="dispanser" src="../assets/icons/dispanserIcons/0.png">
</div>
also i tried [ngClass] but not working, any help is appreciate.
Well, after i opened the inspect element, and i hover over the tags i found on screen a title message with a direction arrow out of the height of the scree, so i changed the margin-top attr th icon appear again.
but i am pretty sure that when i set the class name without using the json element value, it display fine, but when i use the json element the icons appear at a different position, but i have no idea why this is happening. but it finally worked
Today, I'd like to create an element that generated a list of "cards". On these cards there could be very different things according to which page it gets included. For instance, sometimes these cards contain a picture, sometimes there could be contact information (name, age, adress, phone...), sometimes it could contain only a video, etc...
So what my idea was to design a polymer element that handle the CSS, the ajax call to the datasource, the dom-repeat, and a <slot> (formerly known as <content>) which would include in this element the html template used to create the card content (picture, video, or contact card)
this is what I did so far:
Parent element:
<tiles-list id="tilesView" datas="[[datas]]">
<img src="https//lorempixel.com/200/130/people" />
<p>[[item.name]]</p>
<p>[[item.age]]</p>
<p>[[item.adress]]</p>
<p>[[item.phone]]</p>
</tiles-list>
{{datas}}is replaced by the URL for the ajax call
and in the child element:
<iron-ajax
auto
url="[[datas]]"
handle-as="json"
last-response="{{ajax}}"
on-response="log"></iron-ajax>
<div id="grid">
<template is="dom-repeat" items="[[ajax.data]]">
<div class="card gridCell">
<slot></slot>
</div>
</template>
</div>
But yeah, it doesn't work. All I get is a list with the right amount of cards, but only the first one contains a picture, but no data. So I guess the slot doesn't work like I'm trying to make it work, and the data binding cannot work this way either.
Anybody has a solution?
I think what you want to achive is a perfect case for the Templatizer.
Change your code to:
<tiles-list id="tilesView" datas="[[datas]]">
<template tile>
<img src="https//lorempixel.com/200/130/people" />
<p>[[item.name]]</p>
<p>[[item.age]]</p>
<p>[[item.adress]]</p>
<p>[[item.phone]]</p>
</template>
</tiles-list>
And then when your ajax request resolves do something like this:
var template = Polymer.dom(this).querySelector('template[tile]');
this.templatize(template);
ajax.data.forEach(function(item){
var instance = this.stamp(item);
Polymer.dom(this.$.grid).appendChild(instance.root);
});
This will create several instances of you template, no dom-repeat needed.
We are using ui-grid v3.1.1 and have a specific use-case where a grid needs to have certain rows selectable, and others not selectable, depending on the code of a specific cell in the row. We have been implementing the grid's html as:
<div id="gridSummary" ui-grid="gridOptions" class="grid-summary" ui-grid-auto-resize ui-grid-selection ui-grid-tree-view ui-grid-pinning>
<div class="grid-empty" ng-show="!gridOptions.data.length">No Corresponding Data Found</div>
</div>
and have been experimenting with the isRowSelectable gridOption which does what we want except for one issue: we don't want the disabled checkmark icon to appear on the non-selectable rows. Is there a way of causing the checkmark to be hidden/collapsed when the row is not selectable?
Thanks
You can achieve this by changing the rowHeaderIcon for non selectable rows.
You can override the template for the selection row header button and add custom css. Inject templateCache in your controller and override the template like this.
$templateCache.put('ui-grid/selectionRowHeaderButtons',
"<div class=\"ui-grid-selection-row-header-buttons\" ng-class=\"{'ui-grid-row-selected': row.isSelected , 'ui-grid-icon-cancel':!grid.appScope.isSelectable(row.entity), 'ui-grid-icon-ok':grid.appScope.isSelectable(row.entity)}\" ng-click=\"selectButtonClick(row, $event)\"> </div>"
);
The template will use a method in your controller scope to identify if the row is selectable.
Found this useful plunker.
I'd like to propose this Plunker which has no icon at all for unselectable rows
$templateCache.put('ui-grid/selectionRowHeaderButtons',
"<div ng-class=\"{'ui-grid-selection-row-header-buttons': grid.appScope.isSelectable(row), 'ui-grid-icon-ok' : grid.appScope.isSelectable(row), 'ui-grid-row-selected': row.isSelected}\" ng-click=\"selectButtonClick(row, $event)\"> </div>"
);