feat: added option menu

This commit is contained in:
paul
2024-09-23 19:31:30 +05:30
parent 1533888f07
commit 33cb40d886
5 changed files with 165 additions and 6 deletions

View File

@@ -16,7 +16,7 @@ class Slider extends Widget{
this.state = {
...this.state,
size: { width: 120, height: 40 },
size: { width: 'fit', height: 'fit' },
attrs: {
...newAttrs,
styling: {
@@ -54,6 +54,13 @@ class Slider extends Widget{
toolProps: { placeholder: "max", stringMode: true, step: "0.1"},
value: 1,
onChange: (value) => this.setAttrValue("scale.step", value)
},
default: {
label: "Default",
tool: Tools.NUMBER_INPUT,
toolProps: { placeholder: "max", stringMode: true, step: "0.1"},
value: 0,
onChange: (value) => this.setAttrValue("scale.default", value)
}
},
@@ -85,9 +92,17 @@ class Slider extends Widget{
renderContent(){
return (
<div className="tw-w-flex tw-flex-col tw-w-full tw-h-full tw-rounded-md tw-overflow-hidden">
<div className="tw-p-2 tw-w-full tw-h-full tw-flex tw-place-items-center" style={this.state.widgetStyling}>
<div className="tw-text-sm tw-text-gray-300">
{this.getAttrValue("placeHolder")}
<div className="flex flex-col items-center justify-center h-screen bg-gray-100">
<div className="w-full max-w-md">
<input
type="range"
min={this.getAttrValue("scale.min")}
max={this.getAttrValue("scale.max")}
step={this.getAttrValue("scale.step")}
value={this.getAttrValue("scale.default")}
className="tw-pointer-events-none w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-blue-500"
/>
</div>
</div>
</div>