Download slide ruler - Download do código fonte slide ruler

slide ruler

Componentes de terceiros

v1.2.2

Baixar

Demoção Slideruler

中文 Readme

Características

Desenvolvido com JavaScript nativo, não depende de nenhuma estrutura e bibliotecas.
Cores, tamanhos, precisão, etc.
Suporta inércia e rebote para os medidores de deslocamento.
API amigável para facilitar o uso.

Aprofetos

Propriedade	Tipo	Padrão	Descrição
HandleValue	Função		Obtenha o valor de retorno
lonawidth	Número	Largura da tela	largura do governante
Canvashight	Número	83	Altura do governante
altura de altura	Número	35	A escala marca o comprimento
altingddigit	Número	18	A divisão marca o comprimento
Linha de linha	Número	2	Marcas de largura
ColordECimal	Corda	#E4e4e4	A escala marca a cor
Colordigit	Corda	#E4e4e4	A divisão marca a cor
dividir	Número	10	duração da divisão de px
precisão	Número	1	valor da divisão
fontsize	Número	20	escala de fontsize
fontcolor	Corda	#666666	escala fontcolor
Fontmargintop	Número	35	margem de fonte para o topo
maxvalue	Número	230	valor máximo
minvalue	Número	100	valor mínimo
CurrentValue	Número	100	valor atual

Começando

Instalar

yarn add slide-ruler --dev

Exemplo de uso

JavaScript nativo

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

Reagir

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

Como contribuir

Qualquer um e todo mundo pode contribuir para este projeto. A melhor maneira de começar é verificando nossos problemas em aberto, enviar novos problemas ou solicitar, participar de discussões, votar ou desviar os problemas que você gosta ou não gosta.