• <acronym id="gvoe3"><meter id="gvoe3"><address id="gvoe3"></address></meter></acronym>
  • <pre id="gvoe3"></pre>
    <p id="gvoe3"><strong id="gvoe3"><small id="gvoe3"></small></strong></p>

  • <pre id="gvoe3"><label id="gvoe3"><xmp id="gvoe3">
      axure商城

      hfge.dark管理后臺組件庫介紹及使用說明

      • 版本:1810
      • 設計制作:【顥豐閣】·豐
      • 適用版本:Axure RP 8
      • 更新時間:2018-10-31

      主要功能說明

      1. 所有頁面通過內聯框架進行調用,配置完主框架后,內容頁面無需配置其他菜單、彈窗、消息提醒、導航、頁頭、頁尾等內容
      2. 暗黑系管理后臺風格
      3. 自適應瀏覽器大小
      4. 自動展示面包屑
      5. 多事件的支持錯誤信息提示的登錄框架
      6. 右上角浮動信息提示
      7. 左下角站內消息提示
      8. 全局彈窗組件
      9. 多集動態菜單框架
      10. 支持動態效果的頁面Tab組件
      11. 支持動態效果的開關切換組件
      12. 支持動態效果的基石查詢組件(包含多選和單選)
      13. 支持動態效果的復選組件
      14. 支持動態效果的滑動條組件
      15. 支持動態效果的列表式多選組件
      16. 支持動態效果的列表式單選組件
      17. 支持動態效果的下拉菜單
      18. 支持動態效果的下拉選項
      19. 常用靜態組件:普通信息提示、重要信息提示、按鈕、文本框、表格

      組件演示地址

      點擊此處查看組件演示

      https://axhub.im/pro/85027f87ad5b1835

      開始使用

      下載并導入組件

      點擊此處下載

      hfge.dark管理后臺全動態組件庫

      打開Axure RP 8,在左側元件庫中點擊:菜單 > 導入元件庫……
      ?

      選擇剛解壓縮出來的文件:hfge.dark_1810.rplib,導入完成后,看到新添加的元件庫,下面就可以開始使用了。

      全局設置

      在正式開始使用之前,需要先做一下全局設置。
      在菜單中找到:項目 > 頁面樣式編輯……
      配置背景色:#242635
      ?

      創建登錄頁

      新建一個頁面,命名為Login,在我們導入的組件中找到登錄窗口,拖動到頁面中,建議直接放到左上角0,0的位置,可以預覽看一下,整個登錄窗口會自動在頁面居中展示。
      ?

      修改提示信息

      1. 主窗口中雙擊新添加的組件,雙擊打開動態面板中的State 1狀態;
      2. 選中登錄按鈕,在右側屬性欄中可以看到不同的觸發事件;
      3. 雙擊用戶名密碼正確、用戶密碼錯誤、權限未開通即可修改對應的事件;
      4. 修改事件中的ErrMsg的值即為錯誤提示信息;
      5. 建議新增其他事件的時候,直接復制某一事件,進行修改即可保留交互方式。
        ?

      創建主頁面

      1. 左側頁面欄位中雙擊index,或創建一個新的頁面,并雙擊打開;
      2. 在左側元件庫中找到頁面框架-頁面主框架,并拖動到主頁面,放置到新頁面中0,0位置;
      3. 現在可以直接點擊預覽看一下初步的效果了;
      4. 可以選中初始化說明的動態面板,點擊刪除,并開始下一步的使用。

      主框架主要功能區域

      ?

      為了跟模塊化的進行設計,主框架中整合了眾多的常用功能,為了更好的使用,請勿刪除這些組件。

      設置按鈕的小紅點、面包屑的背景、內聯框架,請勿刪除,如果不需要使用,請設置為隱藏即可。
      框架中所有已經設置為組合的組合,請勿解除組合,有可能導致部分效果無法使用

      菜單設置

      一級導航菜單

      修改導航圖標

      • 如果要替換圖標,請下載SVG格式(推薦從http://www.iconfont.cn下載)
        ?
      • 雙擊需要修改圖標的選項,編輯選項的組合,可以看到如圖所示:
        ?
      • 下載后的圖標,拖動到頁面中(在圖標的組合里)
      • 在右側的屬性欄中點擊轉換SVG圖片為形狀
        ?
      • 點擊交互樣式設置中的鼠標懸停,在彈出窗口中配置鼠標懸停選中樣式,勾選線段顏色3BB19C,線寬:4,如圖所示:
        ??
      • 點擊樣式標簽,找到填充,修改顏色為E6E6E6
      • 修改新的圖標寬度為20(建議鎖定長寬比例進行修改)
      • 把原圖標刪除,把新圖標放到該圖標居中的位置(再次強調,不要解除組合,解除后將導致諸多菜單效果失效等問題

      修改導航名稱(將影響導航的浮動提示組件)

      直接選中一個導航按鈕(組合),修改其組合名稱即可,修改完成后,浮動的菜單名稱提示會自動顯示為導航按鈕的名稱。
      ?
      ?

      導航按鈕的增減

      刪除導航按鈕,建議從下往上刪除,不要從中間刪除,否則需要修改按鈕的交互事件。

      • 刪除按鈕直接刪除即可。
      • 增加按鈕,請選中最后一個按鈕,直接復制、粘貼,形成一個副本
      • 將復制出來的新組件,拖動到其他按鈕的下方,請務必對其
      • 修改該按鈕組合的鼠標移入時事件,雙擊其中的移動事件,在彈出窗口中修改Y坐標原有值+50(如:原來最后一個按鈕圖標的Y坐標為310,則在其下方的按鈕Y坐標修改為360即可)。

      二級菜單的配置

      雙擊二級菜單的區域,打開動態面板可以看到里面的動態面板狀態列表
      ?

      列表名稱跟到場菜單的名稱一一對應

      icon1狀態為二級菜單模式
      icon2狀態為帶有三級菜單的二級菜單模式
      setup狀態為底部菜單模式

      編輯二級菜單

      • 復制icon1,修改面板狀態標題為需要關聯的一級菜單(即圖標)的標題,進行一一對應
      • 雙擊打開新創建的面板狀態,可以看到菜單項
      • 修改每個菜單項的名稱和需要跳轉(在內聯框架中打開的頁面)
      • 新增菜單項,請在菜單組合中復制一個菜單項的副本,進行修改
        ?

      編輯帶有三級菜單的二級菜單

      • 復制icon2,修改面板狀態標題為需要關聯的一級菜單(即圖標)的標題,進行一一對應
      • 雙擊打開新創建的面板狀態,可以看到一個菜單項的動態面板,雙擊查看動態面板中存在收起展開兩個狀態,分別修改這兩個狀態中菜單項的文字和連接的目標頁面(同編輯二級菜單)即可
      • 新增二級菜單組,只需要復制這個動態面板,并放置在該動態面板的下方對齊,采用相同的方式進行編輯即可

      統一彈窗組件,所有內容頁中不需要單獨設置彈窗,統一在主框架中配置,即可實現所有內聯頁面中的彈窗事件觸發

      在主框架中有一個隱藏的動態面板組件:

      • 雙擊打開這個動態面板可以看到這個動態面板預制的兩個狀態,復制一個,修改標題為你需要觸發的動作,例如:保存設置
      • 雙擊打開它,編輯其中的內容,譬如我們修改成如下:
        ?

      注意:動態面板的狀態中的按鈕動作,請勿刪除,但可以增加您需要的事件;面板狀態標題一定要跟你觸發時調用的動作名稱保持一致。

      實戰演示

      之前我們已經完成了基礎框架的配置,現在我們假設我們要打開的內容頁面為page1,現在創建并打開page1是一個空白頁面。
      我們需要在主框架中的內聯框架中關聯這個頁面。
      雙擊頁面欄中的index,打開主框架,在中間內容區域雙擊內聯框架組件,在彈出窗口中選擇page1,表示index頁面打開時,在內聯框架中默認加載page1。
      我們在頁面page1中拖入我們的組件,來進行演示。

      Tab組件

      Tab組件支持鼠標懸停效果、選中效果,選中項默認僅有一個

      • 使用時,只需要修改tab的標題項即可
      • 刪除標題項可以直接刪除
      • 增加標題項只需要復制最后一個,往后排列,并調整相應的位置即可
      • 一般tab標簽與動態面板搭配使用

      狀態切換組件

      狀態切換組件,支持在開啟和關閉狀態之間進行切換,默認為開啟狀態,如果希望默認為關閉狀態,可以在屬性欄中將選中狀態去掉即可

      • 使用時,可以修改開啟和關閉的默認文字和附加動作
      • 分別編輯交互動作中開啟和關閉動作即可
      • 請勿刪除條件判斷
        ?

      即時查詢-多選組件&單選組件

      多選組件支持在文本框中輸入文字,下方展示查詢結果,通過鍵盤敲擊回車,即增加一個項目,最多支持3個項目,點擊任意項目即可刪除該項目,如果該項目不是最后一個項目,則后面的項目會自動前移動。
      單選組件與多選組件雷同,不再贅述。

      • 直接拖動到頁面中使用,可以修改提示文字信息

      復選框

      Axure自帶的組件比較丑陋,增加了個自制的,直接拖入頁面中使用即可,可修改成自己想要的文字,如果默認為選中,則直接在屬性欄中選擇選中即可。
      ?

      滑動條

      直接拖入頁面中使用,支持鼠標拖動事件,支持同步顯示數值百分比,由于長度計算的問題,不建議修改長度,如果要修改長度,可自行研究其組件的各項數值配置。

      下拉菜單&下拉選項

      支持點擊按鈕展開菜單/選項列表,選中后收起菜單/選項,并修改當前組件標題文字,直接拖入使用即可。

      其他組件

      均直接拖入使用即可,不再贅述。

      由于Axure 本身的問題,如果拖入的組件存在白底的問題,請將白底的背景色直接去掉即可。

      觸發站內消息

      我們以點擊按鈕觸發站內消息為例,消息內容為:您收到一條站內短信,請及時查看!

      • 拖入一個按鈕,修改按鈕文字為:站內消息
      • 在屬性欄中,雙擊鼠標單擊時動作,添加動作全局變量-設置變量值
      • 選擇msg變量,設置值為:您收到一條站內短信,請及時查看!
      • 完成。當用戶點擊這個按鈕時,主框架中就會彈出站內消息提示。
        ?

      觸發提示消息

      我們以點擊按鈕觸發通知消息為例,消息內容為:保存成功!

      • 拖入一個按鈕,修改按鈕文字為:提醒消息
      • 在屬性欄中,雙擊鼠標單擊時動作,添加動作全局變量-設置變量值
      • 選擇pop_msg變量,設置值為:保存成功!
      • 完成。當用戶點擊這個按鈕時,主框架中就會彈出提示消息。
        ?

      觸發彈窗

      我們以點擊按鈕觸發通知消息為例,消息內容為:保存成功!

      • 拖入一個按鈕,修改按鈕文字為:保存設置
      • 在屬性欄中,雙擊鼠標單擊時動作,添加動作全局變量-設置變量值
      • 選擇pop_window_name變量,設置值為:保存設置(我們之前創建了一個彈窗的動態面板,面板狀態名稱為:保存設置,這個名稱一定要對應,否則無法實現彈窗)
      • 完成。當用戶點擊這個按鈕時,主框架中就會彈出我們之前設置的保存設置的彈窗。
        ?

      給TA買糖
      共{{data.count}}人
      人已贊賞
      Axure教程

      中繼器的新增、刪除、篩選教程(原型下載)

      2018-11-2 21:43:29

      Axure教程

      【元件庫】簡潔大氣后臺系統元件庫—Inspinia最新前端元件庫

      2018-11-7 22:23:00

      axure商城
      0 條回復 A文章作者 M管理員
        暫無討論,說說你的看法吧
      ?
      個人中心
      購物車
      優惠劵
      今日簽到
      有新私信 私信列表
      搜索
      俄罗斯videoxxxoo
    1. <acronym id="gvoe3"><meter id="gvoe3"><address id="gvoe3"></address></meter></acronym>
    2. <pre id="gvoe3"></pre>
      <p id="gvoe3"><strong id="gvoe3"><small id="gvoe3"></small></strong></p>

    3. <pre id="gvoe3"><label id="gvoe3"><xmp id="gvoe3">