Sombra, Borda e Contorno

O uso de elementos como sombra, bordas e contorno em componentes melhora a hierarquia visual, destaca conteúdos importantes, cria separação entre camadas e oferece uma interface mais moderna e intuitiva para o usuário.

No mobileX é possível especificar sombras, bordas e contornos conforme es seguintes configurações visuais:

• border: indica ou não se a borda terá contorno. Caso afirmativo, a mesma será automaticamente de 1px;

• borderColor: define cor da borda, caso atributo border esteja ativado;

• borderSize: indica raio da borda, caso atributo border esteja ativado valor de 0 a 10. Utilizado para o arredondamento da borda;

• shadow: Indica se elemento possuirá sombra.

    "pageContent": {
    "background": "#fff",
    "hasGroupBy": false,
    "groupList": [
     {
        "template": "menu-C",
        "background": "#FFFFFF",
        "border": false,
        "borderColor": "#FF0000",
        "borderSize": 5,
        "shadow": true,
        "color": "#FFFFFF",
        "itemsList": [
          {...
          },
          {...
          }
        ]
     }]
     }

Exemplo visual: