import { Meta, Story, Preview } from '@storybook/addon-docs/blocks' import { action } from '@storybook/addon-actions' # View Layout The general layout is how the elements of a page are arranged inside the web page. It defines where to put elements such as: - Navigation elements, - Main action, - The name of the view, - Secondary and tertiary actions, - The main content of the page, - Bottom navigation bar (mainly using for navigation). ## Header ### Usage The **header** helps users understand the context they are in and the main action they can do in that specific view and helps navigate backward. It contains: - The title of the view, - The main action, - If available, the back arrow to navigate backward or cancel an operation ### Do's Use a clear title for the view and only one main action. ### Dont's The header does not contain more than one action (primary or secondary whatsoever) and does not contains description or accessory text other than the title. --- ## Top action bar ### Usage The **top action bar** gives the user the ability to perform other actions on the content other than the main action. It contains: - Secondary and tertiary actions ### Dont's The top action bar is not for descriptive text, primary actions and messages. --- ## Content ### Usage The **content** is used to display elements such as data lists or the items you can manipulate with the main action or the secondary actions. The content can be modified or displayed. ### Dont's Don't add primary, secondary or tertiary actions to the content other than those that directly affect a single data item displayed in the content. --- ## Bottom action bar ### Usage The **bottom action bar** allows the users to navigate between elements of the content that are displayed as paginated lists. ### Dont's Don't add primary, secondary or tertiary actions other than navigation related to elements of the content.