How do you make a button change the screen? (not going to an external url)

  • pandabearme-1347307864284332073

    PandaBearMe

    9 days ago

    I'm curious how I can use buttons to change the div it's showing in my application, but I only see tutorials for how to make buttons go to a link.
  • lucasg-1347308482692644936

    Lucas G

    9 days ago

    A button could change a variable which controls the show/hide conditions to display the components
  • pandabearme-1347308809017757726

    PandaBearMe

    9 days ago

    would I go under events > when clicked > to control the show/hide conditions?
  • lucasg-1347310207692181619

    Lucas G

    9 days ago

    When you right click an item in the element tree, you'll see this context menu (some of these are also available in the right side panel under Attributes)
    1347310207600169021-image.png
  • lucasg-1347310979528130631

    Lucas G

    9 days ago

    Then under the events -> click for the button you can configure whatever you're using to show/hide the elements
  • pandabearme-1347312672567459850

    PandaBearMe

    9 days ago

    so I can make a show/hide formula under the attributes?
  • pandabearme-1347313235556040747

    PandaBearMe

    9 days ago

    I see hide and show under the attributes section, but I'm not sure how I'm supposed to link it to a page or activate it
  • lucasg-1347313894225477773

    Lucas G

    9 days ago

    It's the same option just accessible from different places
  • If you read through the doc or go through the videos in the toddle YT channel you'll see a lot of examples
  • Basically the condition needs to return true/false
  • If true the element will show
  • lucasg-1347314430320316597

    Lucas G

    8 days ago

    So it can be as basic as variable equals "value" or a more complex calculation. The only thing is it needs to return true/false
  • pandabearme-1347314836421349448

    PandaBearMe

    8 days ago

    if I wanted each button to show a different page on my application would I need different divs for it to show or hide depending on which I click?
  • and then I just connect them with the true/false show condition?
  • lucasg-1347315400647381196

    Lucas G

    8 days ago

    Sounds like you are doing an SPA (single-page app) in which case, yes, that's an optino
  • You can also use page path parameters to control what shows
  • Something very important that you should get used to early is the use of components
  • It sounds like you might be just trying to build everything out in one page
  • You'll end up with a large element tree and a laggy editor trying to render it all at once
  • pandabearme-1347315785181429810

    PandaBearMe

    8 days ago

    Ohh yeah sorry I am trying to do a one page app thats right
  • Tod-1347315786787586150

    Tod

    8 days ago

    Great energy @PandaBearMe! Your continuous contribution to the toddle Community just made you advance to Community Level 2!
  • lucasg-1347315892928643178

    Lucas G

    8 days ago

    Components have a lot of benefits, take some time to get to know them 👍
  • pandabearme-1347316053885325343

    PandaBearMe

    8 days ago

    I've messed with components a little bit but definitely need more familiarity
  • are components key in scaling a project then?
  • lucasg-1347316160491946076

    Lucas G

    8 days ago

    Yes
  • Check out this channel too for resource outside of the official toddle channel
  • Though I also definitely recommend you check out the main channel if you haven't already
  • pandabearme-1347316642287456287

    PandaBearMe

    8 days ago

    I guess looking into single page applications it doesnt necessarily have to be a single page but just not going out to an external link
  • lucasg-1347316757400129556

    Lucas G

    8 days ago

    But yes, components are definitely key and a core concept in toddle (similar to most existing frameworks e.g., React, Vue, Svelte, etc)
  • If the page doesn't reload, then it's an SPA
  • pandabearme-1347317231163539638

    PandaBearMe

    8 days ago

    maybe I'm using external wrong but I mean like a link to an existing page on the internet
  • lucasg-1347317358645084171

    Lucas G

    8 days ago

    That would reload the page, making it an MPA
  • pandabearme-1347317375858507838

    PandaBearMe

    8 days ago

    I just wanted a list of buttons that went to different pages on my application
  • lucasg-1347317377519325339

    Lucas G

    8 days ago

    multi page
  • pandabearme-1347317400563093504

    PandaBearMe

    8 days ago

    yeah I believe it would be multi page
  • lucasg-1347317452580589629

    Lucas G

    8 days ago

    Both approaches can work, it is preference and dependent on the type of app
  • pandabearme-1347317484608294944

    PandaBearMe

    8 days ago

    yeah I see
  • unfortunately I don't know how to do either
  • which would be the best for learning?
  • lucasg-1347317891091009687

    Lucas G

    8 days ago

    The difference is basically are you going to a new page or are you doing everything in one page and showing things based on conditions
  • SPA can be more complex so MPA might be easier
  • pandabearme-1347318245841043658

    PandaBearMe

    8 days ago

    yeah I think I just want something easier to get started
  • I've been watching some videos in that channel you linked actually
  • just haven't quite found something that addresses what I'm trying yet
  • lucasg-1347318433896992879

    Lucas G

    8 days ago

    That guy likes SPAs
  • His demo build is an SPA I believe
  • And he uses page paths to control show conditions
  • It's a long video but it's in there somewhere
  • pandabearme-1347320101027971145

    PandaBearMe

    8 days ago

    I think I found it from a different thread asking about this
  • I'll have to look at it later unfortunately not enough time 4 hours long 😮

Stop scrolling. Start building.

toddle is a visual web app builder that rivals custom code — but accessible to your entire team!

Try toddle — it's free!

© Copyright 2024 toddle. All rights reserved.