Skip to content

README.md

Latest commit

 

History

History
89 lines (72 loc) · 3.41 KB

README.md

File metadata and controls

89 lines (72 loc) · 3.41 KB
Raw

Sorting

The sort menu allows the user to adjust the sort order of data in a list.

<script type="module">
  import '@brightspace-ui/core/components/sorting/sort.js';
  import '@brightspace-ui/core/components/sorting/sort-item.js';
</script>
<d2l-sort>
	<d2l-sort-item text="Most Relevant" value="relevant" selected></d2l-sort-item>
	<d2l-sort-item text="Recently Updated" value="updated"></d2l-sort-item>
	<d2l-sort-item text="Highest Rated" value="rating"></d2l-sort-item>
</d2l-sort>

Best Practices

  • Make the Sort the right-most component in a group of Search, Filters & Sort controls
  • Carefully consider the user’s workflow before adding a reversible order to the sort. Most sort options do not need to be reversible.
  • Write Sort option labels in Title Case
  • Make Sort labels specific rather than general — “Sort: Course Title” is better than “Sort: Alphabetical”.
  • Don’t include an excessive number of sorting options — every additional option increases the cognitive load on the user when making a decision
  • Don’t make phrasings too similar — the first word of the option should be unique (“Last Accessed”, “Enrolment Date”, “Date Pinned”)
  • Don’t use when sorting table data. If the data is presented with table column headers, use Sortable Column Buttons to apply sorting.

Sort [d2l-sort]

The <d2l-sort> element is a required wrapper around multiple <d2l-sort-item> elements.

<script type="module">
  import '@brightspace-ui/core/components/sorting/sort.js';
  import '@brightspace-ui/core/components/sorting/sort-item.js';
</script>
<d2l-sort>
	<d2l-sort-item text="Most Relevant" value="relevant" selected></d2l-sort-item>
	<d2l-sort-item text="Recently Updated" value="updated"></d2l-sort-item>
	<d2l-sort-item text="Highest Rated" value="rating"></d2l-sort-item>
</d2l-sort>

Properties

Property Type Description
disabled Boolean Disables the sort

Events

  • d2l-sort-change: dispatched when the selected sort item changes

Sort Item [d2l-sort-item]

The <d2l-sort-item> element represents an option within its parent <d2l-sort>.

<script type="module">
  import '@brightspace-ui/core/components/sorting/sort.js';
  import '@brightspace-ui/core/components/sorting/sort-item.js';
</script>
<d2l-sort opened>
	<d2l-sort-item text="Most Relevant" value="relevant" selected></d2l-sort-item>
	<d2l-sort-item text="Recently Updated" value="updated"></d2l-sort-item>
	<d2l-sort-item text="Highest Rated" value="rating"></d2l-sort-item>
</d2l-sort>

Properties

Property Type Description
text String, required Option text
value String, required Value of the option
selected Boolean Whether this is the selected sort option