improve readme

README.md

@@ -1,6 +1,6 @@
 # Streamfy — Bulma for Streamlit
 
-Modern frontend components based on [Bulma](https://bulma.io/) for [Streamlit](https://streamlit.io/) based of [Buefy](https://buefy.org/).
+Modern frontend components based on [Bulma](https://bulma.io/) and [Buefy](https://buefy.org/) for [Streamlit](https://streamlit.io/).
 
 ![](images/streamfy.gif)
 
@@ -31,6 +31,16 @@ Run this application:
 streamlit run app.py
 ```
 
+![](images/carousel.png)
+
+A file with all components is available in [examples/all.py](example/app.py):
+
+![](images/components.png)
+
+Take a look at [Buefy Documentation](https://buefy.org/documentation) for a list of all properties and examples available.
+
+[![](images/buefy.png)](https://buefy.org/documentation)
+
 ## Contributing
 
 - Ensure you have [Python 3.6+](https://www.python.org/downloads/), [Node.js](https://nodejs.org), and [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) installed.

examples/all.py

@@ -0,0 +1,104 @@
+import streamlit as st
+import streamfy as sy
+
+st.subheader("Breadcrumb")
+item = sy.breadcrumb(items=[{"text": "A"}, {"text": "B"}])
+st.write(item)
+
+st.subheader("Button")
+if sy.button(text = "Click!"):
+    st.write("Clicked!")
+
+st.subheader("Carousel")
+selection = sy.carousel(items=[
+    "https://picsum.photos/id/1051/1230/500",
+    "https://picsum.photos/id/1052/1230/500",
+    "https://picsum.photos/id/1053/1230/500",
+])
+st.write(selection)
+
+st.subheader("Autocomplete")
+complete = sy.autocomplete(data=["Apple", "Bannana", "Cherry"])
+st.write(complete)
+
+st.subheader("Checkbox")
+checked = sy.checkbox(text = "Check me")
+st.write(checked)
+
+st.subheader("Clockpicker")
+clock = sy.clockpicker()
+st.write(clock)
+
+st.subheader("Colorpicker")
+color = sy.colorpicker()
+st.write(color)
+
+st.subheader("Datepicker")
+datepick = sy.datepicker()
+st.write(datepick)
+
+st.subheader("Input")
+email = sy.input(type="email", icon="email", default="john@", maxlength="30")
+st.write(email)
+
+st.subheader("Numberinput")
+number = sy.numberinput(placeholder="10", min="5")
+st.write(number)
+
+st.subheader("Radio")
+radio = sy.radio(radios=[{"text": "A"}, {"text": "B"}])
+st.write(radio)
+
+st.subheader("Rate")
+rate = sy.rate()
+st.write(rate)
+
+st.subheader("Select")
+selected = sy.select(data=[{"text": "Seattle"},{"text": "Portland"}])
+st.write(selected)
+
+st.subheader("Slider")
+slide = sy.slider()
+st.write(slide)
+
+st.subheader("Switch")
+switched = sy.switch(text="Switch me!")
+st.write(switched)
+
+st.subheader("Tags")
+tags = sy.taginput(data=["A", "B", "C"], default=["B"], allow_new=True, open_on_focus=True, type="is-info", aria_close_label="Remove", placeholder="Choose letter")
+st.write(tags)
+
+st.subheader("Message")
+sy.message(text="This is a message", title="Info", type="is-info")
+
+st.subheader("Notification")
+sy.notification(text="Important notification")
+
+st.subheader("Progress")
+sy.progress(value=80)
+
+st.subheader("Steps")
+sy.steps(steps=[
+    {"step": "1", "label": "First"},
+    {"step": "2", "label": "Second"}
+])
+
+st.subheader("Table")
+columns = [
+    {
+        "field": 'id',
+        "label": 'ID',
+        "width": '40',
+        "numeric": True
+    },
+    {
+        "field": 'name',
+        "label": 'Name',
+    },
+]
+data = [
+    { 'id': 1, 'name': 'Jesse' },
+    { 'id': 2, 'first_name': 'John' },
+]
+sy.table(data=data, columns=columns, paginated=True)