sAIKurage

Demo

demo page

インストール

npm install @sciseed/sai-kurage

使い方

index.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

// Props
items?: IKurageRawItems
current!: IKurageStateItem
state!: IKurageState
setting!: IKurageSetting

// Event
change()

カスタマイズ

カスタマイズ方法

kurage-custom.scss

$relation-border-color-active: #ac1515;
$item-background-color-active: #ac1515;
$arrow-color: #dd427e;

@import "@sciseed/sai-kurage/dist/styles/style.scss";

index.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|スタイルシート|