OpenProject Lookbook

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<fieldset class="simple-filters--container">
  <a title="Close filter" class="simple-filters--close icon-context icon-close"></a>
  <legend>Simple Filters</legend>
  <ul class="simple-filters--filters">
    <li class="simple-filters--filter">
      <label for="filter-1" class="simple-filters--filter-name">Project</label>
      <div class="simple-filters--filter-value">
        <input id="filter-1" type="text" placeholder="select">
      </div>
    </li>
    <li class="simple-filters--filter">
      <label for="filter-2" class="simple-filters--filter-name">Status</label>
      <div class="simple-filters--filter-value">
        <select id="filter-2" class="simple-filters--select">
          <option value="=" label="Active" selected="selected">Active</option>
          <option value="!" label="Archived">Archived</option>
          <option value="!*" label="All">all</option>
        </select>
      </div>
    </li>
    <li class="simple-filters--filter">
      <label for="filter-3" class="simple-filters--filter-name">Name</label>
      <div class="simple-filters--filter-value">
        <select id="filter-3" class="simple-filters--select">
          <option value="=" label="Active" selected="selected">Active</option>
          <option value="!" label="Archived">Archived</option>
          <option value="!*" label="All">all</option>
        </select>
      </div>
    </li>
    <li class="simple-filters--controls">
      <a class="button -primary -small" href="#">Apply</a>
      <a class="button -small -with-icon icon-undo" href="#">Clear</a>
    </li>
  </ul>
</fieldset>

Simple filters

Simple filters are forms that serve the purpose of limiting the number of entries in a list. As opposed to advanced filters however, there is no operator selection to search with.

By default, simple filters can have multiple fields per row (as many as the given space allows).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<fieldset class="simple-filters--container">
  <a title="Close filter" class="simple-filters--close icon-context icon-close"></a>
  <legend>Simple Filters</legend>
  <ul class="simple-filters--filters">
    <li class="simple-filters--filter">
      <label for="filter-1" class="simple-filters--filter-name">Project</label>
      <div class="simple-filters--filter-value">
        <input id="filter-1" type="text" placeholder="select">
      </div>
    </li>
    <li class="simple-filters--filter">
      <label for="filter-2" class="simple-filters--filter-name">Status</label>
      <div class="simple-filters--filter-value">
        <select id="filter-2" class="simple-filters--select">
          <option value="=" label="Active" selected="selected">Active</option>
          <option value="!" label="Archived">Archived</option>
          <option value="!*" label="All">all</option>
        </select>
      </div>
    </li>
    <li class="simple-filters--filter">
      <label for="filter-3" class="simple-filters--filter-name">Name</label>
      <div class="simple-filters--filter-value">
        <select id="filter-3" class="simple-filters--select">
          <option value="=" label="Active" selected="selected">Active</option>
          <option value="!" label="Archived">Archived</option>
          <option value="!*" label="All">all</option>
        </select>
      </div>
    </li>
    <li class="simple-filters--controls">
      <a class="button -primary -small" href="#">Apply</a>
      <a class="button -small -with-icon icon-undo" href="#">Clear</a>
    </li>
  </ul>
</fieldset>

No params configured.