Footer Toolbar 頁腳工具欄 | SAP Fiori

Intro 簡介

頁腳工具欄始終以懸浮頁腳的形式顯示在屏幕底部。浮動頁腳的屬性使屏幕和工具欄之間有一個間距围段,從而提高了可見性顾翼。

此控件用于影響整個頁面的關(guān)閉或完成操作。僅當(dāng)操作出現(xiàn)奈泪、消息處理可見或草稿指示符顯示時适贸,頁腳工具欄才可見。頁腳欄的主要優(yōu)點是涝桅,它始終可見拜姿,不會滾動離開。

我們的一般準(zhǔn)則是冯遂,僅使用圖標(biāo)按鈕或文本按鈕蕊肥。圖標(biāo)和文本不應(yīng)組合在一個按鈕中。按鈕始終右對齊蛤肌。
按鈕從常用按鈕到少用按鈕排序壁却。這確保了最重要的按鈕將最后進入 overflow。

Usage 用法

使用頁腳工具欄:
  • 如果頁面中有應(yīng)用于整個頁面的關(guān)閉或完成操作寻定。
不要使用頁腳工具欄:
  • 如果頁面中有不同的容器(例如圖表儒洛、表格和表單),并且操作僅影響其中某些項目狼速。在這種情況下琅锻,將操作放置在盡可能靠近項目的位置。
  • 如果非關(guān)閉或完成的全局操作(如,編輯或刪除)恼蓬。在這種情況下惊完,請使用標(biāo)題工具欄处硬。

Responsiveness and Adaptiveness 響應(yīng)性和適應(yīng)性

要啟用響應(yīng)性小槐,請使用 Overflow Toolbar 控件凿跳。更多相關(guān)信息,請參閱 toolbar overview 文章中相應(yīng)的部分疮方。

在桌面(緊湊模式)控嗜、平板電腦、和智能手機(舒適模式)上骡显,工具欄的高度會相應(yīng)變化疆栏。有關(guān)舒適和緊湊模式的更多信息,請參閱 content density惫谤。

FooterToolbar - Size S.png

FooterToolbar - Size M.png

FooterToolbar - Size L.png


Components 組件

頁腳工具欄可包含以下組件:

  • 消息指示器
  • 草稿指示器
  • 完成 / 關(guān)閉操作


    Examples of possible components .png

所有的關(guān)閉和完成操作都放置在工具欄右側(cè)壁顶。
頁腳工具欄還可以包含消息和草稿指示器。更多相關(guān)信息溜歪,請參閱 draft handlingmessaging若专。

Behavior and Interaction 行為和交互

我們的一般準(zhǔn)則是,僅使用圖標(biāo)按鈕或文本按鈕痹愚。圖標(biāo)和文本不應(yīng)組合在一個按鈕中富岳。按鈕始終右對齊。
按鈕從常用按鈕到少用按鈕排序拯腮。這確保了最重要的按鈕將最后進入 overflow窖式。

Styles 樣式

按鈕樣式應(yīng)當(dāng)用于幫助用戶,而不是用于裝飾动壤。
應(yīng)該為用戶主要使用的操作定義它們萝喘,比如,保存琼懊。
使用正向阁簸、負向或強調(diào)樣式的按鈕。避免在一個界面中同時使用這兩種樣式哼丈。

  • 例外:顯示消息按鈕
    有關(guān)更多信息启妹,請參閱 button

Guidelines 指南

請參閱 toolbar overview 文章中的 Guidelines 部分醉旦。


原文:Footer Toolbar | SAP Fiori Design Guidelines
備注:文章內(nèi)容翻譯自 SAP - Fiori Design Guidelines饶米。翻譯包含個人理解桨啃,僅作為個人學(xué)習(xí)筆記使用。如有錯誤檬输,求指正呀照瘾,非常感謝 ^^


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市丧慈,隨后出現(xiàn)的幾起案子析命,更是在濱河造成了極大的恐慌,老刑警劉巖逃默,帶你破解...
    沈念sama閱讀 217,185評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件鹃愤,死亡現(xiàn)場離奇詭異,居然都是意外死亡完域,警方通過查閱死者的電腦和手機昼浦,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,652評論 3 393
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來筒主,“玉大人,你說我怎么就攤上這事鸟蟹∥诿睿” “怎么了?”我有些...
    開封第一講書人閱讀 163,524評論 0 353
  • 文/不壞的土叔 我叫張陵建钥,是天一觀的道長藤韵。 經(jīng)常有香客問我,道長熊经,這世上最難降的妖魔是什么泽艘? 我笑而不...
    開封第一講書人閱讀 58,339評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮镐依,結(jié)果婚禮上匹涮,老公的妹妹穿的比我還像新娘。我一直安慰自己槐壳,他們只是感情好然低,可當(dāng)我...
    茶點故事閱讀 67,387評論 6 391
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著务唐,像睡著了一般雳攘。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上枫笛,一...
    開封第一講書人閱讀 51,287評論 1 301
  • 那天吨灭,我揣著相機與錄音,去河邊找鬼刑巧。 笑死喧兄,一個胖子當(dāng)著我的面吹牛无畔,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播繁莹,決...
    沈念sama閱讀 40,130評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼檩互,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了咨演?” 一聲冷哼從身側(cè)響起闸昨,我...
    開封第一講書人閱讀 38,985評論 0 275
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎薄风,沒想到半個月后饵较,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,420評論 1 313
  • 正文 獨居荒郊野嶺守林人離奇死亡遭赂,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,617評論 3 334
  • 正文 我和宋清朗相戀三年循诉,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片撇他。...
    茶點故事閱讀 39,779評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡茄猫,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出困肩,到底是詐尸還是另有隱情划纽,我是刑警寧澤,帶...
    沈念sama閱讀 35,477評論 5 345
  • 正文 年R本政府宣布锌畸,位于F島的核電站勇劣,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏潭枣。R本人自食惡果不足惜比默,卻給世界環(huán)境...
    茶點故事閱讀 41,088評論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望盆犁。 院中可真熱鬧命咐,春花似錦、人聲如沸谐岁。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,716評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽翰铡。三九已至钝域,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間锭魔,已是汗流浹背例证。 一陣腳步聲響...
    開封第一講書人閱讀 32,857評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留迷捧,地道東北人织咧。 一個月前我還...
    沈念sama閱讀 47,876評論 2 370
  • 正文 我出身青樓胀葱,卻偏偏與公主長得像,于是被迫代替她去往敵國和親笙蒙。 傳聞我的和親對象是個殘疾皇子抵屿,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,700評論 2 354