Bootstrap Bileşenleri


    × Bunları biliyor muydunuz?
"Libraries/ dizini içine taşınan veya bu dizinde oluşturulan kütüphaneler hiç bir tanımlama gerektirmeden kullanılabilir. "


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