适应屏幕的布局

机器翻译

本页由英文原文机器翻译而来，尚未经过母语审校，欢迎在 GitHub 上提出修改。内容如有出入，以英文原文为准。

任务： 宽屏上侧边菜单在内容旁边，手机上在内容上方。

yaml

# Recipe: side by side on a wide screen, stacked on a narrow one.
paths:
  components: ./components

stack-below="md" 让 ui:hbox 中的盒子在宽度小于 md（浏览器中 768 px，终端中 96 列）时上下堆叠。width 固定侧边盒子的宽度，grow="true" 把剩余空间给内容，hide-below="lg" 让一条提示只在宽屏上显示。

xml

<q:component name="Inbox">
  <ui:window title="Inbox">
    <!-- Side by side from md up; below md (768 px) the boxes stack. -->
    <ui:hbox gap="lg" padding="lg" stack-below="md" id="main">
      <ui:vbox width="220" gap="sm" id="side">
        <ui:link to="/">Inbox (3)</ui:link>
        <ui:link to="/sent">Sent</ui:link>
        <!-- Only on wide screens: hidden below lg. -->
        <ui:text hide-below="lg">Tip: press / to search.</ui:text>
      </ui:vbox>

      <!-- grow takes the width the side box leaves. -->
      <ui:vbox gap="sm" grow="true">
        <ui:panel title="Welcome">
          <ui:text>The main content takes the rest of the width.</ui:text>
        </ui:panel>
        <ui:hbox gap="sm" justify="end">
          <ui:button>Archive</ui:button>
          <ui:button variant="primary">Reply</ui:button>
        </ui:hbox>
      </ui:vbox>
    </ui:hbox>
  </ui:window>
</q:component>

quantum test 读取的是页面的文本，而不是布局，所以它检查的是内容：

xml

<q:test name="both columns are on the page, side first" page="/">
  <test:visit />
  <test:expect text="Inbox (3) Sent" />
  <test:expect text="Welcome The main content takes the rest of the width." />
  <test:expect text="Archive Reply" />
</q:test>

text

tests/layout.test.q
  PASS  both columns are on the page, side first
1 passed, 0 failed

堆叠本身在终端里检查，那里的测试可以测量它：80 列时 #main 是堆叠的， 140 列时是并排的，#side 宽 220 / 8 = 27 列（tests/docs/test_cookbook_console.py）。规则： UI-2。

适应屏幕的布局 ​

适应屏幕的布局