Dash widget with currency symbols

Dash Python
1

It it possible to create something similar to that in Python Dash?

image

2

hi @GabrielBKaram
you can probably use fontAwesome for that. Are those buttons in the image?

3

hi @adamschroeder,

It’s more like a toggle where the user can use to select preferred currency. So if the user chooses ‘$’, I want it to display the amounts I have in USD terms.

4

One way to do this is:

from dash import Dash, html
import dash_bootstrap_components as dbc

FONT_AWESOME = "https://use.fontawesome.com/releases/v5.10.2/css/all.css"
app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP, FONT_AWESOME])

button_group = dbc.ButtonGroup([dbc.Button(className='fa fa-euro-sign', outline=False),
                                dbc.Button(className='fa fa-dollar-sign',outline=True),
                                dbc.Button( className='fa fa-pound-sign',outline=True)])

app.layout = dbc.Container([button_group])

if __name__ == '__main__':
    app.run_server(debug=False)

And when the user clicks on the dollar sign, you can have a callback that shows the amount in USD right under it in a div.

Here are more font awesome icons.

3 Likes
5

Hi @GabrielBKaram

You can see an example of how to do this with ButtonGroups in dash-bootstrap components. See the "RadioItems as ButtonGroup example on this page:

https://dash-bootstrap-components.opensource.faculty.ai/docs/components/button_group/

2 Likes
6

I think the Chips component comes pretty close,

image

The code is straight forward,

from dash import Dash
import dash_mantine_components as dmc

app = Dash()
app.layout = dmc.Chips(
    data=[{"value": c, "label": c} for c in ["€", "£", "$", "¥"]]
)

app.run_server(port=7779)
5 Likes