Skip to content

Add inner container to navbar examples #667

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

Merged
merged 4 commits into from
Sep 3, 2021
Merged

Add inner container to navbar examples #667

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7fcc550
Add inner container to navbar example
glsdown Aug 31, 2021
515c7d5
Remove extra div in Collapse/Fade layout
tcbegley Sep 3, 2021
16ea5b9
Adjust navbar examples
tcbegley Sep 3, 2021
7413d6f
Docs example + formatting
tcbegley Sep 3, 2021
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
2 changes: 1 addition & 1 deletion docs/components_page/components/button_group/radios.R
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ button_group <- htmlDiv(
dbcRadioItems(
id = "radios",
class_name = "btn-group",
input_class_name="btn-check",
input_class_name = "btn-check",
label_class_name = "btn btn-outline-primary",
label_checked_class_name = "active",
options = list(
Expand Down
14 changes: 7 additions & 7 deletions docs/components_page/components/input/selected_styles.R
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,22 +10,22 @@ checklist <- htmlDiv(
list(label = "Option 2", value = 2),
list(label = "Option 3", value = 3)
),
label_checked_style=list("color" = "red"),
input_checked_style=list(
"backgroundColor" = "#fa7268",
"borderColor" = "#ea6258"
label_checked_style = list("color" = "red"),
input_checked_style = list(
"backgroundColor" = "#fa7268",
"borderColor" = "#ea6258"
)
),
htmlHr(),
dbcRadioItems(
id="radio-selected-style",
id = "radio-selected-style",
options = list(
list(label = "Option 1", value = 1),
list(label = "Option 2", value = 2),
list(label = "Option 3", value = 3)
),
label_checked_class_name="text-success",
input_checked_class_name="border border-success bg-success"
label_checked_class_name = "text-success",
input_checked_class_name = "border border-success bg-success"
)
)
)
3 changes: 1 addition & 2 deletions docs/components_page/components/navbar.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ The `NavbarSimple` will collapse on smaller screens, and add a toggle for reveal

## Navbar

If you want to have more control over the layout of your navbar you can use the `Navbar` component. This gives you full control over the children, but you will have to write your own callbacks to achieve things like the toggle behaviour on small screens. We recommend using a `Nav` component to wrap the navigation items, check the [docs here](/docs/components/nav).
If you want to have more control over the layout of your navbar you can use the `Navbar` component. This gives you full control over the children, but you will have to write your own callbacks to achieve things like the toggle behaviour on small screens. From Bootstrap 5, all elements inside the `NavBar` should be contained within a [`Container`](/docs/components/layout). We also recommend using a `Nav` component to wrap the navigation items, check the [docs here](/docs/components/nav).

Here is an example of a custom navbar, see the `examples/` folder in the [GitHub repo](https://github.com/facultyai/dash-bootstrap-components/blob/main/examples/python/advanced-component-usage/navbars.py) for more.

Expand All @@ -30,4 +30,3 @@ Here is an example of a custom navbar, see the `examples/` folder in the [GitHub
{{apidoc:src/components/nav/NavbarBrand.js}}

{{apidoc:src/components/nav/NavbarToggler.js}}

48 changes: 22 additions & 26 deletions docs/components_page/components/navbar/navbar.R
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,41 +14,37 @@ search_bar <- dbcRow(
width = "auto"
)
),
class_name = "ms-auto flex-nowrap mt-3 mt-md-0 g-0",
class_name = "g-0 ms-auto flex-nowrap mt-3 mt-md-0",
align = "center"
)

navbar <- dbcNavbar(
list(
htmlA(
# Use row and col to control vertical alignment of logo / brand
dbcRow(
list(
dbcCol(htmlImg(src = PLOTLY_LOGO, height = "30px")),
dbcCol(dbcNavbarBrand("Navbar", class_name = "ms-2"))
dbcContainer(
list(
htmlA(
# Use row and col to control vertical alignment of logo / brand
dbcRow(
list(
dbcCol(htmlImg(src = PLOTLY_LOGO, height = "30px")),
dbcCol(dbcNavbarBrand("Navbar", class_name = "ms-2"))
),
align = "center",
class_name = "g-0"
),
align = "center",
class_name = "g-0"
),
href = "https://plotly.com",
style = list("textDecoration" = "none")
),
htmlDiv(
list(
dbcNavbarToggler(id = "navbar-toggler", n_clicks = 0),
dbcCollapse(
search_bar,
id = "navbar-collapse",
is_open = FALSE,
navbar = TRUE
)
href = "https://plotly.com",
style = list("textDecoration" = "none")
),
class_name = "ms-auto"
dbcNavbarToggler(id = "navbar-toggler", n_clicks = 0),
dbcCollapse(
search_bar,
id = "navbar-collapse",
is_open = FALSE,
navbar = TRUE
)
)
),
color = "dark",
dark = TRUE,
class_name = "py-2 px-3"
dark = TRUE
)


Expand Down
21 changes: 5 additions & 16 deletions docs/components_page/components/navbar/navbar.jl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,12 @@ search_bar = dbc_row(
width = "auto",
),
],
class_name = "ms-auto flex-nowrap mt-3 mt-md-0 g-0",
class_name = "g-0 ms-auto flex-nowrap mt-3 mt-md-0",
align = "center",
);

navbar = dbc_navbar(
[
dbc_container([
html_a(
# Use row and col to control vertical alignment of logo / brand
dbc_row(
Expand All @@ -29,22 +29,11 @@ navbar = dbc_navbar(
href = "https://plotly.com",
style = Dict("textDecoration" => "none"),
),
html_div(
[
dbc_navbartoggler(id = "navbar-toggler", n_clicks = 0),
dbc_collapse(
search_bar,
id = "navbar-collapse",
is_open = false,
navbar = true,
),
],
class_name = "ms-auto",
),
],
dbc_navbartoggler(id = "navbar-toggler", n_clicks = 0),
dbc_collapse(search_bar, id = "navbar-collapse", is_open = false, navbar = true),
]),
color = "dark",
dark = true,
class_name = "py-2 px-3",
)


Expand Down
52 changes: 24 additions & 28 deletions docs/components_page/components/navbar/navbar.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,41 +15,37 @@
width="auto",
),
],
class_name="ms-auto flex-nowrap mt-3 mt-md-0 g-0",
class_name="g-0 ms-auto flex-nowrap mt-3 mt-md-0",
align="center",
)

navbar = dbc.Navbar(
[
html.A(
# Use row and col to control vertical alignment of logo / brand
dbc.Row(
[
dbc.Col(html.Img(src=PLOTLY_LOGO, height="30px")),
dbc.Col(dbc.NavbarBrand("Navbar", class_name="ms-2")),
],
align="center",
class_name="g-0",
),
href="https://plotly.com",
style={"textDecoration": "none"},
),
html.Div(
[
dbc.NavbarToggler(id="navbar-toggler", n_clicks=0),
dbc.Collapse(
search_bar,
id="navbar-collapse",
is_open=False,
navbar=True,
dbc.Container(
[
html.A(
# Use row and col to control vertical alignment of logo / brand
dbc.Row(
[
dbc.Col(html.Img(src=PLOTLY_LOGO, height="30px")),
dbc.Col(dbc.NavbarBrand("Navbar", class_name="ms-2")),
],
align="center",
class_name="g-0",
),
],
class_name="ms-auto",
),
],
href="https://plotly.com",
style={"textDecoration": "none"},
),
dbc.NavbarToggler(id="navbar-toggler", n_clicks=0),
dbc.Collapse(
search_bar,
id="navbar-collapse",
is_open=False,
navbar=True,
),
]
),
color="dark",
dark=True,
class_name="py-2 px-3",
)


Expand Down
73 changes: 38 additions & 35 deletions examples/python/advanced-component-usage/navbars.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,37 +64,36 @@

# this example that adds a logo to the navbar brand
logo = dbc.Navbar(
[
html.A(
# Use row and col to control vertical alignment of logo / brand
dbc.Row(
[
dbc.Col(html.Img(src=PLOTLY_LOGO, height="30px")),
dbc.Col(dbc.NavbarBrand("Logo", class_name="ms-2")),
],
align="center",
class_name="g-0",
dbc.Container(
[
html.A(
# Use row and col to control vertical alignment of logo / brand
dbc.Row(
[
dbc.Col(html.Img(src=PLOTLY_LOGO, height="30px")),
dbc.Col(dbc.NavbarBrand("Logo", class_name="ms-2")),
],
align="center",
class_name="g-0",
),
href="https://plotly.com",
style={"textDecoration": "none"},
),
href="https://plotly.com",
style={"textDecoration": "none"},
),
html.Div(
[
dbc.NavbarToggler(id="navbar-toggler2", n_clicks=0),
dbc.Collapse(
dbc.Nav(
[nav_item, dropdown], class_name="ms-auto", navbar=True
),
id="navbar-collapse2",
dbc.NavbarToggler(id="navbar-toggler2", n_clicks=0),
dbc.Collapse(
dbc.Nav(
[nav_item, dropdown],
class_name="ms-auto",
navbar=True,
),
],
className="ms-auto",
),
],
id="navbar-collapse2",
navbar=True,
),
],
),
color="dark",
dark=True,
class_name="py-2 px-3 mb-5",
class_name="mb-5",
)

# this example has a search bar and button instead of navitems / dropdowns
Expand Down Expand Up @@ -136,17 +135,21 @@

# custom navbar based on https://getbootstrap.com/docs/4.1/examples/dashboard/
dashboard = dbc.Navbar(
[
dbc.Col(dbc.NavbarBrand("Dashboard", href="#"), sm=3, md=2),
dbc.Col(dbc.Input(type="search", placeholder="Search here")),
dbc.Col(
dbc.Nav(dbc.NavItem(dbc.NavLink("Sign out")), navbar=True),
width="auto",
),
],
dbc.Container(
[
dbc.Col(dbc.NavbarBrand("Dashboard", href="#"), sm=3, md=2),
dbc.Col(dbc.Input(type="search", placeholder="Search here")),
dbc.Col(
dbc.Nav(
dbc.Container(dbc.NavItem(dbc.NavLink("Sign out"))),
navbar=True,
),
width="auto",
),
],
),
color="dark",
dark=True,
class_name="py-2 px-3",
)

app.layout = html.Div(
Expand Down
15 changes: 7 additions & 8 deletions src/components/collapse/Collapse.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,13 @@ import React from 'react';
import PropTypes from 'prop-types';
import {omit} from 'ramda';
import RBCollapse from 'react-bootstrap/Collapse';
import RBNavbarCollapse from 'react-bootstrap/NavbarCollapse';

/**
* Hide or show content with a vertical collapsing animation. Visibility of the
* children is controlled by the `is_open` prop which can be targetted by
* callbacks.
*/
const Collapse = props => {
const Collapse = React.forwardRef((props, ref) => {
const {
children,
is_open,
Expand All @@ -21,10 +20,8 @@ const Collapse = props => {
...otherProps
} = props;

const Component = navbar ? RBNavbarCollapse : RBCollapse;

return (
<Component
<RBCollapse
in={is_open}
as={tag}
className={class_name || className}
Expand All @@ -33,10 +30,12 @@ const Collapse = props => {
(loading_state && loading_state.is_loading) || undefined
}
>
<div>{children}</div>
</Component>
<div ref={ref} className={navbar && 'navbar-collapse'}>
{children}
</div>
</RBCollapse>
);
};
});

Collapse.propTypes = {
/**
Expand Down
6 changes: 3 additions & 3 deletions src/components/fade/Fade.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import RBFade from 'react-bootstrap/Fade';
* Hide or show content with a fading animation. Visibility of the children is
* controlled by the `is_open` prop which can be targetted by callbacks.
*/
const Fade = props => {
const Fade = React.forwardRef((props, ref) => {
const {
children,
is_in,
Expand Down Expand Up @@ -35,10 +35,10 @@ const Fade = props => {
(loading_state && loading_state.is_loading) || undefined
}
>
<div>{children}</div>
<div ref={ref}>{children}</div>
</RBFade>
);
};
});

Fade.propTypes = {
/**
Expand Down