You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
40 lines
1.8 KiB
HTML
40 lines
1.8 KiB
HTML
<h2>Filters<a href="#filters"></a></h2>
|
|
|
|
<h3>Filter by a group</h3>
|
|
<p>Use the <code>filter()</code> method. If, for example, you wanted to show only items that match <code>"space"</code>, you would do this:</p>
|
|
|
|
<div class="code-block">
|
|
<pre rel="JavaScript"><code class="language-javascript">shuffleInstance.filter('space');</code></pre>
|
|
</div>
|
|
|
|
<h3>Filter by multiple groups</h3>
|
|
<p>Show multiple groups at once by using an array.</p>
|
|
|
|
<div class="code-block">
|
|
<pre rel="JavaScript"><code class="language-javascript">shuffleInstance.filter(['space', 'nature']);</code></pre>
|
|
</div>
|
|
|
|
<p>By default, this will show items that match <code>space</code> <em>or</em> <code>nature</code>. To show only groups that match <code>space</code> <em>and</em> <code>nature</code>, set the <code>filterMode</code> option to <code>Shuffle.FilterMode.ALL</code>.</p>
|
|
|
|
<h3>Show all items</h3>
|
|
<p>To go back to having no items filtered, you can call <code>filter()</code> without a parameter, or use <code>Shuffle.ALL_ITEMS</code> (which by default is the string <code>"all"</code>).</p>
|
|
|
|
<div class="code-block">
|
|
<pre rel="JavaScript"><code class="language-javascript">shuffleInstance.filter(Shuffle.ALL_ITEMS); // or .filter()</code></pre>
|
|
</div>
|
|
|
|
<h3>Overrides</h3>
|
|
<p>You can override both <code>Shuffle.ALL_ITEMS</code> and <code>Shuffle.FILTER_ATTRIBUTE_KEY</code> if you want.</p>
|
|
|
|
<div class="code-block">
|
|
<pre rel="JavaScript"><code class="language-javascript">// Defaults
|
|
Shuffle.ALL_ITEMS = 'all';
|
|
Shuffle.FILTER_ATTRIBUTE_KEY = 'groups';
|
|
|
|
// You can change them to something else.
|
|
Shuffle.ALL_ITEMS = 'any';
|
|
Shuffle.FILTER_ATTRIBUTE_KEY = 'categories';</code></pre>
|
|
</div>
|
|
|
|
<p>Then you would have to use <code>data-categories</code> attribute on your items instead of <code>data-groups</code>.</p>
|