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:
33
readme.md
33
readme.md
@ -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`
|
||||
|
Reference in New Issue
Block a user