ionic-framework
Componentes jónicos de CSS

Observaciones

Sintaxis básica del sistema grid

Rejilla basica

En Ionic puedes declarar filas configurando la clase de row a un elemento. Las filas serán elementos que están alineados horizontalmente y cualquier cosa dentro de este elemento, todo pertenecerá a la fila. Dentro de la fila puedes declarar diferentes columnas de ancho. Usted tiene una opción de las siguientes declaraciones.

El valor máximo que pueden tener las columnas dentro de una fila es 100. Aquí hay algunos ejemplos de la cuadrícula básica.

<div class="row">
  <div class="col col-50">.col.col-50</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

<div class="row">
  <div class="col col-75">.col.col-75</div>
  <div class="col">.col</div>
</div>

<div class="row">
  <div class="col">.col</div>
  <div class="col col-75">.col.col-75</div>
</div>

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

Rejillas de compensación

También puede establecer col-offset-<value> en las columnas. En el siguiente ejemplo, el tercio de una columna de ancho tiene un tercio del ancho de desplazamiento, lo que significa que tendrá un ancho de un tercio de ancho y estará centrado en la página debido a su desplazamiento.

<div class="row">
  <div class="col col-33 col-offset-33">.col</div>
  <div class="col">.col</div>
</div>

Alinear columnas

Alinear las columnas verticalmente es posible configurando el col-<align_value> en una columna por separado como esta.

<div class="row">
  <div class="col col-top">.col</div>
  <div class="col col-center">.col</div>
  <div class="col col-bottom">.col</div>
  <div class="col">1<br>2<br>3<br>4</div>
</div>

Lo anterior alineará cada columna por su cuenta. Si desea alinear todas las columnas dentro de la fila, puede establecer el valor de alineación en la propia fila. En el siguiente ejemplo, todas las columnas dentro de esta fila se alinearán verticalmente en el centro de la fila.

<div class="row row-center">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">1<br>2<br>3<br>4</div>
</div>

Cuadrícula sensible

También es posible que desee que las columnas respondan, ya que se apilarán unas sobre otras en algún ancho de ventana gráfica. Tienes tres opciones.

En este ejemplo, estas columnas se apilarán bajo el ancho de aproximadamente un teléfono horizontal.

<div class="row responsive-sm">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

Por supuesto, también puede realizar sus propias consultas de medios si estos puntos de interrupción no son adecuados para usted y / o si necesita puntos de interrupción más específicos.

Sintaxis básica del elemento de la lista

Casi todas las aplicaciones tienen algún tipo de lista. Ionic tiene sus propias declaraciones CSS de elementos de listas listas para usar para que sea más fácil hacer listas dentro de su aplicación. Puede utilizar los elementos HTML y declarar una clase para el o usar la directiva ion-list para hacerlos. El ejemplo de una directiva está en la parte inferior.

Sintaxis CSS básica del elemento de la lista:

<ul class="list">
  <li class="item"></li>
</ul>

Lista con los divisores:

<div class="list">
  <a class="item" href="#">
    List item
  </a>
  <div class="item item-divider">
    Divider that looks a bit different from items
  </div>
  <a class="item" href="#">
    Another list item
  </a>
</div>

Lista de artículos con iconos:

<div class="list">
  <a class="item item-icon-left" href="#">
    <i class="icon ion-trash-b"></i>
    List item with a trashcan icon on the left
  </a>
</div>

También puede establecer iconos en ambos lados de los elementos con la siguiente sintaxis:

<div class="list">
  <a class="item item-icon-left item-icon-right" href="#">
    <i class="icon ion-trash-b"></i>
    List item with a trashcan icon on the left and a briefcase icon on the right
    <i class="icon ion-briefcase"></i>
  </a>
</div>

Un elemento de lista con botón o botones puede crearse así:

<div class="list">
  <div class="item item-button-right">
    Item with a button on the right that has a clock icon in it
    <button class="button button-positive">
      <i class="icon ion-clock"></i>
    </button>
  </div>
</div>

También es posible crear elementos de lista con avatares, miniaturas e inserciones, lo que creará relleno alrededor de los elementos de la lista. Ionic también maneja los íconos de configuración, etc. en los elementos de la lista al configurar el relleno de acuerdo con los elementos de la lista.

Ionic también tiene sus propias directivas para casillas de verificación, botones de radio, etc. Aquí hay un ejemplo de una lista de casillas de verificación con Ionic.

<ion-list>
  <ion-checkbox ng-model="choice1">Choice 1</ion-checkbox>
  <ion-checkbox ng-model="choice2">Choice 2</ion-checkbox>
</ion-list>

Uso básico de colores de utilidad.

Preset Ionic CSS tendrá un tema y colores preestablecidos para ello. Puede modificar o anular los valores básicos en ionic.css o en su archivo CSS personalizado. También puede definirlos con SASS y para usar SASS en Ionic solo necesita ejecutar el comando ionic setup sass en su terminal.

Uso básico de colores en un botón. La clase de botón button-<phrase> hará que el fondo del botón y los bordes del color del tema establecido.

<button class="button button-positive">
  button-positive
</button>

<button class="button button-calm">
  button-calm
</button>

<button class="button button-balanced">
  button-balanced
</button>

Sus opciones de prefijo CSS son las siguientes:

• <element>-light

• <element>-stable

• <element>-positive

• <element>-calm

• <element>-balanced

• <element>-energized

• <element>-assertive

• <element>-royal

• <element>-dark

Estas clases se pueden agregar también, por ejemplo, en credenciales, etc. Aquí hay un ejemplo de una credencial:

<span class="badge badge-positive">Positive badge</span>