Title : 側邊欄
Description: 從側邊滑出來，然後又滑回去了。
Outline : |
在 Tocas UI 中並沒有漢堡選單（類似 Bootstrap 的響應式選單），因為那較不直覺，容易令人猜測選單的出現位置。為了解決這個問題 Tocas UI 有著類似原生應用程式一樣的選單。
側邊欄只能用於網頁最頂層，而不能嵌套在頁面上的容器內。但為了良好地示範側邊欄的應用，這個頁面上有稍微修改令側邊欄能夠套入容器中。
Definitions:
- Title : 頁面佈局
Description: 一但使用了側邊欄，你就必須更改頁面結構。
Sections :
- Title : 頁面推動器和側邊欄
Description: 側邊欄出現時會將頁面向特定方向推動，為了達到這個效果，網頁中 `` 的結構就必須像下面這樣做。
type : code
Since : 2.3.3
HTML : |
- Title : 擠壓的推動器
Description: 通常來說側邊欄出現時，會將頁面往某個方向推。但你能讓頁面呈現被擠壓而不是被推出螢幕外。如果你有一個常態的功能側邊欄就很適合使用這種推動器。
type : code
Since : 2.3.3
HTML : |
- Title : 種類
Description: 側邊欄具有不同的種類。
Sections :
- Title : 基本
Description: 一個最基本的側邊欄會帶有內距，你能夠在內部擺置其他元件。
type : sidebar
Since : 2.3.3
HTML : |
- Title : 垂直選單
Description: 側邊欄也能夠是一個由選單元件所組成的，這會很常用到。搭配 `inverted` 的反色語氣能讓側邊選單更加的明顯。
type : sidebar
Since : 2.3.3
HTML : |
- Title : 狀態
Description: 側邊欄和相關的元件有不同的狀態。
Sections :
- Title : 靜態顯示
Description: 側邊欄在預設情況下是隱藏的，你可以手動將其保持在顯示狀態。
type : sidebar
Since : 2.3.3
HTML : |
- Title : 外觀
Description: 側邊欄有著不同的外觀點綴。
Sections :
- Title : 水平方向
Description: 一個側邊欄必須要指定在螢幕上呈現的方向。
type : sidebar
Since : 2.3.3
HTML : |
- Title : 覆蓋的
Description: 側邊欄一般來說會將網頁內容往旁邊推，但你可以讓側邊欄是覆蓋並浮在頁面上的。這麼做的話頁面內容就不會被推到一旁。
type : sidebar
Since : 2.3.3
HTML : |
- Title : 無內距
Description: 側邊欄可以沒有內距，這很適合擺放流動寬度的元件。
type : sidebar
Since : 2.3.3
HTML : |
- Title : 增加內距
Description: 你可以增加側邊欄的內距，看起來會更寬闊。
type : sidebar
Since : 2.3.3
HTML : |
- Title : 寬度
Description: |
你可以更改側邊欄的寬度。
|
64px |
180px |
230px |
300px |
360px |
| 樣式名稱 |
`very thin` |
`thin` |
預設 |
`wide` |
`very wide` |
| 中文稱呼 |
非常窄 |
窄的 |
|
寬的 |
非常寬 |
| 行動裝置全寬 |
|
|
|
|
|
type : sidebar
Since : 2.3.3
HTML : |
Modules:
- Title : JavaScript
Description: 側邊欄有提供可用的 JavaScript 模塊。
Sections :
- Title : 顯示切換
Description: |
你需要透過 JavaScript 才能夠切換側邊欄的出現與消失。
|
註釋 |
| show |
顯示指定側邊欄。 |
| hide |
隱藏指定側邊欄。 |
| toggle |
切換側邊欄。當側邊欄是隱藏時會顯示、顯示時則隱藏。 |
type : code
Since : 2.3.3
HTML : |
JavaScript: |
ts('.left.inverted.sidebar').sidebar('toggle');
- Title : 選項
Description: |
你能夠透過選項初始化並設置側邊欄的特性。
|
預設值 |
註釋 |
| dimPage |
false |
是否要在側邊欄出現時將主畫面淡化。 |
| exclusive |
false |
是否僅允許頁面上同時只會出現一個側邊欄，若為是，則會在開啟該側邊欄的同時關閉其他側邊欄。 |
| scrollLock |
false |
是否要在側邊欄出現時鎖定螢幕捲軸的滾動。 |
| closable |
true |
是否允許使用者點擊主畫面將側邊欄關閉。 |
type : code
Since : 2.3.3
HTML : |
JavaScript: |
ts('.left.sidebar:not(.inverted)').sidebar({
dimPage: true,
scrollLock: true
}).sidebar('toggle');