تخطيط أساسي

هذه هي القواعد الأساسية لتكوين FlexLayout و FlexLayoutContainer.

الهيكل الأساسي

FlexLayoutهو تخطيط مقسم ذو اتجاه واحد (صف / عمود)، والأطفال يتكونون من FlexLayoutContainerإذا كان Fragment، يتم تسويته وإعادة معالجته، ولكن من الأفضل دائمًا أن تكون وحدة اللوحة الفعلية هي حاوية تحمل containerName.

tsx
<FlexLayout layoutName="workspace" direction="row">
  <FlexLayoutContainer containerName="workspace-left" isResizePanel>
    <LeftPanel />
  </FlexLayoutContainer>

  <FlexLayoutContainer containerName="workspace-main">
    <MainPanel />
  </FlexLayoutContainer>
</FlexLayout>

قاعدة layoutName / containerName

layoutName

레이아웃 단위의 고유 이름입니다. resize memory, container ref store, split screen store가 이 이름을 기준으로 묶입니다.

containerName

각 패널의 고유 이름입니다. open/close, double click, size observe, drag/drop target 식별에 사용됩니다.

direction

row는 좌우 분할, column은 상하 분할입니다.

تخطيط متداخل

إذا كنت ترغب في وضع تقسيم عمودي داخل تقسيم أفقي على نفس الشاشة، ضع حاوية أخرى داخل الحاوية. FlexLayoutيجب أن تكون كل تخطيطات layoutNameمختلفة لتجنب تصادم المتجر.

tsx
<FlexLayout layoutName="root" direction="row">
  <FlexLayoutContainer containerName="root-nav" isResizePanel>
    <Navigation />
  </FlexLayoutContainer>

  <FlexLayoutContainer containerName="root-content">
    <FlexLayout layoutName="content" direction="column">
      <FlexLayoutContainer containerName="content-editor" isResizePanel>
        <Editor />
      </FlexLayoutContainer>
      <FlexLayoutContainer containerName="content-console">
        <Console />
      </FlexLayoutContainer>
    </FlexLayout>
  </FlexLayoutContainer>
</FlexLayout>
© 2026 بيولناريم. جميع الحقوق محفوظة.مقدمةسياسة معالجة المعلومات الشخصية