Bootstrap Bileşenleri
"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
@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
@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 = '') |
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
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) |
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
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 |
@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
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 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
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
@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
@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
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
@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
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
@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
6.38.2.7 | string | flex(mixed $content, string $class = NULL) |
6.38.2.7 | string | flexItem(mixed $content, string $class = NULL) |
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 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')
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 öğ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')
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 öğ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 öğ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 öğ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')
Öğ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')
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')
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')
Öğ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')
Öğ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
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
@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
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 |
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
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 |
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
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')
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
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')