menu
Dark Mode
backgroundLayer 1
preact-material-components
Components and their props
  • Dialog
    • no specific props
  • Dialog.Header
    • no specific props
  • Dialog.Body
    • scrollable true/false
      Adds vertical scroll for content.
  • Dialog.Footer
    • no specific props
  • Dialog.FooterButton
    • accept true/false
      Makes the button, default button.
    • cancel true/false
      Makes the button, cancel button.
Custom events
  • onAccept
    Fired when the dialog's accept button is clicked.
  • onCancel
    Fired when the dialog's cancel button is clicked.
Sample code
import {h, Component} from 'preact';
import Dialog from 'preact-material-components/Dialog';
import Button from 'preact-material-components/Button';
import List from 'preact-material-components/List';
import 'preact-material-components/List/style.css';
import 'preact-material-components/Button/style.css';
import 'preact-material-components/Dialog/style.css';

export default class DialogPage extends Component {
  render(){
    return (
      <div>
        <Button primary={true} raised={true} onClick={()=>{
          this.scrollingDlg.MDComponent.show();
        }}>
          Show Scrollable Dialog
        </Button>
        <Dialog ref={scrollingDlg=>{this.scrollingDlg=scrollingDlg;}}>
          <Dialog.Header>Scroll for me ;)</Dialog.Header>
          <Dialog.Body scrollable={true}>
            <List>
              <List.Item>Item 1</List.Item>
              <List.Item>Item 2</List.Item>
              <List.Item>Item 3</List.Item>
              <List.Item>Item 4</List.Item>
              <List.Item>Item 5</List.Item>
            </List>
          </Dialog.Body>
          <Dialog.Footer>
            <Dialog.FooterButton cancel={true}>Decline</Dialog.FooterButton>
            <Dialog.FooterButton accept={true}>Accept</Dialog.FooterButton>
          </Dialog.Footer>
        </Dialog>
      </div>
    );
  }
}
Original documentation
This component encapsulates mdc-dialog, you can refer to its documentation here.
Demo