Layout widgets provide flexible ways to arrange other widgets in your notebook interface. They help you create complex, responsive layouts by combining multiple widgets together.
Below is a comprehensive list of supported layout widget types.
Layout widgets can be nested to create complex arrangements. For example, you can place a row of widgets inside a grid cell, or create a column of rows.
from lplots.widgets.grid import w_grid
from lplots.widgets.column import w_column
from lplots.widgets.select import w_select
from lplots.widgets.plot import w_plot
import plotly.express as px
# Get the iris dataset
df = px.data.iris()
# Get numeric columns for axis selection
numeric_cols = df.select_dtypes(include=['float64', 'int64']).columns.tolist()
# Create a column of select widgets with defaults set to first two columns
x_axis = w_select(
label="X-axis",
options=numeric_cols,
default=numeric_cols[0]
)
y_axis = w_select(
label="Y-axis",
options=numeric_cols,
default=numeric_cols[1]
)
plot_color = w_select(
label="Color",
options=["blue", "red", "green"],
default="blue"
)
# Create column layout for widgets
column = w_column(items=[x_axis, y_axis, plot_color])
# Create scatter plot
fig1 = px.scatter(
df,
x=x_axis.value,
y=y_axis.value,
template="simple_white"
)
# Update marker color
fig1.update_traces(marker=dict(color=plot_color.value))
# Render the plot
plot1 = w_plot(source=fig1)
# Add the column and plot to the grid
with w_grid(columns=12) as grid:
grid.add(item=column, col_span=3)
grid.add(item=plot1, col_span=9)
Layout widgets are reactive to changes in their child widgets. When a child widget is updated, the layout will automatically adjust to accommodate the changes while maintaining the specified arrangement.
