pub fn indented_section(
document: &mut UiDocument,
parent: UiNodeId,
name: impl Into<String>,
options: IndentOptions,
) -> UiNodeIdExamples found in repository?
examples/showcase.rs (lines 6508-6513)
6338fn container_widgets(ui: &mut UiDocument, parent: UiNodeId, state: &ShowcaseState) {
6339 let body = section(ui, parent, "containers", "Containers");
6340
6341 let frame = widgets::frame(
6342 ui,
6343 body,
6344 "containers.frame",
6345 widgets::FrameOptions::default().with_layout(
6346 LayoutStyle::column()
6347 .with_width_percent(1.0)
6348 .with_height(64.0)
6349 .with_padding(8.0)
6350 .with_gap(6.0),
6351 ),
6352 );
6353 widgets::strong_label(
6354 ui,
6355 frame,
6356 "containers.frame.title",
6357 "Frame",
6358 LayoutStyle::new().with_width_percent(1.0),
6359 );
6360 widgets::weak_label(
6361 ui,
6362 frame,
6363 "containers.frame.body",
6364 "Default framed surface with padding, stroke, and clipping.",
6365 LayoutStyle::new().with_width_percent(1.0),
6366 );
6367
6368 let group = widgets::group(ui, body, "containers.group");
6369 widgets::label(
6370 ui,
6371 group,
6372 "containers.group.label",
6373 "Group helper",
6374 text(12.0, color(220, 228, 238)),
6375 LayoutStyle::new().with_width_percent(1.0),
6376 );
6377 let generic_panel = widgets::panel(
6378 ui,
6379 body,
6380 "containers.panel",
6381 widgets::PanelOptions::group().with_layout(
6382 LayoutStyle::column()
6383 .with_width_percent(1.0)
6384 .with_height(44.0)
6385 .with_padding(8.0),
6386 ),
6387 );
6388 widgets::label(
6389 ui,
6390 generic_panel,
6391 "containers.panel.label",
6392 "Generic panel",
6393 text(12.0, color(220, 228, 238)),
6394 LayoutStyle::new().with_width_percent(1.0),
6395 );
6396 let group_panel = widgets::group_panel(ui, body, "containers.group_panel");
6397 widgets::label(
6398 ui,
6399 group_panel,
6400 "containers.group_panel.label",
6401 "Group panel",
6402 text(12.0, color(220, 228, 238)),
6403 LayoutStyle::new().with_width_percent(1.0),
6404 );
6405
6406 widgets::separator(
6407 ui,
6408 body,
6409 "containers.separator",
6410 widgets::SeparatorOptions::default(),
6411 );
6412 widgets::spacer(
6413 ui,
6414 body,
6415 "containers.spacer",
6416 LayoutStyle::new()
6417 .with_width_percent(1.0)
6418 .with_height(8.0)
6419 .with_flex_shrink(0.0),
6420 );
6421
6422 let grid = widgets::grid::grid(
6423 ui,
6424 body,
6425 "containers.grid",
6426 widgets::grid::GridOptions::default().with_layout(
6427 LayoutStyle::column()
6428 .with_width_percent(1.0)
6429 .with_height(78.0)
6430 .with_gap(4.0),
6431 ),
6432 );
6433 for row_index in 0..2 {
6434 let row = widgets::grid::grid_row(
6435 ui,
6436 grid,
6437 format!("containers.grid.row.{row_index}"),
6438 widgets::grid::GridRowOptions::default(),
6439 );
6440 for column_index in 0..3 {
6441 widgets::grid::grid_text_cell(
6442 ui,
6443 row,
6444 format!("containers.grid.row.{row_index}.cell.{column_index}"),
6445 format!("R{} C{}", row_index + 1, column_index + 1),
6446 widgets::grid::GridCellOptions {
6447 text_style: text(12.0, color(214, 224, 238)),
6448 ..Default::default()
6449 },
6450 );
6451 }
6452 }
6453
6454 widgets::sides(
6455 ui,
6456 body,
6457 "containers.sides",
6458 widgets::SidesOptions::default()
6459 .with_layout(LayoutStyle::row().with_width_percent(1.0).with_height(48.0))
6460 .with_gap(8.0)
6461 .with_visual(UiVisual::panel(
6462 color(20, 25, 32),
6463 Some(StrokeStyle::new(color(58, 68, 84), 1.0)),
6464 4.0,
6465 )),
6466 |ui, left| {
6467 widgets::label(
6468 ui,
6469 left,
6470 "containers.sides.left.label",
6471 "Left side",
6472 text(12.0, color(220, 228, 238)),
6473 LayoutStyle::new().with_width_percent(1.0),
6474 );
6475 },
6476 |ui, right| {
6477 widgets::label(
6478 ui,
6479 right,
6480 "containers.sides.right.label",
6481 "Right side",
6482 text(12.0, color(220, 228, 238)),
6483 LayoutStyle::new().with_width_percent(1.0),
6484 );
6485 },
6486 );
6487
6488 widgets::columns(
6489 ui,
6490 body,
6491 "containers.columns",
6492 3,
6493 widgets::ColumnsOptions::default()
6494 .with_layout(LayoutStyle::row().with_width_percent(1.0).with_height(48.0))
6495 .with_gap(8.0),
6496 |ui, column, index| {
6497 widgets::label(
6498 ui,
6499 column,
6500 format!("containers.columns.{index}.label"),
6501 format!("Column {}", index + 1),
6502 text(12.0, color(220, 228, 238)),
6503 LayoutStyle::new().with_width_percent(1.0),
6504 );
6505 },
6506 );
6507
6508 let indented = widgets::indented_section(
6509 ui,
6510 body,
6511 "containers.indented",
6512 widgets::IndentOptions::default().with_amount(24.0),
6513 );
6514 widgets::label(
6515 ui,
6516 indented,
6517 "containers.indented.label",
6518 "Indented section",
6519 text(12.0, color(196, 210, 230)),
6520 LayoutStyle::new().with_width_percent(1.0),
6521 );
6522
6523 widgets::resize_container(
6524 ui,
6525 body,
6526 "containers.resize_container",
6527 widgets::ResizeContainerOptions::default().with_layout(
6528 LayoutStyle::column()
6529 .with_width_percent(1.0)
6530 .with_height(92.0)
6531 .with_flex_shrink(0.0),
6532 ),
6533 |ui, content| {
6534 widgets::label(
6535 ui,
6536 content,
6537 "containers.resize_container.label",
6538 "Resize container",
6539 text(12.0, color(220, 228, 238)),
6540 LayoutStyle::new().with_width_percent(1.0),
6541 );
6542 },
6543 );
6544 widgets::container::resize_handle(
6545 ui,
6546 body,
6547 "containers.resize_handle",
6548 widgets::container::ResizeHandleOptions::default()
6549 .with_layout(LayoutStyle::size(20.0, 20.0))
6550 .accessibility_label("Inline resize handle"),
6551 );
6552
6553 widgets::scene(
6554 ui,
6555 body,
6556 "containers.scene",
6557 vec![
6558 ScenePrimitive::Rect(
6559 PaintRect::solid(UiRect::new(8.0, 12.0, 108.0, 46.0), color(48, 112, 184))
6560 .stroke(AlignedStroke::inside(StrokeStyle::new(
6561 color(132, 174, 222),
6562 1.0,
6563 )))
6564 .corner_radii(CornerRadii::uniform(6.0)),
6565 ),
6566 ScenePrimitive::Circle {
6567 center: UiPoint::new(150.0, 35.0),
6568 radius: 22.0,
6569 fill: color(111, 203, 159),
6570 stroke: Some(StrokeStyle::new(color(176, 236, 206), 1.0)),
6571 },
6572 ScenePrimitive::Line {
6573 from: UiPoint::new(188.0, 18.0),
6574 to: UiPoint::new(238.0, 52.0),
6575 stroke: StrokeStyle::new(color(232, 186, 88), 3.0),
6576 },
6577 ],
6578 widgets::SceneOptions::default()
6579 .with_layout(LayoutStyle::new().with_width(260.0).with_height(70.0))
6580 .accessibility_label("Scene primitives"),
6581 );
6582
6583 let panel_shell = widgets::frame(
6584 ui,
6585 body,
6586 "containers.panels",
6587 widgets::FrameOptions::default().with_layout(
6588 LayoutStyle::column()
6589 .with_width_percent(1.0)
6590 .with_height(160.0)
6591 .with_padding(0.0)
6592 .with_gap(0.0),
6593 ),
6594 );
6595 let top = widgets::top_panel(ui, panel_shell, "containers.panels.top", 28.0);
6596 widgets::label(
6597 ui,
6598 top,
6599 "containers.panels.top.label",
6600 "Top panel",
6601 text(12.0, color(220, 228, 238)),
6602 LayoutStyle::new().with_width_percent(1.0),
6603 );
6604 let middle = row(ui, panel_shell, "containers.panels.middle", 0.0);
6605 let left = widgets::side_panel(
6606 ui,
6607 middle,
6608 "containers.panels.side",
6609 widgets::SidePanelSide::Left,
6610 90.0,
6611 );
6612 widgets::label(
6613 ui,
6614 left,
6615 "containers.panels.side.label",
6616 "Side",
6617 text(12.0, color(220, 228, 238)),
6618 LayoutStyle::new().with_width_percent(1.0),
6619 );
6620 let left = widgets::left_panel(ui, middle, "containers.panels.left", 90.0);
6621 widgets::label(
6622 ui,
6623 left,
6624 "containers.panels.left.label",
6625 "Left",
6626 text(12.0, color(220, 228, 238)),
6627 LayoutStyle::new().with_width_percent(1.0),
6628 );
6629 let center = widgets::central_panel(ui, middle, "containers.panels.center");
6630 widgets::label(
6631 ui,
6632 center,
6633 "containers.panels.center.label",
6634 "Central panel",
6635 text(12.0, color(220, 228, 238)),
6636 LayoutStyle::new().with_width_percent(1.0),
6637 );
6638 let right = widgets::right_panel(ui, middle, "containers.panels.right", 110.0);
6639 widgets::label(
6640 ui,
6641 right,
6642 "containers.panels.right.label",
6643 "Right",
6644 text(12.0, color(220, 228, 238)),
6645 LayoutStyle::new().with_width_percent(1.0),
6646 );
6647 let bottom = widgets::bottom_panel(ui, panel_shell, "containers.panels.bottom", 28.0);
6648 widgets::label(
6649 ui,
6650 bottom,
6651 "containers.panels.bottom.label",
6652 "Bottom panel",
6653 text(12.0, color(220, 228, 238)),
6654 LayoutStyle::new().with_width_percent(1.0),
6655 );
6656
6657 widgets::scroll_container(
6658 ui,
6659 body,
6660 "containers.scroll_area_with_bars",
6661 state.containers_scroll,
6662 widgets::ScrollContainerOptions::default()
6663 .with_axes(ScrollAxes::BOTH)
6664 .with_layout(LayoutStyle::column().with_width(300.0).with_height(116.0)),
6665 |ui, viewport| {
6666 for index in 0..5 {
6667 widgets::label(
6668 ui,
6669 viewport,
6670 format!("containers.scroll_area_with_bars.row.{index}"),
6671 format!("Scrollable row {}", index + 1),
6672 text(12.0, color(200, 212, 228)),
6673 LayoutStyle::new()
6674 .with_width(420.0)
6675 .with_height(28.0)
6676 .with_flex_shrink(0.0),
6677 );
6678 }
6679 },
6680 );
6681
6682 let area_host = ui.add_child(
6683 body,
6684 UiNode::container(
6685 "containers.area.host",
6686 LayoutStyle::new()
6687 .with_width_percent(1.0)
6688 .with_height(82.0)
6689 .with_flex_shrink(0.0),
6690 )
6691 .with_visual(UiVisual::panel(
6692 color(17, 20, 25),
6693 Some(StrokeStyle::new(color(58, 68, 84), 1.0)),
6694 4.0,
6695 )),
6696 );
6697 widgets::container::area(
6698 ui,
6699 area_host,
6700 "containers.area",
6701 widgets::container::AreaOptions::new(UiRect::new(14.0, 14.0, 180.0, 44.0))
6702 .with_visual(UiVisual::panel(color(39, 72, 109), None, 4.0))
6703 .accessibility_label("Absolute positioned area"),
6704 |ui, area| {
6705 widgets::label(
6706 ui,
6707 area,
6708 "containers.area.label",
6709 "Area",
6710 text(12.0, color(238, 244, 252)),
6711 LayoutStyle::new().with_width_percent(1.0),
6712 );
6713 },
6714 );
6715}