Skip to content

Latest commit

 

History

History
188 lines (126 loc) · 3.21 KB

API.md

File metadata and controls

188 lines (126 loc) · 3.21 KB

SheetElement

HTML Custom Element for creating sheets

Example: Define the element in the registry and use it in your HTML 
customElements.define("ui-sheet", SheetElement)

// in HTML:
<ui-sheet>
  <p>Hello World!</p>
</ui-sheet>
Example: Open the sheet by default 
<ui-sheet open>
  <p>Hello World!</p>
</ui-sheet>
Example: Execute certain actions when the sheet opens or closes 
const sheet = document.querySelector("...")

sheet.addEventListener("open", event => {
  console.log("The sheet is now shown")
})

sheet.addEventListener("close", event => {
  console.log("The sheet is now closed")
})
Example: Confirm whether the user actually wants to close a sheet without submition 
// HTML:
<ui-sheet>
  <form method="dialog">
    <textbox placeholder="Your feedback" required></textbox>
    <button type="submit">Send</button>
  </form>
</ui-sheet>

// JavaScript:
sheet.addEventListener("cancel", event => {
  const userWantsToClose = confirm("Are you sure you want to close the form without submition?")
  if (!userWantsToClose) {
    // the sheet is not going to be closed
    event.preventDefault()
  }
})
Example: Open the sheet programmatically 
const sheet = document.querySelector("...")

sheet.showModal()
// is the same as:
sheet.show()
Example: Show a title in the sheet header 
<ui-sheet>
  <h2 slot="title-area">Title</h2>
  <!-- ... -->
</ui-sheet>
Example: Replace a button in the sheet header 
<ui-sheet id="sheet">
  <button slot="button-area" type="button" aria-controls="sheet" onclick="sheet.close()">Close</button>
  <!-- ... -->
</ui-sheet>

options

Options for behavior customization

Example: Make the sheet not close on backdrop click 
<ui-sheet ignore-backdrop-click>
  ...
</ui-sheet>
Example: Make the sheet not close when pressing Escape 
<ui-sheet ignore-escape-key>
  ...
</ui-sheet>
Example: Make the sheet not close when dragging it down 
<ui-sheet ignore-dragging-down>
  ...
</ui-sheet>

returnValue

Gets or sets the return value for the sheet, usually to indicate which button the user pressed to close it.

see: https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/returnValue

type: string

showModal(): void

Open the sheet

show(): void

Open the sheet

close(): void

Collapse the sheet

get open(): boolean

Check if the sheet is open

set open(value: boolean): boolean

An alternative way to open or close the sheet

Example 
sheet.open = true  // the same as executing sheet.show()
sheet.open = false // the same as executing sheet.close()