Apphive Docs
Apphive Documentación ( Spanish)
Apphive Documentación ( Spanish)
  • 👋Bienvenido a Apphive
  • FIRST STEPS
    • 🔍Apphive
      • Iniciar con una plantilla
      • Empezar desde el principio
    • 📐Apphive editor
      • Trabajar con contenedores
      • Diseño responsivo
      • Menu lateral
    • 📱Apphive Previewer
      • IOS App Preview
      • Android App Preview
    • 🤖Apphive AI
  • REFERENCE
    • 🎮Controles
      • Graphic View
        • Style
        • Data
      • Page
        • Style
        • Data
        • Events
      • Button
      • Swiper
        • Style
        • Data
        • Events
      • Video View
        • Style
        • Data
      • Icon
        • Style
        • Data
        • Events
      • Calendar
        • Data
        • Events
      • Web View
        • Style
        • Data
      • Map
        • Style
        • Data
        • Events
      • Camenra View
        • Style
        • Data
        • Events
      • Image
        • Style
        • Data
        • Events
      • Slider
        • Style
        • Data
        • Events
      • Radio
        • Style
        • Data
        • Events
      • Picker
        • Style
        • Data
        • Events
      • Switch
        • Style
        • Data
        • Events
      • Field
        • Style
        • Data
        • Events
      • Text
        • Style
        • Data
        • Events
      • Container
        • Style
        • Data
        • Events
    • ⚙️Functions
      • 🕹️Controls
        • Modify control
        • Trigger Event
          • Callbacks
          • Entry Vars
        • Open image viewer
          • Entry Vars
        • Toogle page loading
          • Entry Vars
        • Toogle bottom menu sheet
          • Callbacks
          • Entry Vars
        • Add collection to UI
          • Entry vars
        • Toogle side menu
          • Callbacks
        • Iterate children
          • Callbacks
          • Entry vars
        • Generate swiper content
          • Callbacks
          • Entry vars
      • 🔩App processes (E)
      • 🧭Navigation (E)
        • Replace screen
          • Entry Vars
        • Push Screen
          • Entry Vars
        • Return to last Screen
      • 💬Push Notifications (E)
        • Trigger App Process
          • Entry Vars
        • Send push
          • Callbacks
          • Entry Vars
        • Request Permission
          • Callbacks
      • 🗺️Geolocalization (E)
        • Start geolocation tracking http
          • Callbacks
          • Entry Vars
        • Start geolocation tracking
          • Callbacks
          • Entry Vars
        • Stop geolocation tracking
          • Callbacks
        • Get geolocation
          • Callbacks
          • Entry Vars
        • Get distance
          • Callbacks
          • Entry Vars
        • Geocoding
          • Callbacks
          • Entry Vars
        • Set fire geolocation
          • Entry Vars
        • Remove fire geolocation
          • Callbacks
          • Entry Vars
        • Query fire geolocation
          • Callbacks
          • Entry Vars
        • Get All fire geolocation
          • Callbacks
          • Entry Vars
        • Get fire geolocation
          • Callbacks
          • Entry Vars
        • Geo Fire
      • 📲Phone APIs (E)
        • Set Audio Time
        • dismissKeyboard
        • Read SMS (Android)
          • Callbacks
        • Is audio playing
          • Callbacks
        • Get Screen Dimentions
          • Callbacks
        • GetDeviceInfo
          • Callbacks
          • Entry Vars
        • Get connection type
          • Callbacks
        • Vibration phone
          • Entry Vars
        • Take a video
          • Callbacks
        • Take a photo
          • Callbacks
        • Stop Recording Audio
          • Callbacks
        • Stop playing audio
          • Callbacks
        • Start Recording audio
          • Callbacks
        • Start playing audio
          • Callback
          • Entry Vars
        • Show file browser
          • Callbacks
          • Entry Vars
        • Share
          • Callbacks
          • Entry Vars
        • read QR code
          • Callbacks
        • Barcode Read
          • Callbacks
        • Pause playing audio
          • Callbacks
        • Open WhatsApp
          • Callbacks
          • Entry Vars
        • Open Url
          • Entry Vars
        • Ope geo map
          • Callbacks
          • Entry Vars
        • Open calendar
          • Callbacks
        • Make a call
          • Entry Vars
      • 🔔Notifications (E)
        • Toast notification
          • Entry Vars
        • Send Alert
          • Entry Vars
        • Input dialog
          • Callbacks
          • Entry Vars
        • Confirmation alert
          • Callbacks
          • Entry Vars
      • ⛓️Logic (E)
        • Stop set interval
          • Callbacks
          • Entry Vars
        • JSON.stringify
          • Entry Vars
        • Generate uuid v1
        • Switch
          • Callbacks
          • Entry Vars
        • Set timeout
          • Callbacks
          • Entry Vars
        • Set interval
          • Callbacks
          • Entry Vars
        • Search in Object
          • Callbacks
          • Entry Vars
        • Regex Test
          • Callbacks
          • Entry Vars
        • Range Iteration
          • Callbacks
          • Entry Vars
        • Generate Random Numer
          • Callbacks
          • Entry Vars
        • Object keys
          • Entry Vars
        • Value is invalid
          • Callbacks
          • Entry Vars
        • Global Formater
          • Callbacks
          • Entry Vars
        • forEach
          • Callbacks
          • Entry Vars
        • debounce
          • Callbacks
          • Entry Vars
        • Conditional
          • Callbacks
          • Entry Vars
        • Concat
          • Entry Vars
        • Chronometer
          • Callbacks
        • Based on current OS
          • Callbacks
        • Array from object
          • Entry Vars
        • Arithmetic Operation
          • Entry Vars
      • 💿Local Storage (E)
        • Set page Value
          • Entry Vars
        • Save local storage data
          • Callbacks
          • Entry Vars
        • Set data DB direct
          • Callbacks
          • Entry Vars
        • Set app value
          • Entry Vars
        • Get local storage data
          • Callbacks
          • Entry Vars
        • Delete local storage data
          • Callbacks
          • Entry Vars
        • Delete all local Data
          • Callbacks
      • 📀Base de Datos (E)
        • Upload file
          • Callbacks
          • Entry Vars
        • Set data DB direct
          • Callbacks
          • Entry Vars
        • Save in DB
          • Callbacks
          • Entry Vars
        • Get Database Data
          • Callbacks
          • Entry Vars
        • Delete database data
          • Callbacks
          • Entry Vars
        • Copy Data From Path
          • Callbacks
          • Entry Vars
      • 🚗Navigation (E)
        • Replace screen
          • Entry vars
        • Push screen
          • Entry vars
        • Return to last screen
      • 👨‍👩‍👧Users(E)
        • Update email
          • Callbacks
          • Entry Vars
        • Update data from other user
          • Callbacks
          • Entry Vars
        • Update AuthInfo
          • Callbacks
          • Entry Vars
        • Sign Up
          • Callbacks
          • Entry Vars
        • Set user custom data
          • Callbacks
          • Entry Vars
        • Set other user custom data
          • Callbacks
          • Entry Vars
        • Logout
          • Callbacks
        • Login With Google
          • Callbacks
          • Entry Vars
        • Login With Facebook
          • Callbacks
        • Login with apple
          • Callbacks
        • Login
          • Callbacks
          • Entry Vars
        • Is Logged In?
          • Callbacks
        • Get App Users
          • Callbacks
          • Entry Vars
        • Get All Users
          • Callbacks
        • Get Data From Other User
          • Callbacks
          • Entry Vars
        • Forget Password
          • Callbacks
          • Entry vars
        • Change my password
          • Callbacks
          • Entry Vars
      • 📰Información general de las funciones (E)
      • 📲Tabla de controles (E)
        • Context Data
        • ListContext
        • PreviusOutputs
        • Color value
        • EventOutput
        • Auth
        • Complex
        • Controls
        • General
      • Navigation
        • Return To Last Screen
        • Push Screen
        • Replace Screen
      • Elements
        • Generate Swiper Content
        • Modify Control
        • Toggle Side Menu
        • Add Collections To UI
        • Toggle Page Loading
      • Users
        • Change My Password
        • Forget Password
        • Get All Users
        • Get Data From Other User
        • Is Logged In?
        • Login
        • Login With Facebook
        • Login With Google
        • Logout
        • Set Other User Custom Data
        • Set User Custom Data
        • Sign Up
        • Update Auth Info
        • Update Data From Other User
      • Cloud Database
        • Copy Data From Path
        • Eliminar datos de la base de datos (Delete Database Data)
        • Get Database Data
        • Save Data in Database
        • Upload File
      • Local Database
        • Delete All Local Data
        • Delete Local Storage Data
        • Get Local Storage Data
        • Save Local Storage Data
        • Set Page Value
      • Logic
        • Arithmetic Operation
        • Chronometer
        • Concat
        • Conditional
        • Debounce
        • Execute Cloud Process
        • For Each
        • Global Formater
        • Value Is Invalid
        • Generate Random Number
        • Range Iteration
        • Regex Test
        • Set Time Out
        • Generate UUID v1
      • Notifications
        • Send Alert
      • Phone API's
        • Is Audio Playing
        • Make a Call
        • Open Calendar
        • Open Geo Map
        • Open URL
        • Open WhatsApp
        • Pause Playing Audio
        • Read QR code
        • Set Audio Time
        • Show File Browser
        • Start Playing Audio
        • Stop Playing Audio
        • Take a Photo
        • Vibration Phone
      • Geolocation
        • Get Fire Geolocation
        • Geo Fire Listen Item
        • Query Fire Geolocation
        • Remove Fire Geolocation
        • Set Fire Geolocation
        • Geo Fire Set Multiple
        • Geocoding
        • Get Distance
        • Get Geolocation
        • Start Geolocation Tracking
        • Stop Geolocation Tracking
      • Push Notification
        • Request Permission
        • Send Push
        • Trigger Apps Process
      • Apps Processes
        • Stars
      • Google Maps
        • Distance Between Points
      • Stripe
        • Create a Subscription
        • Cancel a Suscription
        • List Subscriptions
        • Retrieve a Customer
        • Create Customer
        • Retrieve a Plan
        • Create a Card Token
        • Created a Card
        • List All Cards
        • Delete a Card
        • Create a Payment Intent
        • Confirm a Payment Intent
    • 🗄️Base de datos
      • Database Editor
        • Open database editor
        • View data
        • Add data
        • Edit data
        • Delete data
        • Export database data
        • View data nested collections
        • Links to Data
      • Cloud Database
        • Delete Database Data
        • Save Database Data
        • Read Database Data
      • Local Database
        • Delete Data
        • Read Data
        • Write Data
      • Custom Database
    • 📲Menu de variables
      • Skeleton Loader
      • Color Picker
      • Element Styles
      • Global Styles
        • Typography
        • Color Variant
        • Palette Selector
    • ⌨️Atajos de teclado
    • 🔩App processes
      • Formularios
        • Text Field
        • Text
        • Button
        • Switch
        • Picker
        • Radio
        • Slider
      • Multimedia
        • Image
        • Camera View
        • Map
        • Web View
        • Calendar
        • Icon
        • Video View
        • Chart
      • Containers
        • Container
        • Swiper
    • 📠API Functions
  • COMPILACIONES Y CARGAS A TIENDAS
    • ⚙️Configuraciones
      • Formularios
        • Text Field
        • Text
        • Button
        • Switch
        • Picker
        • Radio
        • Slider
      • Multimedia
        • Image
        • Camera View
        • Map
        • Web View
        • Calendar
        • Icon
        • Video View
        • Chart
      • Containers
        • Container
        • Swiper
    • 🔥Firebase
    • 👾Android
      • Transferir aplicación
      • Invitar usuario Google Play
    • 🍎IOS
      • Crear cuenta de desarrollador
    • 💻WebApp
    • 📘Facebook Developers
    • ❌Compilation errors
  • Precios
    • 💰Precio
  • Resources
    • 📕Otros
    • 📘Glosario
    • ❓FAQs
    • 🆘Soporte
Powered by GitBook
On this page
  • Appeareance
  • Backgorund color
  • Background image
  • Borders
  • Border Width
  • Border Radius
  • Dimentions
  • Layout
  • Direction
  • Scroll
  • Control z-index
  • Margins
  • Shadows

Was this helpful?

  1. REFERENCE
  2. Controles
  3. Container

Style

PreviousContainerNextData

Last updated 4 years ago

Was this helpful?

Appeareance

Backgorund color

Rellena el cuerpo del contenedor de un color solido

Background image

Rellena el cuerpo del contenedor con una imagen seleccionada

Borders

Border Width

Asigna el color, ancho y tipo de borde del componente

Border Radius

Redondea las esquinas del componente

Dimentions

Cambia el tamaño en pixeles del componentes, así mismo los puede cambiar en porcentaje, este porcentaje de dimensiones es directamente proporcional a las dimensiones del dispositivo

Layout

Direction

Scroll

Con este elemento podemos cambiar la dirección de scroll de los componentes hijos

Horizontal

Al activarlo el contenedor, permite mas objetos hijos sin que estos se encimen entre si o salgan del contenedor y da posibilidad de recorrer de izquierda a derecha el contenedor para visualizar todos los elementos hijos del contenedor

Al activar esta función, las direcciones alineado hacia arriba y alineado hacia abajo se desactivan dejando disponibles solo alineado a la izquierda y alineado a la derecha

Vertical

Al activarlo el contenedor, permite mas objetos hijos sin que estos se encimen entre si o salgan del contenedor y da posibilidad de recorrer de arriba hacia abajo el contenedor para visualizar todos los elementos hijos del contenedor

Al activar esta función, las direcciones alineado a la izquierda y alineado a la derecha se desactivan dejando disponibles solo alineado hacia arriba y alineado hacia abajo

Control z-index

Este elemento al activarlo (cambiar el valor mayor a 0) se sobrepone a los demás elementos utilizando la dimensión z como su punto base.

Las dimensiones deben ser en pixeles y no en porcentaje

Si el contendor que queremos posicionar en el eje z esta por debajo de un contendor, debemos saber la altura de nuestro segundo contendor y el outer margin colocar el mismo valor pero en negativo en el valor superior , esto hará que el contenedor en posición z se sobreponga al primer contenedor y ambos bordes inferiores queden alineados (imagen 1), si se requiere dejar un margen de espacio, basta con hacer mas pequeño el outer margin del contenedor en posición z (imagen 2)

Si el contenedor que vamos a posicionar en z se encuentra primero que el contenedor al que vamos a sobreponer nuestro contenedor, la lógica es la misma solo que en lugar de colocar el valor en el outer margin superior, lo colocamos en el inferior

La misma lógica se aplica para los outer margin laterales

Margins

Shadows

Con este elemento colocamos sombras a nuestro contenedor, tenemos 6 opciones de sombreado

Tipo de sombreado
Vista previa

De misma manera, podemos controlar que tan opaco se vería la sombra con la barra Opacity que va de una escala de 0 a 1, siendo 0 transparente y 1 muy opaco

El elemento Shadows solamente se puede activar cuando el contenedor tiene un color solido en el background, si el background es transparente, no se habilitará para su uso

Indica la dirección de los componentes hijos dentro de un contenedor

Al activar esta función, debemos de posicionar el elemento seleccionado, esto se logra tomando en cuenta las así como el y la posición del contenedor con respecto al contenedor al que queremos que se pose encima de él ya que estos nos permitirán la manipulación de la posición del contenedor en el eje z.

Los margins se utilizan para colocar una espacio entre elementos, ya sea de forma interna o de forma externa

🎮
ver más
ver más
ver más
ver más
ver más
ver más
dimensiones del contenedor
outer margin
ver más
imagen 1
imagen 2