Skip to content

Commit 1425bec

Browse files
ocornutocornut
committed
Demo: Text baseline demo tweaks.
1 parent a6c3be4 commit 1425bec

File tree

1 file changed

+90
-46
lines changed

1 file changed

+90
-46
lines changed

‎imgui_demo.cpp

Lines changed: 90 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -2047,55 +2047,99 @@ static void ShowDemoWindowLayout()
20472047

20482048
if (ImGui::TreeNode("Text Baseline Alignment"))
20492049
{
2050-
HelpMarker("This is testing the vertical alignment that gets applied on text to keep it aligned with widgets. Lines only composed of text or \"small\" widgets fit in less vertical spaces than lines with normal widgets.");
2051-
2052-
ImGui::Text("One\nTwo\nThree"); ImGui::SameLine();
2053-
ImGui::Text("Hello\nWorld"); ImGui::SameLine();
2054-
ImGui::Text("Banana");
2055-
2056-
ImGui::Text("Banana"); ImGui::SameLine();
2057-
ImGui::Text("Hello\nWorld"); ImGui::SameLine();
2058-
ImGui::Text("One\nTwo\nThree");
2059-
2060-
ImGui::Button("HOP##1"); ImGui::SameLine();
2061-
ImGui::Text("Banana"); ImGui::SameLine();
2062-
ImGui::Text("Hello\nWorld"); ImGui::SameLine();
2063-
ImGui::Text("Banana");
2064-
2065-
ImGui::Button("HOP##2"); ImGui::SameLine();
2066-
ImGui::Text("Hello\nWorld"); ImGui::SameLine();
2067-
ImGui::Text("Banana");
2068-
2069-
ImGui::Button("TEST##1"); ImGui::SameLine();
2070-
ImGui::Text("TEST"); ImGui::SameLine();
2071-
ImGui::SmallButton("TEST##2");
2072-
2073-
ImGui::AlignTextToFramePadding(); // If your line starts with text, call this to align it to upcoming widgets.
2074-
ImGui::Text("Text aligned to Widget"); ImGui::SameLine();
2075-
ImGui::Button("Widget##1"); ImGui::SameLine();
2076-
ImGui::Text("Widget"); ImGui::SameLine();
2077-
ImGui::SmallButton("Widget##2"); ImGui::SameLine();
2078-
ImGui::Button("Widget##3");
2079-
2080-
// Tree
2081-
const float spacing = ImGui::GetStyle().ItemInnerSpacing.x;
2082-
ImGui::Button("Button##1");
2083-
ImGui::SameLine(0.0f, spacing);
2084-
if (ImGui::TreeNode("Node##1")) { for (int i = 0; i < 6; i++) ImGui::BulletText("Item %d..", i); ImGui::TreePop(); } // Dummy tree data
2050+
{
2051+
ImGui::BulletText("Text baseline:");
2052+
ImGui::SameLine();
2053+
HelpMarker("This is testing the vertical alignment that gets applied on text to keep it aligned with widgets. Lines only composed of text or \"small\" widgets fit in less vertical spaces than lines with normal widgets.");
2054+
ImGui::Indent();
20852055

2086-
ImGui::AlignTextToFramePadding(); // Vertically align text node a bit lower so it'll be vertically centered with upcoming widget. Otherwise you can use SmallButton (smaller fit).
2087-
bool node_open = ImGui::TreeNode("Node##2"); // Common mistake to avoid: if we want to SameLine after TreeNode we need to do it before we add child content.
2088-
ImGui::SameLine(0.0f, spacing); ImGui::Button("Button##2");
2089-
if (node_open) { for (int i = 0; i < 6; i++) ImGui::BulletText("Item %d..", i); ImGui::TreePop(); } // Dummy tree data
2056+
ImGui::Text("KO Blahblah"); ImGui::SameLine();
2057+
ImGui::Button("Some framed item"); ImGui::SameLine();
2058+
HelpMarker("Baseline of button will look misaligned with text..");
20902059

2091-
// Bullet
2092-
ImGui::Button("Button##3");
2093-
ImGui::SameLine(0.0f, spacing);
2094-
ImGui::BulletText("Bullet text");
2060+
// If your line starts with text, call AlignTextToFramePadding() to align text to upcoming widgets.
2061+
// Because we don't know what's coming after the Text() statement, we need to move the text baseline down by FramePadding.y
2062+
ImGui::AlignTextToFramePadding();
2063+
ImGui::Text("OK Blahblah"); ImGui::SameLine();
2064+
ImGui::Button("Some framed item"); ImGui::SameLine();
2065+
HelpMarker("We call AlignTextToFramePadding() to vertically align the text baseline by +FramePadding.y");
20952066

2096-
ImGui::AlignTextToFramePadding();
2097-
ImGui::BulletText("Node");
2098-
ImGui::SameLine(0.0f, spacing); ImGui::Button("Button##4");
2067+
// SmallButton() uses the same vertical padding as Text
2068+
ImGui::Button("TEST##1"); ImGui::SameLine();
2069+
ImGui::Text("TEST"); ImGui::SameLine();
2070+
ImGui::SmallButton("TEST##2");
2071+
2072+
// If your line starts with text, call AlignTextToFramePadding() to align text to upcoming widgets.
2073+
ImGui::AlignTextToFramePadding();
2074+
ImGui::Text("Text aligned to framed item"); ImGui::SameLine();
2075+
ImGui::Button("Item##1"); ImGui::SameLine();
2076+
ImGui::Text("Item"); ImGui::SameLine();
2077+
ImGui::SmallButton("Item##2"); ImGui::SameLine();
2078+
ImGui::Button("Item##3");
2079+
2080+
ImGui::Unindent();
2081+
}
2082+
2083+
ImGui::Spacing();
2084+
2085+
{
2086+
ImGui::BulletText("Multi-line text:");
2087+
ImGui::Indent();
2088+
ImGui::Text("One\nTwo\nThree"); ImGui::SameLine();
2089+
ImGui::Text("Hello\nWorld"); ImGui::SameLine();
2090+
ImGui::Text("Banana");
2091+
2092+
ImGui::Text("Banana"); ImGui::SameLine();
2093+
ImGui::Text("Hello\nWorld"); ImGui::SameLine();
2094+
ImGui::Text("One\nTwo\nThree");
2095+
2096+
ImGui::Button("HOP##1"); ImGui::SameLine();
2097+
ImGui::Text("Banana"); ImGui::SameLine();
2098+
ImGui::Text("Hello\nWorld"); ImGui::SameLine();
2099+
ImGui::Text("Banana");
2100+
2101+
ImGui::Button("HOP##2"); ImGui::SameLine();
2102+
ImGui::Text("Hello\nWorld"); ImGui::SameLine();
2103+
ImGui::Text("Banana");
2104+
ImGui::Unindent();
2105+
}
2106+
2107+
ImGui::Spacing();
2108+
2109+
{
2110+
ImGui::BulletText("Misc items:");
2111+
ImGui::Indent();
2112+
2113+
// SmallButton() sets FramePadding to zero. Text baseline is aligned to match baseline of previous Button
2114+
ImGui::Button("80x80", ImVec2(80, 80));
2115+
ImGui::SameLine();
2116+
ImGui::Button("50x50", ImVec2(50, 50));
2117+
ImGui::SameLine();
2118+
ImGui::Button("Button()");
2119+
ImGui::SameLine();
2120+
ImGui::SmallButton("SmallButton()");
2121+
2122+
// Tree
2123+
const float spacing = ImGui::GetStyle().ItemInnerSpacing.x;
2124+
ImGui::Button("Button##1");
2125+
ImGui::SameLine(0.0f, spacing);
2126+
if (ImGui::TreeNode("Node##1")) { for (int i = 0; i < 6; i++) ImGui::BulletText("Item %d..", i); ImGui::TreePop(); } // Dummy tree data
2127+
2128+
ImGui::AlignTextToFramePadding(); // Vertically align text node a bit lower so it'll be vertically centered with upcoming widget. Otherwise you can use SmallButton (smaller fit).
2129+
bool node_open = ImGui::TreeNode("Node##2");// Common mistake to avoid: if we want to SameLine after TreeNode we need to do it before we add child content.
2130+
ImGui::SameLine(0.0f, spacing); ImGui::Button("Button##2");
2131+
if (node_open) { for (int i = 0; i < 6; i++) ImGui::BulletText("Item %d..", i); ImGui::TreePop(); } // Dummy tree data
2132+
2133+
// Bullet
2134+
ImGui::Button("Button##3");
2135+
ImGui::SameLine(0.0f, spacing);
2136+
ImGui::BulletText("Bullet text");
2137+
2138+
ImGui::AlignTextToFramePadding();
2139+
ImGui::BulletText("Node");
2140+
ImGui::SameLine(0.0f, spacing); ImGui::Button("Button##4");
2141+
ImGui::Unindent();
2142+
}
20992143

21002144
ImGui::TreePop();
21012145
}

0 commit comments

Comments
 (0)