Alineación y transformación de texto

Clase 21 de 36 • Curso Básico de Ionic 2018

Contenido del curso

Introducción

Aspectos Básicos

Navegación

Estilos (Theming)

CRUD en Ionic y Firebase

Deployment

Tomar examen

Resumen

Trabajar con las posibilidades de incorporadas en Ionic agregando atributos a las etiquetas de HTML para las alineación y transformación de texto.

Comentarios

Fabiola Dayana Acarapi Alvarez

student•

<button ion-button color="secondary" (click)="volver()">Volviendo</button> texto normal text center text left text right TODO EL TEXTO MINÚSCULA todo mayúscula el texto sigue en un linea sin importar el tamaño 

Juan C Felizzola

student•

Para centrar el texto:
Texto centrado

Para alinear hacia la izquierda:
Texto izquierda

Para alinear hacia la derecha:
Texto derecha

Para modificar el texto a mayúsculas:
Texto mayúsculas

Para modificar el texto a minúsculas:
Texto minúsculas

Para iniciar cada palabra del texto en mayúsculas:
Texto con palabras iniciadas con mayúsculas

Ricardo Asin

student•

Gracias!

Stalin Alberto Caiche Morán

student•

Excelente, gracias

Carlos Uriel de Jesus Sánchez González

student•

Para centrar el texto:

Texto centrado

Para alinear hacia la izquierda:
	<p text-left>Texto izquierda</p>

Para alinear hacia la derecha:
	<p text-right>Texto derecha</p>

Para modificar el texto a mayúsculas:
	<p text-uppercase>Texto mayúsculas</p>

Para modificar el texto a minúsculas:
	<p text-lowercase>Texto minúsculas</p>

Para iniciar cada palabra del texto en mayúsculas:
	<p text-capitalize>Texto con palabras iniciadas con mayúsculas</p>

Text wrap mostrar todo el texto en varias lineas
	<p text-wrap> el texto sigue en varias lineas sin importar el tamaño </p>
	
Text nowrap mostrar todo el texto en una sola linea
	<p text-nowrap> el texto sigue en un linea sin importar el tamaño </p>

Rafael Eldanoy Ensuncho Bechara

student•

<p text-left>Texto izquierda</p>


<p text-right>Texto derecha</p>


<p text-uppercase text-right>Texto Mayuscula</p>

<p text-uppercase>Texto Mayuscula</p>

<p text-lowercase>TEXTO MINISCULAS</p>

<p text-capitalize>texto con pura miniscula</p>

<p text-wrap>texto randon de prueba jdjdhgdgsjnldw  cwhb nnbuquyquybvqudy jnsgsgfsygydgsygshbx  hiygavbhjbhdbabyab oubsbxayghasb</p>

<p text-nowrap>texto randon de prueba jdjdhgdgsjnldw  cwhb nnbuquyquybvqudy jnsgsgfsygydgsygshbx  hiygavbhjbhdbabyab oubsbxayghasb</p>

david.nieto

student•

para versiones mas recientes de ionic aquí se describe la forma en la que puede dar alineación y transformación al texto https://ionicframework.com/docs/layout/css-utilities

Jorge Hernandez Rozo

student•

yo podria usar mi propio css dentro del archivo de variables de sass, para por ejemplo usar flexbox como en react-native o solo se manejan los atributos pre-establecidos ?

Irving Sarmiento

student•

Puedes crear tus propios estilos o sobreescribirlos, depediendo que requieras lo puedes hacer aplicando estilos para cada componente o en los estilos globales que se aplicaría a cualquier componente (page) en la aplicación

Juan Guillermo Perez Cardozo

student•

gracias super la explicacion para saber como acomodar texto de la merjor manera, segun sea el caso.

Nathaly Stefani Riaño Bejarano

student•

<ion-content padding>
  <p text-center>Texto normal</p>
  <p text-right>Texto normal</p>
  <p text-left>Texto normal</p>
  <p text-center text-uppercase>Texto mayúsculas</p>
  <p text-center text-lowercase>Texto Minúsculas</p>
  <p text-center text-capitalize>Capitalize Text</p>
  <p text-wrap>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam officia autem inventore placeat earum eveniet et! Expedita architecto ipsum explicabo velit eveniet mollitia ducimus assumenda perspiciatis! Ex aliquid cum vel.</p>
  <p text-nowrap>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam officia autem inventore placeat earum eveniet et! Expedita architecto ipsum explicabo velit eveniet mollitia ducimus assumenda perspiciatis! Ex aliquid cum vel.</p>
</ion-content>

Para alinear hacia la izquierda:
	<p text-left>Texto izquierda</p>

Para alinear hacia la derecha:
	<p text-right>Texto derecha</p>

Para modificar el texto a mayúsculas:
	<p text-uppercase>Texto mayúsculas</p>

Para modificar el texto a minúsculas:
	<p text-lowercase>Texto minúsculas</p>

Para iniciar cada palabra del texto en mayúsculas:
	<p text-capitalize>Texto con palabras iniciadas con mayúsculas</p>

Text wrap mostrar todo el texto en varias lineas
	<p text-wrap> el texto sigue en varias lineas sin importar el tamaño </p>
	
Text nowrap mostrar todo el texto en una sola linea
	<p text-nowrap> el texto sigue en un linea sin importar el tamaño </p>

<p text-left>Texto izquierda</p>

<p text-right>Texto derecha</p>

<p text-uppercase text-right>Texto Mayuscula</p>

<p text-uppercase>Texto Mayuscula</p>

<p text-lowercase>TEXTO MINISCULAS</p>

<p text-capitalize>texto con pura miniscula</p>

<p text-wrap>texto randon de prueba jdjdhgdgsjnldw  cwhb nnbuquyquybvqudy jnsgsgfsygydgsygshbx  hiygavbhjbhdbabyab oubsbxayghasb</p>

<p text-nowrap>texto randon de prueba jdjdhgdgsjnldw  cwhb nnbuquyquybvqudy jnsgsgfsygydgsygshbx  hiygavbhjbhdbabyab oubsbxayghasb</p>

<ion-content padding>
  <p text-center>Texto normal</p>
  <p text-right>Texto normal</p>
  <p text-left>Texto normal</p>
  <p text-center text-uppercase>Texto mayúsculas</p>
  <p text-center text-lowercase>Texto Minúsculas</p>
  <p text-center text-capitalize>Capitalize Text</p>
  <p text-wrap>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam officia autem inventore placeat earum eveniet et! Expedita architecto ipsum explicabo velit eveniet mollitia ducimus assumenda perspiciatis! Ex aliquid cum vel.</p>
  <p text-nowrap>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam officia autem inventore placeat earum eveniet et! Expedita architecto ipsum explicabo velit eveniet mollitia ducimus assumenda perspiciatis! Ex aliquid cum vel.</p>
</ion-content>

Alineación y transformación de texto

Introducción

Aprende sobre Ionic con los cursos actualizados

Introducción al Curso de Ionic

Pre-Requisitos para este curso de Ionic

Treasure Hunting GeoCatching

Instalación y overview de Ionic CLI

Preparación de entorno de desarrollo en Mac

Preparación de entorno de desarrollo en Windows

Preparación de entorno de desarrollo en Linux

Aspectos Básicos

Crear una Aplicación

Corriendo Aplicación en el Browser

Estructura de Archivos

Estructura de una vista de Ionic

Navegación

Creando un nuevo page

Navegar a un page

Navegación por Tabs

Parámetros de navegación

Navegación hacia atrás

Navegación raíz

Estilos (Theming)

Introducción a estilos

Colores Personalizados