:::

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()來控制尺寸,亦可和 textareabutton搭配使用)
    {{ 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可套用 primarysecondarysuccessdangerwarninginfolightdark),原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

到GitHub觀看此單元程式異動


:::

書籍目錄

展開 | 闔起

http%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbsn%3D37%26tbdsn%3D1177

計數器

今天: 1476147614761476
昨天: 1416141614161416
總計: 7340123734012373401237340123734012373401237340123