Bootstrap Bileşenleri

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

# 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

@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.

<div class="container">

<div class="container-fluid">

<div class="row">

<div class="col-{xs|sm|md|lg}-{1-12}">

Kullanımlar

@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

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')
>}) 

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')

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')

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

Opsiyonel Yöntemler

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

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') 

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') 

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') 

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') 

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.

Yöntemler

Parametreler

Kullanım

@Html::alert('danger', 'Hi!')
# or
@Html::alertDanger('Hi!')

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!')

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.

Kullanım

@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.

Kullanım

@Html::class('rounded')->image('image.jpg')

# Table [5.8.5]

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

Kullanım

@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.

Parametreler

$segmentCount = -1

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

Parametreler 

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

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')

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')

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')

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')

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')

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')

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

Parametreler 

Kullanım

@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

Parametreler 

Kullanım

@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

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

Parametreler 

void
return	this

@Html::progressbarStriped()->progressbarDanger(18, 45)

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

Parametreler 

Kullanım

@Html::mediaObject4('micheal_avatar.png', 'Micheal', 'Good job!', 'February 19, 2016')

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.

Yöntemler

Kullanım

@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.

Yöntemler

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')

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.

Yöntemler

Kullanım

@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. 

Yöntemler

Parametreler

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.

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. 

Yöntemler

Parametreler

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.

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.

Yöntemler

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')

Parametreler

mixed	$content	Toast üst içeriği.
return	this

Kullanımı

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

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

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')

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')

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.

Parametreler

Kullanımlar

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