I am working with ionic2, I have a list of items and each item holds an array of users:
<ion-list item-left>
<ion-item *ngFor="let item of items;">
<ion-label>
{{ item.name }}
</ion-label>
</ion-item>
</ion-list>
I am trying to add a horizontal avatars scroll to every item in the list
<ion-list item-left>
<ion-item *ngFor="let item of items;">
<ion-label>
{{ item.name }}
<br>
<ion-scroll scrollx="true" style="height: 50px;">
<ion-avatar *ngFor="let user of getAllUsers(item)">
<img src="{{ user.avatar }}" style="max-width:2.5rem;max-height:2.5rem;">
</ion-avatar>
</ion-scroll>
</ion-label>
</ion-item>
</ion-list>
Before I added style="height: 50px;" to ion-scroll nothing changed. After this addition the avatars are here but they are one bellow the other and not in a one row (and of course without horizontal scrolling).
How can I fix that?
P.S
Is it possible to add width to the scroller? I don't want it to take the whole page width.
Related
I am working with blade components and I have a component with two slots. I want to pass an image to the first slot and text to the second. They should be displayed beside each other, but they are displayed in separate lines.
code snippet of slots:
<h1>
{{ $icon }} {{ $title }}
</h1>
code snippet of filling the slots:
#component('components.pageheader')
#slot('icon')
<img src="{{ asset('img/an_image.png') }}" width="28px" height="28px">
#endslot
#slot('title')
myTitle
#endslot
#endcomponent
What am I missing?
Try setting the display:inline-block on wrapper div for img like below
#component('components.pageheader')
#slot('icon')
<div style="display:inline-block; margin-right:10px">
<img src="{{ asset('img/an_image.png') }}" width="28px" height="28px">
</div>
#endslot
#slot('title')
myTitle
#endslot
#endcomponent
I know that I can get the row selected using the event "click:row" in my Datatable component, but I need to get the specific cell that I had clicked
You can use slots for that. Add it inside of your table component like given below:
<template v-slot:item.name="{ item }">
<div #click="rowClicked(item)">
<v-icon
class="mr-2"
color="#54a1e0"
large
>{{ "mdi-folder" }}
</v-icon>
{{ item.name }}
</div>
</template>
Here, you call a "rowClicked" method and you pass the clicked item when there is a click on "name" field that you also customise within the template.
I was looking for a while a way to create a component but to create as many slots as needed dinamically.
For example, you want to repeat a menu list style in your project multiple times, the best option is to have a component, but what if i need custom html options each element, that makes it tricky.
The best option so far i get is the following, hope someone finds it helpfull
In your view file:
#component('components.radioList',['values'=>[1,2,3,4],'name'=>'myname'])
#slot('html_0')
mi html item 0
#endslot
#slot('html_1')
mi html item 1
#endslot
#slot('html_2')
mi html item 2
#endslot
#slot('html_3')
mi html item 3
#endslot
#endcomponent
In your component blade:
<ul class="list-group">
#foreach($values as $value)
#isset(${"html_{$loop->index}"})
<li class="list-group-item custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck_{{$loop->index}}" name="{{$name}}" value="{{$value}}">
<label class="custom-control-label" for="customCheck_{{$loop->index}}">
{{ ${"html_{$loop->index}"} }}
</label>
</li>
#endisset
#endforeach
</ul>
The only thing is that the values, and the amount of slots needs to match.
If you dont need extra values for each slot, you can create as a count:
#component('components.radioList',['count'=>4,'name'=>'myname'])
And change the Foreach to a For
Cheers!
So, I upgraded from vuetify 1.5 to latest (2.1xx) and get stuck on a few places.
I have a data-table where I want a "select all" checkbox in the header.
I added it with the "show-select" property and what I can see is that as the checkbox, when checked, actually puts all the items in the "selected" v-model.
My problem is that I want to have a template for item-props to customize the appearance of the rows and the checkbox that I bind to "props.selected" does not seem to work. If I check any checkbox on any row the item is not added to my "selected" v-model.
It is only if I use no template at all that I get it to work with the auto-generated checkboxes but this does not suffice for my current demands. In vuetify 1.5 I got it to work but I don't understand how to make it work in the new version.
<template>
<div>
<v-data-table
hide-default-footer
v-model="selected"
:sort-desc.sync="sortDescending"
:sort-by.sync="sortBy"
:headers="headers"
:items="cases"
item-key="id"
show-select
:items-per-page="itemsPerPage"
class="elevation-0">
<template v-slot:item="props">
<tr>
<td>
<v-checkbox v-model="props.selected" color="nordnetBlue" hide-details ></v-checkbox>
</td>
<td class="navigation-link" #click="goToCase(props.item)">{{ concatText( props.item.subject, 20) }}</td>
<td>{{ props.item.createdOn }}</td>
<td>{{ props.item.source }}</td>
<td>{{ !props.item.isSameQueue ? props.item.queueName : '' }}</td>
</tr>
</template>
</v-data-table>
<pre class="green--text">{{selected}}</pre>
</div>
</template>
I could not solve this so I followed a vuetify documentation example of how to customize the slot for each particular column.
So in my case, as you can see. three of the columns I just display the text as is and for two of them I do some modifying. So, I used a template for the two ones I wanted to edit.
Example:
template v-slot:item.Name="{ item }">
{{ item.Name }}
<v-tooltip bottom>
<template v-slot:activator="{on}">
<v-icon #click="openCustomer(item.Id)" class="clickable" small color="nordnetBlue" v-on="on">launch</v-icon>
</template>
Open in new window
</v-tooltip>
</template>
I would like to be able to check if a list is empty, and if it's not print a block, but I don't want to repeat that block for each item. I just want to be able to echo it once.
Give this following structure:
array(
"teasers" => array(
array("title"=>"Teaser Title 1"),
array("title"=>"Teaser Title 2")
)
);
{{# teasers }}
<div class="items-wrap">
<div class="items">
{{# . }}
<div class="item">
{{ title }}
</div>
{{/ . }}
</div>
</div>
{{/ teasers }}
I would like the items-wrap div to only print once, and repeat the item div for each item in the array. As is right now, the items-wrap is repeating once for each item in the teasers array. So... is there a way to check if the main array is not empty, but not repeat it?
The goal is to only print the items-wrap once, if needed.
Yes, there's a way. Mustache has the method length. If equal ZERO, is false and the block will not be rendered. Your example:
{{# teasers.length }}
<div class="items-wrap">
<div class="items">
{{# teasers }}
<div class="item">
{{ title }}
</div>
{{/ teasers }}
</div>
</div>
{{/ teasers.length }}
The tag {{teasers.length}} will check the number of items inside {{teasers}} and will render the block only if not empty.
More information here.
This answer is too late, but I hope it helps someone.
In terms of PHP:
{{#myArray.0}}...{{/myArray.0}}
https://stackoverflow.com/a/23786928/5546916
user "_has_items" , example: myarray_has_items willcheck the contion whether arry is empty or not then the tag wont render
or you can use {{#items.length}} to check length before render
{{#items.length}}
<ul>
{{items}}
<li>{{name}}</li>
{{/items}}`enter code here`
</ul>
{{/items.length}}