@sciseed/sai-kurage NPM

sAIKurage

Demo

インストール

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; }