Téléchargement slide ruler - Téléchargement du code source slide ruler

slide ruler

Composants tiers

v1.2.2

Télécharger

Démo de Slideruler

中文 Readme

Caractéristiques

Développé avec JavaScript natif, ne s'appuie pas sur aucun cadre et bibliothèque.
Couleurs personnalisables, tailles, précision, etc.
Prend en charge l'inertie et le rebond pour les compteurs à glisser.
API amicale pour une utilisation facile.

Propypes

Propriété	Taper	Défaut	Description
manche	Fonction		Obtenez la valeur de retour
lisse de toile	Nombre	largeur d'écran	Largeur des règles
toile	Nombre	83	hauteur du dirigeant
hauteur	Nombre	35	Longueur d'échelle
high-digit	Nombre	18	La division marque la longueur
largeur de ligne	Nombre	2	marque la largeur
colordecimal	Chaîne	# E4e4e4	Couleur des marques d'échelle
colordigit	Chaîne	# E4e4e4	Couleur des marques de division
diviser	Nombre	10	Longueur de division de PX
précision	Nombre	1	valeur de division
s'adapter	Nombre	20	Scale Fontize
fonte	Chaîne	# 666666	Fontcolor à l'échelle
Fontmargintop	Nombre	35	marge de police au sommet
maxvalue	Nombre	230	valeur maximale
mine	Nombre	100	valeur min
Valeur de courant	Nombre	100	valeur actuelle

Commencer

Installer

yarn add slide-ruler --dev

Exemple d'utilisation

Javascript natif

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

Réagir

 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>

Angulaire

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

Comment contribuer

Tout le monde et tout le monde est invité à contribuer à ce projet. La meilleure façon de commencer est de vérifier nos problèmes ouverts, de soumettre un nouveau problème ou une demande de fonctionnalités, de participer aux discussions, de voter ou de voter les problèmes que vous aimez ou n'aimez pas.