README

softbase-vue

Project setup

npm install --save softbase-vue

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

How To Use

script

import Vue from 'vue'
import Softbase from 'softbase-vue'
import "softbase-vue/dist/softbase.css"
Vue.use(Softbase)

template

<template>
  <div id="app">
    <badge class="orange">123</badge>
    <btn>확인</btn>
    <search></search><br>
  </div>
</template>

Badge

<badge
  id="string"
  class-name="string"
  font-size="00rem | 00em | 00px"
>내용</badge>

example

<badge>기획실</badge>
<badge font-size="1.0rem">기획실</badge>
<badge class-name="green">123</badge>
<badge class-name="yellowgreen">123</badge>
<badge class-name="yellow">123</badge>
<badge class-name="red">123</badge>
<badge class-name="orange">123</badge>
<badge class-name="blue">123</badge>
<badge class-name="skyblue">123</badge>
<badge class-name="white">123</badge>
<badge class-name="black">123</badge>
<badge class-name="gray">123</badge>
<badge class-name="darkgray">123</badge>
<badge class-name="silver">123</badge>

BoxRound

<box-round 
  id="string"
  class-name="string"
  width="00px | 00%"
  height="00px | 00vh"
  border="1px solid #ccc"
  padding="00px 00px 00px 00px"
  margin="00px 00px 00px 00px"
  background="#ffffff | rgba(0,0,0,0.5) | url('')"
  text-align="left | center | right"
  border-radius="6px | 50%"
>
  내용
  <div slot="message">입력 안내 메시지</div>
  <div slot="message-error">입력 오류 안내 메시지</div>
</box-round>

class-name : neumorphi, neumorphi-inset

example

  <box-round class-name="neumorphi-inset">
    <input type="text" placeholder="email">
    <div slot="message">안내 메시지</div>
    <div slot="error">오류 메시지</div>
  </box-round>
  <box-round background="#eee" text-align="left" padding="5px">
    text
  </box-round>
  <box-round background="#eee" border-radius="30px" width="100%" height="100px" border="1px solid #aaa">
    text
  </box-round>
  <box-round class-name="neumorphi" padding="5px">
    text1
  </box-round>
  <box-round class-name="neumorphi-inset" padding="5px">
    text2
  </box-round>

Btn

<btn
  id="string"
  text="string"
  picto="url string"
  width="00px | 00%"
  padding="00px 00px 00px 00px"
  margin="00px 00px 00px 00px"
  picto-width="00px | 00%"
  font-size="00rem | 00em | 00px"
>(내용)</btn>

example

<btn text="확인"></btn>
<btn picto="https://www.multivu.com/players/English/7530851-more-magazine-flotus/image/MORE-Logo-2015.png" width="100px" picto-width="60px" padding="0 0 4px" margin="0 20px 0 0"></btn>
<btn text="더보기" picto="https://www.multivu.com/players/English/7530851-more-magazine-flotus/image/MORE-Logo-2015.png" width="100px" picto-width="30px" padding="0 0 4px" font-size="1.0rem"></btn>
<p class="active">
  <btn text="선택"></btn> text="선택"<br>
</p>

부모 객체가 'active' 클래스를 가지면 파란색으로 표시된다.

BtnCircle

<btn-circle
  id="string"
  text="string"
  picto="url string"
  size="00px"
  padding="00px 00px 00px 00px"
  margin="00px 00px 00px 00px"
  font-size="00rem | 00em | 00px"
>(내용)</btn-circle>

default size는 48px

example

<btn-circle padding="12px 0 0">확인</btn-circle>
<btn-circle picto="https://i.pinimg.com/originals/12/ba/72/12ba72f0e3f84c4669cd8734d90ab395.png" picto-width="30px" padding="2px 0 0" margin="0 20px 0 0"></btn-circle>
<btn-circle text="저장" padding="15px 0 10px" font-size="0.8rem"></btn-circle>
<btn-circle text="선택" picto="https://i.pinimg.com/originals/12/ba/72/12ba72f0e3f84c4669cd8734d90ab395.png" font-size="0.8rem" picto-width="16px"></btn-circle>
<p class="active">
  <btn-circle text="선택" picto="https://i.pinimg.com/originals/12/ba/72/12ba72f0e3f84c4669cd8734d90ab395.png" font-size="0.8rem" picto-width="16px"></btn-circle>
</p>

부모 객체가 'active' 클래스를 가지면 흰색으로 표시된다.

BtnRound

<btn-round
  id="string"
  text="string"
  picto="url string"
  width="00px | 00%"
  padding="00px 00px 00px 00px"
  margin="00px 00px 00px 00px"
  font-size="00rem | 00em | 00px"
  picto-width="00px"
>(내용)</btn-round>

example

<btn-round text="확인"></btn-round>
<btn-round picto="https://i.pinimg.com/originals/12/ba/72/12ba72f0e3f84c4669cd8734d90ab395.png"></btn-round>
<btn-round text="저장" font-size="2rem"></btn-round>
<btn-round text="선택" picto="https://i.pinimg.com/originals/12/ba/72/12ba72f0e3f84c4669cd8734d90ab395.png" picto-width="20px"></btn-round>
<p class="active">
  <btn-round text="선택" picto="https://i.pinimg.com/originals/12/ba/72/12ba72f0e3f84c4669cd8734d90ab395.png" picto-width="20px"></btn-round>
</p>

부모 객체가 'active' 클래스를 가지면 흰색으로 표시된다.

FileUploader

<file-uploader
  placeholder="string"
  multi="multi"
  unique-name="1"
  date-folder="1"
></file-uploader>

example

<file-uploader></file-uploader>
<file-uploader placeholder="300MB 이하"></file-uploader>
<file-uploader multi="multi"></file-uploader>
<file-uploader unique-name="1" date-folder="1"></file-uploader>
<file-uploader unique-name="0" date-folder="0"></file-uploader>

HeadBar

<head-bar
  id="string"
  hide-back="false"
  hide-hamberger="true"
></head-bar>

example

<head-bar hide-hamberger="true">

InputCheck

<input-check 
  id="string" 
  class-name="string" 
  color="#fff" 
  :items="object" 
  @check="function"
></input-check>

example

# script
import InputCheck from '../components/InputCheck.vue';

export default {
  components: {
    InputCheck
  },
  data() {
    return {
      autoLogin: false,
      autoLoginItems: [
        {
          name: 'Auto Login',
          value: true,
          checked: false
        },
      ],
    }
  },
  methods: {
    autoLoginCheck : function(val) {
      console.log('autoLoginCheck: '+val);
      this.autoLogin = val;
    },
  }

InputRadio

<input-radio
  id="string" 
  class-name="string" 
  color="#fff" 
  :items="object" 
  @check="function"
></input-radio>

example

# template
<input-radio id="radio" class-name="inline" color="#fff" :items="radioItems" @check="genderRadio"></input-radio>

# script
import InputRadio from '../components/InputRadio.vue';

export default {
  components: {
    InputRadio
  },
  data() {
    return {
      gender: '',
      radioItems: [
        {
          name: '남자',
          value: 'male',
          checked: true
        },
        {
          name: '여자',
          value: 'female',
          checked: false
        }
      ]
    }
  },
  methods: {
    genderRadio : function(val) {
      console.log('genderRadio: '+val);
      this.gender = val;
    },
  }

InputDate

<input-date
  id="string"
  placeholder="string"
  year="YYYY"
  month="MM"
  date="DD"
  start-year="2000" (1000이하 혹은 마이너스는 올해와의 차이)
  end-year="2000" (1000이하는 올해와의 차이)
></input-date>

example

<input-date></input-date>
<input-date placeholder="시작일자"></input-date>
<input-date year="2020" month="11" date="22"></input-date> 
<input-date placeholder="시작일자" start-year="2000"></input-date> (2000년)
<input-date placeholder="시작일자" start-year="-20"></input-date> (1000이하는 올해와의 차이)
<input-date placeholder="종료일자" end-year="2060"></input-date> (2000년)
<input-date placeholder="종료일자" end-year="20"></input-date> (1000이하는 올해와의 차이)

InputTime

<input-time
  id="string"
  placeholder="string"
  hour="HH"
  min="mm"
></input-time>

example

<input-time></input-time>
<input-time placeholder="시작"></input-time>
<input-time hour="15" min="32"></input-time>

InputText

<input-text
  id="string"
  placeholder="string"
  readonly="readonly"
></input-text>

example

<input-text></input-text>
<input-text placeholder="입력하세요"></input-text>
<input-text readonly="readonly"></input-text>

InputSelect

<input-select
  id="string"
  placeholder="string"
  readonly='readonly"
  class-name-btn-img="red" (▼에 적용되는 클래스명)
  class-name-list="string"
  class-name-item="normal" (팝업 목록에 적용되는 클래스명)
  hide-arrow="true"
  inline="inline"
></input-select>

example

<input-select></input-select>
<input-select placeholder="입력하세요"></input-select>
<input-select readonly="readonly"></input-select>
<input-select class-name-btn-img="red"></input-select>
<input-select class-name-item="normal"></input-select>
<input-select hide-arrow="true"></input-select>
<input-select inline="inline"></input-select>

Search

<search
  id="string"
  placeholder="string"
  width="00px | 00%"
></search>

example

<search></search>
<search placeholder="검색하세요"></search>
<search width="150px"></search>

TextArea

<text-area
  id="string"
  class-name="string" (textarea에 적용되는 클래스명)
  placeholder="string"
  width="00px | 00%"
  height="00px | 00vh"
></text-area>

example

<text-area></text-area>
<text-area placeholder="검색하세요"></text-area>
<text-area class-name="gray"></text-area>
<text-area width="150px" height="150px"></text-area>

Pagination

<pagination
  id="string"
  count="number"
  item-count-per-page="number"
  page="number"
></pagination>

example

<pagination count="23" item-count-per-page="5" page="2"></pagination>

PopMenu

<pop-menu
  id="string"
  seq="number"
  data="object"
  btn-img-src="string"
  text="string"
  menu-list="menuList"
  class-name-btn-img="string"
  class-name-list="string"
  class-name-item="string"
  width="00px | 00%"
  padding="00px 00px 00px 00px"
  margin="00px 00px 00px 00px"
  @menu="onMenu"
></pop-menu>

example

<pop-menu text="..." :menu-list="menuList" seq="1" @menu="onMenu"></pop-menu>
<pop-menu btn-img-src="https://png.pngtree.com/png-vector/20190215/ourmid/pngtree-vector-location-icon-png-image_515550.jpg"></pop-menu>

menu-list: 메뉴 목록
data () {
  return {
    menuList: ['수정하기','삭제하기'],
  }
},
methods: {
  onMenu: function(i, seq, data) {
    alert("i:"+i +", seq:"+seq);
  },
},

Popup

<popup 
  id="string" 
  :open="funcion" 
  @close="function()"
>
  <div slot="title">제목</div>
  <div slot="contents">내용</div>
  <div slot="positive">동의버튼</div>
  <div slot="negative">취소버튼</div>
</popup>

example

<btn-round @click="openModal('email')" text="이메일로 회원가입" padding="7px 0 0" textStyle="color: #fff;"></btn-round>
<popup id="term0s1" :open="terms1Open" @close="terms1Close()">
  <div slot="title">정보처리 약관1</div>
  <div slot="contents">
    제 1 조 (목적) 본 약관은 회원(당사 DENEB서비스 약관에 동의한 자를 말합니다. 이하 “회원”이라고 합니다.) ...
  </div>
  <div slot="positive">
    <btn-round text="동의" padding="5px 5px 0" @click="agree()"></btn-round>
  </div>
  <div slot="negative">
    <btn-round text="동의 안함" padding="5px 5px 0" @click="disagree()"></btn-round>
  </div>
</popup>

import Popup from '../components/Popup.vue';
export default {
  components: {
    Popup
  },
  data() {
    return {
      terms1Open: false,
    };
  },
  methods: {
    agree() {
      this.terms1Open = false;
      alert("동의");
    },
    disagree() {
      this.terms1Open = false;
      alert("동의안함");
    },
    openModal(type) {
      this.type = type;
      this.terms1Open = true;
      console.log('openModal '+type);
    },
    terms1Close() {
      this.terms1Open = false;
    },

ProfileCircle

<profile-circle
  id="string"
  mode="string" profile / chat / task / schedule / attend
  url="string"
  present="string"
  bg-color="string"
  class-name="string"
  date="DD"
  day="string" 월 / 화 / 수 / 목 / 금 / 토 / 일
></profile-circle>

example

<profile-circle mode="profile"></profile-circle>
<profile-circle mode="profile" url="https://i.pinimg.com/564x/2e/68/4c/2e684c6eede1bd5dfb715879c1414cd3.jpg"></profile-circle>
<profile-circle mode="profile" url="https://i.pinimg.com/564x/2e/68/4c/2e684c6eede1bd5dfb715879c1414cd3.jpg" class-name="big"></profile-circle>
<profile-circle mode="chat"></profile-circle>
<profile-circle mode="chat" url="https://i.pinimg.com/564x/2e/68/4c/2e684c6eede1bd5dfb715879c1414cd3.jpg"></profile-circle>
<profile-circle mode="chat" bg-color="#335599"></profile-circle>
<profile-circle mode="task"></profile-circle>
<profile-circle mode="schedule"></profile-circle>
<profile-circle mode="attend" date="26" day="일" bg-color="#888888"></profile-circle>
<profile-circle mode="attend" date="26" day="월" bg-color="#88aa33"></profile-circle>

Usage no npm install needed!

README

softbase-vue

Project setup

Compiles and hot-reloads for development

Compiles and minifies for production

Lints and fixes files

Customize configuration

How To Use

script

template

Badge

example

BoxRound

example

Btn

example

BtnCircle

example

BtnRound

example

FileUploader

example

HeadBar

example

InputCheck

example

InputRadio

example

InputDate

example

InputTime

example

InputText

example

InputSelect

example

Search

example

TextArea

example

Pagination

example

PopMenu

example

Popup

example

ProfileCircle

example