SHIFT + D

Filter by package

  • Overview
  • Ancestor variants
  • Composition
  • Edge
  • Features
  • Linear numeric
  • Logic
  • Prose
  • Source transform
  • SPA links
  • Utilities

List

Updated on August 22, 2024

BaleadaProseList is the Baleada version of ordered and unordered lists. Just like BaleadaProseTable, BaleadaProseList also comes with an opt-in "type to filter" feature.

Example

Markdown

  ::: readerCanSearch readerCanChangeSearchCaseSensitivity
  - row: even 0
  - row: odd 1
  - ROW: EVEN 2
  - ROW: ODD 3
  :::

  ::: readerCanSearch readerCanChangeSearchCaseSensitivity
  1. row: even 0
  2. row: odd 1
  3. ROW: EVEN 2
  4. ROW: ODD 3
  :::

Rendered

  • row: even 0
  • row: odd 1
  • ROW: EVEN 2
  • ROW: ODD 3
  1. row: even 0
  2. row: odd 1
  3. ROW: EVEN 2
  4. ROW: ODD 3

Props

Prop
Type
Required
Default
Description
readerCanSearch
Boolean
no
false
Indicates whether or not the list can be filtered by a query string.
searchIsCaseSensitive
Boolean
no
false

Indicates whether or not the list's query filtering is case sensitive by default.

When it's true, BaleadaProseTable renders a text input containing context.messages.list.searchPlaceholder.

For more info on context.messages, see the guide on using context.

minimumSearchScore
Number
no
1

Search results from your list are scored based on how closely they match the query. Any number between 0 and 1 is a valid minimumSearchScore, and a minimumSearchScore of 1 will filter out all list rows that don't contain a perfect match for the query.

Set a minimumSearchScore of less than 1 to enable fuzzy matching.

BaleadaProseTable uses Baleada Logic's Searchable class under the hood to support this feature.

readerCanChangeSearchCaseSensitivity
Boolean
no
false

Indicates whether or not your end user can change the list's searchIsCaseSensitive setting.

When it's true, BaleadaProseTable renders a checkbox and messages.list.changeSearchCaseSensitivityLabel.

For more info on context.messages, see the guide on using context.

classes
String
no
none
Adds additional classes to the component's root element.

Structure

Here's the structure of BaleadaProseList's markup, written in Pug for simplicity:

section.baleada-prose-list
  div // Only renders when readerCanSearch is true
    input type="text" placeholder="messages.list.searchPlaceholder" name="Search"
  div // Only renders when readerCanSearch and readerCanChangeSearchCaseSensitivity are true
    input type="checkbox" name="Change search case sensitivity"
    label // Contains messages.list.changeSearchCaseSensitivityLabel
  section.baleada-prose-contents
    slot // Your list slots in here, with its expected <ol> (or <ul>) and <li> markup.

HeadingSection

Edit doc on GitHub

ON THIS PAGE

ListExampleMarkdownRenderedProps