福爾摩沙　太平洋島嶼上的孩子們

原圖 by Clker-Free-Vector-Images on Pixabay

如何製作進度條（Progress Bar）？

1. 進入「Notion」平台

2. 在頁面上欲顯示進度條的區塊輸入「/」

3. 從下拉式清單中點選「Database - Inline」

4. １個資料庫表格產生

5. 在資料庫表格中新增２個數字欄位屬性（Property），一個是計算進度條的分子

6. 在資料庫表格中新增２個數字欄位屬性（Property），一個是計算進度條的分母

7. 在資料庫表格中新增１個公式欄位屬性（Property），名稱為「進度」，用以製作進度條

8. 點擊欄位「進度」之下的一個方格，跳出輸入公式框

9. 輸入公式的格式如下（藍色部分可隨自己想要或需求變更調整）：

format(slice("已完成部分進度條呈現形式", 0, floor(prop("已完成（分子）") / prop("全部完成（分母）") * 10)) + format(slice("未完成部分進度條呈現形式", 0, ceil(10 - prop("已完成（分子）") / prop("全部完成（分母）") * 10)) + " " + format(round(prop("已完成（分子）") / prop("全部完成（分母）") * 100)) + "%"))

舉例說明如下：

slice("■■■■■■■■■■", 0, floor(prop("已完成（分子）") / prop("全部完成（分母）") * 10

進度條是由10個方格組成，計算出目前已完成進度，最後無條件捨去（），以10%為單位，已完成10%就取得一格 ■。

slice("□□□□□□□□□□", 0, ceil(10 - prop("已完成（分子）") / prop("全部完成（分母）") * 10

進度條是由10個方格組成，計算出目前未完成進度，最後無條件進位（），以10%為單位，未完成10%就取得一格 □。

round(prop("已完成（分子）") / prop("全部完成（分母）") * 100)) + "%"

將進度百分比四捨五入，在數字後面加上 % 表示百分比。

公式解釋如下：

●format () ，表示「公式」

●slice (text, number1, number2)，是從text文字中取數字number1 到數字 number2之間的字

●floor(number)，進行「無條件捨去」

●ceil(number)，進行「無條件進位」

●round(number)，進行「四捨五入」

10. 將公式範本中的「已完成（分子）」更換成資料庫表格的數字欄位屬性（Property）「分子」，將「prop("已完成（分子）")」部分刪除並點選數字欄位屬性（Property）「分子」

11. 將公式範本中的「已完成（分母）」更換成資料庫表格的數字欄位屬性（Property）「分母」，將「prop("已完成（分母）")」部分刪除並點選數字欄位屬性（Property）「分母」

12. 將公式範本按照現下自己的想要和需求變更調整後，點擊「Done」 完成公式設定

13. 進度條完成

14. 進度條呈現樣子之一的公式

██████████

▓▓▓▓▓▓▓▓▓▓

15. 進度條呈現樣子之二的公式

◆◆◆◆◆◆◆◆◆◆

◇◇◇◇◇◇◇◇◇◇

16. 進度條呈現樣子之三的公式

––––––––––

––––––––––

17. 三種進度條的呈現樣子

18. 在資料庫表格的數字欄位屬性（Property）「分子」和「分母」中分別輸入已完成進度的百分比數字，即顯示進度的進度條

可自由選擇搭配的特殊符號，變換各種進度條的呈現樣子。