lion
0.17.2
ウェブサイト · 基本 · ガイド · コンポーネント · ブログ
Lion は、パフォーマンスが高く、アクセスしやすく、柔軟な Web コンポーネントのセットです。
これらは、独自のコンポーネント層に拡張できる、独自のホワイトラベル層を提供します。
高パフォーマンス:最小限の依存関係で、関連するすべてのブラウザーで優れたパフォーマンスを実現することに重点を置いています。
アクセシビリティ: WCAG 2.2 AA 標準に準拠して、誰でもアクセスできるコンポーネントを作成することを目的としています。
柔軟性: Web コンポーネントと JavaScript クラスを通じて、あらゆるニーズに合わせて使用、採用、拡張できるソリューションを提供します。
Modern Code: Lion は純粋な es モジュールとして配布されます。
関数/クラスと Web コンポーネントを公開します:機能を最も適切な形式で提供します。
注: 私たちのデモの例はシンプルであまりスタイリッシュではないように見えるかもしれません。これはわざとです。これらは基本的に設計されているため、既存のスタイルを使用することなく、目的のデザインに合わせて独自のスタイルを簡単に追加できます。
ライオン ガイドを詳しく見る ▶
npm i @lion/ui
これは lion の主な使用例です。コンポーネント クラスをインポートし、独自のデザイン システムのコンポーネント用に拡張します。
import { css } from 'lit';import { LionInput } from '@lion/ui/input.js';class MyInput extends LionInput {
static getstyles() {return [ super.styles, css` /* スタイルをここに */ `,];
}}customElements.define('my-input', MyInput);lion には JavaScript API を備えた「システム」がいくつかあります。例としては、 localize 、 overlays 、 ajaxなどがあります。
<script type="モジュール">
'@lion/ui/ajax.js' から { ajax } をインポートします。
ajax.fetch('data.json').then(response => response.json()).then(data => { // データを使って何かを行う});</script>一般的な使用例ではない可能性がありますが、ライオン要素を直接使用することもできます。
<script type="モジュール"> import '@lion/ui/define/lion-input.js';</script><lion-input name="firstName"></lion-input>
私たちが提供しているパッケージのいずれかで問題が発生した場合は、新しいバグの問題を開いてください。予想される動作と現在の動作の説明を必ず含めてください。再現内容を追加すると常に役に立ちます。
改善方法についてアイデアがある場合は、ディスカッションをチェックして、同様のアイデアや機能リクエストがあるかどうかを確認してください。何もない場合は、新しいディスカッション トピックとして機能リクエストを開始してください。 [Feature Request] My awesome featureタイトルを追加し、改善に期待する内容と使用例の説明を追加します。
| 名前 | バージョン | 説明 |
|---|---|---|
| @ライオン/うい | コンポーネントのセット | |
| @ライオン/アヤックス | フェッチに関する小さなラッパー | |
| シングルトンマネージャー | シングルトン マネージャーは、複数のファイルの場所からロードされたシングルトン インスタンスがシングルトンのままであることを確認する方法を提供します。シングルトンを含むパッケージの 2 つのメジャー バージョンが使用される場合に主に役立ちます。 | |
| Babel プラグイン拡張ドキュメント | 設定に応じてインポートやテンプレートを書き換えるプラグイン。これにより、拡張コードを使用しながら、ソース パッケージから既存のドキュメントを再利用できます。 | |
| プロビデンス分析 | Providence は、コードを分析して使用状況の統計を生成する「All Seeing Eye」です。ソフトウェアの有効性と人気を測定します。いくつかのコマンドを使用するだけで、(重大な) 変更の影響を測定できるため、リリース プロセスがより安定し、予測可能になります。 | |
| ドキュメントを公開する | ドキュメントを (モノリポジトリ内で) コピーして処理し、パッケージとともに公開/配布できるようにするツール。 | |
| 備考延長 | ソースファイルからインポートしてマークダウンを拡張するリマーク用プラグイン。 | |
| ロケットプリセット拡張ライオンドキュメント | Lion の独自の拡張層を保守する場合、おそらく同様のドキュメントを保守する必要があります。マークダウン ファイルのコピーと書き換えは機能しますが、何かが変更されるたびにコピーして再度書き直す必要があります。これを自動的に行うには、ロケットにこのプリセットを使用します。 |
Lion Web Components は、将来性を備え、十分にサポートされた実績のあるテクノロジーを使用することを目指しています。私たちが選択したスタックはこれを反映しているはずです。
点灯
npm
オープンWebコンポーネント
最新のウェブ
モカ
チャイ
ESLint
より美しい
ESモジュール
たくさんのテスト
私たちは経験から、高品質でアクセスしやすい UI コンポーネントを作成するのは難しく、時間がかかることを知っています。あらゆるコンテキストで動作し、多くのエッジ ケースをサポートし、関連するすべてのスクリーン リーダーでアクセスできます。
Lion は、面倒な作業をあなたに代わって行うことを目指しています。つまり、スタイルを提供し、コンポーネントを構成し、その上に最小限のカスタム ロジックを追加することによって、独自のデザイン システムを適用するだけで済みます。
詳細については、コーディング ガイドラインをご覧ください。
注意:このプロジェクトは Npm ワークスペースを使用します。すべてのデモをローカルで実行したい場合は、少なくとも npm 7 以降を入手し、 npm install実行してすべての依存関係をインストールする必要があります。
Lion Web コンポーネントの良さは、その貢献によって決まります。私たちの貢献ガイドを読んで、Lion を自由に強化/改善してください。機能リクエストに取り組んでいない間は、機能リクエストを閉じたままにします。
フィードバックや質問がある場合は、お気軽に github の問題を作成してください。
