steg-vue-components

Vue 3 + TypeScript で構築された再利用可能なコンポーネントライブラリです。Storybookを使用してコンポーネントの開発とプレビューを行っています。

概要

このライブラリは、Webサイト構築に必要な様々なUIコンポーネントを提供します。ボタン、ヘッダー、フッター、ニュースセクション、メインビジュアルなど、多様なコンポーネントが含まれています。

インストール

npm install steg-vue-components

使用方法

// 単一コンポーネントのインポート
import { RoundedHeaderBar } from 'steg-vue-components';
import 'steg-vue-components/styles';

// コンポーネントの使用
<RoundedHeaderBar />

提供コンポーネント

このライブラリには以下のコンポーネントが含まれています：

ボタン

• HalfRoundedButton
• RoundedButtonWithIcon

ヘッダー

• RoundedHeaderBar
• HamburgerMenu

フッター

• RoundedFooter1

メインビジュアル

• FullImageMainVisual

ニュースセクション

• NewsContainer1
• NewsItem1
• NewsContainer2
• NewsItem2
• News2

セクション

• BackgroundImageWithContent1
• ImageWithContent1
• ImageWithDetail1
• ScrollBar1
• Summaries1
• SummariesTitle1
• SummariesItem1
• TableWithImage1
• TableWithImageTable1

開発

環境構築

# リポジトリのクローン
git clone https://github.com/project-steg/steg-vue-components.git
cd steg-vue-components

# 依存関係のインストール
npm install

開発サーバーの起動

npm run storybook

ビルド

npm run build