text: "use strict";(globalThis["webpackChunkquasar_dev"]=globalThis["webpackChunkquasar_dev"]||[]).push([[92737],{92737:(e,o,a)=>{a.r(o),a.d(o,{default:()=>b});var t=a(83673);const n=(0,t.Uk)("The QKnob component is used to take a number input from the user through mouse/touch panning. It is based on "),i=(0,t.Uk)("QCircularProgress"),s=(0,t.Uk)(" and inherits all its properties and behavior."),l=(0,t._)("p",null,"By default, QKnob inherits current text color (as arc progress color and inner label color) and current font size (as component size). For customization, you can use the size and color related props.",-1),c=(0,t._)("p",null,[(0,t.Uk)("In the example below, "),(0,t._)("code",{class:"doc-token"},"show-value"),(0,t.Uk)(" property also enables the default slot, so you can fill it with custom content, like even a QAvatar or a QTooltip. The "),(0,t._)("code",{class:"doc-token"},"font-size"),(0,t.Uk)(" prop refers to the inner label font size.")],-1),d=(0,t._)("p",null,[(0,t.Uk)("When dealing with a native form which has an "),(0,t._)("code",{class:"doc-token"},"action"),(0,t.Uk)(" and a "),(0,t._)("code",{class:"doc-token"},"method"),(0,t.Uk)(" (eg. when using Quasar with ASP.NET controllers), you need to specify the "),(0,t._)("code",{class:"doc-token"},"name"),(0,t.Uk)(" property on QKnob, otherwise formData will not contain it (if it should):")],-1);function r(e,o,a,r,u,h){const m=(0,t.up)("doc-link"),p=(0,t.up)("doc-api"),b=(0,t.up)("doc-example"),g=(0,t.up)("doc-page");return(0,t.wg)(),(0,t.j4)(g,{"meta-title":r.metaTitle,title:"Knob",related:r.related,toc:r.toc,"meta-desc":r.metaDesc},{default:(0,t.w5)((()=>[(0,t._)("p",null,[n,(0,t.Wm)(m,{to:"/vue-components/circular-progress"},{default:(0,t.w5)((()=>[i])),_:1}),s]),(0,t._)("h2",{id:"qknob-api",class:"doc-heading doc-h2",onClick:o[0]||(o[0]=e=>r.copyHeading("qknob-api"))},"QKnob API"),(0,t.Wm)(p,{file:"QKnob"}),(0,t._)("h2",{id:"usage",class:"doc-heading doc-h2",onClick:o[1]||(o[1]=e=>r.copyHeading("usage"))},"Usage"),l,(0,t._)("h3",{id:"basic",class:"doc-heading doc-h3",onClick:o[2]||(o[2]=e=>r.copyHeading("basic"))},"Basic"),(0,t.Wm)(b,{title:"Basic",file:"QKnob/Basic"}),(0,t._)("h3",{id:"show-value",class:"doc-heading doc-h3",onClick:o[3]||(o[3]=e=>r.copyHeading("show-value"))},"Show value"),c,(0,t.Wm)(b,{title:"Show value",file:"QKnob/ShowValue"}),(0,t._)("h3",{id:"min-and-max",class:"doc-heading doc-h3",onClick:o[4]||(o[4]=e=>r.copyHeading("min-and-max"))},"Min and max"),(0,t.Wm)(b,{title:"Custom min/max",file:"QKnob/MinMax"}),(0,t._)("h3",{id:"custom-step",class:"doc-heading doc-h3",onClick:o[5]||(o[5]=e=>r.copyHeading("custom-step"))},"Custom step"),(0,t.Wm)(b,{title:"Custom step",file:"QKnob/Step"}),(0,t._)("h3",{id:"offset-angle",class:"doc-heading doc-h3",onClick:o[6]||(o[6]=e=>r.copyHeading("offset-angle"))},"Offset angle"),(0,t.Wm)(b,{title:"Offset angle",file:"QKnob/Angle"}),(0,t._)("h3",{id:"disable-and-readonly",class:"doc-heading doc-h3",onClick:o[7]||(o[7]=e=>r.copyHeading("disable-and-readonly"))},"Disable and readonly"),(0,t.Wm)(b,{title:"Disable and readonly",file:"QKnob/DisableReadonly"}),(0,t._)("h3",{id:"native-form-submit",class:"doc-heading doc-h3",onClick:o[8]||(o[8]=e=>r.copyHeading("native-form-submit"))},"Native form submit"),d,(0,t.Wm)(b,{title:"Native form",file:"QKnob/NativeForm"})])),_:1},8,["meta-title","related","toc","meta-desc"])}var u=a(17536);const h={name:"DocMarkdownPage",setup(){return{metaTitle:"Knob",metaDesc:"The QKnob Vue component is used to take a number input through mouse or touch panning.",related:[{name:"圆环进度条",category:"Vue 组件",path:"/vue-components/circular-progress"}],toc:[{id:"qknob-api",title:"QKnob API"},{id:"usage",title:"Usage"},{id:"basic",title:"Basic",sub:!0},{id:"show-value",title:"Show value",sub:!0},{id:"min-and-max",title:"Min and max",sub:!0},{id:"custom-step",title:"Custom step",sub:!0},{id:"offset-angle",title:"Offset angle",sub:!0},{id:"disable-and-readonly",title:"Disable and readonly",sub:!0},{id:"native-form-submit",title:"Native form submit",sub:!0}],copyHeading:u.Et}}};var m=a(74260);const p=(0,m.Z)(h,[["render",r]]),b=p}}]);