react-rotation-lucky
React wheel for game in QSoft
Install
npm install --save react-rotation-luckyUsage
import React, { Component } from 'react' import LuckyWheel from 'react-rotation-lucky'
import 'react-rotation-lucky/dist/index.css'
class Example extends Component {
const prizes = dataWheel?.items?.map((item) => {
return {
background: item.color_bg,
imgs: [{ src: item?.image, width: '40px', height: '40px', top: '10%' }]
}
})
const buttons: ButtonType[] = [
{
radius: '40%',
background: dataWheel?.turn_button?.background || '',
fonts: [
{
fontSize: dataWheel?.turn_button?.font_size,
fontWeight: dataWheel?.turn_button?.font_weight,
fontColor: dataWheel?.turn_button?.color_text,
text: dataWheel?.turn_button?.text
}
]
},
{ radius: '50px', background: '#d64737' },
{ radius: '45px', background: '#fff' },
{ radius: '41px', background: '#f6c66f', pointer: true },
{
radius: '35px',
background: '#ffdea0',
fonts: [{ text: dataWheel?.turn_button?.text, fontSize: '18px', top: -18 }]
}
]
render() {
return <LuckyWheel />
}
}License
Thuộc tính
width: string | number chiều rộng thành phần Mặc định: 300px
height: string | number chiều cao thành phần Mặc định: 300px
#Blocks
blocks?: Array<object> khu vực nền
padding?: string | number đệm Mặc định: 0
`background?: string` màu nền Mặc định: màu trong suốt
imgs?: Array<object> Hình nền
src: string đường dẫn hình ảnh
top?: string | number vị trí hình ảnh Mặc định: 0px
width?: string | number Chiều rộng hình ảnh Mặc định: 0px
height?: string | number chiều cao hình ảnh Mặc định: 0px
rotate?: boolean Liệu hình nền có theo vòng xoay hay không Mặc định: sai
# Prizes
prizes?: Array<object> danh sách giải thưởng
range?: number Xác suất chiến thắng
background?: string màu nền quạt Mặc định: màu trong suốt
fonts?: Array<object> văn bản giải thưởng
text: string nội dung văn bản
top?: string | number vị trí văn bản Mặc định: 0px
fontColor?: string màu phông chữ Mặc định: Đen #000
fontSize?: string | number cỡ chữ Mặc định: 22px
fontStyle?: string kiểu chữ Mặc định: sans-serif
fontWeight?: string | number trọng lượng phông chữ Mặc định: 400
lineHeight?: string | number chiều cao dòng chữ Mặc định: cỡ chữ
wordWrap?: boolean Gói từ Mặc định: đúng trên
lengthLimit?: string | number phạm vi chiều rộng bọc Mặc định: 90%
lineClamp?: number tràn văn bản ẩn Mặc định: Vô cực
imgs?: Array<object> giải thưởng hình ảnh
src: string đường dẫn hình ảnh
top?: string | number vị trí hình ảnh Mặc định: 0px
width?: string | number Chiều rộng hình ảnh Mặc định: 0px
height?: string | number chiều cao hình ảnh Mặc định: 0px
#Buttons
buttons?: Array<object> nút xổ số
radius: string | number bán kính nút Mặc định: 0px
pointer?: boolean Có hiển thị con trỏ hay không Mặc định: sai
background?: string màu nền của nút Mặc định: Đen #000
fonts?: Array<object> văn bản giải thưởng
text: string nội dung văn bản
top?: string | number vị trí văn bản Mặc định: 0px
fontColor?: string màu phông chữ Mặc định: Đen #000
fontSize?: string | number cỡ chữ Mặc định: 22px
fontStyle?: string kiểu chữ Mặc định: sans-serif
fontWeight?: string | number trọng lượng phông chữ Mặc định: 400
lineHeight?: string | number chiều cao dòng chữ Mặc định: cỡ chữ
textAlign?: 'center' | 'end' | 'left' | 'right' | 'start' vị trí của chữ Mặc định: end
imgs?: Array<object> hình ảnh nút
src: string đường dẫn hình ảnh
top?: string | number vị trí hình ảnh Mặc định: 0px
width?: string | number Chiều rộng hình ảnh Mặc định: 0px
height?: string | number chiều cao hình ảnh Mặc định: 0px
#defaultConfig
default-config?: object phân bổ mặc định
gutter?: string | number khoảng cách Mặc định: 0px
stopRange?: number Con trỏ ở phạm vi dừng trong khu vực hình quạt Mặc định: 0
offsetDegree?: number Góc bù của bàn xoay Mặc định: 0 độ
speed?: number Tốc độ quay cực đại Mặc định: 20
accelerationTime?: number thời gian bắt đầu quay Mặc định: 2500 mili giây
decelerationTime?: number thời gian dừng chậm Mặc định: 2500 mili giây
#defaultStyle
default-style?: object phong cách mặc định
background?: string Màu nền khu vực giải thưởng Mặc định: màu trong suốt
fontColor?: string màu phông chữ Mặc định: Đen #000
fontSize?: string | number cỡ chữ Mặc định: 22px
fontStyle?: string kiểu chữ Mặc định: sans-serif
fontWeight?: string | number trọng lượng phông chữ Mặc định: 400
lineHeight?: string | number chiều cao dòng chữ Mặc định: cỡ chữ
wordWrap?: boolean Gói từ Mặc định: đúng trên
lengthLimit?: string | number phạm vi chiều rộng bọc Mặc định: 90%
lineClamp?: number tràn văn bản ẩn Mặc định: Vô cực
#Chức năng gọi lại - callback
start?:(e) => void. trước khi bốc thăm
end?:(prize) => void. sau khi vẽ
#phương pháp - phương pháp
init(): khởi tạo
play(): bắt đầu xổ số
stop(index: number): chậm lại
MIT © xuantruong09111996