Skip to content

Customization of NavBar and DropDown #12

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
forest wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Customization of NavBar and DropDown #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 27 additions & 16 deletions lib/surface_bootstrap/dropdown.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,8 @@ defmodule SurfaceBootstrap.DropDown do
@doc "ID of dropdown, required to work"
prop id, :string, required: true

@doc "Label of dropdown link/button"
prop label, :string, required: true
@doc "Label of dropdown link/button. Use button_content to provide inner content."
prop label, :string

@doc """
If prop `split` is set to `true`, wrapper type is automatically set to `btn_group`.
Expand All @@ -51,6 +51,15 @@ defmodule SurfaceBootstrap.DropDown do

prop button_size, :string, values: ~w(small normal large), default: "normal"

@doc "Custom class for the dropdown button"
prop button_class, :css_class, default: []

@doc "Custom class for the wrapper"
prop wrapper_class, :css_class, default: []

@doc "Custom class for the dropdown menu"
prop menu_class, :css_class, default: []

@doc """
Show dropdown with a separate arrow to click on (split view)? Defaults false.
If set to true will automatically set `@wrapper = "btn_group"` and `@button = true`.
Expand All @@ -63,6 +72,8 @@ defmodule SurfaceBootstrap.DropDown do
@doc "Show dropdown as active"
prop active, :boolean

slot button_content

slot dropdown_items

slot default
Expand All @@ -86,11 +97,11 @@ defmodule SurfaceBootstrap.DropDown do
id={@id}
:hook="DropDown"
class={
dropdown: @wrapper == "dropdown" && !@direction,
[dropdown: @wrapper == "dropdown" && !@direction,
dropup: @direction == "up",
dropend: @direction == "right",
dropstart: @direction == "left",
"btn-group": @wrapper == "btn_group" || @split == true
"btn-group": @wrapper == "btn_group" || @split == true] ++ @wrapper_class
}
:attrs={
"data-bsnclass": "show"
Expand All @@ -107,12 +118,12 @@ defmodule SurfaceBootstrap.DropDown do
id={@id}
:hook="DropDown"
class={
"nav-item",
["nav-item",
dropdown: !@direction,
dropup: @direction == "up",
dropend: @direction == "right",
dropstart: @direction == "left",
"btn-group": @wrapper == "btn_group" || @split == true
"btn-group": @wrapper == "btn_group" || @split == true] ++ @wrapper_class
}
:attrs={
"data-bsnclass": "show"
Expand Down Expand Up @@ -151,17 +162,19 @@ defmodule SurfaceBootstrap.DropDown do
<a
id={@id <> "dropdown"}
class={
"dropdown-toggle": !@split,
["dropdown-toggle": !@split,
"nav-link": @wrapper == "nav_item",
active: @active,
btn: @button,
"btn-#{@color}": @button && @color,
"btn-lg": @button && @button_size == "large",
"btn-sm": @button && @button_size == "small"
"btn-sm": @button && @button_size == "small"] ++ @button_class
}
href={!@split && "#"}
>
{@label}
<#slot name="button_content">
{@label}
</#slot>
</a>
"""
end
Expand Down Expand Up @@ -193,8 +206,8 @@ defmodule SurfaceBootstrap.DropDown do
~F"""
<div
class={
"dropdown-menu",
"dropdown-menu-dark": @dark
["dropdown-menu",
"dropdown-menu-dark": @dark] ++ @menu_class
}
:attrs={
"data-bsnstyle": true,
Expand All @@ -210,18 +223,16 @@ defmodule SurfaceBootstrap.DropDown do
~F"""
<ul
class={
"dropdown-menu",
"dropdown-menu-dark": @dark
["dropdown-menu",
"dropdown-menu-dark": @dark] ++ @menu_class
}
:attrs={
"data-bsnstyle": true,
"aria-labelledby": @id
}
>
{#for {_item, index} <- Enum.with_index(@dropdown_items)}
<li>
<#slot name="dropdown_items" index={index} />
</li>
<#slot name="dropdown_items" index={index} />
{/for}
</ul>
"""
Expand Down
14 changes: 13 additions & 1 deletion lib/surface_bootstrap/dropdown/item.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,18 @@ defmodule SurfaceBootstrap.DropDown.Item do
- `<LivePatch class="dropdown-item"">`
- `<hr class="dropdown-divider">`
"""

use Surface.Component, slot: "dropdown_items"

@doc "Classes to propagate to the li."
prop class, :css_class, default: []

slot default

def render(assigns) do
~F"""
<li class={@class}>
<#slot />
</li>
"""
end
end
7 changes: 5 additions & 2 deletions priv/catalogue/navbar/example01.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,8 +51,11 @@ defmodule SurfaceBootstrap.Catalogue.NavBar.Example01 do
</NavBar.ItemGroup>
<NavBar.ItemGroup position="right">
<NavBar.ListItem>
<DropDown id="foo" wrapper="nav_item" label="John Doe">
<DropDownItem>
<DropDown id="foo" wrapper="nav_item" wrapper_class="d-inline" button_class="btn-outline-dark" button_size="small">
<:button_content>
<span class="text-primary">John Doe</span>
</:button_content>
<DropDownItem class="w-100">
<Link to="#" class="dropdown-item">Edit profile</Link>
</DropDownItem>
<DropDownItem>
Expand Down