open-index/open-npm huggingface dataset:
npm package: @sciseed/sai-kurage
Description: ## Demo [demo page](https://sciseed.github.io/sAIKurage/)
Author: hayate212
Latest version: 0.5.5

# sAIKurage

## Demo
[demo page](https://sciseed.github.io/sAIKurage/)

***

## インストール
```sh
npm install @sciseed/sai-kurage
```

***

## 使い方
index.ts
```ts
import Vue from "vue";
import sAIKurage from "@sciseed/sai-kurage";
import "@sciseed/sai-kurage/dist/sai-kurage.css";
Vue.use(sAIKurage);
```
App.vue
```
<template>
  <div>
    <Kurage
      :items="KurageRawItems"
      :current.sync="KurageCurrentState"
      :state.sync="KurageState"
      :setting="KurageSetting"
      @change="onChange"
    />
  </div>
</template>
```

***

## Component 仕様
### Kurage
```ts
// Props
items?: IKurageRawItems
current!: IKurageStateItem
state!: IKurageState
setting!: IKurageSetting

// Event
change()
```

***

## カスタマイズ

### カスタマイズ方法
kurage-custom.scss
```scss
$relation-border-color-active: #ac1515;
$item-background-color-active: #ac1515;
$arrow-color: #dd427e;

@import "@sciseed/sai-kurage/dist/styles/style.scss";
```
index.ts
```ts
import Vue from "vue";
import sAIKurage from "@sciseed/sai-kurage";
import "kurage-custom.scss";
Vue.use(sAIKurage);
```

### 上書き可能なプロパティ

| プロパティ名 | 説明 | CSS上での適用例 |
|:--|:--|---|
| $relation-border-color | リレーションのボーダー色 | .relation { border-color: $relation-border-color; } |
| $relation-border-color-active | アクティブ時のリレーションのボーダー色 | .relation.active {border-color: $relation-border-color-active; } |
| $item-background-color | リストアイテムの背景色 | .list-item { background-color: $item-background-color; } |
| $item-background-color-active | アクティブ時のリストアイテムの背景色 | .list-item.active { background-color: $item-background-color-active; } |
| $item-border-color | リストアイテムのボーダー色 | .list-item {border-color: $item-border-color; } |
| $item-border-color-active | アクティブ時のリストアイテムのボーダー色 | .list-item.active { border-color: $item-border-color-active; } |
| $item-text-color | リストアイテムの文字色 | .list-item{ color: $item-text-color; } |
| $item-text-color-active | アクティブ時のリストアイテムの文字色 | .list-item.active: { color: $item-text-color-acitve; } |


***

## npm package 同梱ファイル
特筆すべきものだけ記載しています。
|ファイル名|説明|
|:--|:--|
|schema.json| @sciseed/sai-types-validator で使用する為のスキーマファイル |
|sai-kurage-types.ts| sAIKurage で使う型定義をまとめたファイル |
|sai-kurage.scss|スタイルシート|