ipyvuetify：如何限制 TextField 的宽度

Question

我正在尝试使用 ipyvuetify 文本字段来设置一位数字，但无法将文本字段的使用限制为任何合理的值。一个简单的代码，例如

import ipyvuetify as v
#Textfield should be an one digit number...
v.Row(children=[v.TextField(type="number"), v.Html(tag='H1',children=['Some text here'])])

导致一个看起来很丑的巨大 TextField：

如何设置 TextField 的宽度限制/将其设置为最大宽度为一个字符？或者，我可以在 vue v-TextField / vue 代码上设置任何属性来限制 TextField 的大小吗？

Answer 1

我认为你不能直接限制 Textfield 的宽度，它会占用其父元素的最大宽度。

但是你可以把它放在一个固定宽度的父元素中:

v.Row(
    children = [
        v.Html(
            tag = 'div',
            style_ = 'width: 500px',
            children = [
                v.TextField(type = "number")
            ]
        ),
        v.Html(
            tag = 'H1',
            children = ['Some text here']
        )
    ]
)

Answer 2

根据 Christoph 的回答，这是我迄今为止最好的答案：我添加了 v.Spacer，并将第二部分转换为 v.Col（可能也值得将第一部分包含在 v.Col 中？）

import ipyvuetify as v
v.Row(
    children = [
        v.Html(
            tag = 'div',
            style_ = 'width: 50px',
            children = [
                v.TextField(type = "number")
            ]
        ),
        v.Spacer(),
        v.Col(
            sm=3,
            tag = 'H1',
            children = ['Some text here']
        )
    ]
)

Answer 3

向 TextField 样式添加 max-width:50px 有效。

import ipyvuetify as v
text_field_widget = v.TextField( style_ = "max-width:50px", v_model=None, type="number")
#Textfield should be an one digit number...
row = v.Row(class_ = 'mx-2',children=[text_field_widget, v.Html(tag='H1',children=['Some text here'])])
row

ipyvuetify：如何限制 TextField 的宽度

ipyvuetify: How to limit width of TextField

python

vuetify.js

ipyvuetify