Скачать slide ruler - Скачать исходный код slide ruler

slide ruler

Сторонние компоненты

v1.2.2

Скачать

Слайдерлер Демо

中文 Readme

Функции

Разработанный с Native JavaScript, не полагается ни на какую структуру и библиотеки.
Настраиваемые цвета, размеры, точность и т. Д.
Поддерживает инерцию и отскок для свисания счетчиков.
Дружелюбный API для легкого использования.

Проптип

Свойство	Тип	По умолчанию	Описание
ручка	Функция		Получите возвращаемое значение
Canvaswidth	Число	ширина экрана	Ширина линейки
Canvasheight	Число	83	Высота линейки
высота	Число	35	масштабные отметки длины
высота	Число	18	Оценка деления
ширина линии	Число	2	Ширина отметок
Colordecimal	Нить	#E4e4e4	масштабные отметки цвета
Колордигит	Нить	#E4e4e4	Отдел отмечена цветом
разделять	Число	10	Длина подразделения PX
точность	Число	1	Значение подразделения
Fontsize	Число	20	масштабный шрифт
Fontcolor	Нить	#666666	Scale Fontcolor
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
  }
}

Как внести свой вклад

Любой и все могут внести свой вклад в этот проект. Лучший способ начать - проверить наши открытые проблемы, отправить новые вопросы или запрос на функции, участвовать в дискуссиях, поднять или понизить такие проблемы или не нравятся.