Thanks @arcyfelix, I have fix the storybook. Any contribution is more than welcome.
bluzky
bluzky
I have update tab to support override click even on tab trigger.
By default, JS handle click action to active appropriate tab.
When override with phx-click it’s your job to handle which tab content is render
@impl true
def mount(_params, _session, socket) do
{:ok, assign(socket, active_tab: "account")}
end
def render(assigns) do
~H"""
<.tabs default="account" id="settings" :let={builder} class="w-[400px]">
<.tabs_list class="grid w-full grid-cols-2">
<.tabs_trigger builder={builder} phx-value-tab="account" phx-click="active-tab">account</.tabs_trigger>
<.tabs_trigger builder={builder} phx-value-tab="password" phx-click="active-tab">password</.tabs_trigger>
</.tabs_list>
<.tabs_content :if={@active_tab == "account"}>
<.card>
<.card_content class="p-6">
Account
</.card_content>
</.card>
</.tabs_content>
<.tabs_content :if={@active_tab == "password"}>
<.card>
<.card_content class="p-6">
Password
</.card_content>
</.card>
</.tabs_content>
</.tabs>
"""
end
def handle_event("active-tab", %{"tab" =>tab}, socket) do
{:noreply, assign(socket, :active_tab, tab)}
end
2
arcyfelix
westmark
Nice work! 
It seems the Tooltip story is a bit broken. I don’t get any tooltip on hover. Tried Chrome and Firefox.
0
andrejj
Hi there. @bluzky your dashboards caught me. Good work!
I tried to kick start a project by installing salad_ui and got confused, because I wasn’t able to reproduce the examples shown in the storybook. It seems like the examples rely to the storybook itself to function properly.
Is there a way to take an example (sidebar/dashboard) copy it into an existing project and start modifying building it? I’m a bit new to storybooks and not sure what to expect really.
0
bluzky
Could you give me your repo, I will take a look to see how can fix your issue.
The reason why the classes have to be wrapped with .salad-storybook-web comes from tailwind config
this make sure tailwind css classes won’t mix with storybook css
1
bluzky
andrejj
andrejj
Turns out it worked when reinstalling with: --as-lib.
When you don’t use it as a lib and just copy paste code from examples without importing any components is it expected to crash ?