mozilla

Revision 365367 of Patterns

  • Revision slug: Mozilla/Firefox_OS/UX/Patterns
  • Revision title: Patterns
  • Revision id: 365367
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment replace entry sheet mockup with a screen shot

Revision Content

{{draft()}}

Patterns are methods of interaction with your app. Unlike the building blocks, which describe particular user interface elements, patterns are ways those building blocks are presented.

Drawer


 Details
Coding guide

{{FXOSUGSummary("/en-US/docs/Mozilla/Firefox_OS/UX/Patterns/Drawer")}}

Entry sheet


 Details
Coding guide

{{FXOSUGSummary("/en-US/docs/Mozilla/Firefox_OS/UX/Patterns/Entry_sheet")}}

Multi select (Edit mode or Select mode)


 Details
Coding guide

{{FXOSUGSummary("/en-US/docs/Mozilla/Firefox_OS/UX/Patterns/Multi_select")}}


 Details
Coding guide

{{FXOSUGSummary("/en-US/docs/Mozilla/Firefox_OS/UX/Patterns/Search")}}

 

Revision Source

<p>{{draft()}}</p>
<p><strong>Patterns</strong> are methods of interaction with your app. Unlike the building blocks, which describe particular user interface elements, patterns are ways those building blocks are presented.</p>
<table class="withoutBorder">
  <tbody>
    <tr>
      <td colspan="2">
        <h2 id="Drawer">Drawer</h2>
      </td>
    </tr>
    <tr>
      <td style="vertical-align: top; width: 180px;">
        <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/5000/drawer-normal.png" style="width: 160px; height: 230px;" /><br />
          &nbsp;<a href="/en-US/docs/Mozilla/Firefox_OS/UX/Patterns/Drawer">Details</a><br />
          <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Patterns/Drawer/Coding">Coding guide</a></p>
      </td>
      <td style="vertical-align: top;">
        <p>{{FXOSUGSummary("/en-US/docs/Mozilla/Firefox_OS/UX/Patterns/Drawer")}}</p>
      </td>
    </tr>
    <tr>
      <td colspan="2" style="vertical-align: top; width: 180px;">
        <h2 id="Entry_sheet">Entry sheet</h2>
      </td>
    </tr>
    <tr>
      <td style="vertical-align: top; width: 180px;">
        <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/5051/entry-sheet-screenshot.png" style="width: 160px; height: 240px;" /><br />
          &nbsp;<a href="/en-US/docs/Mozilla/Firefox_OS/UX/Patterns/Entry_sheet">Details</a><br />
          <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Patterns/Entry_sheet/Coding">Coding guide</a></p>
      </td>
      <td style="vertical-align: top;">{{FXOSUGSummary("/en-US/docs/Mozilla/Firefox_OS/UX/Patterns/Entry_sheet")}}</td>
    </tr>
    <tr>
      <td colspan="2" style="vertical-align: top; width: 180px;">
        <h2 id="Multi_select_(Edit_mode_or_Select_mode)">Multi select (Edit mode or Select mode)</h2>
      </td>
    </tr>
    <tr>
      <td style="vertical-align: top; width: 180px;">
        <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/5049/editmode-screenshot.png" style="width: 160px; height: 240px;" /><br />
          &nbsp;<a href="/en-US/docs/Mozilla/Firefox_OS/UX/Patterns/Multi_select">Details</a><br />
          <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Patterns/Multi_select/Coding">Coding guide</a></p>
      </td>
      <td style="vertical-align: top;">{{FXOSUGSummary("/en-US/docs/Mozilla/Firefox_OS/UX/Patterns/Multi_select")}}</td>
    </tr>
    <tr>
      <td colspan="2" style="vertical-align: top; width: 180px;">
        <h2 id="Search">Search</h2>
      </td>
    </tr>
    <tr>
      <td style="vertical-align: top; width: 180px;">
        <p style="text-align: center;"><br />
          &nbsp;<a href="/en-US/docs/Mozilla/Firefox_OS/UX/Patterns/Search">Details</a><br />
          <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Patterns/Search/Coding">Coding guide</a></p>
      </td>
      <td style="vertical-align: top;">{{FXOSUGSummary("/en-US/docs/Mozilla/Firefox_OS/UX/Patterns/Search")}}</td>
    </tr>
  </tbody>
</table>
<p>&nbsp;</p>
Revert to this revision