Py.Cafe

iisakkirotko/

solara-text-number-app-0

Solara Text and Number Interaction

DocsPricing
  • app.py
  • requirements.txt
  • vue_tmp.vue
app.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import solara

@solara.component_vue('./vue_tmp.vue')
def MyComponent(value: str = '', label: str = 'Enter text', on_value: callable = None, debug: bool = False):
    ...

@solara.component
def Page():
    value = solara.use_reactive('')

    def handle_value_change(new_value):
        print(f"Value changed to: {new_value}")
        value.set(new_value)

    with solara.Column():
        with solara.Card(style={'max-width': '800px'}):
            with solara.Column():
                MyComponent(
                    value=value.value,
                    label="Enter some text",
                    on_value=handle_value_change,
                    debug=True,
                )
                solara.Markdown(f'The value is: {value.value}')
vue_tmp.vue
1
2
3
4
5
6
7
8
<template>
    <v-text-field
        v-model="value"
        :label="label"
    ></v-text-field>
</template>

<script></script>