diff --git a/docs/examples/styles/max_height.css b/docs/examples/styles/max_height.css new file mode 100644 index 000000000..7bbc5966e --- /dev/null +++ b/docs/examples/styles/max_height.css @@ -0,0 +1,25 @@ +Horizontal { + height: 100%; + width: 100%; +} + +Placeholder { + height: 100%; + width: 1fr; +} + +#p1 { + max-height: 10w; +} + +#p2 { + max-height: 999; /* (1)! */ +} + +#p3 { + max-height: 50%; +} + +#p4 { + max-height: 10; +} diff --git a/docs/examples/styles/max_height.py b/docs/examples/styles/max_height.py new file mode 100644 index 000000000..7f3a00fda --- /dev/null +++ b/docs/examples/styles/max_height.py @@ -0,0 +1,16 @@ +from textual.app import App +from textual.containers import Horizontal +from textual.widgets import Placeholder + + +class MaxHeightApp(App): + def compose(self): + yield Horizontal( + Placeholder("max-height: 10w", id="p1"), + Placeholder("max-height: 999", id="p2"), + Placeholder("max-height: 50%", id="p3"), + Placeholder("max-height: 10", id="p4"), + ) + + +app = MaxHeightApp(css_path="max_height.css") diff --git a/docs/examples/styles/max_width.css b/docs/examples/styles/max_width.css new file mode 100644 index 000000000..a32353a78 --- /dev/null +++ b/docs/examples/styles/max_width.css @@ -0,0 +1,25 @@ +Horizontal { + height: 100%; + width: 100%; +} + +Placeholder { + width: 100%; + height: 1fr; +} + +#p1 { + max-width: 50h; +} + +#p2 { + max-width: 999; /* (1)! */ +} + +#p3 { + max-width: 50%; +} + +#p4 { + max-width: 30; +} diff --git a/docs/examples/styles/max_width.py b/docs/examples/styles/max_width.py new file mode 100644 index 000000000..0ee440a92 --- /dev/null +++ b/docs/examples/styles/max_width.py @@ -0,0 +1,16 @@ +from textual.app import App +from textual.containers import Vertical +from textual.widgets import Placeholder + + +class MaxWidthApp(App): + def compose(self): + yield Vertical( + Placeholder("max-width: 50h", id="p1"), + Placeholder("max-width: 999", id="p2"), + Placeholder("max-width: 50%", id="p3"), + Placeholder("max-width: 30", id="p4"), + ) + + +app = MaxWidthApp(css_path="max_width.css") diff --git a/docs/examples/styles/min_height.css b/docs/examples/styles/min_height.css new file mode 100644 index 000000000..ca4d2853f --- /dev/null +++ b/docs/examples/styles/min_height.css @@ -0,0 +1,26 @@ +Horizontal { + height: 100%; + width: 100%; + overflow-y: auto; +} + +Placeholder { + width: 1fr; + height: 50%; +} + +#p1 { + min-height: 25%; /* (1)! */ +} + +#p2 { + min-height: 75%; +} + +#p3 { + min-height: 30; +} + +#p4 { + min-height: 40w; +} diff --git a/docs/examples/styles/min_height.py b/docs/examples/styles/min_height.py new file mode 100644 index 000000000..b6e02deda --- /dev/null +++ b/docs/examples/styles/min_height.py @@ -0,0 +1,16 @@ +from textual.app import App +from textual.containers import Horizontal +from textual.widgets import Placeholder + + +class MinHeightApp(App): + def compose(self): + yield Horizontal( + Placeholder("min-height: 25%", id="p1"), + Placeholder("min-height: 75%", id="p2"), + Placeholder("min-height: 30", id="p3"), + Placeholder("min-height: 40w", id="p4"), + ) + + +app = MinHeightApp(css_path="min_height.css") diff --git a/docs/examples/styles/min_width.css b/docs/examples/styles/min_width.css new file mode 100644 index 000000000..43dd8400a --- /dev/null +++ b/docs/examples/styles/min_width.css @@ -0,0 +1,26 @@ +Vertical { + height: 100%; + width: 100%; + overflow-x: auto; +} + +Placeholder { + height: 1fr; + width: 50%; +} + +#p1 { + min-width: 25%; /* (1)! */ +} + +#p2 { + min-width: 75%; +} + +#p3 { + min-width: 100; +} + +#p4 { + min-width: 400h; +} diff --git a/docs/examples/styles/min_width.py b/docs/examples/styles/min_width.py new file mode 100644 index 000000000..25195c61d --- /dev/null +++ b/docs/examples/styles/min_width.py @@ -0,0 +1,16 @@ +from textual.app import App +from textual.containers import Vertical +from textual.widgets import Placeholder + + +class MinWidthApp(App): + def compose(self): + yield Vertical( + Placeholder("min-width: 25%", id="p1"), + Placeholder("min-width: 75%", id="p2"), + Placeholder("min-width: 100", id="p3"), + Placeholder("min-width: 400h", id="p4"), + ) + + +app = MinWidthApp(css_path="min_width.css")