quasar
quasar copied to clipboard
quasarframework
Update Outlined Inputs & Controls to match latest Material Design Components specification
Description
It would be nice to be able to set the input to use the Material outlined text field
Expected feature
Being able to create inputs like the ones on the right (label location)
1. Filled text fields
2. Outlined text fields
Here are examples of implementation in Google Material Components for web
https://material-components.github.io/material-components-web-catalog/#/component/text-field
Hi,
For perf reasons (and many CSS issues that would arise), label won't float like that. Sorry.
Never?
This label style is very important for faithful specs of Material Design 2, viwed like in project description.
Would happily accept a PR that takes perf into consideration (including browser CSS render speed) :)
In Vuetify 2 this works, unfortunately i won't have skills in CSS to make this, but i would love make
The label has a white background and is positioned (absolute) on top of the border. This is not hard to accomplish BUT the problem is identifying the correct background color for the label.
Any ideas?
In this example they break the input field into three sections:
So it doesnt look like they have to deal with background colors.
FYI, Vuetify has this.
https://vuetifyjs.com/en/components/text-fields
Scott
+1 I'm also interested in this style, it would be really useful and would become the main style of my application if released. Thank you!
Can be silly... but for me is too late. I ended jumping to element-ui for this.
@paladin2005 Maybe you can get some inspiration from this codepen: https://codepen.io/Hawkeye64/details/GRgpXEP
all the examples for quasar qfield are broken: https://quasar.dev/vue-components/field#Example--Design-Overview
every qfield example has "Field content" as input value. And every example does not respond to input( broken). Just look you'll see.
@ontwikkelfabriek QField is basically a wrapper that you can use to create custom input components. If you want a fully functional input component use QInput instead.
@ontwikkelfabriek (dobbel) @renanBritz is correct. QField is already automatically wrapped aropund QInput, QSelect and QField. But, you can wrap it around something like QCheckbox using the same model value to get a different look-and-feel.
Any news about this ? There is 2 PR addressing this isssue, https://github.com/quasarframework/quasar/pull/8669 and https://github.com/quasarframework/quasar/pull/7360. Are there any plans to merge any of them ?
I also noticed the behaviour of outlined QInput doens't follow Material design guidelines. Hope those two PR are going to be merged in main branch soon :)
@laspinacristian - Where do you see this in the guidelines? It's a suggested component with the outlined text field. But I can't find it in the actual design spec guidelines.
Scott
@laspinacristian - Where do you see this in the guidelines? It's a suggested component with the outlined text field. But I can't find it in the actual design spec guidelines.
Scott
Guidelines is not only the Design, are the components too.
@smolinari, I think I've used the word 'guidelines' improper.
What I wanted to say is that the same outlined text field in the material.io components collections has label on margins while it's focused.
https://material.io/components/text-fields#specs
Ok. Should have scrolled down/ looked closer. There are specs for the outlined field at the bottom.
Scott
@pdanpdan @smolinari @hmon Can we discuss about the state of this issue ? Can we pick one of the PR ? Can somebody do a review ?
@J3m5 If you use Q1 then you can use in package.json my branch. But there is no guarantee it will end up in the official one, so use with care.
In package.json replace quasar depencency with: "quasar": "https://github.com/pdanpdan/quasar#quasar-pdan-v1.15.13-beta.1"
Then do a yarn or npm install and start the app again.