1"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[4320],{8800:(e,t,i)=>{i.r(t),i.d(t,{assets:()=>c,contentTitle:()=>r,default:()=>h,frontMatter:()=>o,metadata:()=>n,toc:()=>d});var s=i(85893),a=i(11151);const o={id:"widget-aspect-ratio",title:"Aspect Ratio",sidebar_label:"Aspect Ratio",slug:"/widget-aspect-ratio"},r=void 0,n={id:"widget-aspect-ratio",title:"Aspect Ratio",description:"About-Aspect-Ratio",source:"@site/src/markdown/widget-aspect-ratio.md",sourceDirName:".",slug:"/widget-aspect-ratio",permalink:"/docs/widget-aspect-ratio",draft:!1,unlisted:!1,editUrl:"https://github.com/hypi-universe/website/tree/main/packages/create-docusaurus/templates/shared/src/markdown/widget-aspect-ratio.md",tags:[],version:"current",frontMatter:{id:"widget-aspect-ratio",title:"Aspect Ratio",sidebar_label:"Aspect Ratio",slug:"/widget-aspect-ratio"}},c={},d=[{value:"Overview",id:"overview",level:2},{value:"Use Cases",id:"use-cases",level:2},{value:"Properties",id:"properties",level:2}];function l(e){const t={h2:"h2",img:"img",li:"li",p:"p",ul:"ul",...(0,a.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.p,{children:(0,s.jsx)(t.img,{alt:"About-Aspect-Ratio",src:i(37521).Z+"",width:"1905",height:"759"})}),"\n",(0,s.jsx)(t.h2,{id:"overview",children:"Overview"}),"\n",(0,s.jsx)(t.p,{children:"The Aspect Ratio is the width-to-height ratio of the screen or component. The Aspect Ratio layout widget sizes the child widget as per the given aspect ratio. Aspect ratio accommodates a single child. However, you may add another layout like a Column to the Aspect Ratio layout to add multiple widgets."}),"\n",(0,s.jsx)(t.h2,{id:"use-cases",children:"Use Cases"}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:"Aspect Ratio layout has rectangular shape."}),"\n",(0,s.jsx)(t.li,{children:"It can be used to resize and reposition the child widgets."}),"\n"]}),"\n",(0,s.jsx)(t.h2,{id:"properties",children:"Properties"}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:"If the Aspect Ratio is 1, it means the layout is a perfect square with equal width and height. If it is greater than 1, the height reduces and the layout becomes a rectangle. If it is less than 1, the width reduces and the layout becomes a rectangle with a vertical column."}),"\n",(0,s.jsx)(t.li,{children:"Drag the child widget from the widgets panel to the Properties panel or onto the Screen."}),"\n"]})]})}function h(e={}){const{wrapper:t}={...(0,a.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(l,{...e})}):l(e)}},37521:(e,t,i)=>{i.d(t,{Z:()=>s});const s=i.p+"assets/images/Widget-Aspect-Ratio-1-291116c890370aa48d3d597044ff3911.png"},11151:(e,t,i)=>{i.d(t,{Z:()=>n,a:()=>r});var s=i(67294);const a={},o=s.createContext(a);function r(e){const t=s.useContext(o);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function n(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:r(e.components),s.createElement(o.Provider,{value:t},e.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.