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"}}](https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-list-searchlist-0.gif)
Configuration
- Import the
vtex.list
app to your theme's peer dependencies in themanifest.json
file as in the following example:
_10 "peerDependencies": {_10 "vtex.list": "3.x"_10 }
- Add the
search-list
block to other theme block, such as theflex-layout.col
. For example:
_10 "flex-layout.col": {_10 "children": [_10+ "search-list",_10 ]_10 }
Props
Prop Name | Type | Description | Default value |
---|---|---|---|
title | string | Title for the search bar | " Find a list " |
subtitle | string | Subtitle for the search bar | " Find public lists by typing the name of the list or owners " |
placeholder | string | Placeholder inside the search bar | " Name of list or owners " |
button | boolean | Add buttons to create list and my lists above the search bar | false |
Customization
To apply CSS customizations in this and other blocks, follow the Using CSS handles for store customization guide.
CSS Handles |
---|
shareListContainer |
shareListIcon |
shareListNotification |