Upload 43 files

locales/zh/app.py

@@ -0,0 +1,40 @@
+### SimpleStart 简介
+import simplestart as ss
+
+ss.md("## SimpleStart 介绍")
+
+
+ss.space()
+ss.md('''
+### 无需前端编程的 Python 网页开发工具
+SimpleStart 是一款无需前端网页编程的工具，所有开发工作都通过 Python 在后台完成。即使不精通 HTML、CSS、JavaScript、Ajax 等知识，也能轻松开发网页应用。
+
+''')
+
+ss.space()
+
+ss.md('''
+### 提供丰富的组件
+SimpleStart 提供包括文本、按钮、列表、表格、音频、视频等在内的多种网页开发所需组件，支持容器和布局，同时允许用户自定义组件。
+
+''')
+
+ss.space()
+
+ss.md('''
+### 提供数据可视化支持
+SimpleStart 通过图像、表格、Plot 图表和 SQLite 数据库等方式实现数据可视化。它支持静态和交互式图表的显示，并提供数据的显示和编辑功能。
+''')
+
+ss.space()
+ss.md("---")
+ss.write("关于安装使用等，请访问")
+ss.md('''
+[在线帮助](http://www.simplestart.cc)
+''')
+
+def locale():
+    ss.send_message("change_locale", {"locale":""});
+    
+
+ss.button("English", onclick = locale)

locales/zh/pages/002 Form Component/demo_button.py

@@ -0,0 +1,141 @@
+### Button 按钮
+import simplestart as ss
+
+ss.md('''
+## ss.button 按钮
+''')
+ss.md('''
+[在线帮助](https://www.simplestart.cc/zh/doc_form/ss-button.html)
+''')
+ss.space()
+ss.md('''
+#### 🔅 示例
+''')
+
+#自定义函数
+def myclick():
+    mytext.text = "You clicked "
+    
+def reset():
+    mytext.text = "This is button"
+    but1.type = ""
+    ss.getcm().components[but1.id]["content"]["options"]["icon"] = ""
+    ss.getcm().components[but1.id]["content"]["options"]["endicon"] = ""
+    ss.getcm().components[but1.id]["content"]["options"]["icon_color"] = "mediumseagreen"
+    ss.getcm().components[but1.id]["content"]["options"]["style"] = "background-color:initial;color:initial"
+    ss.session["iconstr"] = ''
+    ss.session["style_str"] = ''
+    ss.session["style"] = ''
+
+    
+#基本用法
+cols = ss.columns([40,"flex:60"], design=True)
+with cols[0]:
+    mytext = ss.text("This is button")
+    but1 = ss.button("Click it", icon = "mdi-account-circle", onclick=myclick)
+
+def onradiochange(event):
+    value = event.value
+    if value == "default":
+        but1.type = ""
+        ss.session["buttonstyle"] = ""
+    elif value == "outlined":
+        but1.type = "outlined"
+        ss.session["buttonstyle"] = 'type = "outlined\",'
+    elif value == "flat":
+        but1.type = "tonal"
+        ss.session["buttonstyle"] = 'type = "flat\",'
+    elif value == "text":
+        but1.type = "text"
+        ss.session["buttonstyle"] = 'type = "text\",'
+    elif value == "plain":
+        but1.type = "plain"
+        ss.session["buttonstyle"] = 'type = "plain\",'
+
+def oncheckbox_change(state, value):
+    if value == True:
+        ss.getcm().components[but1.id]["content"]["options"]["icon"] = "aim"
+        ss.session["iconstr"] = ' icon="search",'
+    else:
+        ss.getcm().components[but1.id]["content"]["options"]["icon"] = ""
+        ss.session["iconstr"] = ''
+    but1.update()
+
+def onradiochange2(event):
+    index = event.index
+
+    if index == 0:
+        ss.getcm().components[but1.id]["content"]["options"]["icon"] = "mdi-account-circle"
+        ss.getcm().components[but1.id]["content"]["options"]["endIcon"] = ""
+        ss.session["iconstr"] = ' icon="mdi-account-circle",'
+    elif index == 1:
+        ss.getcm().components[but1.id]["content"]["options"]["icon"] = ""
+        ss.getcm().components[but1.id]["content"]["options"]["endIcon"] = "mdi-alert"
+        ss.session["iconstr"] = ' endIcon="mdi-alert",'
+    else:
+        ss.getcm().components[but1.id]["content"]["options"]["icon"] = ""
+        ss.getcm().components[but1.id]["content"]["options"]["endIcon"] = ""
+        ss.session["iconstr"] = ''
+    but1.update()
+
+    
+def changeColor(bkcolor):
+    ss.getcm().components[but1.id]["content"]["options"]["style"] = f"background-color:{bkcolor}; color:white"
+    ss.getcm().components[but1.id]["content"]["options"]["icon_color"] = "white"
+    ss.session["style_str"] = f'style="background-color:{bkcolor}, color:white"'
+    ss.session["style"] = 'style=style,'
+    but1.update()
+
+
+with cols[1]:
+    ss.text("测试")
+
+    ss.write("---")
+    ss.radio(["default", "outlined", "flat", "text", "plain"], "default", inline = True, onchange=onradiochange)
+
+    ss.write("---")
+    ss.radio([(1, "图标(前)"), (2, "图标(后)"), (3, "图标按钮")], inline = True, onchange=onradiochange2)
+    
+    
+    ss.write("---")
+    ss.button("", type = "flat", size = "small", style="background-color:#409eff", onclick=lambda:changeColor('#409eff'))
+    ss.button("", type = "flat", size = "small", style="background-color:#67c23a", onclick=lambda:changeColor('#67c23a'))
+    ss.button("", type = "flat", size = "small", style="background-color:#e6a23c", onclick=lambda:changeColor('#e6a23c'))
+    ss.button("", type = "flat", size = "small", style="background-color:#f56c6c", onclick=lambda:changeColor('#f56c6c'))
+    ss.button("", type = "flat", size = "small", style="background-color:#909399", onclick=lambda:changeColor('#909399'))
+    
+    
+    ss.space()
+    ss.button("重置", onclick=reset)
+
+
+ss.space("mt-8")
+
+ss.write("#### 🔎 代码")
+
+ss.md('''
+```python
+import simplestart as ss
+
+def clickme():
+    mytext.text = "You clicked"
+    
+mytext = ss.text("This is button")
+@style_str
+ss.button("Click it", @buttonstyle @iconstr @style onclick=clickme)
+```
+''')
+
+ss.md('''
+::: tip
+  函数调用
+  ss.button(label, type, color, size, icon, onclick)   
+:::
+''')
+
+def onPageLoad():
+    ss.session["buttonstyle"] = ""
+    ss.session["iconstr"] = ""
+    ss.session["style"] = ""
+    ss.session["style_str"] = ""
+    

locales/zh/pages/002 Form Component/demo_checkbox.py

@@ -0,0 +1,76 @@
+### Checkbox 多选框
+import simplestart as ss
+
+ss.write("### ss.checkbox")
+
+def onchange(event):
+    ss.session["checked_value"] = event.value
+
+
+ss.md('''
+---
+#### 🔅 示例1
+''')
+
+ss.md("onchange: @checked_value")
+
+ss.checkbox("checkme", onchange = onchange)
+ss.checkbox("initially checked", checked = True, onchange = onchange)
+
+
+ss.write('''
+---
+#### 🔎 代码
+''')
+
+ss.md('''
+```python
+import simplestart as ss
+
+def onchange(state, value):
+    state["checked_value"] = value
+
+#ui
+ss.md("onchange: @checked_value")
+
+ss.checkbox("checkme", onchange = onchange)
+ss.checkbox("initially checked", checked = True, onchange = onchange)
+
+
+''')
+
+ss.space()
+ss.md('''
+---
+#### 🔅 示例2
+获取 checkbox 的状态
+''')
+
+mycheck = ss.checkbox("check me", onchange = onchange)
+
+def myclick():
+    ss.message(mycheck.value)
+
+ss.button("获取状态", onclick = myclick)
+
+ss.space()
+ss.write('''
+---
+#### 🔎 代码
+''')
+
+ss.md('''
+```python
+import simplestart as ss
+
+mycheck = ss.checkbox("check me", onchange = onchange)
+
+def myclick():
+    ss.message(mycheck.value)
+
+ss.button("获取状态", onclick = myclick)
+
+''')
+
+def onPageLoad():
+    ss.session["checked_value"] = ""

locales/zh/pages/002 Form Component/demo_dialog.py

@@ -0,0 +1,78 @@
+### Dialog 对话框
+import simplestart as ss
+
+ss.md("## ss.dialog 对话框")
+
+ss.space()
+
+ss.md('''
+---
+#### 🔅 示例
+''')
+
+def testme():
+    ss.message("testme")
+    
+def showit():
+    if ss.session["str_fullscreen"] != "":
+        dialog.show(fullscreen = True)
+    else:
+        dialog.show()
+    
+def myclose(event):
+    ss.message("dialog close with result " + event.value)
+    
+dialog = ss.dialog("对话框标题",  onclose=myclose)
+with dialog:
+    ss.text("SimpleStart dialog demostration")
+    ss.md("---")
+    ss.button("testme", onclick=testme)
+    ss.md(":smile:")
+        
+cols = ss.columns([60,"flex:40; border-left:1px solid lightgray"], border=True, style="border:1px solid lightgray")
+with cols[0]:
+    mytext = ss.text("This is dialog")
+    ss.button("show dialog", onclick=showit)
+    
+def mycheck(event):
+    if event.value == True:
+        ss.session["str_fullscreen"] = "fullscreen = True"
+        #dialog.show(fullscreen = True)
+    else:
+        ss.session["str_fullscreen"] = ""
+
+with cols[1]:
+    ss.text("对话框选项")
+    ss.checkbox("全屏", onchange=mycheck)
+
+ss.space()
+ss.write('''
+---
+#### 🔎 代码
+''')
+
+ss.md('''
+```python
+import simplestart as ss
+
+def myclose(event):
+    ss.message("dialog close with result " + event.value)
+    
+dialog = ss.dialog(title="对话框标题", onclose=myclose)
+with dialog:
+    ss.text("Opening from the bottom")
+    ss.md("---")
+    ss.button("testme", onclick=testme)
+    ss.md(":smile:")
+    
+def showit():
+    dialog.show(@str_fullscreen)
+    
+ss.button("show dialog", onclick=showit)
+```
+''')
+
+def onPageEnter():
+    ss.session["str_fullscreen"] = ""
+    
+    

locales/zh/pages/002 Form Component/demo_expander.py

@@ -0,0 +1,30 @@
+### Expander 下拉展开控件
+import streamsync as ss
+
+ss.md("## ss.expander 下拉展开")
+
+
+ss.md('''
+#### 🔅 示例
+''')
+
+with ss.expander("关于SimpleStart", expanded = True):
+    ss.text("Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! \
+    Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!", style="padding:10px")
+
+
+ss.space()
+ss.write('''
+---
+#### 🔎 代码
+''')
+
+ss.md('''
+```python
+import simplestart as ss
+
+with ss.expander("关于SimpleStart"):
+    ss.text("Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! \
+    Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!")
+```
+''')

locales/zh/pages/002 Form Component/demo_menu.py

@@ -0,0 +1,100 @@
+### Menu 菜单
+import streamsync as ss
+
+ss.md("## ss.menu")
+
+ss.md('''
+#### 🔅 示例
+''')
+
+data = [
+    {'index': '1', 'title': 'Processing Center', 'icon':'mdi-home'},
+    {'type': 'spacer'}, #add spacer
+    {
+        'index': '2',
+        'title': 'Workspace',
+        'icon' : 'mdi-plus',
+        'subItems': [
+            {'index': '2-1', 'title': 'item one'},
+            {'index': '2-2', 'title': 'item two'},
+            {'index': '2-3', 'title': 'item three'},
+            {
+                'index': '2-4',
+                'title': 'item four',
+                'subItems': [
+                    {'index': '2-4-1', 'title': 'item one'},
+                    {'index': '2-4-2', 'title': 'item two'},
+                    {'index': '2-4-3', 'title': 'item three'},
+                ],
+            },
+        ],
+    },
+    {'index': '3', 'title': 'Info', 'disabled': True, 'icon':'mdi-cancel'},
+    {'index': '4', 'title': 'Orders', 'icon':'mdi-wrench'},
+]
+
+def menu_select(event):
+    print("menu1")
+    ss.message(event.data["keyPath"])
+
+    
+ss.md("### 顶栏菜单")
+ss.menu(data, direction = "horizontal", onselect = menu_select)
+
+ss.space()
+ss.md("### 侧栏菜单")
+
+ss.menu(data, direction = "vertical", dark = True, onselect = menu_select)
+
+
+ss.space()
+ss.write('''
+---
+#### 🔎 代码
+''')
+
+ss.md('''
+```python
+import simplestart as ss
+
+data = [
+    {'index': '1', 'title': 'Processing Center', 'icon':'mdi-home'},
+    {'type': 'spacer'}, #add spacer
+    {
+        'index': '2',
+        'title': 'Workspace',
+        'icon' : 'mdi-plus',
+        'subItems': [
+            {'index': '2-1', 'title': 'item one'},
+            {'index': '2-2', 'title': 'item two'},
+            {'index': '2-3', 'title': 'item three'},
+            {
+                'index': '2-4',
+                'title': 'item four',
+                'subItems': [
+                    {'index': '2-4-1', 'title': 'item one'},
+                    {'index': '2-4-2', 'title': 'item two'},
+                    {'index': '2-4-3', 'title': 'item three'},
+                ],
+            },
+        ],
+    },
+    {'index': '3', 'title': 'Info', 'disabled': True, 'icon':'mdi-cancel'},
+    {'index': '4', 'title': 'Orders', 'icon':'mdi-wrench'},
+]
+
+def menu_select(event):
+    print("menu1")
+    ss.message(event.data["keyPath"])
+
+    
+ss.md("### Horiontal Menu")
+ss.menu(data, direction = "horizontal", onselect = menu_select)
+
+ss.space()
+ss.md("### Vertical Menu")
+
+ss.menu(data, direction = "vertical", dark = True, onselect = menu_select)
+
+```
+''')

locales/zh/pages/002 Form Component/demo_radio.py

@@ -0,0 +1,93 @@
+### Radio 单选框
+import simplestart as ss
+
+ss.md("## ss.radio 单选框")
+
+ss.space()
+
+ss.md('''
+#### 🔅 示例
+''')
+
+def onchange(event):
+    ss.session["options_value"] = event.value
+    ss.session["options_index"] = event.index
+    
+ss.md("onchange: value:@options_value, index:@options_index")
+
+options = ["Option 1", "Option 2", "Option 3"]
+myradio = ss.radio(options, label = "### my radio1", index = 0, onchange = onchange)
+
+
+options = [("C++", '#### <span style="color:blue">C++</span>'), 
+           ("Javascript", '#### <span style="color:green">Javascript</span>'), 
+           ("Python", '#### <span style="color:red">Python</span>')
+          ]
+ss.radio(options, inline = True, label = "### my radio2", index = 0, iconColor = "blue", onchange = onchange)
+
+
+
+ss.write("---")
+ss.write("#### 🔎 代码")
+
+ss.md('''
+```python
+import simplestart as ss
+
+def onchange(event):
+    ss.session["options_value"] = event.value
+    ss.session["options_index"] = event.index
+    
+ss.md("onchange: value:\@options_value, index:\@options_index")
+
+options = ["Option 1", "Option 2", "Option 3"]
+myradio = ss.radio(options, label = "### my radio1", index = 0, onchange = onchange)
+
+
+options = [("C++", '#### <span style="color:blue">C++</span>'), 
+           ("Javascript", '#### <span style="color:green">Javascript</span>'), 
+           ("Python", '#### <span style="color:red">Python</span>')
+          ]
+ss.radio(options, inline = True, label = "### my radio2", index = 0, iconColor = "blue", onchange = onchange)
+
+def onPageLoad():
+    ss.session["options_value"] = ""
+
+''')
+
+
+ss.space()
+ss.md('''
+---
+#### 🔅 示例 - 获取状态值
+''')
+
+def myclick1():
+    ss.message(myradio.value)
+
+ss.button("获取状态值", onclick = myclick1)
+
+def myclick2():
+    ss.message(myradio.index)
+
+ss.button("获取状态值索引", onclick = myclick2)
+
+ss.write("---")
+ss.write("#### 🔎 代码段")
+
+ss.md('''
+```python
+#...
+def myclick1():
+    ss.message(myradio.value)
+
+ss.button("获取状态值", onclick = myclick1)
+
+def myclick2():
+    ss.message(myradio.index)
+
+ss.button("获取状态值索引", onclick = myclick2)
+''')
+
+def onPageLoad():
+    ss.session["options_value"] = ""

locales/zh/pages/002 Form Component/demo_selectbox.py

@@ -0,0 +1,77 @@
+### Selectbox 选择器
+import simplestart as ss
+
+ss.md("## ss.selectbox 选择器")
+
+ss.space()
+ss.md('''
+#### 🔅 示例1
+在页面上创建一个带标题的，有3个选项的selectbox.
+''')
+ss.space()
+
+options = ["option1","option2", "option3"]
+
+def selchange(event):
+    ss.message(f"You select {event.value}, index of {event.index}")
+
+select1 = ss.selectbox(options, index=0, title = "### Please select", onchange = selchange)
+
+
+
+ss.write("#### 🔎 代码")
+
+ss.md("""
+```python
+import simplestart as ss
+
+options = ["option1","option2", "option3"]
+
+def selchange(event):
+    ss.session["select_value"] = event.value
+    ss.session["select_index"] = select1.index
+
+ss.write("info value:  index:")
+select1 = ss.selectbox(options, value="option1", onchange = selchange)
+
+
+```
+""")
+
+ss.md('''
+#### 🔅 示例2
+获取selectbox当前的选项. 除了在selectbox的onchange事件里，通过event的index和value获取用户的选项信息外，还可以通过selectbox的变量获取用户的选择信息。
+''')
+ss.space()
+
+def onclick1():
+    ss.message(select1.value)
+    
+ss.button("当前选项值", onclick = onclick1)
+
+def onclick2():
+    ss.message(select1.index)
+    
+ss.button("当前选项索引", onclick = onclick2)
+
+ss.space()
+
+ss.write("#### 🔎 代码段")
+
+ss.md("""
+```python
+
+#...
+
+def onclick1():
+    ss.message(select1.value)
+    
+ss.button("当前选项值", onclick = onclick1)
+
+def onclick2():
+    ss.message(select1.index)
+    
+ss.button("当前选项索引", onclick = onclick2)
+
+```
+""")

locales/zh/pages/002 Form Component/demo_slider.py

@@ -0,0 +1,35 @@
+### Slider 滑块
+import simplestart as ss
+
+ss.md("## ss.slider 滑块")
+
+ss.space()
+
+ss.md('''
+#### 🔅 示例 
+''')
+
+ss.md("### Please drag the slider to change the value")
+
+info = ss.text("number")
+
+def onchange(event):
+    info.text = event.value
+
+ss.slider("<b>my slider</b>", value = 500, min = 0, max = 1000, onchange = onchange, style="width:50%")
+
+ss.space()
+
+ss.write("#### 🔎 代码")
+
+ss.md('''
+```python
+import simplestart as ss
+
+info = ss.text("number")
+
+def onchange(state, value):
+    info.text = value
+
+ss.slider(500, 0, 1000, onchange = onchange)
+''')

locales/zh/pages/002 Form Component/demo_textarea.py

@@ -0,0 +1,46 @@
+### Textarea 文本域
+import streamsync as ss
+
+ss.md("## ss.textarea 文本域")
+
+
+ss.space()
+ss.md("#### 🔅 示例")
+
+ss.md("---")
+
+#基本用法
+#test = ss.text_input("hello, world", type="textarea")
+mytext = ss.textarea("hello, world")
+
+ss.write("---")
+ss.write("#### 🔎 代码")
+
+ss.md('''
+```python
+import simplestart as ss
+
+mytext = ss.textarea("hello, world")
+
+''')
+
+ss.space()
+ss.md("#### 🔅 获取文本域的文本值")
+ss.md("---")
+
+def myclick():
+    ss.message(mytext.value)
+    
+ss.button("获取文本", onclick = myclick)
+
+ss.write("---")
+ss.write("#### 🔎 代码段")
+
+ss.md('''
+```python
+#...
+def myclick():
+    ss.message(mytext.value)
+    
+ss.button("获取文本", onclick = myclick)
+''')

locales/zh/pages/002 Form Component/demo_textinput.py

@@ -0,0 +1,64 @@
+### Text_input 文本
+import streamsync as ss
+
+
+ss.md("## ss.text_input 文本")
+
+ss.space()
+ss.md("#### 🔅 示例")
+
+ss.md("---")
+ss.space()
+
+def onchange(state, value):
+    ss.message(f"onchange, {value}")
+
+def onclear(state, value):
+    ss.message("onclear event happend")
+
+def onblur(state, value):
+    print("onblur")
+    ss.message(f"onblur, {value}")
+    
+def testme():
+    ss.message(myinput.value)
+    
+#ui
+cols = ss.columns([50,50], border = True)
+with cols[0]:
+    myinput = ss.text_input("Hello SimpleStart", clearable=True)
+
+
+def myevent(event):
+    if event.tag == "sel1":
+        myinput.variant = event.value
+    elif event.tag == "sel2":
+        myinput.type = event.value
+    elif event.tag == "but1":
+        ss.message(myinput.value)
+    
+
+with cols[1]:
+    ss.selectbox(["filled","outlined","underlined", "solo", "solo-filled", "solo-inverted"], label='#### <span style = "color:green">Change the input style</span>', \
+                value="solo", onchange = myevent, eventTag="sel1")
+    
+    ss.selectbox(["text","time", "date", "week", "month", "password",  "color"], label='#### <span style = "color:green">Change the input type</span>', \
+                onchange = myevent, eventTag="sel2")
+ 
+    ss.write('#### <span style = "color:green">获取input值</span>')
+    ss.button("获取文本值", onclick=myevent, eventTag="but1")
+
+
+ss.write("---")
+ss.write("#### 🔎 代码")
+
+ss.md('''
+```python
+import simplestart as ss
+
+myinput = ss.text_input("Hello SimpleStart", clearable=True)
+
+#或者
+#ss.text_input("hello", type="text", variant = "filled")
+
+''')

locales/zh/pages/002 Form Component/demo_upload.py

@@ -0,0 +1,42 @@
+### Upload 文件上传
+import streamsync as ss
+import pandas as pd
+
+ss.write("备注：python-multipart需要安装包加入")
+
+ss.md("## ss.upload 文件上传")
+
+
+ss.space()
+ss.md("#### 🔅 示例 - 上传图片")
+ss.space()
+
+
+def onsucess(event):
+    filename = event.value
+    path = f'{ss.baseinfo["package_path"]}/uploads/{filename}'
+    myimage.image = path
+    
+ss.upload("Upload Image ...", accept="image/png, image/jpeg, image/bmp", icon="mdi-camera", onsucess = onsucess)
+
+myimage = ss.image()
+
+ss.space()
+ss.write("---")
+ss.write("#### 🔎 代码")
+
+ss.md('''
+```python
+import simplestart as ss
+
+def onsucess(event):
+    filename = event.value
+    path = f'{ss.baseinfo["package_path"]}/uploads/{filename}'
+
+    myimage.image = path
+    
+ss.upload(label = "Upload Image ...", accept="image/png, image/jpeg, image/bmp", icon="mdi-camera", onsucess = onsucess)
+
+myimage = ss.image()
+
+''')

locales/zh/pages/002 Form Component/folder.json

@@ -0,0 +1 @@
+{"alias":"表单组件"}

locales/zh/pages/003 Content Display/demo_audio.py

@@ -0,0 +1,39 @@
+### Audio 音频播放
+import streamsync as ss
+
+ss.md("## ss.audio 音频播放")
+
+
+ss.space()
+ss.md('''
+#### 🔅 示例
+''')
+
+ss.space()
+
+audiosrc = "media/test.wav"
+player = ss.audio(audiosrc)
+
+
+ss.space("mt-8")
+
+ss.write('''
+---
+#### 🔎 代码
+''')
+
+ss.md('''
+```python
+import simplestart as ss
+
+audiosrc = "media/davide_quatela--breathing_barcelona.mp3"
+player = ss.audio(audiosrc)
+```
+''')
+
+
+ss.md('''
+::: tip
+ss.audio 支持音频格式包括 wav, mp3 等
+:::
+''')

locales/zh/pages/003 Content Display/demo_html.py

@@ -0,0 +1,49 @@
+### Html 超文本
+import streamsync as ss
+
+
+ss.md("## ss.html 超文本")
+
+ss.space("")
+
+ss.md('''
+#### 🔅 示例
+''')
+
+
+ss.md("### html")
+
+ss.html(f"""
+    <p>This is a piece of rich text content, which contains <strong>bold</strong> and <em>italic</em> text.</p>
+    <style>
+    .testclass{{
+        color:red;
+        font-weight:bold;
+    }}
+    </style>
+    <div class="testclass">this is red</div>
+""")
+
+ss.space("mt-8")
+
+ss.write('''
+---
+#### 🔎 代码
+''')
+
+ss.md('''
+```python
+import simplestart as ss
+
+ss.html(f"""
+    <p>This is a piece of rich text content, which contains <strong>bold</strong> and <em>italic</em> text.</p>
+    <style>
+    .testclass{{
+        color:red;
+        font-weight:bold;
+    }}
+    </style>
+    <div class="testclass">this is red</div>
+""")
+```
+''')

locales/zh/pages/003 Content Display/demo_image.py

@@ -0,0 +1,92 @@
+### Image 图像
+import simplestart as ss
+
+import cv2
+from PIL import Image
+import os
+
+ss.md("## ss.image 图像")
+
+ss.md('''
+#### 🔅 示例
+''')
+
+ss.space()
+
+style = "width:200px;height:200px;margin:10px"
+img = "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
+
+cols = ss.columns([60,"flex:40"], border=True)
+with cols[0]:
+    mytext = ss.text("This is image")
+    ss.space()
+    myimg = ss.image(img, style=style, fit="contain")
+    ss.text("Image fit mode: fill")
+    
+def onradiochange(event):
+    #ss.message(event.value)
+    ss.session["fit_str"] = event.value
+    ss.getcm().components[myimg.id]["content"]["options"]["fit"] = event.value
+    myimg.update()
+
+def onradiochange2(event):
+    value = event.value
+    index = event.index
+
+
+    source = ["Http", "PIL", "OpenCV", "Local"]
+    ss.session["source_str"] = source[index]
+
+    
+    if index == 0:
+        img = "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
+        ss.session["image_path"] = "\"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg\""
+        myimg.image = img
+    if index == 1:
+        image = Image.open('./media/image/dalao.jpeg')
+        ss.session["image_path"] = "Image.open('./media/image/dalao.jpeg')"
+        myimg.image = image
+    if index == 2:
+        img = cv2.imread('./media/image/cat.jpeg',cv2.IMREAD_COLOR)
+        ss.session["image_path"] = "cv2.imread('./media/image/cat.jpeg',cv2.IMREAD_COLOR)"
+        myimg.image = img  
+    if index == 3:
+        file_path = './media/image/dog.jpeg'
+        ss.session["image_path"] = "'./media/image/dog.jpeg'"
+        myimg.image = file_path
+        
+    myimg.update()
+
+    
+with cols[1]:
+    ss.text("image fit mode")
+    ss.radio(["fill", "contain", "cover", "none", "scale-down"], index = 1, inline = True, onchange=onradiochange)
+    ss.space()
+    ss.text("image source")
+    ss.radio(["Http image","PIL image", "OpenCV image", "Local image"], index = 0, inline = True, onchange=onradiochange2)
+    
+ss.space()
+
+ss.write('''
+#### 🔎 代码
+''')
+
+ss.md('''
+```python
+import simplestart as ss
+import cv2
+from PIL import Image
+
+style = "width:100px; height:100px; margin:10px"
+img = "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
+ss.image(img, style=style, fit="fill")
+```
+''')
+
+
+
+def onPageLoad():
+    ss.session["info"] = "x"
+    ss.session["fit_str"] = "fill"
+    ss.session["source_str"] = "Http"
+    ss.session["image_path"] = "\"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg\""

locales/zh/pages/003 Content Display/demo_markdown.py

@@ -0,0 +1,57 @@
+### Markdown 文本
+import simplestart as ss
+
+ss.md("## ss.markdown md文本")
+
+ss.space()
+
+ss.md('''
+#### 🔅 示例 
+''')
+
+ss.space()
+
+ss.markdown("- 19^th^")
+ss.markdown("# 一级标题")
+ss.markdown("## 二级标题")
+ss.markdown("### 三级标题")
+
+#水平分割线
+ss.markdown("---")
+
+ss.markdown('''
+- list item1
+- list item2
+- list item3
+''')
+
+ss.markdown(":smile:")
+
+
+
+ss.space("mt-8")
+
+ss.write('''
+---
+#### 🔎 代码
+''')
+
+ss.md('''
+```python
+import simplestart as ss
+
+ss.markdown("# 一级标题")
+ss.markdown("## 二级标题")
+ss.markdown("### 三级标题")
+
+#水平分割线
+ss.markdown("---")
+
+ss.markdown(\'''
+- list item1
+- list item2
+- list item3
+\''')
+
+```
+''')

locales/zh/pages/003 Content Display/demo_message.py

@@ -0,0 +1,37 @@
+### Message 消息提示
+import simplestart as ss
+
+ss.md("## ss.message 弹出消息")
+
+ss.space()
+
+
+ss.md('''
+#### 🔅 示例 
+''')
+ss.space()
+
+
+def showmsg():
+    ss.message("Hello, world")
+
+showmsg()
+ss.button("message", onclick=showmsg)
+
+
+ss.space("mt-8")
+
+ss.write('''
+---
+#### 🔎 代码
+''')
+
+ss.md('''
+```python
+import simplestart as ss
+
+def showmsg():
+    ss.message("Hello, the world")
+
+```
+''')

locales/zh/pages/003 Content Display/demo_sqlite.py

@@ -0,0 +1,39 @@
+### Sqlite 数据库
+import simplestart as ss
+
+ss.md("## ss.sqlite 数据库")
+
+ss.space()
+ss.md('''
+提供 sqlite 数据库的简单操作
+''')
+
+ss.space()
+ss.md('''
+#### 🔅 示例
+''')
+
+ss.md('''
+::: tip
+  这个例子从sqlite数据库里读取鸢尾花数据集，并以csv表格的方式展示。
+  关于sqlite的管理，simplestart提供了一简单的内置工具，可以进行简单的增、删、改操作。
+:::
+''')
+
+sql = ss.sqlite("./data/ss_data.db")
+df = sql.pd_query("select * from iris")
+
+mytable = ss.table(df, editable = True)###, handlers={"current-change":current_change, "selection-change":selection_change})
+
+ss.space()
+ss.write("#### 代码")
+
+ss.md('''
+```python
+import simplestart as ss
+
+sql = ss.sqlite("./data/ss_data.db")
+data = sql.pd_query("select * from HousingData")
+ss.write(data)
+```
+''')

locales/zh/pages/003 Content Display/demo_table.py

@@ -0,0 +1,252 @@
+### Table 表格
+import simplestart as ss
+import pandas as pd
+
+ss.md("## ss.table 表格数据")
+
+ss.md("以表格方式显示数据")
+
+ss.space()
+
+ss.md('''
+#### 🔅 示例
+''') 
+
+'''
+这里mytable.update会引起前端重新获取getcontent, 包括数据。真实情况不是这样，用户只能在初始时改变参数，所以不会造成频繁获取数据
+'''
+def onchange_index(event):
+    value = event.value
+
+    if value == True:
+        ss.getcm().components[mytable.id]["content"]["index"] = True
+        ss.session["showIndex"] = ', index = True'
+    else:
+        ss.getcm().components[mytable.id]["content"]["index"] = False
+        ss.session["showIndex"] = ''
+    mytable.update()
+    
+def onchange_border(event):
+    value = event.value
+
+    if value == True:
+        ss.getcm().components[mytable.id]["content"]["border"] = True
+        ss.session["showBorder"] = ', border = True'
+    else:
+        ss.getcm().components[mytable.id]["content"]["border"] = False
+        ss.session["showBorder"] = ''
+    mytable.update()
+
+
+def onchange_sortable(event):
+    value = event.value
+
+    if value == True:
+        ss.getcm().components[mytable.id]["content"]["sortable"] = True
+        ss.session["sortable"] = ', sortable = True'
+    else:
+        ss.getcm().components[mytable.id]["content"]["sortable"] = False
+        ss.session["sortable"] = ''
+    mytable.update()
+    
+def onchange_searchable(event):
+    value = event.value
+
+    if value == True:
+        ss.getcm().components[mytable.id]["content"]["searchable"] = True
+        ss.session["searchable"] = ', searchable = True'
+    else:
+        ss.getcm().components[mytable.id]["content"]["searchable"] = False
+        ss.session["searchable"] = ''
+    mytable.update()
+
+
+def onchange_selectable(event):
+    value = event.value
+
+    if value == True:
+        ss.getcm().components[mytable.id]["content"]["selectable"] = True
+        ss.session["selectable"] = ', selectable = True'
+    else:
+        ss.getcm().components[mytable.id]["content"]["selectable"] = False
+        ss.session["selectable"] = ''  
+    mytable.update()
+    
+def onchange_editable(event):
+    value = event.value
+
+    if value == True:
+        ss.getcm().components[mytable.id]["content"]["editable"] = True
+        ss.session["editable"] = ', editable = True'
+    else:
+        ss.getcm().components[mytable.id]["content"]["editable"] = False
+        ss.session["editable"] = ''  
+    mytable.update()
+
+     
+def current_change(state, value):
+    ss.session["row_selected"] = value["index"]
+    
+def selection_change(state, value):
+    ss.session["selection_change"] = value["selected"]
+        
+        
+# 创建一个包含三列的数据集
+data = {'name': ['👧🏻 Alice', '👦🏻 Bob', '👦🏻 Charlie'],
+        'age': [25, 30, 35],
+        'city': ['New York', 'San Francisco', 'Los Angeles'],
+        'health':[90,80,90]
+       }
+
+df = pd.DataFrame(data)
+
+def rowclicked(event):
+    #ss.message("row clicked")
+    #ss.write("event", event)
+    ss.session["itemname"] = event.value["name"]
+    
+
+cols = ss.columns([70,"flex:30; border-left:1px solid lightgray"], design=True, style="border:1px solid lightgray")
+with cols[0]:
+    mytable = ss.table(df, handlers={"click:row": rowclicked})
+    ss.md("#### Events")
+    ss.write("Row clicked: @itemname")
+
+
+with cols[1]:
+    ss.text("setting")    
+    ss.checkbox("索引", onchange = onchange_index) 
+    ss.space()
+    ss.checkbox("边框", onchange = onchange_border) 
+    ss.space()
+    ss.checkbox("排序", onchange = onchange_sortable)
+    ss.space()
+    ss.checkbox("选择", onchange = onchange_selectable)
+    ss.space()
+    ss.checkbox("搜索", onchange = onchange_searchable)
+    ss.space()
+    ss.checkbox("编辑", onchange = onchange_editable)
+    
+ss.space("mt-8")
+
+ss.write('''
+---
+#### 🔎 代码
+''')
+
+ss.md('''
+```python
+import simplestart as ss
+
+def current_change(state, value):
+    ss.session["row_selected"] = value["index"]
+    
+def selection_change(state, value):
+    ss.session["selection_change"] = value["selected"]
+
+data = {'name': ['Alice', 'Bob', 'Charlie'],
+        'age': [25, 30, 35],
+        'city': ['New York', 'San Francisco', 'Los Angeles']}
+df = pd.DataFrame(data)
+
+ss.table(df, handlers={\"current-change\":current_change, \"selection-change\":selection_change})
+ss.md(\"#### Events\")
+ss.write(\"Row selected: \")
+ss.write(\"Selection changed: \")
+    
+def onPageLoad():
+    ss.session["row_selected"] = ''
+    ss.session["selection_change"] = ''
+    
+```
+''')
+
+
+ss.md('''
+---
+#### 🔅 示例 - 自定义列
+''')
+
+
+data = {'name': ['👧🏻 Alice', '👦🏻 Bob', '👦🏻 Charlie'],
+        'age': [25, 30, 35],
+        'city': [':sunny: New York', ':cloud: San Francisco', ':sunny: Los Angeles'],
+        'health':[90,80,90]
+       }
+
+df = pd.DataFrame(data)
+
+cols = ss.columns([70,"flex:30; border-left:1px solid lightgray"], design=True, style="border:1px solid lightgray")
+
+
+vuecode = '''
+<template>
+<v-clip>123</v-clip>
+</template>
+'''
+
+vuecode = "../components/mycell.vue"
+
+#mytable_ex = ss.table(df, custom_columns = ["city"], custom_columns_template = vuestr)
+with cols[0]:
+    mytable_ex = ss.table(df, custom_columns = ["city"], vue_columns = ["health"], vue_code = vuecode)
+with cols[1]:
+    ss.write("每一列可以定制显示")
+    
+ss.space("mt-8")
+
+ss.write('''
+---
+#### 🔎 代码
+''')
+
+ss.md('''
+```python
+import simplestart as ss
+
+data = {'name': ['👧🏻 Alice', '👦🏻 Bob', '👦🏻 Charlie'],
+        'age': [25, 30, 35],
+        'city': [':sunny: New York', ':cloud: San Francisco', ':sunny: Los Angeles'],
+        'health':[90,80,90]
+        }
+df = pd.DataFrame(data)
+
+vuestr = \'''
+<template>
+    <v-row>
+    <v-rating
+      v-model="rating" density="compact" color="orange" half-increments></v-rating>
+    <v-chip variant="text">{{item.value}}</v-chip>
+        </v-row>
+</template>
+
+<script>
+
+module.exports = {
+    props:["item"],
+    
+    data () {
+        return {
+            rating: 3
+        }
+    },
+    methods: {
+        //todo
+    },
+    mounted: function () {
+        this.rating = this.item.value/20
+    },
+}
+</script>
+\'''
+
+ss.table(df, custom_columns = ["city"], vue_columns = ["health"], vue_code = vuecode)
+```
+''')
+
+def onPageLoad():
+    ss.session["show_border"] = ''
+    ss.session["selectable"] = ''
+    ss.session["sortable"] = ''
+    ss.session["row_selected"] = ''
+    ss.session["selection_change"] = ''

locales/zh/pages/003 Content Display/demo_text.py

@@ -0,0 +1,35 @@
+### Text 文本
+import streamsync as ss
+
+ss.md("## ss.text 文本")
+ss.md("支持style参数")
+
+
+ss.space()
+ss.space()
+ss.md('''
+#### 🔅 示例
+''')
+
+ss.md("---")
+
+#基本用法
+test = ss.text("hello, world")
+
+#改变颜色
+ss.text("This is a red string", style="color:red")
+
+ss.space()
+ss.write("#### 🔎 代码")
+
+ss.md('''
+```python
+import simplestart as ss
+
+#基本用法
+test = ss.text("hello, world")
+
+#改变颜色
+ss.text("This is a red string", style="color:red")
+```
+''')

locales/zh/pages/003 Content Display/demo_video.py

@@ -0,0 +1,36 @@
+### Video 视频播放
+import streamsync as ss
+
+ss.md("## ss.video 视频播放")
+
+ss.md("支持播放mp4等格式的视频")
+
+ss.md('''
+#### 🔅 示例
+''')
+
+src = "https://media.w3.org/2010/05/sintel/trailer.mp4"
+
+player = ss.video(src, style="width:50%")
+
+ss.text("来源: https://media.w3.org/2010/05/sintel/trailer.mp4", style="color:gray")
+
+ss.space("mt-8")
+
+ss.write('''
+---
+#### 🔎 代码
+''')
+
+ss.md('''
+```python
+import simplestart as ss
+
+src = "https://media.w3.org/2010/05/sintel/trailer.mp4"
+
+player = ss.video(src, style="width:100%; max-width:640px")
+    
+#修改视频地址
+#player.src = "..."
+```
+''')

locales/zh/pages/003 Content Display/demo_write.py

@@ -0,0 +1,78 @@
+### Write 输出数据
+
+import streamsync as ss
+import pandas as pd
+
+ss.md("## ss.write 输出")
+
+ss.md("ss.write 类似于print，可以输出文本，列表和其它类型，方便测试和输出")
+
+ss.space()
+
+ss.md('''
+#### 🔅 示例
+''')
+
+
+ss.md("#### 1. 输出文本")
+ss.write("This is a text")
+
+ss.md('''
+```python
+ss.write("This is a text")
+```
+''')
+
+ss.md("#### 2. 输出多个变量")
+a = "aaa"
+b = "bbb"
+ss.write(a, ",", b)
+
+ss.md('''
+```python
+a = "aaa"
+b = "bbb"
+ss.write(a, ",", b)
+```
+''')
+
+ss.md("#### 3. 输出列表")
+data = ["aaa", "bbb", "ccc"]
+ss.write(data)
+
+data = {"aaa":1, "bbb":2, "ccc":3}
+ss.write(data)
+
+ss.md('''
+```python
+data = ["aaa", "bbb", "ccc"]
+ss.write(data)
+
+data = {"aaa":1, "bbb":2, "ccc":3}
+ss.write(data)
+```
+''')
+
+
+ss.md("#### 4. 输出表格")
+# 创建数据
+data = {'name': ['Alice', 'Bob', 'Charlie', 'David'],
+        'age': [25, 30, 35, 40],
+        'city': ['New York', 'Paris', 'London', 'Sydney']}
+
+# 将数据转换为 DataFrame 格式
+df = pd.DataFrame(data)
+ss.write(df)
+
+ss.md('''
+```python
+# 创建数据
+data = {'name': ['Alice', 'Bob', 'Charlie', 'David'],
+        'age': [25, 30, 35, 40],
+        'city': ['New York', 'Paris', 'London', 'Sydney']}
+
+# 将数据转换为 DataFrame 格式
+df = pd.DataFrame(data)
+ss.write(df)
+```
+''')

locales/zh/pages/003 Content Display/folder.json

@@ -0,0 +1 @@
+{"alias":"数据展示"}

locales/zh/pages/004 Chart Data/demo_bokeh.py

@@ -0,0 +1,128 @@
+import simplestart as ss
+
+from bokeh.plotting import figure
+from bokeh.models import ColumnDataSource
+from bokeh.resources import CDN
+from bokeh.embed import file_html
+from sklearn.datasets import load_iris
+import pandas as pd
+
+# 加载 Iris 数据集
+iris = load_iris()
+df = pd.DataFrame(data=iris.data, columns=iris.feature_names)
+df['species'] = iris.target
+df['species'] = df['species'].map({0: 'setosa', 1: 'versicolor', 2: 'virginica'})
+
+
+# 创建图形数据源和图形对象
+source = ColumnDataSource(data=dict(
+    sepal_length=df['sepal length (cm)'],
+    sepal_width=df['sepal width (cm)'],
+    petal_length=df['petal length (cm)'],
+    petal_width=df['petal width (cm)'],
+    species=df['species']
+))
+
+# 创建 Bokeh 图表
+p = figure(title="Iris 数据集散点图", x_axis_label='花萼长度 (cm)', y_axis_label='花萼宽度 (cm)',
+           tools="pan,wheel_zoom,box_zoom,reset,hover,save", width = 800)
+
+# 根据种类设置不同颜色
+colors = {'setosa': 'blue', 'versicolor': 'green', 'virginica': 'red'}
+
+for species, color in colors.items():
+    df_species = df[df['species'] == species]
+    source_species = ColumnDataSource(data=dict(
+        sepal_length=df_species['sepal length (cm)'],
+        sepal_width=df_species['sepal width (cm)']
+    ))
+    p.scatter('sepal_length', 'sepal_width', source=source_species, legend_label=species, color=color,
+              size=10, alpha=0.5)
+
+p.legend.title = 'Species'
+p.legend.location = 'top_left'
+
+# 将 Bokeh 图形嵌入到 Streamlit
+html = file_html(p, CDN, "Iris 数据集散点图")
+
+#ui
+ss.md('''
+## simplestart 图表演示 - bokeh
+''')
+
+ss.space()
+ss.md('''
+#### 🔅 示例
+利用bokeh展示Iris数据的交互式散点图
+''')
+
+ss.space()
+ss.htmlview(html, border = False)
+
+ss.space()
+ss.write("#### 🔎 代码")
+
+def viewcode():
+    ss.session["viewcode"] = 1
+
+ss.session["viewcode"] = 0
+ss.button("查看", size="small", onclick = viewcode)
+
+def conditioner(event):
+    return (ss.session["viewcode"] == 1)
+
+code = '''
+```python
+import simplestart as ss
+
+from bokeh.plotting import figure
+from bokeh.models import ColumnDataSource
+from bokeh.resources import CDN
+from bokeh.embed import file_html
+from sklearn.datasets import load_iris
+import pandas as pd
+
+# 加载 Iris 数据集
+iris = load_iris()
+df = pd.DataFrame(data=iris.data, columns=iris.feature_names)
+df['species'] = iris.target
+df['species'] = df['species'].map({0: 'setosa', 1: 'versicolor', 2: 'virginica'})
+
+
+# 创建图形数据源和图形对象
+source = ColumnDataSource(data=dict(
+    sepal_length=df['sepal length (cm)'],
+    sepal_width=df['sepal width (cm)'],
+    petal_length=df['petal length (cm)'],
+    petal_width=df['petal width (cm)'],
+    species=df['species']
+))
+
+# 创建 Bokeh 图表
+p = figure(title="Iris 数据集散点图", x_axis_label='花萼长度 (cm)', y_axis_label='花萼宽度 (cm)',
+           tools="pan,wheel_zoom,box_zoom,reset,hover,save", width = 800)
+
+# 根据种类设置不同颜色
+colors = {'setosa': 'blue', 'versicolor': 'green', 'virginica': 'red'}
+
+for species, color in colors.items():
+    df_species = df[df['species'] == species]
+    source_species = ColumnDataSource(data=dict(
+        sepal_length=df_species['sepal length (cm)'],
+        sepal_width=df_species['sepal width (cm)']
+    ))
+    p.scatter('sepal_length', 'sepal_width', source=source_species, legend_label=species, color=color,
+              size=10, alpha=0.5)
+
+p.legend.title = 'Species'
+p.legend.location = 'top_left'
+
+# 将 Bokeh 图形嵌入到 Streamlit
+html = file_html(p, CDN, "Iris 数据集散点图")
+
+#ui
+ss.htmlview(html, border = False)
+'''
+
+with ss.when(conditioner):
+    ss.md(code)

locales/zh/pages/004 Chart Data/demo_pyplot.py

@@ -0,0 +1,133 @@
+import streamsync as ss
+
+import seaborn as sns
+import matplotlib as mpl
+#mpl.use("Agg") #很重要，否则在ss中会崩溃
+import matplotlib.pyplot as plt
+
+
+#下载不了，所以加一个参数data_home
+data_home = "./data/seaborn"
+
+ss.md('''
+## ss.pyplot 绘图
+''')
+
+
+ss.space()
+ss.md('''
+#### 🔅 示例
+''')
+
+ss.write("#### 1. 画折线图")
+
+sns.set_style("whitegrid")
+titanic = sns.load_dataset("titanic", data_home=data_home)
+sns.lineplot(x="age", y="fare", hue="sex", data=titanic)
+plt.show()
+
+fig = plt.gcf()
+ss.pyplot(fig, style="border:1px solid gray; width:600px")
+
+ss.write("#### 2. 画散点图")
+
+sns.set_style("whitegrid")
+tips = sns.load_dataset("tips", data_home=data_home)
+sns.scatterplot(x="total_bill", y="tip", data=tips)
+plt.show()
+
+fig = plt.gcf()
+ss.pyplot(fig, style="border:1px solid gray; width:600px")
+
+ss.write("#### 3. 画条形图")
+
+sns.set_style("whitegrid")
+titanic = sns.load_dataset("titanic",data_home=data_home)
+sns.barplot(x="class", y="survived", data=titanic)
+plt.show()
+
+fig = plt.gcf()
+ss.pyplot(fig, style="border:1px solid gray; width:600px")
+
+
+ss.write("#### 4. 画直方图")
+sns.set_style("whitegrid")
+titanic = sns.load_dataset("titanic",data_home=data_home)
+sns.histplot(x="age", data=titanic)
+plt.show()
+
+fig = plt.gcf()
+ss.pyplot(fig, style="border:1px solid gray; width:600px")
+
+
+ss.space()
+
+ss.write("#### 🔎 代码")
+ss.write("---")
+
+def viewcode():
+    ss.session["viewcode"] = 1
+
+ss.button("查看", size="small", onclick = viewcode)
+
+
+def conditioner(event):
+    return ss.session["viewcode"] == 1
+
+with ss.when(conditioner):
+    ss.md('''
+```python
+import streamsync as ss
+
+import seaborn as sns
+import matplotlib as mpl
+mpl.use("Agg") #很重要，否则在ss中会崩溃
+import matplotlib.pyplot as plt
+
+
+#下载不了，所以加一个参数data_home
+data_home = "./data/seaborn"
+
+
+ss.write("#### 1. 画折线图")
+
+sns.set_style("whitegrid")
+titanic = sns.load_dataset("titanic", data_home=data_home)
+sns.lineplot(x="age", y="fare", hue="sex", data=titanic)
+plt.show()
+
+fig = plt.gcf()
+ss.pyplot(fig, style="border:1px solid gray; width:600px")
+
+ss.write("#### 2. 画散点图")
+
+sns.set_style("whitegrid")
+tips = sns.load_dataset("tips", data_home=data_home)
+sns.scatterplot(x="total_bill", y="tip", data=tips)
+plt.show()
+
+fig = plt.gcf()
+ss.pyplot(fig, style="border:1px solid gray; width:600px")
+
+ss.write("#### 3. 画条形图")
+
+sns.set_style("whitegrid")
+titanic = sns.load_dataset("titanic",data_home=data_home)
+sns.barplot(x="class", y="survived", data=titanic)
+plt.show()
+
+fig = plt.gcf()
+ss.pyplot(fig, style="border:1px solid gray; width:600px")
+
+
+ss.write("#### 4. 画直方图")
+sns.set_style("whitegrid")
+titanic = sns.load_dataset("titanic",data_home=data_home)
+sns.histplot(x="age", data=titanic)
+plt.show()
+
+fig = plt.gcf()
+ss.pyplot(fig, style="border:1px solid gray; width:600px")
+```
+    ''')
+    

locales/zh/pages/004 Chart Data/folder.json

@@ -0,0 +1 @@
+{"alias":"图表数据"}

locales/zh/pages/005 Layout Related/demo_columns.py

@@ -0,0 +1,100 @@
+### Columns 列布局
+import streamsync as ss
+
+ss.md("## ss.columns 列布局")
+
+ss.space()
+ss.md("#### 🔅 示例")
+
+ss.space()
+
+ss.md("### 平均间距")
+
+def onchange1(event):
+    #cols_ex1.design = True
+    cols_ex1_id = cols1[0].id #通过cols_ex1不能直接得到
+
+    if event.value == True:
+        ss.getcm().components[cols_ex1_id]["content"]["options"]["border"] = True
+        ss.session["cols1_design"] = ', border = True'
+    else:
+        ss.getcm().components[cols_ex1_id]["content"]["options"]["border"] = False
+        ss.session["cols1_design"] = ''
+    ss.update_cm(cols_ex1_id)
+      
+ss.checkbox("border", checked = True, onchange = onchange1)
+
+cols1 = ss.columns(2, border=True)
+
+with cols1[0]:
+    ss.text("First of two columns")
+
+with cols1[1]:
+    ss.text("Second of two columns")
+
+
+ss.space()
+ss.write("---")
+ss.write("#### 🔎 代码")
+ss.md('''
+```python
+import simplestart as ss
+
+cols1 = ss.columns(2, border = True)
+
+with cols1[0]:
+    ss.text("First of two columns")
+    
+with cols1[1]:
+    ss.text("Second of two columns")
+```
+''')
+    
+ss.space()
+
+
+ss.md("### 按比例间距")
+
+def onchange2(event):
+    #cols_ex1.design = True
+    cols_ex2_id = cols2[0].id #通过cols_ex1不能直接得到
+
+    if event.value == True:
+        ss.getcm().components[cols_ex2_id]["content"]["options"]["border"] = True
+        ss.session["cols2_design"] = ', border = True'
+    else:
+        ss.getcm().components[cols_ex2_id]["content"]["options"]["border"] = False
+        ss.session["cols2_design"] = ''
+    ss.update_cm(cols_ex2_id)
+        
+
+ss.checkbox("border", checked = True, onchange = onchange2)
+
+cols2 = ss.columns([4,6], border = True)
+
+with cols2[0]:
+    ss.text("First of two columns")
+with cols2[1]:
+    ss.text("Second of two columns")
+
+    
+ss.space()
+ss.write("---")
+ss.write("#### 🔎 代码")
+ss.md('''
+```python
+import simplestart as ss
+
+cols1 = ss.columns([4,6], border = True)
+
+with cols1[0]:
+    ss.text("First of two columns")
+    
+with cols1[1]:
+    ss.text("Second of two columns")
+```
+''')
+
+def onPageLoad():
+    ss.session["cols1_design"] = ''
+    ss.session["cols2_design"] = ''

locales/zh/pages/005 Layout Related/demo_row.py

@@ -0,0 +1,102 @@
+### Row 行布局
+
+import streamsync as ss
+
+ss.md("## ss.row 行布局")
+
+ss.space()
+ss.md("#### 🔅 示例")
+ss.write("通过 ss.row 将两个按钮限制在一行内显示，同时利用ss.spacer 改变按钮的布局")
+
+ss.space()
+
+def onchange1():
+    pass
+    
+
+#ui
+
+style = "background:#d3d3d354; padding:5px;"
+
+ss.space()
+ss.write("#### 1. Normal")
+ss.space()
+with ss.row(style=style):
+    ss.button("button1")
+    ss.button("button2")
+
+ss.space()
+ss.write("#### 2. Center")
+ss.space()
+with ss.row(style=style):
+    ss.spacer()
+    ss.button("button1")
+    ss.button("button2")
+    ss.spacer()
+    
+ss.space()
+ss.write("#### 3. Right align")
+ss.space()
+with ss.row(style=style):
+    ss.spacer()
+    ss.button("button1")
+    ss.button("button2")
+    
+ss.space()
+ss.write("#### 4. Right respectively")
+ss.space()
+with ss.row(style=style):
+    ss.spacer()
+    ss.button("button1")
+    ss.spacer()
+    ss.button("button2")
+    
+    
+ss.space("mt-16")
+ss.write("#### 🔎 代码")
+
+ss.md('''
+```python
+import simplestart as ss
+
+style = "background:#d3d3d354; padding:5px;"
+ss.space()
+ss.write("#### 1. Normal")
+ss.space()
+with ss.row(style=style):
+    ss.button("button1")
+    ss.button("button2")
+
+ss.space()
+ss.write("#### 2. Center")
+ss.space()
+with ss.row(style=style):
+    ss.spacer()
+    ss.button("button1")
+    ss.button("button2")
+    ss.spacer()
+    
+ss.space()
+ss.write("#### 3. Right align")
+ss.space()
+with ss.row(style=style):
+    ss.spacer()
+    ss.button("button1")
+    ss.button("button2")
+    
+ss.space()
+ss.write("#### 4. Right respectively")
+ss.space()
+with ss.row(style=style):
+    ss.spacer()
+    ss.button("button1")
+    ss.spacer()
+    ss.button("button2")
+
+''')
+
+ss.md('''
+::: tip
+  ss.space 表示增加间距, ss.spacer 是用来填补间距达到修改布局的作用
+:::
+''')

locales/zh/pages/005 Layout Related/demo_section.py

@@ -0,0 +1,81 @@
+### Section 一般容器
+import simplestart as ss
+
+ss.md("## ss.section 容器")
+
+ss.md("section 父容器, 可以装载其它组件, 支持style参数")
+
+
+ss.space()
+ss.md('''
+#### 🔅 示例
+''')
+
+#api
+def clear():
+    section.empty()
+    
+def write_something():
+    section.text("Hello, I am inside section 2")
+
+#ui
+with ss.section("Section1", shadow = 10, border = True, rounded=True, width = "50%", height=300):
+    ss.text("This is inside the section 1")
+    
+
+ss.space()    
+
+section = ss.section()
+section.text("This is inside the section 2")
+
+ss.space("mt-4 mb-4")   
+ss.text("outside the section")
+
+
+ss.md("---")
+
+ss.button("clear", onclick=clear)
+
+ss.button("add something", onclick=write_something)
+
+ss.space()
+
+ss.write("#### 🔎 代码")
+
+ss.md("""
+```python
+import simplestart as ss
+
+#api
+def clear():
+    section.empty()
+    
+def write_something():
+    section.text("Hello, I am inside section 2")
+
+#ui
+with ss.section(title = "Section1", shadow = 10, border = True, rounded=True, width = "50%", height=300):
+    ss.text("This is inside the section 1")
+    
+
+ss.space()    
+
+section = ss.section()
+section.text("This is inside the section 2")
+
+ss.space()   
+ss.text("outside the section")
+
+ss.md("---")
+
+ss.button("clear", onclick=clear)
+ss.button("add something", onclick=write_something)
+
+```
+""")
+
+ss.md('''
+::: tip
+  除了可以通过 with 语法添加组件，也可以直接通过section.text(), section.button()等方式添加容器内的组件
+:::
+''')

locales/zh/pages/005 Layout Related/demo_sidebar.py

@@ -0,0 +1,53 @@
+### Sidebar 侧边栏
+import simplestart as ss
+
+ss.md("## ss.sidebar 侧边栏")
+
+ss.md("在屏幕左侧的侧边栏内显示各种组件，例如可以放置数据控制和一些设置。")
+
+ss.md('''
+#### 🔅 示例
+''')
+
+
+sidebar = ss.sidebar()
+
+with sidebar:
+    ss.button("click")
+    ss.selectbox(["one", "two", "three"])
+        
+
+def testme(state, value):
+    with sidebar:
+        ss.text("text in sidebar")
+
+    
+ss.button("test", onclick = testme)
+
+
+ss.space()
+
+ss.write("#### 🔎 代码")
+
+ss.md('''
+```python
+import simplestart as ss
+
+sidebar = ss.sidebar()
+
+with sidebar:
+    ss.button("click")
+    ss.selectbox(["one", "two", "three"])
+        
+
+def testme(state, value):
+    with sidebar:
+        ss.text("text in sidebar")
+    #or
+    #sidebar.text("text in sidebar")
+
+    
+ss.button("test", onclick = testme)
+
+```
+''')

locales/zh/pages/005 Layout Related/demo_style.py

@@ -0,0 +1,68 @@
+### Style 样式设置
+import simplestart as ss
+
+ss.md("## ss.style 样式设置")
+
+ss.space()
+ss.md("#### 🔅 示例")
+ss.write("向 HTML 文档中注入 CSS 样式")
+
+ss.html('''
+    <div class="test1">this is a sample1</div>
+    <div class="test2">this is a sample2</div>
+''')
+
+
+ss.style('''
+    .test1{
+        background-color:lightgray;
+        padding:5px;
+        width:150px;
+        margin-bottom:10px;
+        border:1px solid lightblue
+    }
+    .test2{
+        color:red;
+        border:1px solid lightgreen;
+        padding:5px;
+        width:150px;
+    }
+''')
+
+ss.space()
+
+ss.write("#### 🔎 代码")
+
+
+ss.space()
+
+ss.write('''
+---
+#### 代码
+''')
+
+ss.md('''
+```python
+import simplestart as ss
+
+ss.html(\'''
+    <div class="test1">this is a sample1</div>
+    <div class="test2">this is a sample2</div>
+\''')
+
+ss.style(\'''
+    .test1{
+        background-color:lightgray;
+        padding:5px;
+        width:150px;
+        margin-bottom:10px;
+        border:1px solid lightblue
+    }
+    .test2{
+        color:red;
+        border:1px solid lightgreen;
+        padding:5px;
+        width:150px;
+    }
+\''')
+''')

locales/zh/pages/005 Layout Related/demo_tabs.py

@@ -0,0 +1,35 @@
+### Tabs 标签页
+import simplestart as ss
+
+ss.md("## ss.tabs 标签页")
+
+ss.space("mt-16")
+ss.md("#### 🔅 示例")
+
+tabtitles = ["tab1", "tab2", "tab3"]
+tabs = ss.tabs(tabtitles)
+
+with tabs[0]:
+    ss.text("this is tab 1")
+with tabs[1]:
+    ss.text("this is tab 2")
+with tabs[2]:
+    ss.text("this is tab 3")
+    
+ss.space()
+ss.write("#### 🔎 代码")
+
+ss.md('''
+```python
+import simplestart as ss
+
+tabtitles = ["tab1", "tab2", "tab3"]
+tabs = ss.tabs(tabtitles)
+
+with tabs[0]:
+    ss.text("this is tab 1")
+with tabs[1]:
+    ss.text("this is tab 2")
+with tabs[2]:
+    ss.text("this is tab 3")
+''')

locales/zh/pages/005 Layout Related/folder.json

@@ -0,0 +1 @@
+{"alias":"布局相关"}

locales/zh/pages/006 Advanced Usage/demo_component.py

@@ -0,0 +1,101 @@
+### ss.component 自定义组件
+import simplestart as ss
+
+ss.md("### ss.component")
+ss.md("可以通过html,js, css自定义组件，通过iframe实现")
+
+ss.space()
+ss.md('''
+#### 🔅 示例
+''')
+ss.space()
+
+def testme(state, value):
+    mytext.text = "接收到的前端UI的数据: " + value["value"]
+    
+#默认情况下，<iframe> 的宽度为 300 像素，高度为 150 像素。
+ss.text("在文本框中输入内容并按回车")
+
+myplugin = ss.component(path = f"components/index.html", onData = testme) ###style="border:none")
+
+def postdata():
+    data = {"my_input_value":"text from python"}
+    myplugin.postMessage(data)
+
+mytext = ss.text("接收到的前端UI的数据: ")
+
+ss.markdown("---")
+ss.space()
+ss.text("点击按钮，传递数据到UI前端")
+ss.button("post data", onclick=postdata)
+
+ss.space()
+
+ss.write("Python端代码")
+
+ss.md('''
+```python
+import simplestart as ss
+
+def testme(state, value):
+    mytext.text = "接收到的前端UI的数据: " + value["value"]
+    
+ss.text("在文本框中输入内容并按回车")
+myplugin = ss.component(path = f"components/index.html", onData = testme)
+
+def postdata():
+    data = {"my_input_value":"text from python"}
+    myplugin.postMessage(data)
+
+mytext = ss.text("接收到的前端UI的数据: ")
+
+ss.markdown("---")
+
+ss.space()
+ss.text("点击按钮，传递数据到UI前端")
+ss.button("post data", onclick=postdata)
+
+```
+''')
+
+ss.write("Plugin/html/js端代码")
+
+ss.md('''
+```html
+<html>
+    
+<head>
+    <script src="pybridge.js"></script>
+</head>
+    
+<body style="height:100px">
+    <input id="myinput" value="" autocomplete="off" placeholder="输入内容，并按回车" />
+</body>
+    
+<script>
+    var myInput = document.getElementById("myinput");
+
+    myInput.addEventListener("change", function() {
+        ////将消息发送给Python端
+        sendDataToPython({
+            value: myInput.value,
+        });
+    })
+    
+    //接受来自Python端的消息消息
+    window.addEventListener("message", onDataFromPython);
+    
+    function onDataFromPython(event) {
+        var data = event.data.arg;
+        if (event.data.type !== "ss:render") return;
+            myInput.value = data.my_input_value;  // Access values sent from Python here!
+    }
+    
+    //如果系统设置失败，可以手工设置高度
+    //setFrameHeight(200);
+</script>
+
+</html>
+
+```
+''')

locales/zh/pages/006 Advanced Usage/demo_loadvue.py

@@ -0,0 +1,132 @@
+### ss.loadvue 加载VUE SFC
+import simplestart as ss
+
+ss.md("## ss.loadvue 加载VUE SFC")
+
+ss.space()
+ss.md("在SimpleStart中，可以通过ss.loadvue加载自定义的vue单文件组件，实现属性和数据交互。")
+
+ss.space()
+
+ss.space()
+ss.md('''
+#### 🔅 示例
+
+在这里例子中，我们定义一个简单的前端组件，组件里定义了一个"ontest"事件，当用户点击"handle on server"按钮时，
+Python端的ontest事件处理函数会处理，并且接受前端组件传递的数据。同时，当点击Python端的 "修改数据"
+按钮时，前端组件会响应改变显示内容。
+
+''')
+
+ss.space("mt-8")
+ss.md("---")
+ss.space("mt-8")
+
+tagid = 0
+tags = ["Python", "Java", "Javascript"]
+data = {"count":0, "language":"C++"}
+global myvue
+
+#trigger event on server from client side
+def ontest(event):
+    ss.message(event.value)
+
+#change data in client component on server side
+def changedata(event):
+    global tagid
+    myvue.data["language"] = tags[tagid]
+    myvue.update()
+    
+    tagid = (tagid+1) % 3
+    
+ss.text("Python 端")
+ss.button("修改数据", onclick=changedata)
+
+ss.space()
+sec = ss.section()
+
+def onPageLoad():
+    global myvue
+    #load code from file
+    with sec:
+        ss.text("组件端")
+        myvue = ss.loadvue(path = "components/mycomponent.vue", data = data, handlers = {"ontest":ontest})
+    
+    
+ss.space()
+ss.write("Python端 代码")
+
+ss.md('''
+```python
+import simplestart as ss
+
+tagid = 0
+global myvue
+
+tags = ["Python", "Java", "Javascript"]
+data = {"count":0, "language":"C++"}
+
+
+#trigger event on server from client side
+def ontest(state, value):
+    ss.message(value)
+
+#change data in client component on server side
+def changedata(state, value=None):
+    global tagid
+    myvue.data["language"] = tags[tagid]
+    tagid = (tagid+1) % 3
+    
+ss.text("Python 端")
+ss.button("修改数据", onclick=changedata)
+
+
+def onPageLoad():
+    global myvue
+    #load code from file
+    myvue = ss.loadvue(path = "components/mycomponent.vue", data = data, handlers = {"ontest":ontest})
+```
+''')
+
+
+ss.space()
+ss.write("Vue JS代码")
+
+ss.md('''
+```js
+<template>
+  <div class="my-component">
+    <h1>{{title}}: {{ data.language }}</h1>
+    <v-btn @click="testme">handle on server</v-btn>
+  </div>
+</template>
+
+<script>
+module.exports = {
+    name: 'MyComponent',
+
+    data() {
+        return {
+            title:"computer",
+        }
+    },
+
+    methods: {
+        testme(){
+            this.streamsync.forwardData(this, eventname="ontest", "12345")
+        }
+    }
+}
+</script>
+
+<style>
+.my-component {
+    width:50%;
+    background-color: #f0f0f0;
+    padding: 20px;
+    margin:10px 0;
+}
+</style>
+
+```
+''')

locales/zh/pages/006 Advanced Usage/demo_onload.py

@@ -0,0 +1,46 @@
+### ss.onPageEnter 页面加载事件
+import simplestart as ss
+from datetime import datetime
+
+ss.md("## onPageEnter 页面加载事件")
+
+ss.md('''
+---
+#### 🔅 示例
+''')
+
+ss.md("每次进入这个页面的时候，onPageEnter事件函数会被调用, 上方会弹出一个message")
+
+ss.space()
+
+mytext = ss.text("当前时间@currentime")
+
+def onPageEnter():
+    #ss.write("test")
+    ss.message("page enter event") ##不知道为什么不起作用
+    
+    #mytext.update_cm() ###这个很重要，否则@test不会响应
+
+    # 获取当前时间
+    now = datetime.now()
+    # 格式化时间为字符串
+    time_str = now.strftime('%Y-%m-%d %H:%M:%S')    
+    ss.session["currentime"] = time_str
+
+
+ss.space()
+
+ss.write('''
+---
+#### 🔎 代码
+''')
+
+ss.md('''
+```python
+import simplestart as ss
+
+def onPageEnter():
+    ss.message("page enter event")
+
+```
+''')

locales/zh/pages/006 Advanced Usage/demo_session.py

@@ -0,0 +1,22 @@
+### ss.session 页面会话变量
+import simplestart as ss
+
+ss.md("## ss.session session变量")
+
+ss.space()
+
+
+#in this page
+ss.session["count"] = 100
+
+mytext = ss.text("The couns is @count")
+
+
+def change_count():
+    ss.session.count += 1
+
+ss.button("Add Count", onclick=change_count)
+
+def xonPageEnter():
+    ss.session.count = 100
+    #mytext.update_cm() ###对于包括@的组件，需要在这里设置，否则不变化显示值

locales/zh/pages/006 Advanced Usage/demo_template.py

@@ -0,0 +1,133 @@
+### ss.template 加载VUE模版
+
+import simplestart as ss
+
+
+ss.md("## ss.template 加载VUE模版")
+
+ss.space("mt-8")
+ss.md('''
+在SimpleStart中，可以通过ss.template定义简单的vue组件, 实现属性和数据交互。
+
+#### 函数
+ss.template(src, path, data, handlers)
+      
+##### 函数说明
+
+| 参数 | 说明 |
+| --- | --- | 
+| src | 字符串形式的组件脚本 |
+| path | 外部文件的组件的原代码路径 |
+| data | 用于实现前端组件和Python端的交互数据 |
+| handlers | 在Python端实现前端组件定义的事件 |
+      
+''')
+
+ss.space("mt-8")
+
+ss.md('''
+---
+#### 示例1
+在这里例子中，我们定义一个简单的前端组件，组件里定义了一个"myclick"事件，当用户点击"Click me"按钮时，
+Python端的myclick事件处理函数会处理，并且接受前端组件传递的数据。同时，当点击Python端的 "增加数字"
+按钮时，通过state变量改变前端的数值。
+
+''')
+
+    
+template = '''
+  <v-card
+    class="mx-auto text-white"
+    color="#26c6da"
+    max-width="400"
+    prepend-icon="mdi-twitter"
+    title="Twitter"
+  >
+    <template v-slot:prepend>
+      <v-icon size="x-large"></v-icon>
+    </template>
+
+    <v-card-text class="text-h6 py-2">
+      "SimpleStart is a easy way to build webpage and visualize data."
+    </v-card-text>
+
+    <v-card-actions>
+      <v-list-item class="w-100">
+        <template v-slot:prepend>
+          <v-avatar
+            color="grey-darken-3"
+            image="https://avataaars.io/?avatarStyle=Transparent&topType=ShortHairShortCurly&accessoriesType=Prescription02&hairColor=Black&facialHairType=Blank&clotheType=Hoodie&clotheColor=White&eyeType=Default&eyebrowType=DefaultNatural&mouthType=Default&skinColor=Light"
+          ></v-avatar>
+        </template>
+
+        <v-list-item-title>Evan You</v-list-item-title>
+
+        <v-list-item-subtitle>Data Science Engineer</v-list-item-subtitle>
+
+        <template v-slot:append>
+          <div class="justify-self-end">
+            <v-icon class="me-1" icon="mdi-heart" \@click="onserver('myclick')"></v-icon>
+            <span class="subheading me-2">{{data.vote}}</span>
+            <span class="me-1">·</span>
+            <v-icon class="me-1" icon="mdi-share-variant"></v-icon>
+            <span class="subheading">45</span>
+          </div>
+        </template>
+      </v-list-item>
+    </v-card-actions>
+  </v-card>
+'''
+
+def myclick(event):
+    mycard.vote  = mycard.vote + 1
+    
+data = {"vote":256}
+mycard = ss.template(template, data = data, handlers = {"myclick":myclick})
+
+def increment(event):
+    mycard.vote  = mycard.vote + 1
+    #mycard.style = "color:red"
+
+ss.space()
+ss.button("Thumb Up", onclick=increment)
+
+ss.space("mt-8")
+
+ss.write('''
+---
+#### 代码
+''')
+
+ss.md('''
+```python
+import simplestart as ss
+
+def myclick(event):
+    mycard.vote  = mycard.vote + 1
+    
+data = {"vote":256}
+mycard = ss.template(template, data = data, handlers = {"myclick":myclick})
+
+def increment(event):
+    mycard.vote  = mycard.vote + 1
+    #mycard.style = "color:red"
+
+ss.space()
+ss.button("Thumb Up", onclick=increment)
+```
+''')
+
+ss.space("mt-8")
+
+
+ss.md('''
+::: tip
+  组件内对于data的变化如果需要传递到后端，需要显示地调用syncdata或者onserver事件。
+  如上面例子中的 onchange="syncdata", 就是当用户改变了颜色后，将data的值传到python后端。
+:::
+''')
+
+def onPageEnter():
+    ss.session["counter"] = 0
+    ss.session["xxxx"] = 1
+    

locales/zh/pages/006 Advanced Usage/demo_when.py

@@ -0,0 +1,101 @@
+### ss.when 条件语句
+import simplestart as ss
+
+ss.md('''
+## ss.when 条件语句
+''')
+
+ss.space()
+ss.md('''
+#### 🔅 示例
+''')
+
+#api
+def increment(event):
+    ss.session["counter"] += 1
+    
+def decrement(event):
+    ss.session["counter"] -= 1
+
+    
+#conditional func
+def conditioner(event):
+    #print("event", event)
+    if event["flag"] == 1:
+        if ss.session["counter"] >= 5:
+            return True
+        else:
+            return False
+    elif event["flag"] == 2:
+        return (ss.session["viewcode"] == 1)
+        
+
+# State initialisation
+ss.session["counter"] = 0
+ss.session["viewcode"] = 0
+
+#ui
+ss.text("The count is @counter.")
+
+ss.button("Increment", onclick=increment)
+ss.button("Decrement", onclick=decrement)
+
+ss.write("当counter大于5时，下面将出现新的内容")
+
+with ss.when(conditioner, flag = 1): # Conditional rendering
+    ss.text("Well done on reaching 5 👋🌷🍾")
+    
+ss.write("当counter小于5时，新的内容会隐藏")
+
+
+ss.space()
+
+ss.write("#### 🔎 代码")
+ss.write("---")
+
+def viewcode():
+    ss.session["viewcode"] = 1
+
+ss.button("查看", size="small", onclick = viewcode)
+
+with ss.when(conditioner, flag = 2):
+    ss.md('''
+```python
+import simplestart as ss
+
+#api
+def increment(event):
+    ss.session["counter"] += 1
+    
+def decrement(event):
+    ss.session["counter"] -= 1
+
+    
+#conditional func
+def conditioner(event):
+    return (ss.session["counter"] >= 5)
+        
+# State initialisation
+ss.session["counter"] = 0
+ss.session["viewcode"] = 0
+
+#ui
+ss.text("The count is @counter.")
+
+ss.button("Increment", onclick=increment)
+ss.button("Decrement", onclick=decrement)
+
+ss.write("当counter大于5时，下面将出现新的内容")
+
+with ss.when(conditioner, flag = 1): # Conditional rendering
+    ss.text("Well done on reaching 5 👋🌷🍾")
+    
+ss.write("当counter小于5时，新的内容会隐藏")
+```
+    ''')
+
+ss.md('''
+::: tip
+  上面的代码查看也是用ss.when实现的
+:::
+''')

locales/zh/pages/006 Advanced Usage/folder.json

@@ -0,0 +1 @@
+{"alias":"高级用法"}

locales/zh/system/.ipynb_checkpoints/config-checkpoint.yaml

@@ -0,0 +1,16 @@
+title: "SimpleStart 演示"
+
+show_sidebar: true
+wide_screen_mode : true
+
+show_header: false
+app_bar_height: 59 ##default is 64
+
+show_footer: false
+
+
+locales:
+  - code: ""
+    name: "English"
+  - code: "zh"
+    name: "Chinese 中文"

locales/zh/system/config.yaml

@@ -0,0 +1,16 @@
+title: "SimpleStart 演示"
+
+show_sidebar: true
+wide_screen_mode : true
+
+show_header: false
+app_bar_height: 59 ##default is 64
+
+show_footer: false
+
+
+locales:
+  - code: ""
+    name: "English"
+  - code: "zh"
+    name: "Chinese 中文"