简洁版通知组件 - HTML5企业组件库

基础用法

最基本的简洁通知，包含图标和文本信息。

注意：当前展示的是静态组件示例。如需自定义样式，请使用AI编辑器进行修改。

操作已成功完成

操作失败，请重试

HTML

<div class="simple-notification simple-notification-success">
    <div class="simple-notification-icon">
        <i class="mdi mdi-check-circle"></i>
    </div>
    <div class="simple-notification-content">
        操作已成功完成
    </div>
</div>

<div class="simple-notification simple-notification-error">
    <div class="simple-notification-icon">
        <i class="mdi mdi-close-circle"></i>
    </div>
    <div class="simple-notification-content">
        操作失败，请重试
    </div>
</div>

不同类型

简洁通知组件提供四种不同类型，用于表示不同的信息状态。

成功通知：操作已完成

错误通知：操作失败

警告通知：需要注意

信息通知：系统提示

HTML

<!-- 成功通知 -->
<div class="simple-notification simple-notification-success">
    <div class="simple-notification-icon">
        <i class="mdi mdi-check-circle"></i>
    </div>
    <div class="simple-notification-content">
        成功通知：操作已完成
    </div>
</div>

<!-- 错误通知 -->
<div class="simple-notification simple-notification-error">
    <div class="simple-notification-icon">
        <i class="mdi mdi-close-circle"></i>
    </div>
    <div class="simple-notification-content">
        错误通知：操作失败
    </div>
</div>

<!-- 警告通知 -->
<div class="simple-notification simple-notification-warning">
    <div class="simple-notification-icon">
        <i class="mdi mdi-alert-circle"></i>
    </div>
    <div class="simple-notification-content">
        警告通知：需要注意
    </div>
</div>

<!-- 信息通知 -->
<div class="simple-notification simple-notification-info">
    <div class="simple-notification-icon">
        <i class="mdi mdi-information"></i>
    </div>
    <div class="simple-notification-content">
        信息通知：系统提示
    </div>
</div>

动态创建

通过JavaScript动态创建简洁通知，可以控制通知的显示和自动消失。

JavaScript

// 创建简洁通知函数
function createSimpleNotification(type, message, duration = 3000) {
    const container = document.getElementById('notification-container');
    
    // 创建通知元素
    const notification = document.createElement('div');
    notification.className = `simple-notification simple-notification-${type}`;
    
    // 创建图标
    const iconDiv = document.createElement('div');
    iconDiv.className = 'simple-notification-icon';
    
    const icon = document.createElement('i');
    switch(type) {
        case 'success':
            icon.className = 'mdi mdi-check-circle';
            break;
        case 'error':
            icon.className = 'mdi mdi-close-circle';
            break;
        case 'warning':
            icon.className = 'mdi mdi-alert-circle';
            break;
        case 'info':
            icon.className = 'mdi mdi-information';
            break;
    }
    
    iconDiv.appendChild(icon);
    
    // 创建内容
    const content = document.createElement('div');
    content.className = 'simple-notification-content';
    content.textContent = message;
    
    // 组装通知
    notification.appendChild(iconDiv);
    notification.appendChild(content);
    
    // 添加到容器
    container.appendChild(notification);
    
    // 设置自动消失
    setTimeout(() => {
        notification.style.opacity = '0';
        notification.style.transform = 'translateY(-10px)';
        notification.style.transition = 'all 0.3s ease';
        
        setTimeout(() => {
            container.removeChild(notification);
        }, 300);
    }, duration);
    
    return notification;
}

// 绑定按钮事件
document.getElementById('show-success-btn').addEventListener('click', function() {
    createSimpleNotification('success', '操作已成功完成');
});

document.getElementById('show-error-btn').addEventListener('click', function() {
    createSimpleNotification('error', '操作失败，请重试');
});

API

简洁版通知组件的属性和类。

类名	说明	类型	默认值
simple-notification	基础类，所有简洁通知都需要添加	string	-
simple-notification-success	成功类型通知	string	-
simple-notification-error	错误类型通知	string	-
simple-notification-warning	警告类型通知	string	-
simple-notification-info	信息类型通知	string	-
simple-notification-icon	通知图标容器	string	-
simple-notification-content	通知内容	string	-

JavaScript函数

方法名	说明	参数	返回值
createSimpleNotification	创建简洁通知	(type, message, duration)	notification元素