slide ruler
v1.2.2
| ملكية | يكتب | تقصير | وصف |
|---|---|---|---|
| قيمة المقبض | وظيفة | احصل على قيمة الإرجاع | |
| canvaswidth | رقم | عرض الشاشة | عرض الحاكم |
| canvasheight | رقم | 83 | ارتفاع الحاكم |
| الارتفاع | رقم | 35 | علامات المقياس طول |
| ارتفاع | رقم | 18 | تقسيم العلامات طول |
| عرض الخط | رقم | 2 | عرض علامات |
| colordecimal | خيط | #e4e4e4 | علامات النطاق |
| colordigit | خيط | #e4e4e4 | علامات الانقسام |
| قسمة | رقم | 10 | طول تقسيم PX |
| دقة | رقم | 1 | قيمة التقسيم |
| الحجم | رقم | 20 | حجم الخطوط |
| fontcolor | خيط | #666666 | مقياس fontcolor |
| fontmargintop | رقم | 35 | هامش الخط إلى الأعلى |
| maxvalue | رقم | 230 | القيمة القصوى |
| minvalue | رقم | 100 | قيمة دقيقة |
| CurrentValue | رقم | 100 | القيمة الحالية |
yarn add slide-ruler --dev <!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 ; < 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
}
} أي شخص والجميع مرحب بهم للمساهمة في هذا المشروع. أفضل طريقة للبدء هي التحقق من مشكلاتنا المفتوحة ، أو تقديم مشكلات جديدة أو طلب ميزة ، أو المشاركة في المناقشات ، أو التصويت أو تصويت المشكلات التي تحبها أو تكرهها.
ترخيص معهد ماساتشوستس للتكنولوجيا .
