Documentation
Feedback
Guides

Search List

The search-list block displays a search box for public lists according to the name of the owner of the list or the name of the list.

{"base64":"  ","img":{"width":1658,"height":416,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":100589,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-list-searchlist-0.gif"}}

Configuration

  1. Import the vtex.list app to your theme's peer dependencies in the manifest.json file as in the following example:

_10
"peerDependencies": {
_10
"vtex.list": "3.x"
_10
}

  1. Add the search-list block to other theme block, such as the flex-layout.col. For example:

_10
"flex-layout.col": {
_10
"children": [
_10
+ "search-list",
_10
]
_10
}

Props

Prop NameTypeDescriptionDefault value
titlestringTitle for the search bar" Find a list "
subtitlestringSubtitle for the search bar" Find public lists by typing the name of the list or owners "
placeholderstringPlaceholder inside the search bar" Name of list or owners "
buttonbooleanAdd buttons to create list and my lists above the search barfalse

Customization

To apply CSS customizations in this and other blocks, follow the Using CSS handles for store customization guide.

CSS Handles
shareListContainer
shareListIcon
shareListNotification
Contributors
1
Photo of the contributor
+ 1 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
1
Photo of the contributor
+ 1 contributors
On this page