# 超級樣板的設計範例 ![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 版進行修正。