-
-
Notifications
You must be signed in to change notification settings - Fork 328
how to integrate with material design like bootstrap #980
-
how to add ui framework design . like material ui, chakra ui, or bootstrap. and does reactPy already have its own ui framework?
Beta Was this translation helpful? Give feedback.
All reactions
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...
Replies: 8 comments 6 replies
-
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
Beta Was this translation helpful? Give feedback.
All reactions
-
how to class in html.div example in pico css
<div class="grid">
how to use in html.div
Beta Was this translation helpful? Give feedback.
All reactions
-
See the docs
Beta Was this translation helpful? Give feedback.
All reactions
-
I forgot about this. We use ReactJS conventions which means you need to use className instead of class.
Beta Was this translation helpful? Give feedback.
All reactions
-
can you add docs how to use table in you documentation
Beta Was this translation helpful? Give feedback.
All reactions
-
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"), ), ), )
Beta Was this translation helpful? Give feedback.
All reactions
-
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)
Beta Was this translation helpful? Give feedback.
All reactions
-
The default behavior of forms is to navigate away from the current page. You need to prevent the default even behavior.
Beta Was this translation helpful? Give feedback.
All reactions
-
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"),
),
),
)
Beta Was this translation helpful? Give feedback.
All reactions
-
See the docs.
Beta Was this translation helpful? Give feedback.
All reactions
-
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
Beta Was this translation helpful? Give feedback.
All reactions
-
I recommend reading through the docs before asking more questions. Many of your questions are answered there.
Beta Was this translation helpful? Give feedback.
All reactions
-
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/sweetalert2@11.7.20/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)
Beta Was this translation helpful? Give feedback.
All reactions
-
sorry, now it's solved
Beta Was this translation helpful? Give feedback.