Closed
Description
我目前使用Angular 15.2版
tocas 4.2.2版本(npm安裝)
沒有其他套件,純測試tocas4.2.2的專案
使用官網範例建立了一個簡單的新的四個JS功能的介面,未import js的狀態下,如圖
可以看到TAB的部分因為沒有JS,所以兩個頁面都出現在畫面上
接著import後重新編譯
angular.json
"scripts": [ "node_modules/tocas/dist/tocas.min.js" ]
style.css
@import '~tocas/dist/tocas.min.css';
可以看到tab功能及tooltip有正常運作
但選單模組,及模式切換並沒有正常的執行
另外我有寫了一個純html檔案,使用CDN來進行測試,功能都是正常的
想詢問一下,裡面有兩個正常運作,那引入JS應該沒有問題,我該怎麼去尋找錯誤的原因是在哪裡呢
順便附上測試用的頁面
<div class="ts-center">
<p>選單模組</p>
<div class="ts-box">
<div class="ts-content">
<button class="ts-button is-start-labeled-icon" data-dropdown="dropdown">
<span class="ts-icon is-chevron-down-icon"></span>
更多功能
</button>
<div class="ts-dropdown" data-name="dropdown">
<button class="item">新增檔案</button>
<button class="item">移至回收桶</button>
<button class="item">檢視資訊</button>
</div>
</div>
</div>
<p>工具提示</p>
<div class="ts-box">
<div class="ts-content">
<div class="ts-button is-icon" data-tooltip="收藏收藏收藏收藏收藏收藏收藏收藏收藏收藏收藏" data-position="top-start">
<span class="ts-icon is-heart-icon"></span>
</div>
</div>
</div>
<p>分頁模組</p>
<div class="ts-box">
<div class="ts-content">
<div class="ts-tab is-pilled">
<button class="item is-active" data-tab="logs">交易紀錄</button>
<button class="item" data-tab="info">帳戶資訊</button>
</div>
<div class="ts-space"></div>
<div class="ts-segment" data-name="logs">
你尚未有任何交易紀錄。
</div>
<div class="ts-segment" data-name="info">
你的帳戶目前有3000元。
</div>
</div>
</div>
<p>模式切換</p>
<div class="ts-box">
<div class="ts-content">
<button class="ts-button" data-toggle="btn:is-outlined" data-name="btn">
按我切換樣式 😮
</button>
</div>
</div>
</div>