如何解决复选框标签显示在复选框下方即使未加载样式也是如此
如何修复显示在框下方的默认(无样式)复选框标签(如示例所示,应位于框右侧)
我正在使用顺风车,并通过global string选项设置表单的样式。到目前为止,一切工作正常,直到我尝试设置复选框样式。问题是标签显示在框的下方,即使我删除了所有样式(如屏幕截图所示),这仍然是问题。我不知道如何使用global string选项来定位此标签,这是我一直在努力的结构,尝试设置label> Box和input> Box的样式以使标签位于复选框旁边。
Vue.use(VueFormulate,{
classes: {
outer: 'py-4',wrapper(context) {
switch (context.classification) {
case "button":
return "";
default:
return "bg-regal-blue-400 py-3 w-full hover:bg-regal-blue-500";
}
},label(context){
switch (context.classification) {
case "Box":
return "bg-red-500";
default:
return "w-full block text-gray-400 px-4 text-lg";
}
},element: 'w-full',input(context) {
switch (context.classification) {
case "button":
return "text-lg border-2 rounded-full h-12 bg-red-900 border-red-500 font-bold px-10 hover:bg-red-500 transition-colors duration-500 focus:outline-none";
case "textarea":
return "bg-transparent w-full mt-2 h-48 focus:outline-none text-xl placeholder-gray-700 px-4";
case "Box":
return "h-6 w-6";
default:
return "bg-transparent w-full h-10 focus:outline-none text-xl placeholder-gray-700 px-4";
}
},button: 'bg-red-500',help: '',errors: 'px-4',error: 'text-red-500'
}
})
即使在某些提供的代码框示例中,例如“通过配置Tailwind”,如果您向现有表单添加复选框,标签也会出现在复选框https://codesandbox.io/s/tailwind-vue-formulate-2-password-reset-all-global-kydyp
下解决方法
我认为所缺少的只是包装盒上的display: flex
。这是您为使用flex修改的配置提供的代码:
Vue.use(VueFormulate,{
classes: {
outer: "py-4",wrapper(context) {
switch (context.classification) {
case "button":
return "";
case "box":
return "w-full flex justify-start";
default:
return "bg-regal-blue-400 py-3 w-full hover:bg-regal-blue-500";
}
},label(context) {
switch (context.classification) {
case "box":
return "bg-red-500 flex-grow";
default:
return "w-full block text-gray-400 px-4 text-lg";
}
},element ({ classification }) {
switch (classification) {
case 'box':
return 'px-1';
default:
return 'w-full';
}
},input(context) {
switch (context.classification) {
case "button":
return "text-lg border-2 rounded-full h-12 bg-red-900 border-red-500 font-bold px-10 hover:bg-red-500 transition-colors duration-500 focus:outline-none";
case "textarea":
return "bg-transparent w-full mt-2 h-48 focus:outline-none text-xl placeholder-gray-700 px-4";
case "box":
return "h-6 w-6";
default:
return "bg-transparent w-full h-10 focus:outline-none text-xl placeholder-gray-700 px-4";
}
},button: "bg-red-500",help: "",errors: "px-4",error: "text-red-500"
}
});
这是示例的链接:https://codesandbox.io/s/tailwind-vue-formulate-checkbox-after-pwxh2?file=/src/main.js
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。