webcoreui
1.0.0
重要
このライブラリはまだ早期に開発されています。新しい変更は既存の機能を破ることができ、この段階では機能を最終的に見なすべきではありません。ライブラリは、v1.0に達すると安定していると見なされます。
WebCoreUi.devで入手できます。
Webcoreは、スタンドアロンプロジェクトとして使用することも、既存のAstro、Svelte、またはReact Ecosystemsに統合することもできます。開始する最も簡単な方法は、リポジトリをクローンし、 npm run devを実行して、利用可能なコンポーネントを使用してページの構築を開始することです。
注記
始める前に、ノードなどのパッケージマネージャーがインストールされていることを確認してください。
Webcoreコンポーネントは、スタイリングにSASSを使用します。コンポーネントライブラリを使用するには、次のパッケージをインストールする必要があります。
v1.82v5.7プロジェクトのセットアップに応じて、次のパッケージも必要です。
v5.0v5.12v18.3v18.3次のコマンドのいずれかを実行して、依存関係としてWebCoreをインストールします。
# Using NPM
npm i webcoreui
# Using Yarn
yarn add webcoreuiCSS構成をセットアップするために、プロジェクトのルートに空のwebcore.config.scssファイルを作成します。グローバルSCSSファイルで以下を呼び出すことにより、デフォルトのスタイルとフォントをセットアップします。
@use ' webcoreui/styles ' as * ;
@include setup ((
// Define paths for your fonts
fontRegular: ' /fonts/Inter-Regular.woff2 ' ,
fontBold: ' /fonts/Inter-Bold.woff2 '
));ヒント
public/fontsディレクトリからWebcoreの使用をダウンロードできます。
Setupミキシンは、次のオプションを受け入れることもできます。
| 財産 | デフォルト値 | 目的 |
|---|---|---|
includeResets | true | リセットスタイルを含めます。独自のCSSリセットを使用する場合は、 falseに設定します。 |
includeUtilities | true | CSSのユーティリティクラスを追加します。利用可能なユーティリティクラスの詳細については、こちらをご覧ください。 |
includeTooltip | true | ツールチップを使用するためのスタイルを追加します。 |
includeScrollbarStyles | true | スクロールバーのスタイルを追加します。 |
デフォルトのコンポーネントスタイルは、次のCSS変数をオーバーライドすることで変更できます。
html body {
// Avatar component
--w-avatar-border : var ( --w-color-primary-70 );
// Banner component
--w-banner-top : 0 ;
// BottomNavigation component
--w-bottom-navigation-max-width : auto ;
// Checkbox component
--w-checkbox-color : var ( --w-color-primary );
// Collapsible component
--w-collapsible-initial-height : 0 ;
--w-collapsible-max-height : 100 % ;
// Masonry component
--w-masonry-gap : 5 px ;
// Progress component
--w-progress-color : var ( --w-color-primary );
--w-progress-background : var ( --w-color-primary-50 );
--w-progress-stripe-light : var ( --w-color-primary );
--w-progress-stripe-dark : var ( --w-color-primary-10 );
// Radio component
--w-radio-color : var ( --w-color-primary );
// Rating component
--w-rating-color : var ( --w-color-primary );
--w-rating-empty-color : var ( --w-color-primary );
--w-rating-empty-background : var ( --w-color-primary-70 );
--w-rating-size : 18 px ;
// Ribbon component
--w-ribbon-offset : 20 px ;
--w-ribbon-folded-offset : 10 px ;
// Scrollbars
--w-scrollbar-bg : var ( --w-color-primary-60 );
--w-scrollbar-fg : var ( --w-color-primary-50 );
// Skeleton component
--w-skeleton-color : var ( --w-color-primary-60 );
--w-skeleton-wave-color : var ( --w-color-primary-50 );
// Slider component
--w-slider-background : var ( --w-color-primary-50 );
--w-slider-color : var ( --w-color-primary );
--w-slider-thumb : var ( --w-color-primary-50 );
// Spinner component
--w-spinner-color : var ( --w-color-primary );
--w-spinner-width : 2 px ;
--w-spinner-speed : 2 s ;
--w-spinner-size : 30 px ;
--w-spinner-dash : 8 ;
// Spoiler component
--w-spoiler-color : var ( --w-color-primary );
// Stepper component
--w-stepper-color-border : var ( --w-color-primary-50 );
--w-stepper-color-active : var ( --w-color-info );
--w-stepper-color-complete : var ( --w-color-success );
// Switch component
--w-switch-off-color : var ( --w-color-primary-50 );
--w-switch-on-color : var ( --w-color-primary );
// ThemeSwitcher component
--w-theme-switcher-size : 20 px ;
// Timeline component
--w-timeline-color : var ( --w-color-primary-50 );
--w-timeline-text-color : var ( --w-color-primary );
--w-timeline-counter : decimal ;
// Tooltips
--w-tooltip-background : var ( --w-color-primary );
--w-tooltip-color : var ( --w-color-primary-70 );
// Override border-radius
--w-sm-radius : 2 px ;
--w-md-radius : 5 px ;
--w-lg-radius : 10 px ;
--w-xl-radius : 15 px ;
}コードをインポートして、コードでWebcoreコンポーネントの使用を開始します。
---
// Import the component relevant to your project
// How to import Astro components
import { Accordion } from ' webcoreui/astro '
// How to import Svelte components
import { Accordion } from ' webcoreui/svelte '
// How to import React components
import { Accordion } from ' webcoreui/react '
---
< Accordion items = { [{ ... }] } />
