<light-disclosure>
A <details> element packaged nicely to animate like a disclosure.
Typical Usage
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
|
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
|