新聞中心
在產(chǎn)品發(fā)布新版本或者有新功能上線時(shí),經(jīng)常需要新手引導(dǎo)功能來引導(dǎo)用戶了解應(yīng)用。下面就來分享幾個(gè)開箱即用的新手引導(dǎo)組件工具庫,幫你快速實(shí)現(xiàn)新手引導(dǎo)功能!

成都創(chuàng)新互聯(lián)公司是一家網(wǎng)站設(shè)計(jì)公司,集創(chuàng)意、互聯(lián)網(wǎng)應(yīng)用、軟件技術(shù)為一體的創(chuàng)意網(wǎng)站建設(shè)服務(wù)商,主營產(chǎn)品:響應(yīng)式網(wǎng)站建設(shè)、成都品牌網(wǎng)站建設(shè)、營銷型網(wǎng)站。我們專注企業(yè)品牌在網(wǎng)站中的整體樹立,網(wǎng)絡(luò)互動(dòng)的體驗(yàn),以及在手機(jī)等移動(dòng)端的優(yōu)質(zhì)呈現(xiàn)。網(wǎng)站制作、做網(wǎng)站、移動(dòng)互聯(lián)產(chǎn)品、網(wǎng)絡(luò)運(yùn)營、VI設(shè)計(jì)、云產(chǎn)品.運(yùn)維為核心業(yè)務(wù)。為用戶提供一站式解決方案,我們深知市場的競爭激烈,認(rèn)真對(duì)待每位客戶,為客戶提供賞析悅目的作品,網(wǎng)站的價(jià)值服務(wù)。
Intro.js
Intro.js 是一個(gè)使用廣泛的產(chǎn)品引導(dǎo)庫,它在 Github 上擁有 21.6k Star。其具有以下特點(diǎn):
- 無依賴:它不需要任何其他依賴。
- 小而快:庫文件較小使得引導(dǎo)過程流暢直觀。JavaScript 文件的整體大小為 10KB,CSS 為 2.5KB。
- 用戶友好:提供可以根據(jù)喜好選擇的各種主題。
- 瀏覽器兼容性:適用于所有主流瀏覽器,如 Google Chrome、Mozilla Firefox、Opera、Safari 等 。
- 文檔完善:文檔包含要介紹的每個(gè)元素的樣本和示例。
圖片
Github:https://github.com/usablica/intro.js
shepherd
Shepherd 在 Github 上擁有 10.7k GitHub Star。它支持在多個(gè)前端框架中開箱即用,包括 React、Vue、Angular 等。其具有以下特點(diǎn):
- 輔助功能:提供鍵盤導(dǎo)航支持,遵循 a11y 規(guī)范,還可以使用 JavaScript 啟用 DOM 元素內(nèi)的焦點(diǎn)捕獲。
- 高度可定制:允許在不影響性能的情況下更改外觀。
- 框架支持:隨時(shí)融入項(xiàng)目的前端框架。
- 文檔完善:文檔涵蓋安裝和自定義,包括項(xiàng)目的主題和樣式。
圖片
- shepherd:https://github.com/shipshapecode/shepherd
- react-shepherd:https://github.com/shipshapecode/react-shepherd
- vue-shepherd:https://github.com/shipshapecode/vue-shepherd
- angular-shepherd:https://github.com/shipshapecode/angular-shepherd
React Joyride
React Joyride 在 GitHub 上擁有超過 5.1k Star,在 React 項(xiàng)目中開箱即用,用于向現(xiàn)有用戶介紹新功能。其具有以下特點(diǎn):
- 易于使用
- 高度可定制
- 文檔完善
- 積極維護(hù)
圖片
Github:https://github.com/gilbarbara/react-joyride
Vue Tour
Vue Tour 是一個(gè)輕巧、簡單且可自定義的新手指引插件,可以與 Vue.js 一起使用。它提供了一種快速簡便的方法來指導(dǎo)用戶使用應(yīng)用。它在 Github 上擁有 2.1 k Star。
圖片
Github:https://github.com/pulsardev/vue-tour
Reactour
Reactour 是一個(gè)用于創(chuàng)建 React 應(yīng)用導(dǎo)覽的流行庫。在 GitHub 上擁有 3.2K Star,它提供了一種簡單的方式來引導(dǎo)用戶瀏覽網(wǎng)站和應(yīng)用。
圖片
Github:https://github.com/elrumordelaluz/reactour
網(wǎng)頁題目:十分鐘搞定前端新手引導(dǎo)功能!
文章源于:http://m.fisionsoft.com.cn/article/cohephh.html


咨詢
建站咨詢
