Textual 样式示例集用 textual run 快速运行、验证与学习 Textual CSS【免费下载链接】textualThe lean application framework for Python. Build sophisticated user interfaces with a simple Python API. Run your apps in the terminal and a web browser.项目地址: https://gitcode.com/gh_mirrors/te/textualTextual 的样式系统Textual CSS用于定义终端应用的外观官方文档中每一处样式说明都配有可运行的示例。仓库中的 docs/examples/styles/ 目录集中存放了这些示例的 Python 源码与配套 TCSS 样式表既是文档截图的生成来源也是开发者学习、调试与复刻样式效果的第一手资料。读完本文你将掌握用textual run一键运行这些示例的方法、示例的通用代码骨架以及 140 余个示例文件按样式主题的分类图谱从而把整套示例当作自己的样式工具箱。这套示例是什么docs/examples/styles/README.md开宗明义这里的文件是文档中使用的示例用于生成截图These are the examples from the documentation, used to generate screenshots即 docs/styles/ 中每个样式文档页配图均由对应示例渲染而成。该目录共包含 72 组*.py与*.tcss配对文件外加本 README每一对演示一个或一组 CSS 属性例如color.py/color.tcss演示color属性的三种写法border.py/border.tcss演示border的边框样式组合。文件命名即主题align、background、border、grid、padding、margin、width、height、opacity、text_style、scrollbars、layout、dock、visibility等覆盖 Textual CSS 的绝大部分样式能力。快速上手用 textual CLI 运行示例README 给出的运行方式是使用 Textual 自带的 CLI 命令。以text_style示例为例textual run text_style.py命令会在当前终端直接启动该示例应用运行效果即为文档中对应样式说明的截图内容。执行命令前需先安装 Textual本仓库使用 Poetry/uv 管理见 pyproject.toml并进入docs/examples/styles/目录。textual run还有两个对样式调试极其有用的开关--dev开发模式启用 CSS 热重载。修改.tcss文件后界面即时刷新无需重启应用。src/textual/app.py中App.__init__的watch_css参数注释明确指出如果你使用带 dev 开关的textual run该参数会被自动设置见 src/textual/app.py。docs/guide/CSS.md 也推荐用它进行样式实时迭代无需重启应用即可反复调整设计让界面设计更快更轻松。--screenshot N在应用运行 N 秒后导出当前界面为 SVG 截图例如textual run text_style.py --screenshot 5。这正是文档截图与快照测试的工作方式参见 docs/blog/posts/release0-11-0.md。每个示例应用也都保留了if __name__ __main__: app.run()入口因此同样可以python text_style.py直接运行两者等价。示例的通用代码骨架浏览任意一组示例即可发现高度统一的四步结构以text_style.py为例见 docs/examples/styles/text_style.pyfrom textual.app import App from textual.widgets import Label TEXT I must not fear. Fear is the mind-killer. ... class TextStyleApp(App): CSS_PATH text_style.tcss # 1. 绑定配套样式表 def compose(self): # 2. 组装界面组件 yield Label(TEXT, idlbl1) yield Label(TEXT, idlbl2) yield Label(TEXT, idlbl3) if __name__ __main__: app TextStyleApp() # 3. 实例化 app.run() # 4. 启动事件循环要点CSS_PATH类变量指向与 Python 文件同目录的.tcss文件App启动时自动加载将其改为列表即可加载多个样式文件见 docs/guide/CSS.md。多数示例还直接用id选择器如#lbl1精确控制单个组件。compose()以生成器方式 yield 组件是 Textual 声明式组装的标配示例常用Label/Static承载文字用Container组织嵌套布局如dock_all.py用Widget充当纯色占位如width.py、height.py。每个示例都可独立运行无外部依赖适合逐个运行对照文档学习。按样式主题分类解读示例72 组示例可按功能归纳为九大类下面结合具体文件说明每一类的演示内容均位于 docs/examples/styles/。颜色与背景color.py/color.tcss演示color属性的三种取值写法——命名色red、RGB 函数rgb(0, 255, 0)、HSL 函数hsl(240, 100%, 50%)。background.py、background_tint.py、background_transparency.py演示background的色值与透明度组合。background_transparency.tcss用#t10 { background: red 10% }到#t100共 10 档直观展示百分比透明度对背景色的影响。opacity.py五个标签分别设置opacity: 0% / 25% / 50% / 75% / 100%对比整体透明度差异。tint.py、text_opacity.py分别演示tint叠加色调与文字透明度。这些示例同时也印证了颜色语法与 docs/styles/color.md 等文档页一一对应可以作为颜色取值的活字典。边框、轮廓与装饰线border.py/border.tcss三种边框组合——solid red、dashed green、tall blue展示样式实线/虚线/加高与颜色的二元写法配套 CSS 还用到box-sizing: border-box保证边框不撑破布局。border_all.py分别设置border-top、border-right、border-bottom、border-left的单边写法。border_title_align.py、border_title_colors.py、border_subtitle_align.py等演示border-title、border-subtitle的对齐与着色。outline.py、outline_all.py、outline_vs_border.pyoutline_vs_border.tcss用.outline { outline: $error round }与.border { border: $success heavy }直观对比轮廓不占布局空间、边框占空间的本质区别并示范了$error、$success这类主题变量写法。keyline.py、keyline_horizontal.py、hatch.pykeyline分隔线与hatch剖面填充图案。盒模型padding / margin / box-sizingpadding.py/padding.tcsspadding: 4 8两值写法上下 4、左右 8背景半透明blue 20%便于观察内边距区域。margin.py/margin.tcssmargin: 4 8配合border: blue wide可清晰看出外边距与边框的间距。box_sizing.py/box_sizing.tcss同一尺寸下对比border-box宽高含边框内边距与content-box宽高仅指内容区是避免布局溢出的关键概念。尺寸width / height / min / maxwidth.py/width.tcss、width_comparison.pywidth: 50%等百分比取值以及1fr比例分配。height.py、height_comparison.py垂直方向的百分比与 fr 取值。min_width.py、min_height.py、max_width.py、max_height.py最小/最大约束对弹性布局的影响。对齐与定位align.py/align.tcssalign: center middle双值写法同时给出align-horizontal/align-vertical的单轴写法。content_align.py/content_align.tcsscontent-align: left top、content-align-horizontal: center等控制容器内子组件内容的位置。position.py/position.tcssposition: absolute与position: relative配合offset: 2 1的差异对比。布局layout / grid / docklayout.py/layout.tcss两个容器分别设置layout: vertical与layout: horizontal观察子组件排布方向。grid.py/grid.tcss演示layout: grid的完整声明——grid-size: 3 4、grid-rows: 1fr、grid-columns: 1fr、grid-gutter: 1以及单元格跨行跨列row-span: 3、column-span: 2另有grid_columns.py、grid_rows.py、grid_gutter.py、column_span.py、row_span.py等细分示例。dock_all.py/dock_all.tcss四个子容器分别dock: left / top / right / bottom配合height: 100%、width: auto与align-vertical: middle形成典型应用布局骨架。文本样式text_style.py/text_style.tcssREADME 指定的入门示例三个标签分别设置text-style: bold、italic、reverse配background: red 30%等半透明底色text_style_all.py则覆盖更多风格组合。text_align.pytext-align的left / center / right。text_wrap.py/text_wrap.tcsstext-wrap: wrap默认与nowrap的对比。text_overflow.py超出容器时的截断策略。滚动条scrollbars.py、scrollbars2.pyscrollbar-background、scrollbar-background-active、scrollbar-background-hover、scrollbar-color、scrollbar-color-active、scrollbar-color-hover全套滚动条配色见scrollbars2.tcss。scrollbar_size.py、scrollbar_size2.py滚动条粗细。scrollbar_visibility.tcssvisible默认与hidden的对比注释# The default明确标注了默认值。scrollbar_gutter.py、scrollbar_corner_color.py滚动条占位槽与角落颜色。可见性与溢出visibility.py/visibility.tcssvisibility: hidden隐藏组件Label.invisible类选择器写法visibility_containers.py演示容器级的隐藏传递。display.pydisplay: none与block的切换。overflow.py/overflow.tcssoverflow-y: hidden关闭垂直滚动与默认滚动行为对比overflow相关变化还由 tests/test_overflow_change.py 等测试用例覆盖验证。示例与文档、测试的关系理解这套示例的三个身份有助于高效使用文档配图源docs/styles/下每个样式页如 docs/styles/border.md、docs/styles/grid/的示例截图均由本目录对应文件生成看到文档配图想复现效果直接运行对应示例即可。快照测试底座测试目录 tests/snapshot_tests/ 的快照应用与示例同源同构tests/snapshot_tests/__snapshots__/下 448 个 SVG 快照记录了各样式在不同环境下的渲染结果可作为样式应该长什么样的权威参照。样式调试沙盒由于每个示例都是最小可运行应用改动其中的.tcss再配textual run xxx.py --dev热重载即可零成本验证任意样式属性的取值效果是排查样式问题的最佳试验场。结语docs/examples/styles/与其 README 虽然只给了三行运行说明背后却是完整的 Textual CSS 可运行示例库。以textual run为入口、以py tcss配对为单元你可以逐类运行、对照文档、自由改动把每个样式属性的取值范围和视觉差异彻底吃透——这正是这套示例最实用的价值所在。【免费下载链接】textualThe lean application framework for Python. Build sophisticated user interfaces with a simple Python API. Run your apps in the terminal and a web browser.项目地址: https://gitcode.com/gh_mirrors/te/textual创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考