In Beta - 0.5.1
Docs
SiftCMS UI StarterSiftCMS UI Starter
Component
The search input field.
To pair with the tag, it must have matching values. If there are multiple search fields in the filter, then each search attribute must have a unique value, and the tag you want to pair with must have this same value.
To pair with the tag, it must have matching values. If there are multiple search fields in the filter, then each search attribute must have a unique value, and the tag you want to pair with must have this same value.
The select field for filtering.
Inside it, it will have multiple <option> elements. Each <option> must have an attribute value=”name-of-the-attribute”.
To pair with the tag, it must have matching values. If there are multiple select fields in the filter, then each select attribute must have a unique value, and the tag you want to pair with must have this same value.
To pair with the tag, it must have matching values. If there are multiple select fields in the filter, then each select attribute must have a unique value, and the tag you want to pair with must have this same value.
The parent of the checkboxes for filtering.
Each checkbox must have a label with a for attribute. It will be this for value text content that will match the data-checkbox-tag.
Also, make sure each checkbox element has an id and name that has the same value as the for you gave to its respective label.
To pair with the tag, it must have matching values. If there are multiple checkboxes fields in the filter, then each select attribute must have a unique value, and the tag you want to pair with must have this same value.
To pair with the tag, it must have matching values. If there are multiple checkboxes fields in the filter, then each select attribute must have a unique value, and the tag you want to pair with must have this same value.
Collection Item
When a user types a text in the search field, the code will look at the content and compare it to the text that has this attribute, then filter the matching results.
When a user selects an option on the select field, the code will look at the tag text content and compare it to the option value selected, then filter the matching results.
To be a successful filter result, the name-of-the-attribute must be an exact matching result of the sift-select-tag text content.
Collection Item
When it comes to sorting, things are a little different.
We can sort by alphabetical order or by date. You can give the alphabetical tag to the Collection Item you want to order by letters (ex. Blog Post title), and the date tag to any date-related text (ex. Last Updated)
<option> inside [sift-sort-select=”true”] <select>
By selecting the <option> with this attribute, the Collection Items will be sorted by ascending order. So it will be numbers first, then A to Z.
By selecting the <option> with this attribute, the Collection Items will be sorted by descending order. So it will be Z to A first, then numbers.
By selecting the <option> with this attribute, the Collection Items will be sorted by the newest to oldest.
Attach this attribute to the element that you want to shown when there aren't any matching results when filtering.
Apply these custom attributes in the [sift-cms-items] element:
Tells the code how many items you want to display per page. Ex: sift-pagination-items="9"
On an empty <div>, attach the attribute below:
Here's all you can customize in pagination with CSS:
/* Pagination */
[sift-pagination-ui] {
}
/* All buttons in pagination */
[sift-pagination-ui] button {
}
/* Hover state for enabled buttons */
[sift-pagination-ui] button:not(:disabled):hover {
}
/* Active page button */
[sift-pagination-ui] button.active {
}
/* Disabled buttons (Previous/Next when at first/last page) */
[sift-pagination-ui] button:disabled {
}
/* Ellipsis styling */
[sift-pagination-ui] {
}
[sift-pagination-ui] {
}
/* All buttons in pagination */
[sift-pagination-ui] button {
}
/* Hover state for enabled buttons */
[sift-pagination-ui] button:not(:disabled):hover {
}
/* Active page button */
[sift-pagination-ui] button.active {
}
/* Disabled buttons (Previous/Next when at first/last page) */
[sift-pagination-ui] button:disabled {
}
/* Ellipsis styling */
[sift-pagination-ui] {
}
Attach this attribute to the button you want to be responsible for resetting all filters.
