Guia de Estilização e Posicionamento de Elementos Mellowtel

Aqui você verá como personalizar a aparência dos Elementos Mellowtel usando opções de estilização embutidas e posicionamento de contêiner CSS. A estilização de contêiner oferece controle total sobre o layout e o posicionamento, enquanto as opções de estilização do pacote controlam a aparência do elemento.

Opções de Estilização do Pacote

O pacote de Elementos Mellowtel fornece opções de estilização embutidas que permitem personalizar a aparência dos seus elementos sem escrever CSS personalizado. Você pode controlar cores, dimensões e propriedades visuais diretamente através do objeto de configuração.

const styles = {
  textColor: '#FFFFFF',        // Cor do texto (formato hex)
  backgroundColor: '#4CAF50',  // Cor de fundo (formato hex)
  radius: 8,                   // Raio da borda em pixels
  width: 200,                  // Largura em pixels (faixa de 50-300)
  height: 50                   // Altura em pixels (faixa de 20-200)
};

Exemplo

// Criar um botão de inscrição verde
await mellowtel.createElement('opt-in-container', {
  type: 'opt-in',
  styles: {
    textColor: '#FFFFFF',
    backgroundColor: '#10B981',
    radius: 12,
    width: 180,
    height: 45
  }
});

Posicionamento de Contêiner

Estilize os divs de contêiner para posicionar elementos:

/* Posicionamento básico */
.mellowtel-container {
  display: flex;
  gap: 10px;
  margin: 20px 0;
}

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

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

/* Responsivo para mobile */
@media (max-width: 768px) {
  .mellowtel-container {
    flex-direction: column;
    align-items: center;
  }
}

Exemplo Completo de Estilização

<!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>Elementos 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');

        // Criar elementos com estilização personalizada
        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>

​Opções de Estilização do Pacote

​Exemplo

​Posicionamento de Contêiner

​Exemplo Completo de Estilização

Opções de Estilização do Pacote

Exemplo

Posicionamento de Contêiner

Exemplo Completo de Estilização