8-1 安裝marvinlabs/laravel-html-bootstrap-4套件

一、關於marvinlabs/laravel-html-bootstrap-4套件

1. 表單套件非常多，以前講義介紹的GeneaLabs/laravel-casts套件，雖然使用簡單，但其中有不少元件無法正常使用，例如switch或radio。另外netojose/laravel-bootstrap-4-forms套件則是太過陽春，一些比較細節的地方無法施做，例如無法製作水平表單、hidden無法取消label，反而是radio無法加上laebl，雖然無關功能，但對於畫面比較要求者會玩得很痛苦。
2. 因此，在此推薦另一個也是支援bootstrap4的表單套件marvinlabs/laravel-html-bootstrap-4
3. 官網：https://github.com/marvinlabs/laravel-html-bootstrap-4
4. 安裝 marvinlabs/laravel-html-bootstrap-4

   composer require marvinlabs/laravel-html-bootstrap-4

二、建立表單

1.  預設的 POST 表單，選項部份有需要再填

   {{ bs()->openForm('post', '/exam' , [ 其他選項陣列]) }}
   {{ bs()->closeForm() }}

2. 選項部份

   'files' => true, //需要上傳檔案時
   'model' => $exam, //綁預設值時
   'hideErrors' => true,  //隱藏錯誤
   'inline' => true,  //行內表單
   //自定義表單屬性
   'attributes' => [
       'id'       => 'create_user_form',
       'v-cloack' => '',
   ]
   

3. 水平表單並不在這裡設定，而是在各自元件中設定。

三、各種元件用法

1. text 文字輸入框

   {{ bs()->input('text', 'username', '吳弘凱')->placeholder('請填入姓名') }}
   {{ bs()->text('username')->placeholder('請填入姓名') }}
   {{ bs()->text('username', '小型輸入框')->sizeSmall() }}
   {{ bs()->text('username', '大型數入框')->sizeLarge() }}
   {{ bs()->hidden('op', '隱藏欄位') }}
   {{ bs()->password('pass', '密碼欄位') }}
   {{ bs()->email('email', 'Email欄位') }}
   {{ bs()->token() }}

2. textarea 大量文字輸入框

   {{ bs()->textArea('content', '這是大量文字框') }}

3. select 下拉選單

   {{ bs()->select('enable', ['1' => '開啟', '0' => '關閉'], '1') }}
   
   //多選
   {{ bs()->select('color', ['red' => '紅色', 'green' => '綠色', 'biue' => '藍色'])
          ->multiple()
          ->value(['red', 'green'])
          ->placeholder('可多選') }}
   
   //高興的話placeholder()也可以用第二個參數賦予值
   {{ bs()->select('color', ['red' => '紅色', 'green' => '綠色', 'biue' => '藍色'])
          ->placeholder('請選擇顏色', -1) }}
   

4. checkbox 方框（不支援複選，欲用複選功能，請用select）

   {{ bs()->checkbox('remember')->description('記住我') }}
   //預設勾選
   {{ bs()->checkbox('remember')->description('記住我')->checked() }}
   //整合上方的一行式寫法
   {{ bs()->checkbox('remember', '記住我', true) }}
   //可以自訂值，也可以設成inline
   {{ bs()->checkbox('remember', '記住我')->value('yes')->inline() }}

5. radio 單選圓框及radioGroup多選項

   //不指定值的話，預設的值為1
   {{ bs()->radio('enable')->description('啟用') }}
   //預設勾選
   {{ bs()->radio('enable')->description('啟用')->checked() }}
   //整合上方的一行式寫法
   {{ bs()->radio('enable', '啟用', true) }}
   //可以自訂值，也可以設成inline
   {{ bs()->radio('enable', '啟用')->value('yes')->inline() }}
   //多個選項的寫法
   {{ bs()->radioGroup('enable', [1 => '啟用', 0 => '關閉'])
          ->selectedOption(1)
          ->inline()
          ->radioDisabled()
          ->addRadioClass(['bg-light', 'my-3']) }}

6. file檔案上傳（在form裡面務必加入 'files' => true ）

   {{ bs()->file('avatar2', '選擇一個檔案') }}
   {{ bs()->simpleFile('avatar') }}

7. button 按鈕（共有以下樣式可選：primary, secondary, success, danger, warning, info, light, dark）

   {{ bs()->submit('送出按鈕') }}
   {{ bs()->button('一般按鈕') }}
   //第二個參數指定樣式，第三個是否為外框按鈕
   {{ bs()->button('外框按鈕', 'success', true) }}
   //把連結做成按鈕
   {{ bs()->a('#', '把連結做成按鈕')->asButton('secondary') }}

8. badge徽章（共有以下樣式可選：primary, secondary, success, danger, warning, info, light, dark）

   {{ bs()->badge()->text('預設徽章') }}
   {{ bs()->badge()->text('顯示成藥丸狀')->pill() }}
   {{ bs()->badge('info')->text('加上連結')->link('#') }}

9. inputGroup 表單元件組（可套用->sizeSmall() 或 ->sizeLarge()來控制尺寸，亦可和 textarea及 button搭配使用）

   {{ bs()->inputGroup()
          ->prefix('共')
          ->suffix('元')
          ->control(bs()->text('username')->placeholder('請填入金額')) }}

10. Readonly 唯讀（可套用至text、textarea）

    {{ bs()->text('username', '這是唯讀的')->readOnly() }}
    {{ bs()->text('username', '這是唯讀的，而且顯示成一般文字（但仍是欄位）')->readOnly(true) }}

11. Disabled 關閉（可套用至text、textarea、select、checkbox、radio ）

    {{ bs()->text('username', '這是無效的')->disabled() }}

四、一般表單群組用法

1. 只要把底下的「姓名」替換成想要的標籤，bs()->text('username')換成想要的元件即可。

   {{ bs()->formGroup()
           ->label('姓名')
           ->control(bs()->text('username'))
           ->helpText('請在此填入姓名')}}

五、水平表單群組用法

1. 利用showAsRow()就可以使用水平表單
2. label('姓名', false, 'text-sm-right') 的第二個參數是是否使用 sr-only，若true，標籤會消失（預設為false）。第三個參數是可以自行加入額外的class，例如用text-sm-right讓標籤只有在螢幕大於576px時才會靠右 。
3. 只要把底下的「姓名」替換成想要的標籤，bs()->text('username')換成想要的元件即可。

   {{ bs()->formGroup()
          ->label('姓名', false, 'text-sm-right')
          ->control(bs()->text('username'))
          ->showAsRow() }}

六、提供兩個視圖元件

1. 警告視窗（type可套用 primary、secondary、success、danger、warning、info、light、dark），原component位於\專案\vendor\marvinlabs\laravel-html-bootstrap-4\resources\views\alert.blade.php

   @component('bs::alert', ['type' => 'info', 'animated' => true, 'dismissible' => true, 'data' => ['alert-id' => 40, 'context' => 'sample-code']])
       @slot('heading')
           info 警告視窗
       @endslot
   
       <p>dismissible 右上會出現 x 符號，用來關閉；animated 在關閉時會有漸變效果；data 可以用來設置一些屬性</p>
       <p>除了 type 外，其餘參數截可省略</p>
   @endcomponent

2. jumbotron巨幕，原component位於\專案\vendor\marvinlabs\laravel-html-bootstrap-4\resources\views\jumbotron.blade.php

   @component('bs::jumbotron', ['fluid' => true])
       @slot('heading')
           巨幕主標題
       @endslot
       @slot('subheading')
           這裡是次標題
       @endslot
   
       <hr class="my-3">
       <p>這裡愛寫啥都行</p>
   
       @slot('actions')
           {!! bs()->a('#', '這是個連結按鈕')->asButton('primary') !!}
       @endslot
   @endcomponent