Uncodie
Technical DocumentationNo CodeTutorialsChangelogDisccord
No Code
No Code
  • 🏁Getting Stared
    • 🥳Introduction
      • What is Uncodie?
      • App
      • Figma No Code Plugin
        • How to associate your Figma token to Uncodie?
        • How to associate an Uncodie project to figma?
  • 📖Basic Concepts
    • 🧩Components
      • Screen Page
        • Screen Layout
        • Screen Content
      • Table View
        • Table View Header
        • Table View Row
        • Table View Cell
      • Form
        • Text Area
        • Selector
        • Input
        • Button
        • Output
      • HTML components
        • Headers
          • H1
          • H2
          • H3
          • H4
          • H5
        • Title
        • Parragraph
        • List
        • Iframe
        • Video
        • Audio
        • Link
        • Progress
        • Meta
        • Image
        • SVG
      • Advanced
        • Chart
          • Style Personalization
        • Repeat
        • Loading
    • 🎨Appearance
      • Visibility
      • CSS
      • Adaptative Design
      • Responsive Design
    • 🏗️Prototyping
      • Modals
      • Variants
      • Navigation
    • 🔤Variables
    • 💽Data Sources
      • Collections
      • Queries
      • Scripts
    • 🔍Data Binding
    • ⚡Actions
      • Scripts
      • Events
    • 🧑User Management
      • Privacy
    • 🍪SEO and Tracking
      • Capabilities
      • HTML Head Scripts
    • ☁️Publish and Deploy
      • Custom Domains
Powered by GitBook
On this page
  • Overview
  • Setup
  • Use Cases
  • Setting Roles Access to your App
  • Hiding a component
  • Showing a component
  • Using Breaking points

Was this helpful?

  1. Basic Concepts
  2. Appearance

Visibility

Rules for component visualization

PreviousAppearanceNextCSS

Last updated 1 year ago

Was this helpful?

Overview

Uncodie integrates a visualizacion engine to handle the display of the components or sections of your design, you can build complex rules and logic for the visualization of your app for different use cases.

Setup

  1. Navigate to the Visibility section in the IDE

  2. Add Conditions to affect the component's visibility

  3. To use this feature you have to set the Visible param of any component to show or hide the element from the screen.

Use Cases

Setting Roles Access to your App

After creating the role access architecture of your app you can grant access to your app by using visibility rules and accessing the logged-in user role by the context. session variables.

Hiding a component

Set conditions to hide a component when needed.

Showing a component

Set conditions to show a component when needed.

Using Breaking points

In the Visibility section select Envoriment Context as Data Source and select the screen size you want to show or hide your component. See:

📖
🎨
🔤Variables