chayns components
v4.20.24
Chayns®アプリケーションを開発するための美しい反応コンポーネントのセット。
まずchayns-componentsパッケージをプロジェクトにインストールする必要があります。
# Yarn
yarn add chayns-components
# NPM
npm install chayns-componentsコンポーネントのスタイルはchayns-cssライブラリを介して提供されており、一部のコンポーネントもchayns-js APIに依存しているため、HTMLにこれらを含める必要があります。
<!-- CSS styles -->
< script
src =" https://api.chayns-static.space/css/v4/compatibility/compatibility.min.js "
version =" 4.2 "
> </ script >
<!-- JS api -->
< script src =" https://api.chayns-static.space/js/v4.0/chayns.min.js " > </ script > 次のコンポーネントはこのパッケージの一部です。
| 成分 | 説明 |
|---|---|
| アコーディオン› | アコーディオンは、永続的に見えるヘッダーとの対話によって切り替える折りたたみ可能なセクションです。 |
| 額コントロール› | 額コントロールは、増分値を増加または減少させるために使用される3セグメント制御です。 |
| AnimationWrapper› | AnimationWrapperは、子供に人目を引く初期アニメーションを提供します。 |
| バッジ› | バッジは、他のコンポーネントをグランス可能な情報で飾るために使用される小型の円形の容器です。 |
| バブル› | 主にContextMenuとTooltipコンポーネントの電源を供給するために使用されるフローティングバブル。 |
| ボタン > | ボタンはアクションを開始し、タイトルまたはアイコンを含めることができ、事前定義されたスタイルのセットを備えています。 |
| カレンダー› | 指定された日付を強調できるインタラクティブなグリッドカレンダー。 |
| チェックボックス› | チェックボックスを使用すると、ユーザーはオプションの選択などの選択を行うことを伴うタスクを完了できます。スイッチとしてスタイリングできます。これは、2つの相互に排他的な状態を視覚的に切り替えます。 |
| ColorPicker› | テキスト、形状、マーキングツール、およびその他の要素の色をユーザーに選択できます。 |
| Colorscheme› | すべての子供コンポーネントの配色を調整します。 |
| コンボボックス› | 人々が選択できる明確な値のスクロール可能なリストを含むドロップダウンがあるボタン。 |
| ContextMenu› | インターフェイスを乱雑にすることなく、画面上のアイテムに関連する追加の機能にアクセスできます。 |
| dateinfo› | 簡単に読みやすくする日付または日付の範囲をフォーマットし、ホバーの絶対日付を明らかにします。 |
| emojiinput› | 絵文字を入れることを可能にするテキスト入力。 |
| ExpandAbleContent› | 高さの移行で子供を明らかにする折りたたみ可能なセクション。 |
| fileInput› | ダイアログまたはドラッグアンドドロップを介して指定されたファイルタイプを受け入れます。 |
| FilterButton› | リストのフィルタリングに使用されるチップのようなコンポーネント。通常、2つ以上のグループで使用されます。 |
| formattedInput› | フォーマッタで入力を自動的にフォーマットするテキスト入力。このコンポーネントはInput -Componentに基づいているため、 Input -Components Propsのいずれかを取得しますが、ここにはリストされていません。このコンポーネントは、制御されていないコンポーネントとしてのみ機能します。つまり、 value -Propを取得しません。 |
| ギャラリー› | デフォルトで最大4つの画像を表示する画像ギャラリー。また、 tsimg.cloudからロードされた画像の画像の並べ替えと削除とぼやけた画像プレビューもサポートします。 |
| アイコン› | フォンテソンアイコンを表示します。 |
| ImageAccordion› | 大きな画像を持ち、グリッドに表示されるアコーディオン。 ImageAccordionGroup内で使用する必要があります。 |
| ImageAccordionGroup› | いくつかのImageAccordionコンポーネントをグループ化するため、一度に開くことができるのはそのうちの1つだけです。 |
| 入力› | さまざまなデザインで検証および装飾できるテキスト入力。 |
| リスト› | リストを作成するListItem -Componentのラッパー。 |
| ListItem› | リスト内の項目は、構造化された形式で関連データを表示します。 Listコンポーネント内で使用する必要があります。 |
| openingtimes› | 営業時間の入力。 |
| Personfinder› | 任意のデータを使用するようにカスタマイズできる人のオートコンプリート検索。 |
| PositionInput› | マップとテキスト入力を備えたロケーション入力。これには、GoogleマップJavaScript APIがPlaces Libraryが有効になっている必要があります。マップAPIの詳細については、こちらをご覧ください。 |
| ProgressBar› | アクションの進行状況またはローディングスピナーのような不確定状態を示すことができるアニメーションの進行状況バー。 |
| RadioButton› | 複数のオプションのいずれかを選択できるラジオボタン。 |
| rfidinput› | RFID信号を取得するコンポーネント。 |
| scrollview› | すべてのデバイスで見栄えの良いカスタムスクロールバーを備えたスクロール可能なコンテナ。 |
| SearchBox› | エントリのリストを検索するためのオートコンプリート入力。 |
| SelectButton› | クリックしたときに[選択]ダイアログを開く[選択]ボタン。 |
| selectItem› | 選択したときにコンテンツを展開するラジオボタン。 SelectListの内部で使用する必要があります。 |
| selectlist› | 選択したときにコンテンツを明らかにするラジオボタンの垂直リスト。 |
| SetupWizard› | ユーザーが順次通過する必要がある一連のステップ。 |
| setupWizarditem› | SetupWizardの1つのステップを表すアイテム。 |
| SharingBar› | さまざまなプラットフォームでリンクといくつかのテキストを共有するためのコンテキストメニュー。 |
| サイン > | ユーザーを購読させるコンポーネント |
| スライダー› | 最小値と最大値の間で移動できる親指を持つ水平トラック。 |
| SliderButton› | 相互に排他的なボタンの線形セット。 |
| SmallWaitCursor› | 小さな円形荷重指標。 |
| Taginput› | 値をタグとしてグループ化できるようにするテキスト入力。 |
| Textarea› | コンテンツとともに自動的に成長できるマルチラインテキスト入力。 |
| テキストストリング› | データベースからテキスト文字列をロードして表示します。交換を処理し、 CTRL + Click （内部のみ）を介して文字列を変更します。 |
| ツールチップ› | 子コンポーネントをラップし、子供がホバリングまたはクリックしたときにメッセージを表示します。参照で.show()または.hide()を呼び出すことにより、有効に表示できます。 |
| 検証象› |
また、共通のユーティリティ関数のセットも提供します。
| 関数 | 説明 |
|---|---|
| ImageUpload | tsimg.cloudに画像をアップロードする機能 |
| Istobitemployee | ユーザーがTobitの従業員である場合は情報を取得します |
| CreateLinks | URLを持つ文字列からリンクを備えた文字列を作成します |
| removehtml | 文字列からHTMLタグを削除します |
| colorutils | 色の値を変換するためのユーティリティ関数（16進、RGB、HSV） |
| イコライザ | ユーティリティは、HTML要素の幅を均等にするために機能します |
chayns-componentsに貢献したい場合は、Convinting.mdファイルをご覧ください。
