Mellowtel 元素样式和定位选项指南

在这里，你将看到如何使用内置样式选项和 CSS 容器定位来自定义 Mellowtel 元素的外观。容器样式让你完全控制布局和定位，而包样式选项控制元素的外观。

包样式选项

Mellowtel 元素包提供了内置的样式选项，让你无需编写自定义 CSS 就能自定义元素的外观。你可以通过配置对象直接控制颜色、尺寸和视觉属性。

const styles = {
  textColor: '#FFFFFF',        // 文本颜色（十六进制格式）
  backgroundColor: '#4CAF50',  // 背景颜色（十六进制格式）
  radius: 8,                   // 边框半径（像素）
  width: 200,                  // 宽度（像素，范围 50-300）
  height: 50                   // 高度（像素，范围 20-200）
};

示例

// 创建一个绿色的选择加入按钮
await mellowtel.createElement('opt-in-container', {
  type: 'opt-in',
  styles: {
    textColor: '#FFFFFF',
    backgroundColor: '#10B981',
    radius: 12,
    width: 180,
    height: 45
  }
});

容器定位

样式化容器 div 来定位元素：

/* 基本定位 */
.mellowtel-container {
  display: flex;
  gap: 10px;
  margin: 20px 0;
}

/* 固定定位 */
#opt-in-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
}

/* 响应式布局 */
.mellowtel-elements {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
  padding: 20px;
}

/* 移动端响应 */
@media (max-width: 768px) {
  .mellowtel-container {
    flex-direction: column;
    align-items: center;
  }
}

完整样式示例

<!DOCTYPE html>
<html>
<head>
    <style>
        .mellowtel-wrapper {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            padding: 40px;
            border-radius: 12px;
            margin: 20px;
        }
        
        .mellowtel-elements {
            display: flex;
            gap: 15px;
            justify-content: center;
            flex-wrap: wrap;
        }
        
        .element-container {
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="mellowtel-wrapper">
        <h2>Mellowtel 元素</h2>
        <div class="mellowtel-elements">
            <div class="element-container">
                <div id="opt-in-container"></div>
            </div>
            <div class="element-container">
                <div id="opt-out-container"></div>
            </div>
            <div class="element-container">
                <div id="settings-container"></div>
            </div>
        </div>
    </div>

    <script>
        import { MellowtelElements } from 'mellowtel-elements';
        
        const mellowtel = new MellowtelElements('your-extension-id', 'your-config-key');

        // 创建具有自定义样式的元素
        mellowtel.createElement('opt-in-container', {
            type: 'opt-in',
            styles: {
                backgroundColor: '#10B981',
                textColor: '#FFFFFF',
                radius: 12,
                width: 180,
                height: 45
            }
        });

        mellowtel.createElement('opt-out-container', {
            type: 'opt-out',
            styles: {
                backgroundColor: '#EF4444',
                textColor: '#FFFFFF',
                radius: 12,
                width: 180,
                height: 45
            }
        });

        mellowtel.createElement('settings-container', {
            type: 'settings',
            styles: {
                backgroundColor: '#3B82F6',
                textColor: '#FFFFFF',
                radius: 12,
                width: 180,
                height: 45
            }
        });
    </script>
</body>
</html>

​包样式选项

​示例

​容器定位

​完整样式示例

包样式选项

示例

容器定位

完整样式示例