Modal
OrganismOdak kapanı dialog. Backdrop, ESC tuşu ile kapatma, ARIA labelledby/describedby ve sm/md/lg boyutu.
Confirm action
This action cannot be undone.
Are you sure you want to delete this item? All associated data will be permanently removed.
<%- include('modules/ui/Modal', {
id: 'confirm-modal',
title: 'Confirm action',
description: 'This action cannot be undone.',
children: 'Are you sure you want to delete this item?
',
footer: ''
}) %>
Quick note
A compact modal for short confirmations or alerts.
<%- include('modules/ui/Modal', {
id: 'quick-note',
title: 'Quick note',
size: 'sm',
children: 'A compact modal for short confirmations.
',
footer: ''
}) %>Edit profile
<%- include('modules/ui/Modal', {
id: 'edit-profile',
title: 'Edit profile',
size: 'lg',
children: '...',
footer: '...'
}) %>Keyboard shortcuts
Press ESC to close at any time.
- Open search⌘K
- Close modalESC
- New item⌘N
<%- include('modules/ui/Modal', {
id: 'shortcuts',
title: 'Keyboard shortcuts',
description: 'Press ESC to close at any time.',
children: '...'
}) %><%
var _id = locals.id || 'modal-' + Math.random().toString(36).substr(2, 9);
var _title = locals.title || '';
var _description = locals.description || '';
var _open = !!locals.open;
var _sz = locals.size || 'md';
var _fullscreen = !!locals.fullscreen;
var _scrollable = !!locals.scrollable;
var _closeOnBackdropClick = locals.closeOnBackdropClick !== false;
var overlayClass = _open ? 'opacity-100' : 'opacity-0 pointer-events-none';
var sc = { sm: 'max-w-sm', md: 'max-w-md', lg: 'max-w-lg', xl: 'max-w-xl', '2xl': 'max-w-2xl' };
var sizeClass = _fullscreen ? '' : (sc[_sz] || 'max-w-md');
var titleId = _id + '-title';
var descId = _description ? (_id + '-desc') : '';
%>