how to integrate with material design like bootstrap #980

bobwatcherx · 2023-05-23T01:14:25Z

bobwatcherx
May 23, 2023

how to add ui framework design . like material ui, chakra ui, or bootstrap. and does reactPy already have its own ui framework?

Answered by rmorshea

May 23, 2023

ReactPy, like ReacJS, does not supply its own UI framework. If you're looking for something dead simple, I'd recommend PicoCSS. This is a simple TODO app I made using PicoCSS and ReactPy.

To include CSS in your app, you can do one of two things:

include it directly in your app
include it in the <head> of the page (recommended)

To include it directly in your app all you have to do is use a <link>:

from reactpy import component, html, run

pico_css = html.link({"rel": "stylesheet", "href": "https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css"})

@component
def example():
    return html.div(
        pico_css,
        html.button("My styled button")
    )
     
run(example)

If in…

View full answer

rmorshea · 2023-05-23T02:16:05Z

rmorshea
May 23, 2023
Maintainer

ReactPy, like ReacJS, does not supply its own UI framework. If you're looking for something dead simple, I'd recommend PicoCSS. This is a simple TODO app I made using PicoCSS and ReactPy.

To include CSS in your app, you can do one of two things:

include it directly in your app
include it in the <head> of the page (recommended)

To include it directly in your app all you have to do is use a <link>:

from reactpy import component, html, run

pico_css = html.link({"rel": "stylesheet", "href": "https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css"})

@component
def example():
    return html.div(
        pico_css,
        html.button("My styled button")
    )
     
run(example)

If instead you want to include it in the <head> element you'll need to configure an application (which is what you'll want to do in production anyway). This is done using a web server of your choice (of which ReactPy supports several out of the box) and using its associated configure function:

from starlette.applications import Starlette
from reactpy.backend.startlette import configure, Options
from reactpy import component, html

@component
def example():
    ...

app = Starlette()

pico_css = html.link(dict(rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css"))
custom_head = html.head(pico_css)
configure(app, example, Options(head=custom_head))

Refer to Starlette docs on how to run the web server

0 replies

bobwatcherx · 2023-05-23T07:43:23Z

bobwatcherx
May 23, 2023
Author

how to class in html.div example in pico css

<div class="grid">

how to use in html.div

2 replies

rmorshea May 23, 2023
Maintainer

See the docs

rmorshea May 23, 2023
Maintainer

I forgot about this. We use ReactJS conventions which means you need to use className instead of class.

bobwatcherx · 2023-05-23T07:46:41Z

bobwatcherx
May 23, 2023
Author

can you add docs how to use table in you documentation

1 reply

rmorshea May 23, 2023
Maintainer

Tables work just as they do in normal HTML:

from reactpy import html

my_table = html.table(
    html.thead(
        html.tr(
            html.th("Name"),
            html.th("Age"),
        ),
    ),
    html.tbody(
        html.tr(
            html.td("John"),
            html.td("30"),
        ),
        html.tr(
            html.td("Jane"),
            html.td("25"),
        ),
    ),
)

bobwatcherx · 2023-05-23T08:06:11Z

bobwatcherx
May 23, 2023
Author

why my html.form when submitted there is an error like this

Traceback (most recent call last):
  File "/usr/local/lib/python3.10/dist-packages/flask/app.py", line 2213, in __call__
    return self.wsgi_app(environ, start_response)
  File "/usr/local/lib/python3.10/dist-packages/flask/app.py", line 2197, in wsgi_app
    return response(environ, start_response)
  File "/usr/local/lib/python3.10/dist-packages/flask_sock/__init__.py", line 86, in __call__
    raise ConnectionError()
ConnectionError
127.0.0.1 - - [23/May/2023 15:05:12] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [23/May/2023 15:05:12] "GET /_idom/assets/index.a2011453.js HTTP/1.1" 304 -
[{'id': 0, 'text': 'jaja', 'age': 0}]

my code


from flask import Flask

from idom import component, html,hooks,use_state
from idom.backend.flask import configure

import random

pico_css = html.link({"rel": "stylesheet", "href": "https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css"})


@component
def mylist(items):
    print(items)
    name,set_name = use_state("")
    age,set_age = use_state(0)

    def delete(i):
        print(i['text'])

    

    list  = [html.li(
        {
        "key":i["id"],
        "style":{"padding":"10px"}
        },

        i['text'],"  ", " age : ",i['age'],
        html.button({
            "on_click":lambda event,i=i:delete(i)},"delete")
        ) for i in items]
    
    def mysubmit(event):
        print("!23123")
        data = {
        "id":random.randint(0,300),
        "text":name,
        "age":age
        }
        items.append(data)
        print(items)

    return  html.div(
        html.form(
            {"on_submit":mysubmit},
            html.input({
            "type":"text",
            "placeholder":"name",
            "on_change":lambda event:set_name(event['target']['value'])
            }),
        html.input({
            "type":"text",
            "placeholder":"age",
            "on_change":lambda event:set_age(event['target']['value'])
            }),
        html.button({
            "type":"submit",
            },"Add new"),
            ),
        html.ul(list)
        )


@component
def HelloWorld():
    tasks = [
        {"id": 0, "text": "jaja", "age": 0},
    ]
    return html.div(
        {
        "style":{"margin":"20px"},
        "class":"grid"
        },
        pico_css,
        html.h1("CRUD TODO"),
        mylist(tasks)
        )

app = Flask(__name__)
configure(app, HelloWorld)

1 reply

rmorshea May 23, 2023
Maintainer

The default behavior of forms is to navigate away from the current page. You need to prevent the default even behavior.

bobwatcherx · 2023-05-23T08:09:11Z

bobwatcherx
May 23, 2023
Author

what if the tbody data comes from an array is there an example

 dag = [
    {"name":"kokdw","age":12},
    {"name":"kokdw","age":12},
    {"name":"kokdw","age":12},
    ]

    my_table = html.table(
    html.thead(
        html.tr(
            html.th("Name"),
            html.th("Age"),
        ),
    ),
    html.tbody(
        html.tr(
            html.td("John"),
            html.td("30"),
        ),
        html.tr(
            html.td("Jane"),
            html.td("25"),
        ),
    ),
)

1 reply

rmorshea May 23, 2023
Maintainer

See the docs.

bobwatcherx · 2023-05-23T09:22:49Z

bobwatcherx
May 23, 2023
Author

I have a problem why reactPy can't refresh realtime when changes occur. So . i want to add data when i click add new button . it automatically adds the data below it

from flask import Flask

from idom import component, html,hooks,use_state
from idom.backend.flask import configure
from dataclasses import dataclass
import random

pico_css = html.link({"rel": "stylesheet", "href": "https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css"})


@dataclass()
class TodoItem:
    name: str
    age: int 

alltodo = []

@component
def mylist(items):

    def addnew(event):
        data  = TodoItem(name="jjj",age=12)
        # new_todo = [*TodoItem,data]
        items.append(data)
        print(items)

    list = [html.li(
        {
            "key":i.name,
            "style":{"padding":"10px"}
        },
        i.name," ","age : ",i.age,
        html.button({
            "style":{"background_color":"red"},
            },"delete")
        )for i in items]
    return html.div(

        html.button({
            "on_click":addnew
            },"Add new"),
        html.ul(list),
        )


@component
def HelloWorld():
    # tasks = [
    #     {"id": 0, "text": "jaja", "age": 0},
    # ]
    tasks = TodoItem(name="juki",age=12)
    alltodo = [tasks]
    return html.div(
        {
        "style":{"margin":"20px"},
        "class":"grid"
        },
        pico_css,
        html.h1("CRUD TODO"),
        mylist(alltodo)
        )

app = Flask(__name__)
configure(app, HelloWorld)

i run with command
flask --app main --debug run

1 reply

rmorshea May 23, 2023
Maintainer

I recommend reading through the docs before asking more questions. Many of your questions are answered there.

bobwatcherx · 2023-07-24T04:36:54Z

bobwatcherx
Jul 24, 2023
Author

why my sweetalert click not work

my code

from reactpy import component, html, run


swet_1 =html.script({"src":"https://cdn.jsdelivr.net/npm/sweetalert2@1"})
swet_2 = html.link({"rel":"https://cdn.jsdelivr.net/npm/[email protected]/dist/sweetalert2.min.css"})

@component
def App():
    return html.div(

        html.button({"id":"my-button"},"hello"),
        html.script("""
            document.getElementById('my-button')
                .addEventListener('click',()=>{
                Swal.fire('Any fool can use a computer')
                })

            """),
        swet_1,
        swet_2,
        )


run(App)

0 replies

bobwatcherx · 2023-07-24T04:37:48Z

bobwatcherx
Jul 24, 2023
Author

sorry, now it's solved

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

how to integrate with material design like bootstrap #980

{{title}}

Replies: 8 comments 6 replies

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

Select a reply

how to integrate with material design like bootstrap #980

bobwatcherx May 23, 2023

Replies: 8 comments · 6 replies

rmorshea May 23, 2023 Maintainer

bobwatcherx May 23, 2023 Author

rmorshea May 23, 2023 Maintainer

rmorshea May 23, 2023 Maintainer

bobwatcherx May 23, 2023 Author

rmorshea May 23, 2023 Maintainer

bobwatcherx May 23, 2023 Author

rmorshea May 23, 2023 Maintainer

bobwatcherx May 23, 2023 Author

rmorshea May 23, 2023 Maintainer

bobwatcherx May 23, 2023 Author

rmorshea May 23, 2023 Maintainer

bobwatcherx Jul 24, 2023 Author

bobwatcherx Jul 24, 2023 Author

bobwatcherx
May 23, 2023

Replies: 8 comments 6 replies

rmorshea
May 23, 2023
Maintainer

bobwatcherx
May 23, 2023
Author

rmorshea May 23, 2023
Maintainer

rmorshea May 23, 2023
Maintainer

bobwatcherx
May 23, 2023
Author

rmorshea May 23, 2023
Maintainer

bobwatcherx
May 23, 2023
Author

rmorshea May 23, 2023
Maintainer

bobwatcherx
May 23, 2023
Author

rmorshea May 23, 2023
Maintainer

bobwatcherx
May 23, 2023
Author

rmorshea May 23, 2023
Maintainer

bobwatcherx
Jul 24, 2023
Author

bobwatcherx
Jul 24, 2023
Author