kopia lustrzana https://github.com/shoelace-style/shoelace
improve custom icons
Cory LaViska
rodzic
afb2e3d5b4
commit
8b28ee818f
|
|
@ -48,25 +48,47 @@ 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.
|
||||
Use the `expand-icon` and `collapse-icon` slots to change the expand and collapse icons, respectively. To disable the animation, override the `rotate` property on the `summary-icon` part as shown below.
|
||||
|
||||
```html preview
|
||||
<sl-details summary="Toggle Me">
|
||||
<sl-icon slot="summary-icon" name="arrow-right"></sl-icon>
|
||||
<sl-details summary="Toggle Me" class="custom-icon">
|
||||
<sl-icon name="plus-square" slot="expand-icon"></sl-icon>
|
||||
<sl-icon name="dash-square" slot="collapse-icon"></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>
|
||||
|
||||
<style>
|
||||
sl-details.custom-icon::part(summary-icon) {
|
||||
/* Disable the expand/collapse animation */
|
||||
rotate: none;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlDetails, SlIcon } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const css = `
|
||||
sl-details.custom-icon::part(summary-icon) {
|
||||
/* Disable the expand/collapse animation */
|
||||
rotate: none;
|
||||
}
|
||||
`;
|
||||
|
||||
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>
|
||||
<>
|
||||
<SlDetails summary="Toggle Me" class="custom-icon">
|
||||
<SlIcon name="plus-square" slot="expand-icon" />
|
||||
<SlIcon name="dash-square" slot="collapse-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.
|
||||
</SlDetails>
|
||||
|
||||
<style>{css}</style>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +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)
|
||||
- Added the `expand-icon` and `collapse-icon` slots to `<sl-details>` and refactored the icon animation [#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)
|
||||
|
|
|
|||
|
|
@ -63,6 +63,15 @@ export default css`
|
|||
rotate: 90deg;
|
||||
}
|
||||
|
||||
.details--open.details--rtl .details__summary-icon {
|
||||
rotate: -90deg;
|
||||
}
|
||||
|
||||
.details--open slot[name='expand-icon'],
|
||||
.details:not(.details--open) slot[name='collapse-icon'] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.details__body {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,7 +21,8 @@ import type { CSSResultGroup } from 'lit';
|
|||
*
|
||||
* @slot - The details' content.
|
||||
* @slot summary - The details' summary. Alternatively, you can use the `summary` attribute.
|
||||
* @slot summary-icon - The icon to show next to the summary.
|
||||
* @slot expand-icon - The expand icon's `<slot>`.
|
||||
* @slot collapse-icon - The collapse icon's `<slot>`.
|
||||
*
|
||||
* @event sl-show - Emitted when the details opens.
|
||||
* @event sl-after-show - Emitted after the details opens and all animations are complete.
|
||||
|
|
@ -31,7 +32,7 @@ import type { CSSResultGroup } from 'lit';
|
|||
* @csspart base - The component's internal wrapper.
|
||||
* @csspart header - The summary header.
|
||||
* @csspart summary - The details summary.
|
||||
* @csspart summary-icon - The summary icon's `<slot>` container.
|
||||
* @csspart summary-icon - The container that houses the expand and collapse icons.
|
||||
* @csspart content - The details content.
|
||||
*
|
||||
* @animation details.show - The animation to use when showing details. You can use `height: auto` with this animation.
|
||||
|
|
@ -44,6 +45,7 @@ export default class SlDetails extends ShoelaceElement {
|
|||
@query('.details') details: HTMLElement;
|
||||
@query('.details__header') header: HTMLElement;
|
||||
@query('.details__body') body: HTMLElement;
|
||||
@query('.details__expand-icon-slot') expandIconSlot: HTMLSlotElement;
|
||||
|
||||
private readonly localize = new LocalizeController(this);
|
||||
|
||||
|
|
@ -153,13 +155,16 @@ export default class SlDetails extends ShoelaceElement {
|
|||
}
|
||||
|
||||
render() {
|
||||
const isRtl = this.localize.dir() === 'rtl';
|
||||
|
||||
return html`
|
||||
<div
|
||||
part="base"
|
||||
class=${classMap({
|
||||
details: true,
|
||||
'details--open': this.open,
|
||||
'details--disabled': this.disabled
|
||||
'details--disabled': this.disabled,
|
||||
'details--rtl': isRtl
|
||||
})}
|
||||
>
|
||||
<header
|
||||
|
|
@ -176,9 +181,14 @@ export default class SlDetails extends ShoelaceElement {
|
|||
>
|
||||
<slot name="summary" part="summary" class="details__summary">${this.summary}</slot>
|
||||
|
||||
<slot name="summary-icon" part="summary-icon" class="details__summary-icon">
|
||||
<sl-icon name="chevron-right" library="system"></sl-icon>
|
||||
</slot>
|
||||
<span part="summary-icon" class="details__summary-icon">
|
||||
<slot name="expand-icon">
|
||||
<sl-icon library="system" name=${isRtl ? 'chevron-left' : 'chevron-right'}></sl-icon>
|
||||
</slot>
|
||||
<slot name="collapse-icon">
|
||||
<sl-icon library="system" name=${isRtl ? 'chevron-left' : 'chevron-right'}></sl-icon>
|
||||
</slot>
|
||||
</span>
|
||||
</header>
|
||||
|
||||
<div class="details__body">
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue