text: "use strict";(globalThis["webpackChunkquasar_dev"]=globalThis["webpackChunkquasar_dev"]||[]).push([[60638],{60638:(e,o,i)=>{i.r(o),i.d(o,{default:()=>Q});var s=i(83673);const t=(0,s._)("p",null,"QResponsive是一个组件，它可以强制内容保持基于其宽度的长宽比。",-1),a=(0,s._)("div",{class:"doc-note doc-note--tip"},[(0,s._)("p",{class:"doc-note__title"},"TIPS"),(0,s._)("ul",null,[(0,s._)("li",null,[(0,s.Uk)("该组件可以与任何内容一起使用，只要您指定"),(0,s._)("strong",null,"一个直接子级"),(0,s.Uk)("。如果您需要其中的多个元素，请将它们包装在 "),(0,s._)("code",{class:"doc-token"},"<div>"),(0,s.Uk)(" 中。")]),(0,s._)("li",null,"您有责任确保您的内容不会溢出容器。")])],-1),l=(0,s._)("div",{class:"doc-note doc-note--warning"},[(0,s._)("p",{class:"doc-note__title"},"WARNING"),(0,s._)("p",null,[(0,s.Uk)("不要在已经有"),(0,s._)("code",{class:"doc-token"},"ration"),(0,s.Uk)("(比率)属性的Quasar组件上使用，如QImg或QVideo，或在有强制高度的组件上使用。")])],-1),n=(0,s._)("p",null,[(0,s.Uk)("请注意，我们使用的是垂直对齐("),(0,s._)("code",{class:"doc-token"},"items-start"),(0,s.Uk)(")，而不是默认的("),(0,s._)("code",{class:"doc-token"},"stretch"),(0,s.Uk)(")，这样，flexbox就不会在每个QResponsive组件上强制设置高度。")],-1),c=(0,s._)("p",null,"下面只是几个例子。QResponsive并不只限于QCard和QCarousel。",-1),d=(0,s._)("p",null,[(0,s.Uk)("请注意，当我们在QCarousel上使用QResponsive时，我们不会向QCarousel提供"),(0,s._)("code",{class:"doc-token"},"height"),(0,s.Uk)("属性，因为QResponsive会负责处理这个问题。")],-1),p=(0,s._)("p",null,"通过CSS类或内联，直接在QResponsive组件上应用最大高度(或最大宽度，等等等等)。记住，确保内容不会溢出容器仍然是你的责任。",-1);function r(e,o,i,r,u,v){const _=(0,s.up)("doc-api"),h=(0,s.up)("doc-example"),Q=(0,s.up)("doc-page");return(0,s.wg)(),(0,s.j4)(Q,{"meta-title":r.metaTitle,title:"反应式",nav:r.nav,toc:r.toc,"meta-desc":r.metaDesc},{default:(0,s.w5)((()=>[t,(0,s._)("h2",{id:"qresponsive-api",class:"doc-heading doc-h2",onClick:o[0]||(o[0]=e=>r.copyHeading("qresponsive-api"))},"QResponsive API"),(0,s.Wm)(_,{file:"QResponsive"}),(0,s._)("h2",{id:"使用方法",class:"doc-heading doc-h2",onClick:o[1]||(o[1]=e=>r.copyHeading("使用方法"))},"使用方法"),a,l,(0,s._)("h3",{id:"基础",class:"doc-heading doc-h3",onClick:o[2]||(o[2]=e=>r.copyHeading("基础"))},"基础"),(0,s.Wm)(h,{title:"基本用法",file:"QResponsive/Basic"}),(0,s._)("h3",{id:"弹性行",class:"doc-heading doc-h3",onClick:o[3]||(o[3]=e=>r.copyHeading("弹性行"))},"弹性行"),n,(0,s.Wm)(h,{title:"基本用法",file:"QResponsive/FlexRow"}),(0,s._)("h3",{id:"在某些组件上",class:"doc-heading doc-h3",onClick:o[4]||(o[4]=e=>r.copyHeading("在某些组件上"))},"在某些组件上"),c,(0,s.Wm)(h,{title:"关于QCard",file:"QResponsive/Card"}),(0,s.Wm)(h,{title:"关于QCardSection",file:"QResponsive/CardSection"}),(0,s.Wm)(h,{title:"关于QTable",file:"QResponsive/Table"}),d,(0,s.Wm)(h,{title:"在QCarousel上",file:"QResponsive/Carousel"}),(0,s._)("h3",{id:"最大高度",class:"doc-heading doc-h3",onClick:o[5]||(o[5]=e=>r.copyHeading("最大高度"))},"最大高度"),p,(0,s.Wm)(h,{title:"QCard上",file:"QResponsive/MaxHeight"})])),_:1},8,["meta-title","nav","toc","meta-desc"])}var u=i(17536);const v={name:"DocMarkdownPage",setup(){return{metaTitle:"反应式",metaDesc:"QResponsive Vue组件强迫内容保持基于其宽度的长宽比。",nav:[{name:"评价",category:"Vue 组件",path:"/vue-components/rating",dir:"left"},{name:"滚动区域",category:"Vue 组件",path:"/vue-components/scroll-area",dir:"right"}],toc:[{id:"qresponsive-api",title:"QResponsive API"},{id:"使用方法",title:"使用方法"},{id:"基础",title:"基础",sub:!0},{id:"弹性行",title:"弹性行",sub:!0},{id:"在某些组件上",title:"在某些组件上",sub:!0},{id:"最大高度",title:"最大高度",sub:!0}],copyHeading:u.Et}}};var _=i(74260);const h=(0,_.Z)(v,[["render",r]]),Q=h}}]);