about vuetify

[ZzZuf]

Dear trame and vuetify experts,
I am new at trame and vuetify and I have a question about Vuetify in Trame.
If I want to implement such a feature in a web page, what kind of components should I choose

[jourdain]

First you should figure out your vuetify code for your UI. And for that you can use their playground.
Otherwise, the trame community can't really help for side project that we leverage (vue, vuetify, plotly, vtk, paraview...). What we can do, is help you transpose that knowledge in the context of trame.

But if you are looking for more in depth help, don't hesitate to reach out to Kitware for support.

[jourdain]

You can't nest things under the checkbox. Those will be skipped since the checkbox don't expect any slot.

[jourdain]

with row:
  with col:
      checkbox
  with col
      textfield

with row:
  with col:
      checkbox
  with col
      textfield

[ZzZuf]

Now there's a new issue where the text field is forbidden regardless of whether I check the box or not.

with vuetify.VRow(classes="pt-1", dense=True):
html.Span("挖孔", style="color: black; font-weight: bold;")
with vuetify.VRow(classes="pt-2", dense=True):
with vuetify.VCol(cols=6):
vuetify.VCheckbox(v_model=("customCircle", True), label="自定义圆")
with vuetify.VCol(cols=6):
vuetify.VTextField(
label="Radius",
v_model=('circleRadius', AlgorithmParam.gethsapce()),
disabled= '!customCircle',
hint="Enter radius",
outlined=True,
clearable=True,
)
with vuetify.VRow(classes="pt-2", dense=True):
with vuetify.VCol(cols=6):
vuetify.VCheckbox(v_model=("customRect", False), label="Custom Rectangle")
with vuetify.VRow(classes="pt-2", dense=True):
with vuetify.VCol(cols=4):
vuetify.VTextField(
label="Length",
v_model=('rectLength', AlgorithmParam.gethsapce()),
disabled= '!customRect' ,
hint="Enter length",
outlined=True,
clearable=True,
)
with vuetify.VCol(cols=4):
vuetify.VTextField(
label="width",
v_model=('rectWidth', AlgorithmParam.gethsapce()),
disabled="!customRect",
hint="Enter width",
outlined=True,
clearable=True,
)
with vuetify.VCol(cols=4):
vuetify.VTextField(
label="height",
v_model=('rectHeight', AlgorithmParam.gethsapce()),
disabled="!customRect",
hint="Enter height",
outlined=True,
clearable=True,
)

[jourdain]

Please read the documentation. If you don't want the property disabled to be given a string but the value of an expression, you need to provide a tuple. Otherwise, we can not differentiate it from a string.

vuetify.VTextField(
   label="Length",
   v_model=('rectLength', AlgorithmParam.gethsapce()),
   disabled=('!customRect',) ,
   hint="Enter length",
   outlined=True,
   clearable=True,
)