CODEWITHSUNDEEP
pythontaipy
eric
eric

Reputation: 33

How do I properly display variables in Markdown headers with Taipy GUI

I built a dashboard application using the Taipy GUI python library.

The app has a variable called "country", and its value can be assigned using a drop-down selector, with the following syntax:

<|{country}|selector|lov={lov_region}|on_change=on_change_country|dropdown|label=Country/Region|>

The selector works fine and it properly assigns the values of a country to the <|country|> variable when selected.

When I try to use the value of the <|country|> variable to create a Markdown title, I use the following code (in this case, for a <h2> header):

## Fossil fuel per capita for <|{country}|>:

It works But the problem is how the value for the <|country|> variable is displayed. It looks different than the rest of the header.

For example, in the image below, where <|country|> is set to "Philippines":

enter image description here

Upvotes: 1

Views: 474

Answers (2)

Florian Jacta
Florian Jacta

Reputation: 1521

You can add the property raw to your visual element.

## Fossil fuel per capita for <|{country}|text|raw|>:

The text will take the appropriate format automatically.

Upvotes: 1

Jaime Rodriguez
Jaime Rodriguez

Reputation: 17

The font size for h2 is 2rem

https://docs.taipy.io/en/release-2.2/manuals/gui/styling/stylekit/

You need a css file with the same name as your python file and use an id for the component "text1" and in this id set the css property (in the example click in the choice buttons)

CSS file:

            #texto1{ 
                font-size: 2rem    
           
            }

Python file: from taipy import Gui

            value_tgg=[('TG1', 'Choice 1'), ('TG2', 'Choice 2'), ('TG3', 'Choice 3')]
            value_tgg_choice=value_tgg[0]
            country=None

            page1_md="""

            ## TESTE <|{country}|text|id=texto1|>

            <|{value_tgg_choice}|toggle|lov={value_tgg}|on_change={on_value_tgg}|>

            """

            def on_value_tgg(state, id, action):
                print(state.value_tgg_choice)
            
                if state.value_tgg_choice[1]=='Choice 1':
                    state.country='COLOMBIA'
                elif state.value_tgg_choice[1]=='Choice 2':
                    state.country='USA'
                elif state.value_tgg_choice[1]=='Choice 3':
                    state.country='CHINA'



            Gui(page1_md).run(se_reloader=True,port=50000)

Upvotes: 0

Related Questions