slide rulerダウンロード - slide rulerソースコードのダウンロード

slide ruler

サードパーティ製コンポーネント

v1.2.2

ダウンロード

Sliderulerデモ

中文readme

特徴

ネイティブJavaScriptで開発されたもので、フレームワークやライブラリに依存していません。
カスタマイズ可能な色、サイズ、精度など。
メーターのスワイプの慣性とリバウンドをサポートします。
使いやすいフレンドリーAPI。

プロパティ

財産	タイプ	デフォルト	説明
handlevalue	関数		返品値を取得します
CanvasWidth	番号	画面幅	定規の幅
Canvasheight	番号	83	定規の高さ
heightdecimal	番号	35	スケールマークの長さ
heightdigit	番号	18	分割マークの長さ
線幅	番号	2	マーク幅
colordecimal	弦	＃e4e4e4	スケールマークの色
Colordigit	弦	＃e4e4e4	部門は色をマークします
分ける	番号	10	pxの分割長
精度	番号	1	分割値
fontsize	番号	20	スケールフォントサイズ
フォントコラー	弦	＃666666	スケールフォントコラー
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
  }
}