The last version of Internet Explorer, version 11, was released on October 17, 2013. This is a very long time ago when taking into account the rapid development of web technologies. These days it is often difficult and time consuming to get modern technologies to work well in this old browser. More and more frameworks are dropping support, and even Microsoft themselves has announced that they will fully drop support for IE in their own services in 2021.
Consequently, we have decided to not include support for IE in the Design Library website.
The filtering pattern allows users to narrow down specific data and its scope.
The filter pattern enables the user to further specify a query as filters are applied to large data. The pattern can include different components to customise the view.
Above: Slide-out for the filter pattern on desktop
The filter pattern is useful where a lot of data is presented in order to present relevant information by narrowing down big volumes of data. With predetermined options the user’s query can easily be presented using the filter pattern. A good example is in connection to a search field to enable the user to precise a query.
The filter pattern offers optional features such as “Save filter”. Saved filter is shown as a separate tab next to the filter tab in the slide-out. This feature is good to include in the filter pattern when the user frequently wants to reuse a combination of filter tags. When the user has added a filter to saved filters, the user can easily reuse the saved filter.
Above: Step-by-step example of how “Save filter” can be used
When the user has no saved filter, the dropdown for saved filters is not shown until a saved filter is created. Se below example.
Above: View without dropdown for saved filters when there are no saved filters.
Above: View with dropdown for saved filters when there exists at least one saved filter.
A filter tag is a component used to display a property in an intuitive and easy way. When including the filter tags, include the chips component for the user to easily see what choices were made.
Above: The filter tag
The chips component displays a chosen property (filter tag). Chips enables the user to remove the property directly in the current view for a smoother usage.
Above: The filter pattern and its content can differ depending on the context (see Related to).
The filter pattern and its content can differ depending on the context (see Related to).
Above: Example of how to use the section expander
For size specification for components, see related components.