@super_studio/ecforce_ui_albers v3.5.0
ecforce ui albers
ecforce の design system albers
のコンポーネントライブラリです。
albers は試験開発中のため、内容が大幅に変更される可能性があります。バージョンに関わらず破壊的変更が行われることがありますので、利用時にはご注意ください。
インストール
npm install @super_studio/ecforce_ui_albers
yarn add @super_studio/ecforce_ui_albers
使い方
CSS をプロジェクトにインポートします。
@import '@super_studio/ecforce_ui_albers/index.css';
プロジェクト側で Tailwind CSS を導入し、Button コンポーネント等の背景色が反映されない場合は、プロジェクト側の tailwind.config.js
に以下を追記してください。
module.exports = {
corePlugins: {
preflight: false,
}
}
簡単な使用例になります。
import React from "react";
import { Button } from "@super_studio/ecforce_ui_albers";
// サブディレクトリからもimportできます。
// import { Button } from "@super_studio/ecforce_ui_albers/Button";
function App() {
return (
<Button size="medium" variant="primary">
albers
</Button>
);
}
Next.js 13 の Server Components で使用する場合は以下のようにサブディレクトリからコンポーネントをインポートしてください。
import { Button } from "@super_studio/ecforce_ui_albers/Button";
以下コンポーネントは Next.js 13 の Server Components で使用できません。
- Dropdown
- FlashMessage
- Header
- Modal
- Pagination
- Sidebar
- Table
- Tooltip
- DatePicker
- Dialog
- DropZone
- SearchSelect
カラートークンの導入方法
tailwind.config
にcolors
をインポートします。
import { colors } from "@super_studio/ecforce_ui_albers/theme/colors";
theme
内にcolos
を追加して完了です。
const config: Config = {
theme: {
extend: {
colors,
}
}
};
ライセンス
albers は MIT ライセンスで公開されています。
3 months ago
4 months ago
4 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
8 months ago
6 months ago
7 months ago
5 months ago
8 months ago
8 months ago
7 months ago
9 months ago
10 months ago
1 year ago
1 year ago
1 year ago
12 months ago
12 months ago
12 months ago
11 months ago
11 months ago
10 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago