slide ruler
v1.2.2
| คุณสมบัติ | พิมพ์ | ค่าเริ่มต้น | คำอธิบาย |
|---|---|---|---|
| handlevalue | การทำงาน | รับค่าส่งคืน | |
| ผ้าใบ | ตัวเลข | ความกว้างของหน้าจอ | ความกว้างของไม้บรรทัด |
| Canvasheight | ตัวเลข | 83 | ความสูงของไม้บรรทัด |
| ความสูง | ตัวเลข | 35 | ความยาวของเครื่องหมายมาตราส่วน |
| ความสูง | ตัวเลข | 18 | ส่วนของเครื่องหมายความยาว |
| linewidth | ตัวเลข | 2 | เครื่องหมายความกว้าง |
| colordecimal | สาย | #E4E4E4 | สีเครื่องหมายสเกล |
| colordigit | สาย | #E4E4E4 | ส่วนของเครื่องหมายสี |
| แบ่ง | ตัวเลข | 10 | ความยาวส่วนของ PX |
| ความแม่นยำ | ตัวเลข | 1 | มูลค่าการแบ่ง |
| แบบอักษร | ตัวเลข | 20 | สเกลฟอนต์ |
| ตัวอักษร | สาย | #666666 | สเกลฟอนต์สี |
| Fontmargintop | ตัวเลข | 35 | ตัวอักษรมาร์จิ้นไปด้านบน |
| ค่าสูงสุด | ตัวเลข | 230 | ค่าสูงสุด |
| minvalue | ตัวเลข | 100 | ค่าต่ำสุด |
| ค่าปัจจุบัน | ตัวเลข | 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
}
} ทุกคนและทุกคนยินดีที่จะมีส่วนร่วมในโครงการนี้ วิธีที่ดีที่สุดในการเริ่มต้นคือการตรวจสอบปัญหาที่เปิดกว้างของเราส่งปัญหาใหม่หรือคำขอคุณสมบัติมีส่วนร่วมในการอภิปรายการโหวตหรือการลงคะแนนปัญหาที่คุณชอบหรือไม่ชอบ
ใบอนุญาต MIT
