@wix/design-system
Version:
@wix/design-system
60 lines (37 loc) • 1.44 kB
Markdown
## Feature Examples
### Structure
- description: The component consists of two labels accompanied by a location icon:<br/>
 - `mainLabel` - use it to display a main keywords for search suggestions;<br/>
 - `secondaryLabel` - use it for secondary address data, such as country or region.
- example:
```jsx
```
### States
- description: Control the state of a component with:<br/>
 - `highlighted` - use it to mark a suggested value<br/>
 - `selected` use it to mark an active selection<br/>
 - `disabled` - use it to mark an unavailable item
- example:
```jsx
```
### Layout
- description: Control option layout with optionLayout prop. It supports 2 values:<br/>
 - `single-line` (default) - use in all common cases<br/>
 - `double-line` - use for addresses that display more data (include country, region, post code and more)
- example:
```jsx
```
### Affix
- description: Support option value with additional information added to `prefix` and `suffix` props.
Props accept text, icons and even badges.<br/>
<br/>
`prefix` area by default is filled with a location icon to indicate that this is an address list item.
- example:
```jsx
```
## Common Use Case Examples
### List item builders
- description: Use it as a list item to build custom address input suggestions.
- example:
```jsx
```