<light-disclosure>
A <details> element packaged nicely to animate like a disclosure.
Typical Usage
export const x = "hi"
Rendering already open
If you want the preview to be rendered in an already open state, you can pass an open boolean attribute. This will disable the animation on first connect, and then re-enable animations on subsequent changes to open.
export const x = "hi"
Disabling animation
Open / close animations can be completely disabled with no-animation boolean attribute.
export const x = "hi"
API Reference
Imports
HTML
<!-- Auto registers as <light-disclosure> -->
<script type="module" src="https://cdn.jsdelivr.net/npm/light-pen/exports/components/light-disclosure/light-disclosure-register.js"></script>
HTML
<script type="module">
// Auto registers as <light-disclosure>
import "https://cdn.jsdelivr.net/npm/light-pen/exports/components/light-disclosure/light-disclosure-register.js"
// Manual Register
import LightDisclosure from "https://cdn.jsdelivr.net/npm/light-pen/exports/components/light-disclosure/light-disclosure.js"
LightDisclosure.define()
// => Registers as <light-disclosure>
</script>
JavaScript
// Auto registers as <light-disclosure>
import "light-pen/exports/components/light-disclosure/light-disclosure-register.js"
// Manual Register
import LightDisclosure "light-pen/exports/components/light-disclosure/light-disclosure.js"
LightDisclosure.define()
// => Registers as <light-disclosure>
Slots
| Name | Description |
|---|---|
default
|
The code to use for highlighting |
Attributes
| Name | Description | Reflects | Type | Default |
|---|---|---|---|---|
[Attribute + Property]
summary
|
-
|
|
string
|
""
|
[Attribute + Property]
open
|
-
|
|
boolean
|
false
|
[Attribute]
no-animation
[Property] noAnimation
|
-
|
|
boolean
|
false
|
Events
| Name | Description |
|---|---|
light-toggle
|
-
|
Functions
| Name | Description | Parameters |
|---|---|---|
click()
|
-
|
-
|
focus()
|
-
|
options: FocusOptions
|
handleTransitionEnd()
|
-
|
e: TransitionEvent
|
handleToggle()
|
Toggle fires after the attribute is set / unset, so its useless for expanded. But useful for when users search a page with “ctrl+f” |
_e: Event
|
handleSummaryClick()
|
-
|
e: Event
|