mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-20 20:33:02 +00:00
refactor: remove useless div tag
This commit is contained in:
parent
e2c980e23a
commit
00e1ed69c6
1 changed files with 33 additions and 35 deletions
|
@ -54,43 +54,41 @@
|
||||||
}}"
|
}}"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<div>
|
<button
|
||||||
<button
|
bind:this="{ref}"
|
||||||
bind:this="{ref}"
|
type="button"
|
||||||
type="button"
|
class:bx--header__action="{true}"
|
||||||
class:bx--header__action="{true}"
|
class:bx--header__action--active="{isOpen}"
|
||||||
class:bx--header__action--active="{isOpen}"
|
class:action-text="{text}"
|
||||||
class:action-text="{text}"
|
{...$$restProps}
|
||||||
{...$$restProps}
|
on:click
|
||||||
on:click
|
on:click="{() => {
|
||||||
on:click="{() => {
|
isOpen = !isOpen;
|
||||||
isOpen = !isOpen;
|
dispatch(isOpen ? 'open' : 'close');
|
||||||
dispatch(isOpen ? 'open' : 'close');
|
}}"
|
||||||
|
>
|
||||||
|
<svelte:component this="{icon}" style="{isOpen ? 'display: none' : ''}" />
|
||||||
|
<svelte:component
|
||||||
|
this="{closeIcon}"
|
||||||
|
style="{!isOpen ? 'display: none' : ''}"
|
||||||
|
/>
|
||||||
|
<slot name="text">
|
||||||
|
{#if text}<span>{text}</span>{/if}
|
||||||
|
</slot>
|
||||||
|
</button>
|
||||||
|
{#if isOpen}
|
||||||
|
<div
|
||||||
|
bind:this="{refPanel}"
|
||||||
|
class:bx--header-panel="{true}"
|
||||||
|
class:bx--header-panel--expanded="{true}"
|
||||||
|
transition:slide="{{
|
||||||
|
...transition,
|
||||||
|
duration: transition === false ? 0 : transition.duration,
|
||||||
}}"
|
}}"
|
||||||
>
|
>
|
||||||
<svelte:component this="{icon}" style="{isOpen ? 'display: none' : ''}" />
|
<slot />
|
||||||
<svelte:component
|
</div>
|
||||||
this="{closeIcon}"
|
{/if}
|
||||||
style="{!isOpen ? 'display: none' : ''}"
|
|
||||||
/>
|
|
||||||
<slot name="text">
|
|
||||||
{#if text}<span>{text}</span>{/if}
|
|
||||||
</slot>
|
|
||||||
</button>
|
|
||||||
{#if isOpen}
|
|
||||||
<div
|
|
||||||
bind:this="{refPanel}"
|
|
||||||
class:bx--header-panel="{true}"
|
|
||||||
class:bx--header-panel--expanded="{true}"
|
|
||||||
transition:slide="{{
|
|
||||||
...transition,
|
|
||||||
duration: transition === false ? 0 : transition.duration,
|
|
||||||
}}"
|
|
||||||
>
|
|
||||||
<slot />
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.action-text {
|
.action-text {
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue