# 超級樣板的設計範例
![image.png](https://hackmd.io/_uploads/HkZ29pUQT.png)
## 使用範例參數
![image.png](https://hackmd.io/_uploads/S1QMLTU7a.png)
```
輸入 {{}} 可產生一個輸入框
輸入 {{ 欄位名稱 }} 可產生一個具有欄位名稱的輸入框
輸入 {{ 欄位名稱 || 預設值 }} 可產生一個具有欄位名稱的輸入框,且有預設值
輸入 {{ 欄位名稱 || 選項一, 選項二, 選項三 || s}} 可產生一個具有欄位名稱的下拉選單,且預設值為第一個選項
輸入 {{ 欄位名稱 || 選項一, 選項二, 選項三 , 選項四 , 選項五, 選項六 || c ||選項三 , 選項五}} 可產生一個具有欄位名稱的複選框,且有預設值
輸入 {{ 欄位名稱 || 選項一, 選項二, 選項三 , 選項四 , 選項五, 選項六 || r || 選項六 }} 可產生一個具有欄位名稱的單選框,且有預設值
```
```
c 和 r 的撰寫公式 => {{ 欄位名稱 || 選項 || 類型 || 預設值 }}
```
> s:下拉選單 select 、 c:多選框 checkbox 、 r:單選框 radio button
### 產生欄位的識別
![image.png](https://hackmd.io/_uploads/HkPgu6Lmp.png)
> 產生欄位的判斷方式,會以整個 {{ xx }} 當做識別,所以即使文字都一樣,但多一個空格,也會被視為不一樣的欄位喔 !
## 常見的欄位填充
![image.png](https://hackmd.io/_uploads/SJSbdmHQp.png)
```
你現在是一位 {{ 角色 || 行銷人員 }} ,幫我想出介紹 {{ 物品 }} 的宣傳文,字數限制 {{ 字數 || 300 }} 字。
```
## 下拉選單的設計
![image.png](https://hackmd.io/_uploads/Bk8a_XHXT.png)
```
請幫我把以下的程式碼
{{附上程式碼}}
從 {{ 程式語言 || Jquery, Javascript, Angular, ReactJs, VueJs || s }} 轉換成 {{ 轉換的程式語言 || Javascript, Angular, ReactJs, VueJs, Jquery || s }} ,
請不要直接模仿 {{ 程式語言 || Jquery, Javascript, Angular, ReactJs, VueJs || s }} 實現方式,
請參考 {{ 轉換的程式語言 || Javascript, Angular, ReactJs, VueJs, Jquery || s }} 的 官方 API 文件 和 開發者社群 的 撰寫規範與風格,
盡量使用 {{ 轉換的程式語言 || Javascript, Angular, ReactJs, VueJs, Jquery || s }} 官方的範例當參考來源。
```
## 單選框的設計
![image.png](https://hackmd.io/_uploads/Bke1F7S76.png)
```
我正在撰寫 {{ 語言 || javascript, c# || r || javascript }},
我有一個 {{ 函式或變數 || 函式, 變數 || r || 函式 }} 需要命名,功能如下
{{ 內容 }}
請根據 {{ 語言 || javascript, c# || r || javascript }} 命名風格,推薦我幾個的命名,與簡單說明原因。
```
## 多選框的設計
![image.png](https://hackmd.io/_uploads/rJglYXBma.png)
```
從以下不同的角度來思考這段話,至少提供30個字。
{{
思考方向
||
從正向的角度來思考這段話,
從逆向的角度來思考這段話,
用類比的方式思考這段話,
通過看它的影響來思考這段話,
從利益得失的角度來思考這段話
||
c
}}
這段話如下:
{{ 這段話 }}
```
> PS:快速回覆的拖拉改變順序功能,預計會在 1.1.5 版推出,此外目前單選框與多選框,選項太多會有跑版問題,也將會於 1.1.5 版進行修正。