Desarrollo Móvil Multiplataforma Karla Rodriguez Nombre Actividad

Nombre: Karla Marina Rodriguez

Materia: Desarrollo Móvil Multiplataforma

Unidad: 2

Escuela: Universidad Tecnológica de Ciudad Juárez

Docente: Guzmán Ramírez Adolfo Pedro

Grado: 7

Grupo: TDW71

Carrera: Tecnologías De La Información Área Desarrollo De Software Multiplataforma

Karla Rodriguez M.

Firma

Profesor Adolfo Pedro Guzmán Ramírez Fecha Entrega Página 1

Desarrollo Móvil Multiplataforma Karla Rodriguez Nombre Actividad

Introducción
En el contenido de este reporte se mostrará, el cual fue hacer uso del radio button, por ende, se
mostrará precisamente el código de la realización de dicho componente, al igual que unas imágenes,
en donde podremos validar la funcionalidad y correcto uso simulado del radio button.

Desarrollo
<ion-header [translucent]="true">

Profesor Adolfo Pedro Guzmán Ramírez Fecha Entrega Página 2

Desarrollo Móvil Multiplataforma Karla Rodriguez Nombre Actividad

<ion-toolbar >
<ion-title>
Compra de artículos de belleza
</ion-title>
</ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
<ion-header collapse="condense">

</ion-header>
<ion-content color="primary" class="ion-padding">
<ion-list-header>
<h1>Escoge tu artículo:</h1>
</ion-list-header>
<ion-list>
<ion-radio-group value="strawberries">
<ion-item>
<ion-label>Polvo Traslucido</ion-label>
<ion-radio slot="end" value="custom-checked"></ion-radio>
</ion-item>

<ion-item>
<ion-label>Labial</ion-label>
<ion-radio slot="end" value="strawberries"></ion-radio>
</ion-item>

<ion-item>
<ion-label>Base matte</ion-label>
<ion-radio slot="end" value="pineapple"></ion-radio>
</ion-item>

<ion-item>
<ion-label>Mascarillas contra acne</ion-label>
<ion-radio slot="end" value="cherries" [disabled]="true"></ion-
radio>
</ion-item>
</ion-radio-group>
</ion-list>
<ion-button color="danger">Agregar producto</ion-button>
</ion-content>

</ion-content>

Profesor Adolfo Pedro Guzmán Ramírez Fecha Entrega Página 3

Desarrollo Móvil Multiplataforma Karla Rodriguez Nombre Actividad

Parte del estilo

ion-radio {
width: 30px;
height: 30px;
}

ion-radio::part(container) {
border-radius: 8px;
border: 2px solid #ddd;
}

ion-radio::part(mark) {
background: none;
transition: none;
transform: none;
border-radius: 0;
}

ion-radio.radio-checked::part(container) {
background: #6815ec;
border-color: transparent;
}

ion-radio.radio-checked::part(mark) {
width: 6px;
height: 10px;

border-width: 0px 2px 2px 0px;

border-style: solid;
border-color: #fff;

transform: rotate(45deg);
}

h1{
color:#ddd;
}

Profesor Adolfo Pedro Guzmán Ramírez Fecha Entrega Página 4

Desarrollo Móvil Multiplataforma Karla Rodriguez Nombre Actividad

Profesor Adolfo Pedro Guzmán Ramírez Fecha Entrega Página 5