P
CUI v1.20.1177
Documentation and examples in using Filter Template with PCUI
<link href="~/PCUIAssets/PCUI/Templates/FilterTemplate/css/FilterTemplate.min.css" rel="stylesheet" />
<script src="~/PCUIAssets/PCUI/Templates/FilterTemplate/js/FilterTemplate.js"></script>
<pcui_filter ref="filter">
<pcui_text_field slot="fields"
label="First"
type="dropdown"
v-bind:options="dropdownOptions"
track-by="id"
dropdown-label="text"
dropdown-placeholder="Search"
filter-size="large">
</pcui_text_field>
<pcui_text_field slot="fields" id="fixed-label-plain"
label="Third"
filter-size="small">
</pcui_text_field>
<pcui_date_range_picker slot="fields"
ref="date-range"
id="date-range-id"
date-format="dd/mm/yyyy"
start-label="Start Date"
end-label="End Date"
placeholder="Select a Date"
:date-buttons="false"
:disabled="false"
:limit="false"
:apply-buttons-callback="null"
filter-size="medium">
</pcui_date_range_picker>
<button slot="actions" iconSize="20px" icon="fas fa-search" class="ui button button-default">Search</button>
<button slot="actions" iconSize="20px" icon="fas fa-paper-plane" class="ui button button-default" v-on:click="callback">Send</button>
<button slot="actions" iconSize="20px" icon="fas fa-print" class="ui button button-solid success-btn" v-on:click="callback2">Print</button>
</pcui_filter>
var filterTemplateDOM = new Vue({
el: '#filter-template',
data: function() {
return {
dropdownOptions: [
{ text: 'Streets', id: 1 },
{ text: 'Satellite', id: 2 },
{ text: 'Terrain', id: 3 }
],
};
},
components: {
pcui_text_field: PCUIFixedLabelTextFieldComponent,
pcui_filter: PCUIFilterTemplate,
pcui_date_range_picker: PCUIRangeDatePicker
},
mounted: function () {
$('#filter-template .menu .item').tab();
},
methods:{
callback: function () {
console.log('hererer');
},
callback1: function () {
console.log('aaaaa');
},
callback2: function () {
console.log('bbbbb');
}
}
});
<pcui_filter ref="filters" :has-action-icon="false">
<pcui_text_field slot="fields" id="fixed-label-plain"
label="First">
</pcui_text_field>
<pcui_text_field slot="fields" id="fixed-label-plain"
label="Second">
</pcui_text_field>
<pcui_text_field slot="fields" id="fixed-label-plain"
label="Third">
</pcui_text_field>
<button slot="actions" class="ui button button-default">Send</button>
<button slot="actions" class="ui button button-solid success-btn">Print</button>
</pcui_filter>
var filterTemplateDOM = new Vue({
el: '#filter-template',
data: function() {
return {
dropdownOptions: [
{ text: 'Streets', id: 1 },
{ text: 'Satellite', id: 2 },
{ text: 'Terrain', id: 3 }
],
};
},
components: {
pcui_text_field: PCUIFixedLabelTextFieldComponent,
pcui_filter: PCUIFilterTemplate,
pcui_date_range_picker: PCUIRangeDatePicker
},
mounted: function () {
$('#filter-template .menu .item').tab();
},
methods:{
callback: function () {
console.log('hererer');
},
callback1: function () {
console.log('aaaaa');
},
callback2: function () {
console.log('bbbbb');
}
}
});