# 選項控制項

## **下拉選單**

* 支持單選或多選，可帶入字典檔選項，支持進一步選項和連動群組。

## **組合框**

* 結合了下拉選單的功能，允許自由輸入文字，支持單選或多選，可帶入字典檔選項。

{% embed url="<https://youtu.be/M0olXpJ-ozo>" %}

## **單選按鈕**

* 單選選項，可自定義選項內容，支持進一步選項和連動群組。

{% embed url="<https://youtu.be/Uai1Xg-tKE0>" %}

## **核取方塊**

* 多選選項，可自定義選項內容，支持進一步選項和連動群組。

## 階層式選單

* 適合需要分級選擇的情境，支持進階選項和帶回文字設定。
* 當設計階層式選單時，我們用短橫線表示不同層次：「-」是第一層，「--」第二層，「---」第三層。階層後的文字指選單顯示內容，如「林口」。
* 若需要進階選項，可用「#number」表示，例如「#6」，這是選填的。設定「帶回文字」可讓選擇後帶回特定文字，如選擇「林口」帶回「林口長庚醫院」，也是選填的。

```csharp
// [--林口] {,#111,#222} {,"林口長庚醫院"}
// [] 必填 {} 選填

-北區
--台北
---松山
---信義
--桃園
---林口,#6,#8,"林口長庚醫院"
---龜山
--新竹
-南區


```

<figure><img src="https://1792893123-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdwFoogk3W80yJlNR060h%2Fuploads%2FFN0ekLzqrytrLUlARbFU%2F2024-01-28_level%20control.jpg?alt=media&#x26;token=eeedd8a0-3397-4b9d-ac6d-55bf7553d096" alt=""><figcaption><p>階層式選單說明</p></figcaption></figure>

<figure><img src="https://1792893123-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdwFoogk3W80yJlNR060h%2Fuploads%2F9Fd4BiCI7B3nSbfOHkAl%2F2024-01-28_level.gif?alt=media&#x26;token=1e2e8189-ddb9-43dc-a945-15bb9eebf0de" alt=""><figcaption><p>階層式選單示範</p></figcaption></figure>

{% embed url="<https://youtu.be/XJVtGizghDo>" %}
