Wiki Detay | wiki workcube

cf_box_search listeleme ekranlarında filtreleme için eklediğimiz elementleri kapsayan, flex yapıya sahip bir tagdir. Kullanım amacı ise bize ekstra css kodu yazdırmadan kullanışlı ve responsive olmasıdır. Cf_box içerisinde ve default olarak cf_box_search_detail ile kullanılır.

Not: Tag içerisinde kullandığımız search butonun, button_type değeri 4 olmalıdır. Kullandığımız inputların boyutları için ihtiyaç doğrultusunda ekleyebileceğimiz üç tane class vardır.

Small: width = 50px
Medium: width = 100px
Large: width = 150px

Parametreler

Attributes	Açıklama	Veri	Zorunlu
more	Listeleme sayfalarında Daha Fazlası butonu ile birlikte gelen Filtre seçeneklerinin gelmesi amacı ile kullanılır. Default değeri 1 dir.	Boolean	H
plus	Eğer tabloda <i class=”fa fa-plus”></i> elementi varsa buradaki ekleme hrefini alarak Daha Fazlası butonunun yanına + butonunu ekler. Default değeri 1 dir.	Boolean	H

Örnek Kullanım

<cf_box_search more="0">

<div class="form-group medium">

<input type="text" name="keyword" id=" keyword" palceholder="Filtre">

</div>

<div class="form-group">

<select>

<option>Azalan Tarih</option>

<option>Artan Tarih</option>

</select>

</div>

<div class="form-group small">

<input type="text" name="maxrows" id="maxrows" value="20" >

</div>

<div class="form-group">

<cf_wrk_search_button button_type="4">

</div>

</cf_box_search>

Sonuç

Cf_box_search_detail Kullanım Amacı

cf_box_search_detail elementi cf_box_search ile birlikte kullanılır. Burası filtreleme ekranının detay kısmını içerir. Daha Fazlası butonu ile açılan alandır.

Bu tag de responsive yapı sağlamak için elementler bootstrap grid classları ile kullanılır. Butonlar için classlar: ui-btn, ui-btn-gray, ui-btn-gray2.

Örnek Kullanım

<cf_box_search>

<div class="form-group">

<input type="text" name="keyword" id=" keyword" palceholder="Filtre">

</div>

<div class="form-group small">

<input type="text" name="maxrows" id="maxrows" value="20" >

</div>

<div class="form-group">

<cf_wrk_search_button button_type="4">

</div>

<div class="form-group">

<a class="ui-btn ui-btn-gray2" href="javascript://"><i class="fa fa-arrow-left"></i></a>

</div>

</cf_box_search>

<cf_box_search_detail>

<div class="form-group col col-4 col-md-4 col-sm-6 col-xs-12">

<label>Input</label>

<input type="text">

</div>

<div class="form-group col col-4 col-md-4 col-sm-6 col-xs-12">

<label>Three Point</label>

<div class="input-group">

<input type="text">

<span class="input-group-addon icon-ellipsis"></span>

</div>

<div class="form-group col col-4 col-md-4 col-sm-6 col-xs-12">

<label>Single Select</label>

<select>

<option>Option 1</option>

<option>Option 2</option>

<option>Option 3</option>

</select>

</div>

<div class="form-group col col-4 col-md-4 col-sm-6 col-xs-12">

<label>Multi Select</label>

<select class="multip-select" multiple="multiple">

<option>Option 1</option>

<option>Option 2</option>

<option>Option 3</option>

</select>

</div>

….

</cf_box_search_detail>

Sonuç

Tips

Kayıt Bulunamadı

Geri Bildirim

Güzel olmuş bu özellik ellerinize sağlık

Halit Yurttaş - 20/04/2020

Bu içeriği faydalı buldunuz mu?

3 0

Geri Bildirimizi Lütfen Yazınız!

Ad*

Soyad*

E-posta *

Workcube Objects Hakkında

Kayıt Bulunamadı

Release Notları

Kayıt Bulunamadı