Workcube Wiki

Custom Tag: cf_box_search ve cf_box_search_detail

Cf_box_search Kullanım Amacı

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.

  1. Small: width = 50px
  2. Medium: width = 100px
  3. 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>

         <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ç 

Geri Bildirim

Bu içeriği faydalı buldunuz mu?