slide ruler 다운로드 - slide ruler 소스 코드 다운로드

slide ruler

타사 구성 요소

v1.2.2

다운로드

슬라이더 러 데모

中文 readme

특징

기본 JavaScript로 개발 된 것은 모든 프레임 워크와 라이브러리에 의존하지 않습니다.
사용자 정의 가능한 색상, 크기, 정밀도 등
스 와이프 미터의 관성 및 반동을 지원합니다.
쉽게 사용할 수있는 친절한 API.

proptypes

재산	유형	기본	설명
핸들 value	기능		반환 값을 얻으십시오
Canvaswidth	숫자	화면 너비	통치자 너비
Canvasheight	숫자	83	통치자 높이
높이	숫자	35	스케일 마크 길이
높이 자리	숫자	18	디비전 표시 길이
선폭	숫자	2	마크 너비
colordecimal	끈	#e4e4e4	스케일 마크 색상
Colordigit	끈	#e4e4e4	디비전 표시 색상
나누다	숫자	10	PX의 분할 길이
정도	숫자	1	부서 가치
글꼴 크기	숫자	20	스케일 폰트 크기
폰콜러	끈	#666666	스케일 FontColor
fontmargintop	숫자	35	맨 위에 글꼴 여백
MaxValue	숫자	230	최대 가치
MinValue	숫자	100	최소 가치
CurrentValue	숫자	100	현재 가치

시작하기

설치하다

yarn add slide-ruler --dev

사용 예제

기본 JavaScript

 <!DOCTYPE html >
< html >
  < head >
    < meta charset =" UTF-8 " />
    < meta name =" author " content =" simbawu " />
    < title > Digital Keyboard </ title >
  </ head >
  < body >
    < div id =" values " > </ div >
    < div id =" app " > </ div >
    < script src =" ./slide-ruler.js " > </ script >
  </ body >
</ html >

 //slide-ruler.js
import SlideRuler from 'slide-ruler' ;

function handleValue ( value ) {
  console . log ( value ) ; //SlideRuler return value
  document . querySelector ( '#values' ) . innerHTML = value ;
}

new SlideRuler (
    {
        el : document . querySelector ( '#app' ) ,
        maxValue : 230 ,
        minValue : 100 ,
        currentValue : 180
        handleValue : handleValue ,
        precision : 1
    }
) ;

반응

 import React from 'react' ;
import SlideRuler from 'slide-ruler' ;

class SlideRulerPage extends React . Component {

  constructor ( ) {
    super ( ) ;

    this . handleValue = this . handleValue . bind ( this ) ;
    this . _renderSlideRuler = this . _renderSlideRuler . bind ( this ) ;
  }

  componentDidMount ( ) {
    this . _renderSlideRuler ( ) ;
  }

  handleValue ( value ) {
    console . log ( value ) ; //SlideRuler return value
  }

  _renderSlideRuler ( ) {
    return new SlideRuler (
      {
        el : this . refs . slideRuler ,
        maxValue : 230 ,
        minValue : 100 ,
        currentValue : 180
        handleValue : handleValue ,
        precision : 1
      }
    ) ;
  }

  render ( ) {
    return (
      < div ref = 'slideRuler' > </ div >
    )
  }
}

export default SlideRulerPage ;

vue

 < template >
  < div > </ div >
</ template >
< script >
import SlideRuler from 'slide-ruler' ;
export default {
  mounted ( ) {
    this . _renderSlideRuler ( ) ;
  } ,
  methods : ( ) {
    _renderSlideRuler ( ) {
    	return new SlideRuler (
          {
            el : this . $el ,
            maxValue : 230 ,
            minValue : 100 ,
            currentValue : 180
            handleValue : handleValue ,
            precision : 1
          }
        ) ;
    } ,

    handleValue ( value ) {
      console . log ( value ) ; //SlideRuler return value
    }
  }
}
< / script>

모난

 import { Component , ViewChild , OnInit , ViewEncapsulation } from '@angular/core' ;
import SlideRuler from 'slide-ruler' ;

@ Component ( {
  selector : 'my-app' ,
  template : `
   <div #slideRuler></div>
  ` ,
  encapsulation : ViewEncapsulation . None
} )
export class AppComponent  implements OnInit {

  @ ViewChild ( 'slideRuler' ) slideRuler ;

  ngOnInit ( ) {
    this . _renderSlideRuler ( ) ;
  }

  _renderSlideRuler ( ) {
    return new SlideRuler (
          {
            el : this . slideRuler . nativeElement ,
            maxValue : 230 ,
            minValue : 100 ,
            currentValue : 180
            handleValue : handleValue ,
            precision : 1
          }
        ) ;
  }

  handleValue ( value ) {
    console . log ( value ) ; //SlideRuler return value
  }
}