weightless
1.0.0
このプロジェクトは、開発の終了に達しました。コードを閲覧してください。
足跡が少ない高品質のWebコンポーネント
このプロジェクトに興味を示してくれてありがとう！あなたが私たちのオクトキャットを養うのを手伝いたいなら、あなたは間違いなくスターゲイザーになるべきです。これらのWebコンポーネントは使用するように構築されています。それらは軽量で、単純なAPIを持っており、簡単に拡張して構成できます。デモhttps://weightless.dev/elementsをご覧ください。
デモを試してみるにはこちらをご覧ください。
$ npm i weightless
すぐに始めたい場合は、CLIを使用できます。
$ npm init web-config new my-project --lit
umdバンドルを使用する場合は、 https://unpkg.com/weightless/umd/weightless.min.jsをインポートできます。これはすべての要素をインポートすることに注意してください。そのため、テスト目的でのみ使用することをお勧めします。
< script src =" https://unpkg.com/weightless/umd/weightless.min.js " > </ script > | 名前 | タグ | 説明 | ドキュメント | デモ |
|---|---|---|---|---|
| 背景 | wl-backdrop | オーバーレイ要素の背後に使用する暗い層。 | ドキュメント | デモ |
| バナー | wl-banner | インターデュターなメッセージと関連するオプションのアクションを表示します。 | ドキュメント | デモ |
| ボタン | wl-button | 1回のタップでユーザーがアクションを実行し、選択を行うことができます。 | ドキュメント | デモ |
| カード | wl-card | グループ関連のコンテンツとアクション。 | ドキュメント | デモ |
| チェックボックス | wl-checkbox | オプションをオンまたはオフにします。 | ドキュメント | デモ |
| ダイアログ | wl-dialog | 非常に中断的なメッセージ。 | ドキュメント | デモ |
| 仕切り | wl-divider | リストとレイアウトのコンテンツをグループ化する細い線。 | ドキュメント | デモ |
| 拡大 | wl-expansion | 拡張可能な詳細サマリービューを提供します。 | ドキュメント | デモ |
| アイコン | wl-icon | 共通のアクションとアイテムのシンボル。 | ドキュメント | デモ |
| ラベル | wl-label | フォーム要素をよりアクセスしやすくします。 | ドキュメント | デモ |
| リストアイテムをリストします | wl-list-item | リストにアイテムを表示します。 | ドキュメント | デモ |
| nav | wl-nav | アプリ内の宛先へのアクセスを提供します。 | ドキュメント | デモ |
| ポップオーバー | wl-popover | コンテキストの固定要素 | ドキュメント | デモ |
| ポップオーバーカード | wl-popover-card | ポップオーバーに文脈的な才能を与えます。 | ドキュメント | デモ |
| 進捗バー | wl-progress-bar | 0％から100％のバーを埋めます。 | ドキュメント | デモ |
| 進捗スピナー | wl-progress-spinner | 0％から100％の円を埋めます。 | ドキュメント | デモ |
| 無線 | wl-radio | セットから1つのオプションを選択します。 | ドキュメント | デモ |
| 波紋 | wl-ripple | タッチアクションを示します。 | ドキュメント | デモ |
| 選択します | wl-select | 一連のオプションから1つ以上の値を選択します。 | ドキュメント | デモ |
| スライダー | wl-slider | さまざまな価値から選択を行います。 | ドキュメント | デモ |
| スナックバー | wl-snackbar | 画面の下部に簡単なメッセージを提供します。 | ドキュメント | デモ |
| スイッチ | wl-switch | オプションをオンまたはオフにします。 | ドキュメント | デモ |
| タブ | wl-tab | コンテンツのグループ間でナビゲーションを整理します。 | ドキュメント | デモ |
| タブグループ | wl-tab-group | コンテンツのグループ間でナビゲーションを整理します。 | ドキュメント | デモ |
| 文章 | wl-text | 段落にテキストをグループ化します。 | ドキュメント | デモ |
| Textarea | wl-textarea | マルチラインテキストフィールド。 | ドキュメント | デモ |
| テキストフィールド | wl-textfield | シングルラインテキストフィールド。 | ドキュメント | デモ |
| タイトル | wl-title | 新しいセクションの開始を示します。 | ドキュメント | デモ |
| ツールチップ | wl-tooltip | 有益なコンテキスト関連テキスト。 | ドキュメント | デモ |
ロードマップにはたくさんのエキサイティングなものがあります。 v1.0.0まで、APIはかなり安定していると予想できますが、リファクタリングはまだ発生し、後方の互換性を破る可能性があります。ライブラリを使用したり、プルリクエストを作成したり、問題を追加したりできます。
このリポジトリに貢献することは大歓迎です！以下は、開発のためのプロジェクトをセットアップする方法に関するいくつかの指示です。
git clone https://github.com/andreasbm/weightless.git実行することにより、このリポジトリをクローンします。npm iを実行して、すべての依存関係をインストールします。npm run sで開発サーバーをスピンアップします。ブラウザは、正しいURLで自動的に開かれる必要があります。そうでない場合は、ブラウザを開いてhttp://localhost:1350にアクセスできます。npm run testでテストを実行します。npm run lintでファイルをリントします。npm run docsを実行してドキュメントをコンパイルします。要素はTypeScriptで記述されており、StyleSheetsはSASSで記述されています。すべてのWebコンポーネントはLit-Elementを使用しています。
あなたがどのように支援できるかについてもっと知りたい場合は、あなたが貢献している.mdファイルを絶対にチェックアウトする必要があります。すべての貢献者は、以下の貢献者セクションに追加されます。
| アンドレアス・メルセン | あなた？ |
MITの下でライセンスされています。
