卡片

机器翻译

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

任务： 把几项并排显示，每一项在自己的盒子里。

yaml

# Recipe: cards with a header, a body and a footer, in a grid.
paths:
  components: ./components

ui:card 包含 ui:card-header、ui:card-body 和 ui:card-footer，都是可选的。 ui:grid columns="3" 把卡片排成三列。只有标题和一些文本的卡片不需要这些部分： title= 就够了。

xml

<q:component name="Plans">
  <q:set name="plans" type="array"
         value='[{"name": "Free", "price": 0, "seats": 1}, {"name": "Team", "price": 12, "seats": 10}, {"name": "Company", "price": 40, "seats": 100}]' />

  <ui:window title="Plans">
    <!-- Three columns; the grid wraps on a narrow screen. -->
    <ui:grid columns="3" gap="md" padding="lg">
      <q:loop type="array" var="plan" items="{plans}">
        <ui:card>
          <ui:card-header>
            <ui:text weight="bold">{plan.name}</ui:text>
          </ui:card-header>
          <ui:card-body>
            <ui:text>${plan.price} a month</ui:text>
            <ui:text>Up to {plan.seats} people</ui:text>
          </ui:card-body>
          <ui:card-footer>
            <ui:link to="/signup?plan={plan.name}">Choose {plan.name}</ui:link>
          </ui:card-footer>
        </ui:card>
      </q:loop>
    </ui:grid>
    <!-- A card with only a title and text needs no parts. -->
    <ui:card title="Not sure?" padding="lg">
      <ui:text>Every plan starts with 30 free days.</ui:text>
    </ui:card>
  </ui:window>
</q:component>

xml

<q:test name="one card per plan, with its three parts" page="/">
  <test:visit />
  <test:expect text="Free $0 a month Up to 1 people Choose Free" />
  <test:expect text="Company $40 a month Up to 100 people Choose Company" />
</q:test>

<q:test name="a card with a title only" page="/">
  <test:visit />
  <test:expect text="Not sure? Every plan starts with 30 free days." />
</q:test>

text

tests/cards.test.q
  PASS  one card per plan, with its three parts
  PASS  a card with a title only
2 passed, 0 failed

参见 UI-7。

卡片 ​

卡片