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

add summary-icon slot + example; #1046

Browse Source
This commit is contained in:
Cory LaViska
2022-12-01 13:23:09 -05:00
parent fda9bd52a3
commit efea514f5a
4 changed files with 31 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
docs/components/details.md
View File

@@ -46,6 +46,30 @@ const App = () => (
);
```
### Customizing the Summary Icon
Use the `summary-icon` slot to change the summary icon. You can use `<sl-icon>` or your own SVG. By default, the icon will rotate 90º when the details opens and closes. If desired, you can style the `summary-icon` part to change the animation.
```html preview
<sl-details summary="Toggle Me">
<sl-icon slot="summary-icon" name="arrow-right"></sl-icon>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</sl-details>
```
```jsx react
import { SlDetails, SlIcon } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlDetails summary="Toggle Me">
<SlIcon slot="summary-icon" name="arrow-right" />
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</SlDetails>
);
```
### Grouping Details
Details are designed to function independently, but you can simulate a group or "accordion" where only one is shown at a time by listening for the `sl-show` event.

1
docs/resources/changelog.md
View File

@@ -11,6 +11,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti
## Next
- Added `header-actions` slot to `<sl-dialog>` and `<sl-drawer>`
- Added the `summary-icon` slot to `<sl-details>` [#1046](https://github.com/shoelace-style/shoelace/discussions/1046)
- Fixed a bug in `<sl-tree-item>` where `sl-selection-change` was emitted when the selection didn't change [#1030](https://github.com/shoelace-style/shoelace/pull/1030)
- Fixed a bug in `<sl-button-group>` that caused the border to render incorrectly when hovering over icons inside buttons [#1035](https://github.com/shoelace-style/shoelace/issues/1035)
- Fixed an incorrect default for `flip-fallback-strategy` in `<sl-popup>` that caused the fallback strategy to be `initial` instead of `best-fit`, which is inconsistent with Floating UI's default [#1036](https://github.com/shoelace-style/shoelace/issues/1036)