Unduh slide ruler - Unduh Kode Sumber slide ruler

slide ruler

Komponen pihak ketiga

v1.2.2

Unduh

Demo Slideruler

中文 Readme

Fitur

Dikembangkan dengan JavaScript asli, tidak mengandalkan kerangka kerja dan perpustakaan apa pun.
Warna, ukuran, presisi, dll yang dapat disesuaikan
Mendukung inersia dan rebound untuk menggesek meter.
API yang ramah agar mudah digunakan.

Proptipe

Milik	Jenis	Bawaan	Keterangan
Handlevalue	Fungsi		Dapatkan Nilai Pengembalian
Canvaswidth	Nomor	Lebar layar	Lebar penguasa
Canvasheight	Nomor	83	tinggi penguasa
tinggi	Nomor	35	skala tanda tanda
heightdigit	Nomor	18	Divisi menandai panjang
linewidth	Nomor	2	Lebar tanda
colordecimal	Rangkaian	#E4E4E4	Skala Tanda Warna
Colordigit	Rangkaian	#E4E4E4	Divisi menandai warna
membagi	Nomor	10	Panjang Divisi PX
presisi	Nomor	1	nilai divisi
fontsize	Nomor	20	skala fontsize
fontcolor	Rangkaian	#666666	skala fontcolor
Fontmargintop	Nomor	35	margin font ke atas
MaxValue	Nomor	230	nilai maksimal
Minvalue	Nomor	100	nilai min
CurrentValue	Nomor	100	nilai saat ini

Memulai

Memasang

yarn add slide-ruler --dev

Contoh Penggunaan

Javascript asli

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

Bereaksi

 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>

Angular

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

Bagaimana berkontribusi

Siapa pun dan semua orang dipersilakan untuk berkontribusi pada proyek ini. Cara terbaik untuk memulai adalah dengan memeriksa masalah terbuka kami, mengirimkan masalah baru atau permintaan fitur, berpartisipasi dalam diskusi, meningkatkan atau menurunkan masalah yang Anda sukai atau tidak sukai.