Download slide ruler - Download für slide ruler -Quellcode Download

slide ruler

Komponenten von Drittanbietern

v1.2.2

Herunterladen

Slideruler Demo

中文 Readme

Merkmale

Entwickelt mit nativem JavaScript, beruht nicht auf Frameworks und Bibliotheken.
Anpassbare Farben, Größen, Präzision usw.
Unterstützt Trägheit und Abpraller für Wischmesser.
Freundliche API für die einfache Verwendung.

ProfTypes

Eigentum	Typ	Standard	Beschreibung
Handel	Funktion		Holen Sie sich den Rückgabewert
Leinwandbreite	Nummer	Bildschirmbreite	Herrscherbreite
Leinwand	Nummer	83	Herrscherhöhe
Höhedezimal	Nummer	35	Skalierungsmarkierlänge
Höhedigit	Nummer	18	Division markiert Länge
Linienbreite	Nummer	2	Markierungen Breite
colordecimal	Saite	#E4e4e4	Skalierungsmarken Farbe
Colordigit	Saite	#E4e4e4	Division markiert Farbe
teilen	Nummer	10	Divisionslänge von PX
Präzision	Nummer	1	Teilungswert
Schriftgröße	Nummer	20	skalieren Sie Schriftarten
Fontcolor	Saite	#666666	Skalierung fontcolor
fontmargintop	Nummer	35	Schriftrand nach oben
MaxValue	Nummer	230	maximaler Wert
Minwert	Nummer	100	min -Wert
CurrentValue	Nummer	100	Aktueller Wert

Erste Schritte

Installieren

yarn add slide-ruler --dev

Nutzungsbeispiel

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

Reagieren

 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>

Eckig

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

Wie man beiträgt

Jeder und jeder ist herzlich eingeladen, zu diesem Projekt beizutragen. Der beste Weg, um zu beginnen, besteht darin, unsere offenen Probleme zu überprüfen, neue Probleme oder Feature -Anfragen einzureichen, an Diskussionen teilzunehmen, die von Ihnen mögen oder nicht mögen.