Filters
Filters are a list of items selected by the user that can be removed by clicking on them. They are found under headers and in member dialogs, for example.
Filters
Classes
- lotusFilters2 - the class assigned to the component div
- lotusFilter - the class assigned to a filter link
- lotusDelete - the class assigned to the delete image
- lotusAltText - the class assigned to a span tag with an "X" inside it, for high contrast mode.
- lotusDivider - the class assigned to a span tag that can be used as a separator
Basic Implementation
Create div and assign it the class of lotusFilters2. Inside that, create as many filters as you'd like, using link tags. You can intersperse plain text with the links.
Inside the link, after the link text, put an img tag with the class lotusDelete and the sourcc blank.gif. Put width and height attributes of 12px. Do not leave a space in between the text and the link, the css takes care of the spacing.
Put <span class="lotusAltText">X</span> after the image tag, for the X to show up in high contrast mode.
IMPORTANT NOTE: In IE6 and 7, our CSS to insert \u200F when in RTL mode won't work. If the resulting behavior isn't acceptable for your product in IE6 and IE7, you can use code to insert ‏ before the img. If you are doing this using javascript, use \u200F.
Examples
Sample HTML
CSS (filters.css)
Theme CSS (filtersTheme.css)
March 2010: Filters used to be part of the header component, but they have started to be used in other areas. So we have made them a unique component.