Come fare su Instant Developer Cloud a realizzare una videata di accettazione consenso privacy come questa?
Nei progetti pubblici della Console di Instant Developer Cloud trovate il progetto layout-privacy ,di cui potete farvi un fork, che realizza la cosa.
Vediamo un po’ come è stata realizzata questa videata.
Per prima cosa ho utilizzato il pacchetto IonicUI e nell’applicazione ho realizzato una nuova videata con gli oggetti che esso mi mette a disposizione.
Per un help di come utilizzarlo potete leggere il manuale IonicUI sulla Console di Instant Developer Cloud o nella sezione Documentazione del sito
Nell’elemento IonContent della videata ho impostato una struttura di questo tipo:
Qui abbiamo un elemento Container cntMain, con layout vertical, che contiene altri due Container cntPrivacy1 e cntPrivacy2 (che hanno eguale struttura) e layout horizontal.
Poi abbiamo due Container uno per mettere i radio di selezione (cntSelectPrivacy1) e l’altro per il testo che vogliamo visualizzare (cntTextPrivacy1).
Il tutto corredato da un po’ di CSS:
:root {
--mybackcol-privacy: #EDEDCC;
--mytextcol-privacy: #160F0F;
}
.box-text-privacy
{
background-color : var(--mybackcol-privacy);
border-top: 1px solid #a89a99;
border-right: 1px solid #a89a99;
border-bottom: 1px solid #a89a99;
}
.back-text-privacy {
background-color : var(--mybackcol-privacy);
}
.text-color-privacy {
color: var(--mytextcol-privacy);
}
.box-privacy {
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
.box-cnt-privacy {
padding-top : 10px;
padding-left: 10px;
padding-right: 10px;
}
.box-btn-privacy {
border-top: 1px solid #a89a99;
border-left: 1px solid #a89a99;
border-bottom: 1px solid #a89a99;
}
.item-no-border > .item .item-inner {
border: 0;
}