Enhance DeesToast component with new features and improved demo

- Updated README to reflect new toast positions and convenience methods.
- Expanded demo functionality to showcase various toast types, positions, and durations.
- Added programmatic control for toast dismissal and multiple toast notifications.
- Introduced new toast positions: top-center and bottom-center.
- Implemented a progress bar for auto-dismiss functionality.
- Improved styling and animations for better user experience.
This commit is contained in:
Juergen Kunz
2025-06-12 09:33:46 +00:00
parent 4eef9fc731
commit 987f557c60
5 changed files with 1679 additions and 901 deletions

View File

@ -104,7 +104,7 @@ Loading indicator with customizable appearance.
```
#### `DeesToast`
Notification toast messages with various styles and auto-dismiss.
Notification toast messages with various styles, positions, and auto-dismiss functionality.
```typescript
// Programmatic usage
@ -112,18 +112,43 @@ DeesToast.show({
message: 'Operation successful',
type: 'success', // Options: info, success, warning, error
duration: 3000, // Time in milliseconds before auto-dismiss
position: 'top-right' // Options: top-right, top-left, bottom-right, bottom-left
position: 'top-right' // Options: top-right, top-left, bottom-right, bottom-left, top-center, bottom-center
});
// Component usage
// Convenience methods
DeesToast.info('Information message');
DeesToast.success('Success message');
DeesToast.warning('Warning message');
DeesToast.error('Error message');
// Advanced control
const toast = await DeesToast.show({
message: 'Processing...',
type: 'info',
duration: 0 // No auto-dismiss
});
// Later dismiss programmatically
toast.dismiss();
// Component usage (not typically used directly)
<dees-toast
message="Changes saved"
type="success"
autoClose
duration="3000"
></dees-toast>
```
Key Features:
- Multiple toast types with distinct icons and colors
- 6 position options for flexible placement
- Auto-dismiss with visual progress indicator
- Manual dismiss by clicking
- Smooth animations and transitions
- Automatic stacking of multiple toasts
- Theme-aware styling
- Programmatic control
### Form Components
#### `DeesForm`