Comments (6)
It's pretty trivial to implement on your own. This is roughly how I do it in my app:
import string
from typing import Union
from rich.console import RenderableType
from textual import events
from textual.app import App
from textual.keys import Keys
from textual.reactive import Reactive
from textual.widget import Widget
class InputBox(Widget):
input_text: Union[Reactive[str], str] = Reactive("")
def render(self) -> RenderableType:
return f"[blue]❯[/blue] {self.input_text}"
def set_input_text(self, input_text: str) -> None:
self.input_text = input_text
class MyApp(App):
input_text: Union[Reactive[str], str] = Reactive("")
input_box: InputBox
async def on_key(self, key: events.Key) -> None:
if key.key == Keys.ControlH:
self.input_text = self.input_text[:-1]
elif key.key == Keys.Delete:
self.input_text = ""
elif key.key in string.printable:
self.input_text += key.key
def watch_input_text(self, input_text) -> None:
self.input_box.set_input_text(input_text)
async def on_mount(self, event: events.Mount) -> None:
self.input_box = InputBox()
grid = await self.view.dock_grid(edge="left", name="left")
grid.add_column(name="body")
grid.add_row(size=1, name="input")
grid.add_areas(areaInputBox="body,input")
grid.place(areaInputBox=self.input_box)
Whether this is the best practice or not I'm not 100% sure as Python isn't a strength of mine but it works.
from textual.
I think the devil will be in the details. I'm not sure how well your approach scales to multiple widgets each taking focus etc.
I know @willmcgugan is working on some magic for implementing forms etc. In the meantime, some people are using https://github.com/sirfuzzalot/textual-inputs though it's been a couple of months since it's had a release so YMMV.
from textual.
Check out the discussion here: #105
from textual.
@M-Porter Hey there!
I used your example, but I would like to know how to render a blinking character at the end of the input box
I tried using ANSI codes, but they get escaped.
Do I have to wrap the text with a rich
method or smth?
PS: I am on the css branch.
Code
import string
from typing import Union
from textual.app import App
from textual.widget import Widget
from textual.widgets import Placeholder
from textual.keys import Keys
from textual.reactive import Reactive
from rich.console import RenderableType
from textual import events
class InputBox(Widget):
has_focus: Reactive[bool] = Reactive(False)
input_text: Union[Reactive[str], str] = Reactive("")
def render(self) -> RenderableType:
return f"[blue]❯[/blue] {self.input_text}" + ('|' if self.has_focus else '')
def set_input_text(self, input_text: str) -> None:
self.input_text = input_text
async def on_focus(self, event: events.Focus) -> None:
self.has_focus = True
async def on_blur(self, event: events.Blur) -> None:
self.has_focus = False
class BasicApp(App):
"""A basic app demonstrating CSS"""
input_text: Union[Reactive[str], str] = Reactive("")
input_box: InputBox
async def on_key(self, key: events.Key) -> None:
if self.input_box.has_focus:
if key.key == Keys.ControlH:
self.input_text = self.input_text[:-1]
elif key.key == Keys.Delete:
self.input_text = ""
elif key.key in string.printable:
self.input_text += key.key
def watch_input_text(self, input_text) -> None:
self.input_box.set_input_text(input_text)
def on_load(self):
"""Bind keys here."""
def on_mount(self):
self.input_box = InputBox()
"""Build layout here."""
self.mount(
Placeholder(),
self.input_box,
Placeholder()
)
BasicApp.run(log="textual.log")
from textual.
https://github.com/Textualize/textual/wiki/Sorry-we-closed-your-issue
from textual.
Did we solve your problem?
Consider buying the Textualize developers a coffee to say thanks.
from textual.
Related Issues (20)
- set_reactive02.py does not run (AttributeError: 'Greeter' object has no attribute 'set_reactive') HOT 7
- Clarify API docs following titles change? HOT 3
- Reduce font size for params in docs? HOT 5
- How to refresh DirectoryTree to see new files/folders? HOT 10
- `DataTable` height maybe doesn't account for horizontal scrollbar? HOT 3
- Textual leaves Kitty terminal broken HOT 3
- Select widget crashes if removed right after selected HOT 4
- Visual glitch while switching radio buttons HOT 1
- Screen.dismiss doesn't call the callback function if it's called with no args HOT 2
- Clicking priority binding in `Footer` doesn't call the correct action HOT 2
- Adding a simpler way to bind reactives when dynamically mounting new widgets
- mutate_reactive doesn't work with data binding HOT 5
- mutate_reactive not updating screen (w/ reactive list) HOT 6
- Method to open a URL HOT 1
- Saving / serving a file. HOT 2
- Tree with many nodes + Input + TabbedContent can lead to some nodes not being displayed HOT 5
- Computed methods aren't called from mutate_reactive HOT 5
- slight bug with DataTable's move_cursor method and it's 'scroll' parameter HOT 1
- TabbedContent visuals broken when animations are disabled HOT 1
- Escape being detected and processed as keyboard input while hoovering on buttons under heavy load HOT 10
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from textual.