lion下載 - lion原始碼下載

lion

其他源碼

0.17.2

下載

獅子

網站·基礎知識·指南·組件·博客

Lion 是一組高效能、可存取且靈活的 Web 元件。

它們提供了一個不固定的白標籤層，可以擴展到您自己的組件層。

高效能：專注於在所有相關瀏覽器中以最少的依賴項提供出色的效能。
可訪問性：旨在符合 WCAG 2.2 AA 標準，創建每個人都可以存取的組件。
靈活性：透過 Web 元件和 JavaScript 類別提供解決方案，可以使用、採用和擴充以滿足所有需求。
現代程式碼： Lion 作為純 es 模組分發。
公開函數/類別和 Web 元件：以最合適的形式提供功能。

注意：我們的演示範例可能看起來很簡單而且不太時尚。這是故意的。它們被設計為基本的，因此您可以輕鬆地在其中添加自己的樣式以匹配您的預期設計，而無需處理現有的樣式。

探索獅子指南 ▶

如何安裝

npm 我@lion/ui

如何使用

擴充 Web 元件

這是 lion 的主要用例。導入元件類，並將其擴展為您自己的設計系統的元件。

從 'lit' 導入 { css };從 '@lion/ui/input.js' 導入 { LionInput };class MyInput 擴充 LionInput {
  static get styles() {return [ super.styles, css` /* 這裡是你的樣式 */ `,];
  }}customElements.define('my-input', MyInput);

使用 JavaScript 系統

lion 中有幾個具有 JavaScript API 的「系統」。範例有localize 、 overlays 、 ajax等。

 <腳本類型=“模組”>
  從'@lion/ui/ajax.js'導入{ajax}；

  ajax.fetch('data.json').then(response => response.json()).then(data => { // 對資料執行一些操作});</script>

使用 Web 元件

您也可以直接使用 lion 元素，儘管這可能不是常見的用例。

 <腳本類型=“模組”>
  導入 '@lion/ui/define/lion-input.js';</script><lion-input name="firstName"></lion-input>

問題

如果您遇到我們提供的任何軟體包的問題，請開啟一個新的錯誤問題。請務必包含對預期行為和當前行為的描述 - 額外添加複製品總是有幫助的。

功能請求

當您對我們如何改進有想法時，請查看我們的討論，看看是否有類似的想法或功能請求。如果沒有，請將您的功能請求作為新的討論主題開始。添加標題[Feature Request] My awesome feature以及您對改進的期望以及用例的描述。

內容

姓名	版本	描述
@lion/ui		組件集
@lion/ajax		一個圍繞著 fetch 的小包裝
單例管理器		單例管理器提供了一種方法來確保從多個檔案位置載入的單例實例保持單例。如果使用帶有單例的套件的兩個主要版本，則主要有用。
Babel 外掛擴充文檔		一個根據配置重寫導入和模板的插件。這使得可以重複使用來源包中的現有文檔，同時仍使用擴充程式碼。
普羅維登斯分析		普羅維登斯是“全視之眼”，透過分析程式碼產生使用統計資料。它衡量軟體的有效性和受歡迎程度。只需幾個命令，您就可以衡量（重大）變更的影響，使您的發布流程更加穩定和可預測。
發布文件		複製和處理您的文件（在單一儲存庫中）的工具，以便可以將其與您的包一起發布/發送。
備註延伸		一個用於透過從來源檔案匯入來擴展 Markdown 的備註插件。
火箭預設擴展獅子文檔		當維護您自己的 lion 擴充層時，您很可能會想要維護類似的文件。複製和重寫 Markdown 文件是可行的，但每當有東西改變時，你就需要再次複製和重寫。若要自動執行此操作，您可以使用火箭的此預設。