@invisionag/iris-react-views
v3.2.2
Published
```js import Views from '@invisionag/iris-react-views'; ```
Downloads
126
Maintainers
Keywords
Readme
import Views from '@invisionag/iris-react-views';
react-views
is a bundle of layout components that wrap other components to standardise pages.
Usage
View
This component provides the outer frame for all content that is being displayed as part of the injixo web applications (excluding text heavy content like the injixo.com website, the blog and injixo docs).
Except the navigation elements of injixo, everything else has to be placed inside this container component.
There are two distinct versions of the container that should cover all usecases. In other words, every single page inside injixo has to use that content container component to ensure consistency across apps.
What to consider
- Content inside the container has to adhere to the inner spacing of
1rem
to the container element - Do not create any additional offsets or layouts inside the container, i.e. place content at top left corner inside the container
Breakpoints for media queries
According to the usage statistics of injixo, there are only two relevant screen widths to consider:
- Small / Mobile: below 768px
- Large / Desktop: 768px or wider
Keep in mind, that the mobile usage almost completely comes from injixo Me. This means that injixo Me has to be designed with that target group in mind. Every other injixo component must not be broken on mobile screens but can be designed based on the graceful degradation approach. This means, we deliver a reasonable user experience on mobile devices, but for example with a reduced feature set, read-only view or a reduced information density.
Variants
1. Full width
import { View } from '@invisionag/iris-react-views';
<View>
This is the page content
</View>
To be used when
- There is a lot of space needed to display relevant information
- Other full width elements such as a toolbar or a sidebar are part of the page
- Screens are small (mobile). It is the only option to display content on mobile screens
Constraints
- This is the only available layout option for small/mobile screens
Characteristics
- There is no offset on either side around the content container
2. Centered
import { View } from '@invisionag/iris-react-views';
<View centered>
This is the page content
</View>
To be used when
- The space needed is limited, i.e. there would be an inbalance when content is being positioned at the top most left corner and the right section of the page would be almost empty
Constraints
- Screen has to be large/desktop. Centered layout must not be used on mobile screens to avoid loosing limited space
Characteristics
- Content container is limited to 1200px maximum width
- Below 1200px the content consumes 10 out of 12 columns or approx. 80% of the full page width
ViewWithSidebar
Simply pass your view component as a child and your sidebar as a prop to layout your page.
import { ViewWithSidebar } from '@invisionag/iris-react-views';
<ViewWithSidebar sidebar={<SomeDrawer />}>
This is the page content
</ViewWithSidebar>