js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 12:09:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added placement property to sl-select (#687)

Browse Source 
* added placement to sl-select

* sl-select placement: just allow top and bottom
This commit is contained in:
Buni48
2022-02-21 15:04:21 +01:00
committed by GitHub
parent 0922ee202a
commit b24ff33fe0
2 changed files with 34 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
docs/components/select.md
View File

@@ -394,6 +394,33 @@ const App = () => (
);
```
### Placement
The preferred placement of the dropdown can be set with the `placement` attribute. Note that the actual position may vary to ensure the panel remains in the viewport.
```html preview
<sl-select placement="top">
<sl-menu-item value="option-1">Option 1</sl-menu-item>
<sl-menu-item value="option-2">Option 2</sl-menu-item>
<sl-menu-item value="option-3">Option 3</sl-menu-item>
</sl-select>
```
```jsx react
import {
SlMenuItem,
SlSelect
} from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlSelect placement="top">
<SlMenuItem value="option-1">Option 1</SlMenuItem>
<SlMenuItem value="option-2">Option 2</SlMenuItem>
<SlMenuItem value="option-3">Option 3</SlMenuItem>
</SlDropdown>
);
```
### Prefix & Suffix Icons
Use the `prefix` and `suffix` slots to add icons.