Bootstrap Bileşenleri


    × Bunları biliyor muydunuz?
"ZN Framework'e ait tüm paketler framework dışında da kullanılabilir esneklikte tasarlanmıştır."


ZN Framework'ün package-hypertext paketi Bootstrap bileşenlerini destekleyecek şekilde genişletilmiştir. Aşağıda kullanılan bileşenler listesi verilmiştir.

 

 

# Kurulum


ZN dağıtımları için kurulum gerekmez.

↓ composer require znframework/package-hypertext

 

 

# Yöntemler


5.8.5 Gridsystem [Bootstrap 3 - 4]
5.8.5 Container [Bootstrap 3-4]
5.8.5 Form [Bootstrap 3 - 4]
5.8.5 Modalbox [Bootstrap 3 - 4]
5.8.5 Alert [Bootstrap 3 - 4]
5.8.5 Button [Bootstrap 3 - 4]
5.8.5 Image [Bootstrap 3 - 4]
5.8.5 Table [Bootstrap 3 - 4]
5.8.5 Breadcrumb [Bootstrap 3 - 4]
5.8.5 Carousel [Bootstrap 3 - 4]
6.38.2.7 Badge [Bootstrap 3 - 4]
6.38.2.7 Progressbar [Bootstrap 3 - 4]
6.38.2.7 MediaObject [Bootstrap 4]
6.38.2.7 FaIcon [Bootstrap 3 - 4]
6.38.2.7 Flex [Bootstrap 4]
6.38.2.7 Spinner [Bootstrap 4]
6.38.2.7 Popover [Bootstrap 3 - 4]
6.38.2.7 Tooltip [Bootstrap 3 - 4]
6.38.2.7 Toast [Bootstrap 4]
6.38.2.7 FilterEvent [Bootstrap 3 - 4]

 

 

# Gridsystem [5.8.5]


Grid düzeni oluşturmak için aşağıdaki kullanım formundan istifade edilir.

Not: Bootstrap 3 ve 4 ile uyumludur.

Kural: col{sm|md|lg...}[{1-12}](String|Callable $content)

Kullanım

Dosya: Views/Home/main.wizard.php
@Html::colsm4('column size 4')->colsm4('column size 4')->colsm4('column size 4')
     ->colsm8('column size 8')->colsm2('column size 2')->colsm2('column size 2')

Kolon genişlik değerlerinin toplamının 12 olması durumunda satır otomatik olarak tamamlanır.

Geriçağrım İşlevi

Yöntem parametre olarak dizge kabul ettiği gibi geriçağrım işlevi de kabul eder.

@Html::collg6({< column size 6 >})->collg6({< column size 6 >})

 

 

# Container [5.8.5]


Bu yapı sadece şablon sihirbazı( .wizard uzantılı görünümler ) ile kullanılabilir.

@container
<div class="container">
@containerFluid
<div class="container-fluid">
@row
<div class="row">
@col{xs|sm|md|lg}{1-12}
<div class="col-{xs|sm|md|lg}-{1-12}">

Kullanımlar

Dosya: Views/Home/main.wizard.php
@container
  @row
    @colsm4
      Column Size 4
    @endcol

    @colsm4
      Column Size 4
    @endcol

    @colsm4
      Column Size 4
    @endcol
  @endrow
@endcontainer

 

 

# Form [5.8.5]


Bootstrap form ile ilgili bileşenleri kulanmanın kolay bir yolunu sunar.

Yöntemler

5.8.5 This group(Mixed ...$parameters)
5.8.5 This label(Mixed ...$parameters)
5.8.5 This col(String $size)
5.8.5 This helptext(String $content, String $class = '')
# Goup [5.8.5]

Bootstrap form nesnelerinin gruplanması için kullanılan elementine karşılık gelmektedir. 2 tür parametre dağılımı vardır.

Uyarı: Bootstrap javascript kütüphanesinin sisteme dahil edilmiş olması gerekmektedir.

Parametreler - Nesne

String $class = '' Grup div elementine css sınıfları uygulamak için kullanılır. Dahili olarak form-group sınıfı uygulanmaktadır.
return This

Parametreler - Kapsayıcı

Callable $code Gruplanacak form nesneleri içerisine yazılır.
String $class = '' Grup div elementine css sınıfları uygulamak için kullanılır. Dahili olarak form-group sınıfı uygulanmaktadır.
return This

Kullanımlar

@Form::group()->text('email') 
@Form::group()->password('pass') 

Kapsayıcı Kullanım

Birden fazla form nesnesinin aynı grup içerisinde yer alması için aşağıdaki gibi de kullanılmaktadır.

@Form::group
({<
   @Form::text('email')
   @Form::password('pass')
>}) 
# Label [5.8.5]

Bootstrap form nesnelerine etiket eklemek için kullanılır. 2 tür parametre dağılımı vardır.

Uyarı: Bootstrap javascript kütüphanesinin sisteme dahil edilmiş olması gerekmektedir.

Parametreler - Text / Textarea / Select

String $for = NULL İlgili form nesnesi ile ilişkisini gösteren id değeri.
String $value = NULL Form nesnesinin yanında görünmesi istenilen yazı.
String $class = NULL İlgili label etiketine varsa css sınıfı uygulamak için kullanılır.
return This

Parametreler - Checkbox / Radio

String $value = NULL Form nesnesinin yanında görünmesi istenilen yazı.
String $class = NULL İlgili label etiketine varsa css sınıfı uygulamak için kullanılır.
return This

Kullanımlar

@Form::group()->label('email', 'E-posta:')->text('email') 
@Form::group()->label('pass', 'Şifre:')->password('pass')

Checkbox ve radio elementleri için kullanım aşağıdaki gibidir.

@Form::group()->label('Bay')->radio('gender')
@Form::group()->label('Bayan')->radio('gender')
# Col [5.8.5]

Bootstrap form nesnelerine sütun genişliği uygulamak için kullanılır.

Parametreler

String $size Genişlik değeri: Örn: sm-2
Return This  

Kullanımı

@Form::group()->label('email', 'Email:')->col('sm-4')->text('email')
# Helptext [5.8.5] / Helptext4 [6.38.2.7]

Bootstrap form nesnelerine yardım yazısı için kullanılır.

Parametreler

String $text Yazı.
String $class = '' Varsa eklenecek css sınıfı. Mevcut olarak help-block sınıfı uygulanır.
Return This  

Kullanımı

@Form::helptext('Bu bölüm e-posta alanıdır.')
     ->group()
     ->label('email', 'Email:')->col('sm-4')
     ->text('email')

Bootstrap4

@Form::helptext4('Bu bölüm e-posta alanıdır.')
     ->group()
     ->label('email', 'Email:')->col('sm-4')
     ->text('email')

 

 

# Modalbox [5.8.5] /  Modalbox4 [6.38.2.7]


Bootstrap modalbox'ı oluşturmak için kullanılır.

Parametreler

String $modalId İlgili modalbox'un id değeri.
Return String

Opsiyonel Yöntemler

5.8.5 This modal(String $modalId)
5.8.5 This modalHeader(Mixed $content)
5.8.5 This modalBody(Mixed $content)
5.8.5 This modalFooter(Mixed $content)
5.8.5 This modalSize(String $size)
5.8.5 This modalDismissButton(Bool $status = true)
# Modal [5.8.5]

Bu yöntem modalbox'u açmak üzere ilgili buton için kullanılır.

Parametreler

String $modalId İşlem yapılacak modal ID bilgisi.
Return String
Dosya: Views/Home/main.wizard.php
@Html::modal('myModal')->button('Open Modal') 

@Html::modalbox('myModal')  # With Bootstrap 3

@Html::modalbox4('myModal') # With Bootstrap 4
# ModalHeader [5.8.5]

Modal'a başlık eklemek için kullanılır.

Parametreler

Mixed $content Üst içerik.
Return String
@Html::modal('myModal')->button('Open Modal') 

@Html::modalHeader('Hi!')->modalbox('myModal') 
# ModalBody [5.8.5]

Modal'a içerik eklemek için kullanılır.

Parametreler

Mixed $content Gövde içeriği.
Return String
@Html::modal('myModal')->button('Open Modal') 

@Html::modalHeader('Hi!')->modalBody
({<
    @Form::text('Name')

>})->modalbox('myModal') 
# ModalFooter [5.8.5]

Modal'a alt bilgi eklemek için kullanılır.

Parametreler

Mixed $content Alt içerik.
Return String
@Html::modal('myModal')->button('Open Modal') 

@Html::modalHeader('Hi!')->modalFooter
({<
    @Form::button('close', 'Close')

>})->modalBody
({<
    @Form::text('Name')

>})->modalbox('myModal') 
# ModalSize [5.8.5]

Modal genişliğini ayarlamak için kullanılır.

Parametreler

String $size Modal boyutu.
Return String
@Html::modal('myModal')->button('Open Modal') 

@Html::modalSize('lg')->modalHeader('Hi!')->modalBody
({<
    @Form::text('Name')

>})->modalbox('myModal') 
# ModalDismissButton [5.8.5]

Modal'ın sağ üst köşesine kapatma ikonu koymak için kullanılır.

Parametreler

Void
Return String
@Html::modal('myModal')->button('Open Modal') 

@Html::modalDismissButton()->modalHeader('Hi!')->modalBody
({<
    @Form::text('Name')

>})->modalbox('myModal') 

 

 

# Alert [5.8.5]


Bootstrap'ın uyarı amaçlı kullandığı kutuların oluşturulmasını sağlar. Aşağıda uyarısı kutusu oluşturmak için kullanılan yöntemlerin listesi verilmiştir.

Not: Bootstrap 3 ve 4 ile uyumludur.

Yöntemler

5.8.5 String alert(String $type, Mixed $content)
5.8.5 String alertType(Mixed $content)
5.8.5 This dismissButton(Mixed $content = 'x')
5.8.5 This dismissFade(Void)

Parametreler

String $type Alert rengi.
Mixed $content İçerik.
Return String

Kullanım

Dosya: Views/Home/main.wizard.php
@Html::alert('danger', 'Hi!')
# or
@Html::alertDanger('Hi!')
# DismissButton [5.8.5]

Uyarı kutusunun sağ üst köşesinde yer alan kapatma ikonunu(x) oluşturmak için kullanılır.

Parametreler

String $type Alert rengi.
Mixed $content = 'x' İçerik.
Return String
@Html::dismissButton()->alertWarning('Hi!')

Kapatma butonun simgesini değiştirmek isterseniz parametre vermeniz yeterlidir.

@Html::dismissButton('-')->alertWarning('Hi!')
# DismissFade [5.8.5]

Uyarı kutusu kapatılırken görünürlük değerinin azalarak kapanmasını sağlayan animasyon oluşturmak için kullanılır.

Parametreler

Void
Return String
@Html::dismissFade()->dismissButton()->alertInfo('Hi!')

Geriçağrım İşlevi

@Html::dismissFade()->dismissButton()->alertSuccess
({<
    <h4>Hi!</h4><p>User</p>
>})

 

 

# Button [5.8.5]


Bootstrap button stilleri Html ve Form kütüphaneleri ile kullanılabilir.

Not: Bootstrap 3 ve 4 ile uyumludur.

Kullanım

Dosya: Views/Home/main.wizard.php
@Html::class('btn btn-success')->button('Example')            # <button></button>
# or
@Form::class('btn btn-success')->button('example', 'Example') # <input type="button">
# or
@Form::class('btn btn-success')->submit('example', 'Example') # <input type="submit">

 

 

# Image [5.8.5]


Bootstrap image stilleri Html ve Form kütüphaneleri ile kullanılabilir.

Not: Bootstrap 3 ve 4 ile uyumludur.

Kullanım

Dosya: Views/Home/main.wizard.php
@Html::class('rounded')->image('image.jpg')

 

 

# Table [5.8.5]


Bootstrap table stilleri Html ve Form kütüphaneleri ile kullanılabilir.

Not: Bootstrap 3 ve 4 ile uyumludur.

Kullanım

Dosya: Views/Home/main.wizard.php
@Html::class('table table-striped table-bordered')->table()->create
(
    [1, 2, 3, 4],
    ['a', 'b' => ['colspan' => 3]]
)

 

 

# Breadcrumb [5.8.5]


Bootstrap'ın uyarı amaçlı kullandığı kutuların oluşturulmasını sağlar. Aşağıda bu bileşenin oluşturmak için kullanılan yöntemlerin listesi verilmiştir.

Not: Bootstrap 3 ve 4 ile uyumludur.

Parametreler

String $uri = NULL Bu değerin NULL olması durumunda URI::active() yönteminin değerini kabul eder. Doğrudan URI üzerinden çalışmasını istiyorsanız bu değeri NULL ayarlayın.
Int
$segmentCount = -1
URI'de yer alan bölümlerden en fazla kaçının dahil olacağı belirtilir. Ön tanımlı olarak tüm bölümler dahil edilir.

Kullanım

@Html::breadcrumb()
@Html::breadcrumb('Products/Asus/Computer')

Bölüm Sınırlaması

1. parametrenin NULL ayarlamış olması durumunda URI otomatik olarak algılanacağından URI'de yer alan bölümlerden kaçtanesinin algılanması gerektiğini belirtebilirsiniz.

@Html::breadcrumb(NULL, 2)

 

 

# Carousel [5.8.5] / Carousel4 ({{Paket >= 6.90.4]


Bootstrap karusel slider'ını oluşturmak için kullanılır. Aşağıda slider nesnesi için kullanılan yöntemlerin listesi verilmiştir. Karuselin çalışma mantığını daha iyi anlamak için bootstrabın dokümantasyonuna bakınız.

Yöntemler

5.8.5 String carousel(String $id = auto)
5.8.5 This item(String $file, Array $attributes = [])
5.8.5 This indicators(Void)
5.8.5 This prev / next(String $name)
5.8.5 This transition(String $type)
5.8.5 This interval / keyboard / pause / ride / wrap(Mixed $value)
5.8.5 This on(String $parameter, Mixed $callback)
5.8.5 String activeCarouselOptions(String $id)

Parametreler 

# Carousel [5.8.5]

Carousel bileşenini oluşturmak için kullanılır.

Parametreler

String $id = auto Herhangi bir parametre belirtilmez ise Carousel deyimi ile başlayan md5 ile şifrelenmiş bir id tanımlanır. 
Return String  

Kullanım

Dosya: Views/Home/main.wizard.php
@Html::item('slide1.jpg')->item('slide2.jpg')->carousel()  # With Bootstrap 3

@Html::item('slide1.jpg')->item('slide2.jpg')->carousel4() # With Bootstrap 4
# Item [5.8.5]

Slider'a resim eklemek için item() yöntemi kullanılır. 

String $file Gösterilecek resim dosyasının yolu.
Array $attributes = [] Resme bazı özellikler eklemek için kullanılır.
Array caption[Başlık, Yazı] Görselin üzerine yazı eklemek için kullanılır. Örn: 'caption' => ['Title', 'Content']
String alt [img] nesnesinin alt değerini belirtmek için kullanılır. Bu değer belirtilmez ise resmin adı varsayılan değer kabul edilir. 
String class [img] nesnesine css sınıfı uygulamak için kullanılır.
Return This  

Kullanım

Dosya: Views/Home/main.wizard.php
@Html::item('slide1.jpg')->carousel('myCarousel')

Resim üzerine başlık ve içerik eklemek için;

@Html::item('slide1.jpg', ['caption' => ['Merhaba', 'Sitemize hoşgeldiniz.']])
     ->carousel('myCarousel')
# Indicators [5.8.5]

Slider geçişleri için sliderin alt kısmına geçiş ikonları eklemek için kullanılır.

Parametreler

Void
Return This

Kullanım

Dosya: Views/Home/main.wizard.php
@Html::indicators()->item('slide1.jpg')->item('slide2.jpg')->carousel('myCarousel')
# Prev / Next [5.8.5]

Slider üzerinde bulunan ileri geri butonlarının ismini değiştirmek için kullanılır.

Parametreler

String $name Buton'un yazısı.
Return This

Kullanım

Dosya: Views/Home/main.wizard.php
@Html::prev('Önceki')->next('Sonraki')->item('slide1.jpg')->carousel('myCarousel')
# Transition [5.8.5]

Slider geçiş durumu değiştirmek için kullanılır. Geçişlerin çalışma mantığı ile ilgili detaylı bilgi için tıklayınız.

Uyarı: Bu kullanım javascript yapılandırması gerektirdiği için ilgili scriptlerin dahil edilmesinden sonra Html::activeCarouselOptions('id') yönteminin kullanılması gerekmektedir.

Parametreler

Scalar $type Türler. cycle, pause, prev, next, dispose, number.
Return This

Kullanım

Dosya: Views/Home/main.wizard.php
@Html::transition('pause')->item('slide1.jpg')->item('slide2.jpg')->carousel('myCarousel')
# Interval / Keyboard / Pause / Ride / Wrap [5.8.5]

Karusel ile ilgili seçenekleri değiştirmek için kullanılır. Seçeneklerin çalışma mantığı hakkında detaylı bilgi için tıklayınız.

Uyarı: Bu kullanım javascript yapılandırması gerektirdiği için ilgili scriptlerin dahil edilmesinden sonra Html::activeCarouselOptions('id') yönteminin kullanılması gerekmektedir.

Parametreler

Mixed $value İlgili seçeneğin kabul ettiği değerlerden biri. Bu değerlerin neler olduğu hakkında detaylı bilgi için bir üsteki bağlantıya tıklayınız.
Return This

Kullanım

Dosya: Views/Home/main.wizard.php
@Html::interval(800)->keyboard(false)
     ->item('slide1.jpg')->item('slide2.jpg')
     ->carousel('myCarousel')
# On [5.8.5]

Karusel geçiş durumuna göre olay tetikletmek için kullanılır. Olay kullanımı ile ilgili detaylı bilgi için tıklayınız.

Uyarı: Bu kullanım javascript yapılandırması gerektirdiği için ilgili scriptlerin dahil edilmesinden sonra Html::activeCarouselOptions('id') yönteminin kullanılması gerekmektedir.

Parametreler

String $event Olayın hangi durumda tetikleneceği.
slide Geçiş esnasında olay tetiklenir.
slid Geçiş tamamlandıktan sonra olay tetiklenir.
Mixed  $callback Olay tetiklendiğinde çalıştırılacak kodlar.
Return This

Kullanım

Dosya: Views/Home/main.wizard.php
@style('css/bootstrap4.css')

@Html::on('slide', {< alert(1); >})
     ->item(FILES_DIR . '1.jpg')
     ->item(FILES_DIR . '2.jpg')
     ->carousel('myCarousel') 

@script('jquery', 'js/bootstrap4.js')

@Html::activeCarouselOptions('myCarousel')
# ActiveCarouselOptions [5.8.5]

Karusel javascript yapılandırmalarının devreye girebilmesi için script dosyalarından sonra kullanılır.

Parametreler

String $id Yapılandırmaları devreye sokulacak karuselin id değeri.
Return String

Kullanım

Dosya: Views/Home/main.wizard.php
@style('css/bootstrap4.css')

@Html::transition('cycle')
     ->item(FILES_DIR . '1.jpg')
     ->item(FILES_DIR . '2.jpg')
     ->carousel('myCarousel')

@script('jquery', 'js/bootstrap4.js')

@Html::activeCarouselOptions('myCarousel')

 

 

# Badge [6.38.2.7] / Badge4 [6.38.2.7]


Bootstrap badge nesnesini kullanmanın kolay bir yolunu sunar.

Yöntemler

6.38.2.7 String badge(String $type, Mixed $content)
6.38.2.7 String badgeType(Mixed $content)

Parametreler 

String $type Bileşenin rengi.
Mixed $content Bileşenin içeriği.
Return This  

Kullanım

Dosya: Views/Home/main.wizard.php
@Html::badge('danger', 5)  # With Bootstrap 3
@Html::badge4('danger', 5) # With Bootstrap 4
# or
@Html::badgeDanger('5')    # With Bootstrap 3
@Html::badge4Danger('5')   # With Bootstrap 4

Geriçağrım İşlevi

@Html::badgeSuccess
({<
   <span>4</span>
>})

 

 

# Progressbar [6.38.2.7] / Progressbar4 [6.38.2.7]


Bootstrap progressbar nesnesini kullanmanın kolay bir yolunu sunar.

Yöntemler

6.38.2.7 String progressbar(String $type, Float $percent, Float $height = NULL)
6.38.2.7 String progressbarType(Float $percent, Float $height = NULL)
6.38.2.7 This progressbarStriped()
6.38.2.7 This progressbarAnimated()

Parametreler 

String $type Barın rengi.
Float $percent % değeri.
Float $height = NULL Barın yüksekliği.
Return This  

Kullanım

Dosya: Views/Home/main.wizard.php
@Html::progressbar('danger', 89, 50)  # With Bootstrap 3
@Html::progressbar4('danger', 89, 50) # With Bootstrap 4
# or
@Html::progressbarDanger(89, 50)      # With Bootstrap 3
@Html::progressbar4Danger(89, 50)     # With Bootstrap 4
# ProgressbarStriped ({{ Paket >= 6.38.2.7 ]

Hareketlendirme için bar üstünde çizgili desen oluşturur.

Parametreler 

Void
Return This
@Html::progressbarStriped()->progressbarDanger(18, 45)
# ProgressbarAnimated ({{ Paket >= 6.38.2.7 ]

Bar üzerinde hareketlendirme oluşturmak için kullanılır. Hareketlendirmenin görülebilir olması için progressbarStriped() yöntemi ile beraber uygulanmalıdır.

Parametreler 

Void
Return This
@Html::progressbarStriped()->progressbarAnimated()->progressbarDanger(18, 45)

 

 

# MediaObject4 [6.38.2.7]


Bootstrap 4 media object nesnesini kullanmanın kolay bir yolunu sunar.

Yöntemler

6.38.2.7 String mediaObject4(String $avatar, String $name, String $content, String $date)
6.38.2.7 This mediaObjectReply(Mixed $content)

Parametreler 

String $avatar Kullanıcı resmi.
String $name Kullanıcı adı.
String $content Kullanıcı yorumu.
String $date Yorum tarihi.
Return This

Kullanım

Dosya: Views/Home/main.wizard.php
@Html::mediaObject4('micheal_avatar.png', 'Micheal', 'Good job!', 'February 19, 2016')
# MediaObjectReply ({{ Paket >= 6.38.2.7 ]

Yoruma verilen cevapları yansıtmak için kullanılır

Parametreler 

Mixed $content İçerik.
Return This  
@Html::mediaObjectReply
({<
    
    @Html::mediaObject4('john_avatar.png', 'John', 'Yes.', 'February 20, 2016')
    @Html::mediaObject4('alax_avatar.png', 'Alex', 'No!', 'February 21, 2016')

>})->mediaObject4('avatar.png', 'Micheal', 'Good job!', 'February 19, 2016')

 

 

# FaIcon [6.38.2.7]


Font Awesome ikonlarını kullanmanın kolay bir yolunu sunar.

Not: Bootstrap 3 ve 4 ile uyumludur.

Yöntemler

6.38.2.7 String faIcon(String $icon, String $size = NULL)
6.38.2.7 String falIcon(String $icon, String $size = NULL)
6.38.2.7 String fasIcon(String $icon, String $size = NULL)
6.38.2.7 String fadIcon(String $icon, String $size = NULL)
6.38.2.7 String farIcon(String $icon, String $size = NULL)

Kullanım

Dosya: Views/Home/main.wizard.php
@Html::faIcon('pencil', 'lg')
@Html::falIcon('pencil', 'sm')
@Html::fasIcon('pencil')
@Html::fadIcon('pencil')
@Html::farIcon('pencil')

 

 

# Flex [6.38.2.7]


Bootstrap 4 flex nesnesini kullanmanın kolay bir yolunu sunar.

Dikkat: Flex nesnesinin Bootstrap 3 için kullanımı yoktur.

Yöntemler

6.38.2.7 String flex(Mixed $content, String $class = NULL)
6.38.2.7 String flexItem(Mixed $content, String $class = NULL)
# Flex [6.38.2.7]

Aşağıda flex nesnesine ait kullanılabilir opsiyonel yöntemler gösterilmiştir.

Opsiyonel Yöntemler

6.38.2.7 This flexSize(String $value) [sm|md|xl|lg]
6.38.2.7 This flexInline()
6.38.2.7 This flexWrap(String $value = '') [reverse|no|'']
6.38.2.7 This flexDirection(String $value) [column|column-reverse]
6.38.2.7 This flexJustify(String $value) [start|end|center|between|around]
6.38.2.7 This flexAlign(String $value) [start|end|center|between|around|stretch]
6.38.2.7 This flexAlignItems(String $value) [start|end|center|between|around|stretch|baseline]

Kullanım

Dosya: Views/Home/main.wizard.php
@Html::flex
({<
    @Html::flexItem('Example 1', 'bg-danger')
    @Html::flexItem('Example 2', 'bg-success')
    @Html::flexItem('Example 3', 'bg-success')

>}, 'bg-secondary')

Flex Size

Flex nesnesinin boyutunu ayarlar. Genellikle flexInline() yöntemi ile beraber kullanılır. Standart bootstrap ölçülerini kullanabilirsiniz.

Parametreler 

String $value Değer. Kullanılabilir Seçenekler: [sm|md|xl|lg]
Return This  
@Html::flexSize('lg')->flexInline()->flex
({<
    @Html::flexItem('Example 1', 'bg-danger')
    @Html::flexItem('Example 2', 'bg-success')
    @Html::flexItem('Example 3', 'bg-success')

>}, 'bg-secondary')

Flex Inline

Parametreler 

Void
Return This
@Html::flexSize('lg')->flexInline()->flex
({<
    @Html::flexItem('Example 1', 'bg-danger')
    @Html::flexItem('Example 2', 'bg-success')
    @Html::flexItem('Example 3', 'bg-success')

>}, 'bg-secondary')

Flex Wrap

Flex öğelerinin bir flex kapsayıcıda nasıl sarıldığını kontrol edin. 3 tür parametrik gönderimi vardır. '', no ve reverse.

Parametreler 

String $value Değer. Kullanılabilir Seçenekler: [''|no|reverse]
Return This  
@Html::flexWrap('reverse')->flex
({<
    @Html::flexItem('Example 1', 'bg-danger')
    @Html::flexItem('Example 2', 'bg-success')
    @Html::flexItem('Example 3', 'bg-success')

>}, 'bg-secondary')

Flex Direction

Esnek öğeleri dikey olarak (üst üste) görüntülemek için column veya dikey yönü tersine çevirmek için column-reverse kullanın.

Parametreler 

String $value Değer. Kullanılabilir Seçenekler: [column|column-reverse]
Return This  
@Html::flexDirection('column')->flex
({<
    @Html::flexItem('Example 1', 'bg-danger')
    @Html::flexItem('Example 2', 'bg-success')
    @Html::flexItem('Example 3', 'bg-success')

>}, 'bg-secondary')

Flex Justify

Flex öğelerinin hizalamasını değiştirmek için kullanın. Geçerli sınıflar start, end, center, between, around.

Parametreler 

String $value Değer. Kullanılabilir Seçenekler: [start|end|center|between|around]
Return This  
@Html::flexJustify('center')->flex
({<
    @Html::flexItem('Example 1', 'bg-danger')
    @Html::flexItem('Example 2', 'bg-success')
    @Html::flexItem('Example 3', 'bg-success')

>}, 'bg-secondary')

Flex Align

Flex öğelerinin toplu sıralanmasını sağlar. Geçerli sınıflar start, end, center, between, around, stretch.

Parametreler 

String $value Değer. Kullanılabilir Seçenekler: [start|end|center|between|around|stretch]
Return This  
@Html::flexWrap()->flexAlign('center')->flex
({<
    @Html::flexItem('Example 1', 'bg-danger')
    @Html::flexItem('Example 2', 'bg-success')
    @Html::flexItem('Example 3', 'bg-success')

>}, 'bg-secondary')

Flex Align Items

Flex öğelerinin tek sıra sıralanmasını sağlar. Geçerli sınıflar start, end, center, between, around, stretch.

Parametreler 

String $value Değer. Kullanılabilir Seçenekler: [start|end|center|between|around|stretch|baseline]
Return This  
@Html::flexWrap()->flexAlignItems('center')->flex
({<
    @Html::flexItem('Example 1', 'bg-danger')
    @Html::flexItem('Example 2', 'bg-success')
    @Html::flexItem('Example 3', 'bg-success')

>}, 'bg-secondary')
# FlexItem [6.38.2.7]

Aşağıda flex item nesnesine ait kullanılabilir opsiyonel yöntemler gösterilmiştir.

Opsiyonel Yöntemler

6.38.2.7 This flexFill()
6.38.2.7 This flexGrow(Int $value) [0|1]
6.38.2.7 This flexShrink(Int $value) [0|1]
6.38.2.7 This flexOrder(Int $value) [0|1|...|12]
6.38.2.7 This flexAlignSelf(String $value) [start|end|center|baseline|stretch]

Kullanım

Dosya: Views/Home/main.wizard.php
@Html::flexWrap()->flex
({<
    @Html::flexItem('Example 1', 'bg-danger')
    @Html::flexItem('Example 2', 'bg-success')

>}, 'bg-secondary')

Flex Fill

Öğeleri diğerlerini itmesi için zorlar. Eşit genişlik için tüm itemlere verilmelidir.

Parametreler 

Void
Return This
@Html::flexWrap()->flex
({<
    @Html::flexFill()->flexItem('Example 1', 'bg-danger')
    @Html::flexItem('Example 2', 'bg-success')

>}, 'bg-secondary')

Flex Grow

Alanın geri kalanını kaplamak için kullanılır. 1 seçilirse öğeden itibaren 2 seçilirse öğeye doğru kaplama yapılır.

Parametreler 

String $value Değer. Kullanılabilir Seçenekler: [0|1]
Return This  
@Html::flexWrap()->flex
({<
    @Html::flexGrow(1)->flexItem('Example 1', 'bg-danger')
    @Html::flexItem('Example 2', 'bg-success')

>}, 'bg-secondary')

Flex Shrink

Kaplanan alanı geri küçültmek için kullanılır.

Parametreler 

String $value Değer. Kullanılabilir Seçenekler: [0|1]
Return This  
@Html::flexWrap()->flex
({<
    @Html::flexShrink(1)->flexItem('Example 1', 'bg-danger')
    @Html::flexItem('Example 2', 'bg-success')

>}, 'bg-secondary')

Flex Order

Öğelerin sırasını değiştirmek için kullanılır.

Parametreler 

String $value Değer. Kullanılabilir Seçenekler: [0|1 ... |12]
Return This  
@Html::flexWrap()->flex
({<
    @Html::flexOrder(2)->flexItem('Example 1', 'bg-danger')
    @Html::flexOrder(1)->flexItem('Example 2', 'bg-success')

>}, 'bg-secondary')

Flex Align Self

Öğelerin dikey hizalamasını kontrol etmek için kullanılır.

Parametreler 

String $value Değer. Kullanılabilir Seçenekler: [start|end|center|baseline|stretch]
Return This  
@Html::flexWrap()->flex
({<
    @Html::flexItem('Example 1', 'bg-danger')
    @Html::flexAlignSelf('end')->flexItem('Example 2', 'bg-success')
    @Html::flexItem('Example 3', 'bg-danger')

>}, 'bg-secondary')

 

 

# Spinner [6.38.2.7]


Bootstrap 4 spinner nesnesini kullanmanın kolay bir yolunu sunar.

Uyarı: Spinner nesnesinin Bootstrap 3 için kullanımı yoktur.

Yöntemler

6.38.2.7 String spinner(String $type = 'border', String $color = NULL, String $size = NULL) [border|grow]
6.38.2.7 String spinnerBorder(String $color = NULL, String $size = NULL)
6.38.2.7 String spinnerGrow(String $color = NULL, String $size = NULL)

Kullanım

Dosya: Views/Home/main.wizard.php
@Html::spinner('grow', 'danger', 'sm')
@Html::spinnerGrow('danger', 'sm')
@Html::spinnerBorder('primary', 'lg')

 

 

# Popover [5.8.5]


Bootstrap'ın popover bileşenin kullanılmasını sağlar. Kaynak dosyalarının nasıl dahil edilmesi gerektiği konusunda detaylar için tıklayınız

Not: Bootstrap 3 ve 4 ile uyumludur.

Yöntemler

6.38.2.7 String popover(String $placement, String $content)
6.38.2.7 String popoverEvent(String $selector, $content = NULL)
6.38.2.7 String on(String $event, Mixed $code) [show|shown|hide|hidden]

Parametreler

String $placement Popover'in butonun neresinde açılması gerektiği. Örn: right
Seçenekler right, left, top, bottom
String $content Popover ile açılan pencere içerisinde görünecek yazı.
Return This  
# PopoverEvent

Parametreler 

String $selector = 'all' Herhangi bir seçici belirtimez ise tüm popover nesneleri kabul edilir
Array $options Seçenekler ile ilgili detaylar için tıklayınız.
Return String  

Kullanımı

@Html::class('btn btn-danger')->popover('right', 'ZN Framework')->button('NAME')

@Html::popoverEvent('all', ['delay' => 100])

Yukarıda kullanılan style ve script yolları örnek amaçlı kullanılmıştır.

# On

Parametreler 

String $event Hangi duruma göre tetikleneceği.
Mixed $code İçerik.
Return String  

Popover nesnesinin javascriptine olay eklemek için on() yöntemi kullanılır.

@Html::on('shown', 
{<
    alert(1);

>})->popoverEvent('all', ['delay' => 100])

Daha fazla olay türü için tıklayınız.

 

 

# Tooltip [5.8.5]


Bootstrap'ın tooltip bileşenin kullanılmasını sağlar. Kaynak dosyalarının nasıl dahil edilmesi gerektiği konusunda detaylar için tıklayınız

Not: Bootstrap 3 ve 4 ile uyumludur.

Yöntemler

6.38.2.7 String tooltip(String $placement, String $content)
6.38.2.7 String tooltipEvent(String $selector, Array $options = NULL)
6.38.2.7 String on(String $event, Mixed $code) [show|shown|hide|hidden]

Parametreler

String $placement Tooltipin'in butonun neresinde açılması gerektiği. Örn: right
Seçenekler right, left, top, bottom
String $content Tooltip ile açılan pencere içerisinde görünecek yazı.
Return This  
# TooltipEvent

Parametreler 

String $selector = 'all' Herhangi bir seçici belirtimez ise tüm tooltip nesneleri kabul edilir
Array $options Seçenekler ile ilgili detaylar için tıklayınız.
Return String  

Kullanımı

@Html::class('btn btn-danger')->tooltip('right', 'ZN Framework')->button('NAME')

@Html::tooltipEvent('all', ['delay' => 100])

Yukarıda kullanılan style ve script yolları örnek amaçlı kullanılmıştır.

# On

Parametreler 

String $event Hangi duruma göre tetikleneceği.
Mixed $code İçerik.
Return String  

Tooltip nesnesinin javascriptine olay eklemek için on() yöntemi kullanılır.

@Html::on('shown', 
{<
    alert(1);

>})->tooltipEvent('all', ['delay' => 100])

 

 

# Toast [6.38.2.7]


Bootstrap'ın toast bileşenin kullanılmasını sağlar.

Dikkat: ;Toast nesnesinin Bootstrap 3 için kullanımı yoktur.

Yöntemler

6.38.2.7 String toast(String $toastId)
6.38.2.7 String toastEvent(String $toastId, String $event = NULL)
6.38.2.7 String toastHeader(Mixed $content)
6.38.2.7 String toastBody(Mixed $content)
6.38.2.7 String toastDismissButton(Void)
6.38.2.7 String toastAutoHide(String $bool)

Kullanımlar

@Html::toast('myToast') 

# ToastEvent

Parametreler 

String $toastId Toast bileşeni ID değeri.
String $event show, hide
Return String  

Kullanımı

@Html::toast('myToast')

@Html::toastEvent('myToast', 'show')
# ToastHeader

Parametreler

Mixed $content Toast üst içeriği.
Return This  

Kullanımı

@Html::toastHeaer('My Toast Title')->toast('myToast')

@Html::toastEvent('myToast', 'show')
# ToastBody

Parametreler 

Mixed $content Toast gövde içeriği.
Return This  

Kullanımı

@Html::toastHeaer('My Toast Title')->toashBody
({<
    <p>Toast Body</p>

>})->toast('myToast')

@Html::toastEvent('myToast', 'show')
# ToastDismissButton

Parametreler 

String $bool Toast otomatik olarak kapansın mı?
Return This  

Kullanımı

@Html::toastAutoHide('false')->tostDismissButton()->toastHeaer('My Toast Title')->toashBody
({<
    <p>Toast Body</p>

>})->toast('myToast')

@Html::toastEvent('myToast', 'show')
# ToastAutoHide

Burada dikkat edilmesi gereken parametrenin string türde true veya false olarak gönderilmesi gerektiğidir.  

Parametreler

Void
Return This

Kullanımı

@Html::tostDismissButton()->toastHeaer('My Toast Title')->toashBody
({<
    <p>Toast Body</p>

>})->toast('myToast')

@Html::toastEvent('myToast', 'show')

 

 

# FilterEvent [6.38.2.7]


Bootstrap'ın filter event bileşenin kullanılmasını sağlar. Hedef bileşen üzerinde filtreleme yapmak için kulanılır.

Not: Bootstrap 3 ve 4 ile uyumludur.

Parametreler

String $source Aramanın yapılacağı input.
String $target Arama yapılacak hedef nesne.
String $event Filtre tetikleme olayı.
Return This  

Kullanımlar

@Html::filterEvent('#myInput', '#myTable tr', 'keyup')