XOOPS輕鬆架 - 線上書籍

:::

Laravel 5.6 入門講義
================

### 一、關於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 
 ```bash
 composer require marvinlabs/laravel-html-bootstrap-4
 ```
 
### 二、建立表單

1. 預設的 POST 表單，選項部份有需要再填 
    ```php
    {{ bs()->openForm('post', '/exam' , [ 其他選項陣列]) }}
    {{ bs()->closeForm() }}
    ```
2. 選項部份 
    ```php
    'files' => true, //需要上傳檔案時
    'model' => $exam, //綁預設值時
    'hideErrors' => true,  //隱藏錯誤
    'inline' => true,  //行內表單
    //自定義表單屬性
    'attributes' => [
        'id'       => 'create_user_form',
        'v-cloack' => '',
    ]
    
    ```
3. 水平表單並不在這裡設定，而是在各自元件中設定。
 
### 三、各種元件用法

1. text 文字輸入框 
    ```php
    {{ 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 大量文字輸入框 
    ```php
    {{ bs()->textArea('content', '這是大量文字框') }}
    ```
3. select 下拉選單 
    ```php
    {{ 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） 
    ```php
    {{ bs()->checkbox('remember')->description('記住我') }}
    //預設勾選
    {{ bs()->checkbox('remember')->description('記住我')->checked() }}
    //整合上方的一行式寫法
    {{ bs()->checkbox('remember', '記住我', true) }}
    //可以自訂值，也可以設成inline
    {{ bs()->checkbox('remember', '記住我')->value('yes')->inline() }}
    ```
5. radio 單選圓框及radioGroup多選項 
    ```php
    //不指定值的話，預設的值為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` ） 
    ```php
    {{ bs()->file('avatar2', '選擇一個檔案') }}
    {{ bs()->simpleFile('avatar') }}
    ```
7. button 按鈕（共有以下樣式可選：`primary`, `secondary`, `success`, `danger`, `warning`, `info`, `light`, `dark`） 
    ```php
    {{ bs()->submit('送出按鈕') }}
    {{ bs()->button('一般按鈕') }}
    //第二個參數指定樣式，第三個是否為外框按鈕
    {{ bs()->button('外框按鈕', 'success', true) }}
    //把連結做成按鈕
    {{ bs()->a('#', '把連結做成按鈕')->asButton('secondary') }}
    ```
8. badge徽章（共有以下樣式可選：`primary`, `secondary`, `success`, `danger`, `warning`, `info`, `light`, `dark`） 
    ```php
    {{ bs()->badge()->text('預設徽章') }}
    {{ bs()->badge()->text('顯示成藥丸狀')->pill() }}
    {{ bs()->badge('info')->text('加上連結')->link('#') }}
    ```
9. inputGroup 表單元件組（可套用`->sizeSmall()` 或` ->sizeLarge()`來控制尺寸，亦可和 `textarea`及 `button`搭配使用） 
    ```php
    {{ bs()->inputGroup()
           ->prefix('共')
           ->suffix('元')
           ->control(bs()->text('username')->placeholder('請填入金額')) }}
    ```
10. Readonly 唯讀（可套用至text、textarea） 
    ```php
    {{ bs()->text('username', '這是唯讀的')->readOnly() }}
    {{ bs()->text('username', '這是唯讀的，而且顯示成一般文字（但仍是欄位）')->readOnly(true) }}
    ```
11. Disabled 關閉（可套用至text、textarea、select、checkbox、radio ） 
    ```php
    {{ bs()->text('username', '這是無效的')->disabled() }}
    ```
 
### 四、一般表單群組用法

1. 只要把底下的「`姓名`」替換成想要的標籤，`bs()->text('username')`換成想要的元件即可。 
    ```markup
    {{ 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')`換成想要的元件即可。 
    ```markup
    {{ 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` 
 ```php
 @component('bs::alert', ['type' => 'info', 'animated' => true, 'dismissible' => true, 'data' => ['alert-id' => 40, 'context' => 'sample-code']])
 @slot('heading')
 info 警告視窗
 @endslot
 
 dismissible 右上會出現 x 符號，用來關閉；animated 在關閉時會有漸變效果；data 可以用來設置一些屬性
 除了 type 外，其餘參數截可省略
 @endcomponent
 ```
2. jumbotron巨幕，原component位於`\專案\vendor\marvinlabs\laravel-html-bootstrap-4\resources\views\jumbotron.blade.php` 
 ```php
 @component('bs::jumbotron', ['fluid' => true])
 @slot('heading')
 巨幕主標題
 @endslot
 @slot('subheading')
 這裡是次標題
 @endslot
 
 <hr class="my-3">
 這裡愛寫啥都行
 
 @slot('actions')
 {!! bs()->a('#', '這是個連結按鈕')->asButton('primary') !!}
 @endslot
 @endcomponent
 ```
 
[![到GitHub觀看此單元程式異動](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/34/to_github.png)](https://github.com/tad0616/exam56/commit/e997cf27bdf8685033a3291f8a5fdc42247928fe)

:::

書籍目錄

展開 | 闔起

快速登入

進階搜尋

https%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fmarkdown.php%3Ftbdsn%3D1177

計數器

今天：
昨天：
總計：

MarkDown

書籍目錄

快速登入

計數器