Giter VIP home page Giter VIP logo

Comments (6)

acyuta108 avatar acyuta108 commented on June 5, 2024

Are you not keeping state of tabState in the model?
Based on the instructions, I placed tabState in the model and I init as Tab.initialState. You can check the Msg when the user clicks on a tab:

TabMsg State …
▾0 = {
activeTab = Just "tabItem2"
visibility = Showing
}

from elm-bootstrap.

passiomatic avatar passiomatic commented on June 5, 2024

"Are you not keeping state of tabState in the model?"

Yes, I am. But can I access State record on the case/of? In the Elm Bootstrap package the custom type is private.

from elm-bootstrap.

rundis avatar rundis commented on June 5, 2024

one workaround might be to use the Browser.navigation module, the chosen tab could be sent as a url hash (nice for deep linking as well). Then you can pick up the active tab and just in time render the view (and fetch needed data, probably with your own custom state handling for pending/success/error states for the remote request(s) etc).

from elm-bootstrap.

acyuta108 avatar acyuta108 commented on June 5, 2024

Indeed, this is a opaque type (https://github.com/rundis/elm-bootstrap/blob/master/src/Bootstrap/Tab.elm#L84)
So unfortunately I don't know how one can access these values (I'm somewhat new to Elm). From what I can tell this pattern is meant, as you say, to be private in order to not break apps with future changes, which in this instance kind of sucks if you ask me since it seems like it would be a very useful thing and would support the most basic and standard Elm pattern listen to Msg in update -> update model -> (optional) trigger Cmd.

Of course @rundis knows best (he's the author after all). His workaround should work and it's probably a more generic and robust way to do it, backwards compatible that won't break if any internal changes occur. Thanks for the learning experience, I hope this also helps others.
(This is as far as I got doing the case...of approach)

from elm-bootstrap.

passiomatic avatar passiomatic commented on June 5, 2024

On my side I've solved the issue by copying and edit the original code like I've written in the first message so it is OK if things stay the way they are.

My intent was to understand if there was a will to expose "current tab" information in a subsequent release.

from elm-bootstrap.

tankorsmash avatar tankorsmash commented on June 5, 2024

It's a bummer this was closed because I'm facing the same issue, where I'd like to fire a Cmd when changing to a specific tab, and since Tab.State is opaque, there isn't a way to query the activeState inside it.

from elm-bootstrap.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.