Resize QInput and other components / 输入框以及其它组件大小调节

[guangxs]

What happened?

I need to adjust the size of the input box during the development process to achieve good adaptation, but the current input box size is fixed and cannot be adjusted, and the button can be adjusted. Obviously, this half-component attribute should be patched

• 我在开发过程中需要调节输入框大小以达到很好的自适应，但是目前输入框大小固定不可调节，对于按钮又可以调节，显然这种半有半无的组件属性，应该修补一下

What did you expect to happen?

The size adjustment of the component should support the size property similar to the QBtn assembly;

• 组件的大小调节应该支持，类似按钮组建的size属性

Reproduction URL

https://quasar.dev/vue-components/input#native-form-submit

How to reproduce?

1. Various components support size adjustment to meet adaptive

• 1. 各种组件支持大小调节以满足自适应

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Components (quasar)

Platforms/Browsers

No response

Quasar info output

No response

Relevant log output

No response

Additional context

No response

[github-actions]

Hi @guangxs! 👋

It looks like you provided an invalid or unsupported reproduction URL.
Do not use any service other than Codepen, jsFiddle, StackBlitz, Codesandbox, and GitHub.
Make sure the URL you provided is correct and reachable. You can test it by visiting it in a private tab, another device, etc.
Please edit your original post above and provide a valid reproduction URL as explained.

Without a proper reproduction, your issue will have to get closed.

Thank you for your collaboration. 👏

[HarisSpahija]

What are you exactly looking for? That you can adjust the padding size?

You can already adjust input sizing using overrides with input-style and input-class.
See example: https://codepen.io/harisspahija/pen/BavbzGB

It would help to share what input style you are trying to achieve so we can replicate it using the quasar way.

[guangxs]

Thank you very much for your reply and for the great example. However, this effect does not seem to be so friendly. You can refer to the style'size 'of "QBtn", for example: the option of [size name (xs | sm | md | lg | xl) ], so that the Quasar component can be used on different devices. Better adaptation effect. What I said about QInput is just an example. I hope Quasar has a set of configuration systems that automatically change the size or adapt to it. Here we hypothesis that each component has a common attribute "size", and automatic identification of "size" on devices of different sizes. The limit is to implement the automatic adjustment of the size of the component. Of course, the current "size" setting of QInput can be implemented using [style = "transform: scale (0.8) "], which also meets my needs. Thanks again 🙏!!! I wish you better and better!!!

…

---- 非常感谢您的回复，也谢谢您提供的很好的例子。 但是这样的效果似乎并不那么友好，您可以参考“QBtn”的风格‘size’，例如：[size name (xs|sm|md|lg|xl)]的选项，这样以便于Quasar 组件在不同设备上有更好的适配效果。 我所说的QInput只是个例，希望Quasar拥有一套大小尺寸自动变化的或者是自适应的配置体系，这里我们假设每个组件都有通用属性 "size"，在不同尺寸的设备上自动识别 “size”的界限，以实现自动调节组件的大小。 当然，QInput目前的“size”设置可以使用[style="transform: scale(0.8)"]来实现，也满足我的需求。 再次感谢🙏！！！ 祝越来越好！！！   江浒一只猫 ***@***.***  

------------------ 原始邮件 ------------------ 发件人: "Haris ***@***.***>; 发送时间: 2023年10月11日(星期三) 晚上6:24 收件人: ***@***.***>; 抄送: ***@***.***>; ***@***.***>; 主题: Re: [quasarframework/quasar] Resize QInput and other components / 输入框以及其它组件大小调节 (Issue #16441) What are you exactly looking for? That you can adjust the padding size? You can already adjust input sizing using overrides with input-style and input-class. See example: https://codepen.io/harisspahija/pen/BavbzGB It would help to share what input style you are trying to achieve so we can replicate it using the quasar way. — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: ***@***.***>

[HarisSpahija]

Ah I understand. that shouldnt be too hard to implement. There is already a general useSizeProps in https://github.com/quasarframework/quasar/blob/dev/ui/src/composables/private/use-size.js that we can reuse. Im not sure what the impact is on just implementing this everywhere, but it seems quite easy to just update QInput with

https://github.com/quasarframework/quasar/blob/dev/ui/src/components/input/QInput.js

props: {
	...useSizeProps
}

followed by

const sizeStyle = useSize(props, defaultSizes)

 getControl: () => {
        return h(isTextarea.value === true ? 'textarea' : 'input', {
          ref: inputRef,
          class: [
            'q-field__native q-placeholder',
            props.inputClass
          ],
          style: { ...props.inputStyle,  ...sizeStyle },
          ...inputAttrs.value,
          ...onEvents.value,
          ...(
            props.type !== 'file'
              ? { value: getCurValue() }
              : formDomProps.value
          )
        })
      },

Perhaps there will be some things broken in the animations for label. Ill experiment a bit with this.

[HarisSpahija]

So after experimenting its quite easy to add sizing. Its more the question what sizes should we support. Just increasing the font-size and padding might not be the most useful feature. Anyone any ideas?

[sohaha]

Any new developments on this