Hugging Face's logo

Spaces:
test2023h5
/
Demo_SimpleStart_Usage
Running

App Files Community
test2023h5 commited on
Commit
863a775
·
verified ·
1 Parent(s): 7798609

Upload 44 files

Browse files
Files changed (44) hide show
  1. locales/zh/app.py +43 -0
  2. locales/zh/config.yaml +16 -0
  3. locales/zh/pages/Advanced_Usage/demo_chat.py +33 -0
  4. locales/zh/pages/Advanced_Usage/demo_component.py +104 -0
  5. locales/zh/pages/Advanced_Usage/demo_loadvue.py +135 -0
  6. locales/zh/pages/Advanced_Usage/demo_onload.py +49 -0
  7. locales/zh/pages/Advanced_Usage/demo_session.py +134 -0
  8. locales/zh/pages/Advanced_Usage/demo_template.py +135 -0
  9. locales/zh/pages/Advanced_Usage/demo_when.py +104 -0
  10. locales/zh/pages/Advanced_Usage/folder.yaml +2 -0
  11. locales/zh/pages/Chart_Data/demo_bokeh.py +132 -0
  12. locales/zh/pages/Chart_Data/demo_pyplot.py +137 -0
  13. locales/zh/pages/Chart_Data/folder.yaml +2 -0
  14. locales/zh/pages/Content_Display/demo_audio.py +42 -0
  15. locales/zh/pages/Content_Display/demo_html.py +52 -0
  16. locales/zh/pages/Content_Display/demo_image.py +95 -0
  17. locales/zh/pages/Content_Display/demo_markdown.py +60 -0
  18. locales/zh/pages/Content_Display/demo_message.py +40 -0
  19. locales/zh/pages/Content_Display/demo_sqlite.py.txt +42 -0
  20. locales/zh/pages/Content_Display/demo_table.py +255 -0
  21. locales/zh/pages/Content_Display/demo_text.py +38 -0
  22. locales/zh/pages/Content_Display/demo_video.py +39 -0
  23. locales/zh/pages/Content_Display/demo_write.py +80 -0
  24. locales/zh/pages/Content_Display/folder.yaml +2 -0
  25. locales/zh/pages/Form_Component/demo_button.py +138 -0
  26. locales/zh/pages/Form_Component/demo_checkbox.py +90 -0
  27. locales/zh/pages/Form_Component/demo_dialog.py +156 -0
  28. locales/zh/pages/Form_Component/demo_expander.py +40 -0
  29. locales/zh/pages/Form_Component/demo_input.py +67 -0
  30. locales/zh/pages/Form_Component/demo_menu.py +103 -0
  31. locales/zh/pages/Form_Component/demo_radio.py +98 -0
  32. locales/zh/pages/Form_Component/demo_selectbox.py +80 -0
  33. locales/zh/pages/Form_Component/demo_slider.py +41 -0
  34. locales/zh/pages/Form_Component/demo_textarea.py +49 -0
  35. locales/zh/pages/Form_Component/demo_upload.py +45 -0
  36. locales/zh/pages/Form_Component/folder.yaml +2 -0
  37. locales/zh/pages/Form_Component/untitled.txt +1 -0
  38. locales/zh/pages/Layout_Related/demo_columns.py +103 -0
  39. locales/zh/pages/Layout_Related/demo_row.py +104 -0
  40. locales/zh/pages/Layout_Related/demo_section.py +84 -0
  41. locales/zh/pages/Layout_Related/demo_sidebar.py +56 -0
  42. locales/zh/pages/Layout_Related/demo_style.py +71 -0
  43. locales/zh/pages/Layout_Related/demo_tabs.py +38 -0
  44. locales/zh/pages/Layout_Related/folder.yaml +2 -0
locales/zh/app.py ADDED
@@ -0,0 +1,43 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ '''
2
+ title: SimpleStart 简介
3
+ '''
4
+
5
+ import simplestart as ss
6
+
7
+ ss.md("# SimpleStart 介绍", color="#3451b2")
8
+
9
+
10
+ ss.space()
11
+ ss.md('''
12
+ ### 无需前端编程的 Python 网页开发工具
13
+ SimpleStart 是一款无需前端网页编程的工具，所有开发工作都通过 Python 在后台完成。即使不精通 HTML、CSS、JavaScript、Ajax 等知识，也能轻松开发网页应用。
14
+
15
+ ''')
16
+
17
+ ss.space()
18
+
19
+ ss.md('''
20
+ ### 提供丰富的组件
21
+ SimpleStart 提供包括文本、按钮、列表、表格、音频、视频等在内的多种网页开发所需组件，支持容器和布局，同时允许用户自定义组件。
22
+
23
+ ''')
24
+
25
+ ss.space()
26
+
27
+ ss.md('''
28
+ ### 提供数据可视化支持
29
+ SimpleStart 通过图像、表格、Plot 图表和 SQLite 数据库等方式实现数据可视化。它支持静态和交互式图表的显示，并提供数据的显示和编辑功能。
30
+ ''')
31
+
32
+ ss.space()
33
+ ss.md("---")
34
+ ss.write("关于安装使用等，请访问")
35
+ ss.md('''
36
+ [在线帮助](http://www.simplestart.cc)
37
+ ''')
38
+
39
+ def locale():
40
+ ss.send_message("change_locale", {"locale":""});
41
+
42
+
43
+ ss.button("English", onclick = locale)
locales/zh/config.yaml ADDED
@@ -0,0 +1,16 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ title: "SimpleStart 演示"
2
+
3
+ show_sidebar: true
4
+ wide_screen_mode : true
5
+
6
+ show_header: False
7
+ app_bar_height: 59 ##default is 64
8
+
9
+ show_footer: false
10
+
11
+
12
+ locales:
13
+ - code: ""
14
+ name: "English"
15
+ - code: "zh"
16
+ name: "Chinese 中文"
locales/zh/pages/Advanced_Usage/demo_chat.py ADDED
@@ -0,0 +1,33 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ '''
2
+ title: ollama 对话演示
3
+ '''
4
+
5
+ import simplestart as ss
6
+ import ollama
7
+
8
+ ss.md("## ss.chat")
9
+
10
+ setting = {
11
+ "ollama_base_url": "http://localhost:11434",
12
+ "model": "qwen:0.5b",
13
+ "stream":False
14
+ }
15
+
16
+ def mychange(event):
17
+ setting.update({
18
+ "model":mysel.value,
19
+ "stream":mycheck.value,
20
+ })
21
+
22
+
23
+ with ss.sidebar():
24
+ ss.md("#### 模型和参数")
25
+ ss.space()
26
+ models = ss.ollama.get_models()
27
+
28
+ mysel = ss.selectbox(models, index = 5, label = "选择ollama模型", onchange = mychange)
29
+
30
+ mycheck = ss.checkbox("流模式输出", onchange = mychange)
31
+
32
+
33
+ mychat = ss.ollama.chat(demo = False, setting = setting)
locales/zh/pages/Advanced_Usage/demo_component.py ADDED
@@ -0,0 +1,104 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ '''
2
+ title: ss.component 自定义组件
3
+ '''
4
+
5
+ import simplestart as ss
6
+
7
+ ss.md("### ss.component")
8
+ ss.md("可以通过html,js, css自定义组件，通过iframe实现")
9
+
10
+ ss.space()
11
+ ss.md('''
12
+ #### 🔅 示例
13
+ ''')
14
+ ss.space()
15
+
16
+ def testme(state, value):
17
+ mytext.text = "接收到的前端UI的数据: " + value["value"]
18
+
19
+ #默认情况下，<iframe> 的宽度为 300 像素，高度为 150 像素。
20
+ ss.text("在文本框中输入内容并按回车")
21
+
22
+ myplugin = ss.component(path = f"components/index.html", onData = testme) ###style="border:none")
23
+
24
+ def postdata():
25
+ data = {"my_input_value":"text from python"}
26
+ myplugin.postMessage(data)
27
+
28
+ mytext = ss.text("接收到的前端UI的数据: ")
29
+
30
+ ss.markdown("---")
31
+ ss.space()
32
+ ss.text("点击按钮，传递数据到UI前端")
33
+ ss.button("post data", onclick=postdata)
34
+
35
+ ss.space()
36
+
37
+ ss.write("Python端代码")
38
+
39
+ ss.md('''
40
+ ```python
41
+ import simplestart as ss
42
+
43
+ def testme(state, value):
44
+ mytext.text = "接收到的前端UI的数据: " + value["value"]
45
+
46
+ ss.text("在文本框中输入内容并按回车")
47
+ myplugin = ss.component(path = f"components/index.html", onData = testme)
48
+
49
+ def postdata():
50
+ data = {"my_input_value":"text from python"}
51
+ myplugin.postMessage(data)
52
+
53
+ mytext = ss.text("接收到的前端UI的数据: ")
54
+
55
+ ss.markdown("---")
56
+
57
+ ss.space()
58
+ ss.text("点击按钮，传递数据到UI前端")
59
+ ss.button("post data", onclick=postdata)
60
+
61
+ ```
62
+ ''')
63
+
64
+ ss.write("Plugin/html/js端代码")
65
+
66
+ ss.md('''
67
+ ```html
68
+ <html>
69
+
70
+ <head>
71
+ <script src="pybridge.js"></script>
72
+ </head>
73
+
74
+ <body style="height:100px">
75
+ <input id="myinput" value="" autocomplete="off" placeholder="输入内容，并按回车" />
76
+ </body>
77
+
78
+ <script>
79
+ var myInput = document.getElementById("myinput");
80
+
81
+ myInput.addEventListener("change", function() {
82
+ ////将消息发送给Python端
83
+ sendDataToPython({
84
+ value: myInput.value,
85
+ });
86
+ })
87
+
88
+ //接受来自Python端的消息消息
89
+ window.addEventListener("message", onDataFromPython);
90
+
91
+ function onDataFromPython(event) {
92
+ var data = event.data.arg;
93
+ if (event.data.type !== "ss:render") return;
94
+ myInput.value = data.my_input_value; // Access values sent from Python here!
95
+ }
96
+
97
+ //如果系统设置失败，可以手工设置高度
98
+ //setFrameHeight(200);
99
+ </script>
100
+
101
+ </html>
102
+
103
+ ```
104
+ ''')
locales/zh/pages/Advanced_Usage/demo_loadvue.py ADDED
@@ -0,0 +1,135 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ '''
2
+ title: ss.loadvue 加载VUE SFC
3
+ '''
4
+
5
+ import simplestart as ss
6
+
7
+ ss.md("## ss.loadvue 加载VUE SFC")
8
+
9
+ ss.space()
10
+ ss.md("在SimpleStart中，可以通过ss.loadvue加载自定义的vue单文件组件，实现属性和数据交互。")
11
+
12
+ ss.space()
13
+
14
+ ss.space()
15
+ ss.md('''
16
+ #### 🔅 示例
17
+
18
+ 在这里例子中，我们定义一个简单的前端组件，组件里定义了一个"ontest"事件，当用户点击"handle on server"按钮时，
19
+ Python端的ontest事件处理函数会处理，并且接受前端组件传递的数据。同时，当点击Python端的 "修改数据"
20
+ 按钮时，前端组件会响应改变显示内容。
21
+
22
+ ''')
23
+
24
+ ss.space("mt-8")
25
+ ss.md("---")
26
+ ss.space("mt-8")
27
+
28
+ tagid = 0
29
+ tags = ["Python", "Java", "Javascript"]
30
+ data = {"count":0, "language":"C++"}
31
+ global myvue
32
+
33
+ #trigger event on server from client side
34
+ def ontest(event):
35
+ ss.message(event.value)
36
+
37
+ #change data in client component on server side
38
+ def changedata(event):
39
+ global tagid
40
+ myvue.data["language"] = tags[tagid]
41
+ myvue.update()
42
+
43
+ tagid = (tagid+1) % 3
44
+
45
+ ss.text("Python 端")
46
+ ss.button("修改数据", onclick=changedata)
47
+
48
+ ss.space()
49
+ sec = ss.section()
50
+
51
+ def onPageLoad():
52
+ global myvue
53
+ #load code from file
54
+ with sec:
55
+ ss.text("组件端")
56
+ myvue = ss.loadvue(path = "components/mycomponent.vue", data = data, handlers = {"ontest":ontest})
57
+
58
+
59
+ ss.space()
60
+ ss.write("Python端 代码")
61
+
62
+ ss.md('''
63
+ ```python
64
+ import simplestart as ss
65
+
66
+ tagid = 0
67
+ global myvue
68
+
69
+ tags = ["Python", "Java", "Javascript"]
70
+ data = {"count":0, "language":"C++"}
71
+
72
+
73
+ #trigger event on server from client side
74
+ def ontest(state, value):
75
+ ss.message(value)
76
+
77
+ #change data in client component on server side
78
+ def changedata(state, value=None):
79
+ global tagid
80
+ myvue.data["language"] = tags[tagid]
81
+ tagid = (tagid+1) % 3
82
+
83
+ ss.text("Python 端")
84
+ ss.button("修改数据", onclick=changedata)
85
+
86
+
87
+ def onPageLoad():
88
+ global myvue
89
+ #load code from file
90
+ myvue = ss.loadvue(path = "components/mycomponent.vue", data = data, handlers = {"ontest":ontest})
91
+ ```
92
+ ''')
93
+
94
+
95
+ ss.space()
96
+ ss.write("Vue JS代码")
97
+
98
+ ss.md('''
99
+ ```js
100
+ <template>
101
+ <div class="my-component">
102
+ <h1>{{title}}: {{ data.language }}</h1>
103
+ <v-btn @click="testme">handle on server</v-btn>
104
+ </div>
105
+ </template>
106
+
107
+ <script>
108
+ module.exports = {
109
+ name: 'MyComponent',
110
+
111
+ data() {
112
+ return {
113
+ title:"computer",
114
+ }
115
+ },
116
+
117
+ methods: {
118
+ testme(){
119
+ this.streamsync.forwardData(this, eventname="ontest", "12345")
120
+ }
121
+ }
122
+ }
123
+ </script>
124
+
125
+ <style>
126
+ .my-component {
127
+ width:50%;
128
+ background-color: #f0f0f0;
129
+ padding: 20px;
130
+ margin:10px 0;
131
+ }
132
+ </style>
133
+
134
+ ```
135
+ ''')
locales/zh/pages/Advanced_Usage/demo_onload.py ADDED
@@ -0,0 +1,49 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ '''
2
+ title: ss.onPageEnter 页面加载事件
3
+ '''
4
+
5
+ import simplestart as ss
6
+ from datetime import datetime
7
+
8
+ ss.md("## onPageEnter 页面加载事件")
9
+
10
+ ss.md('''
11
+ ---
12
+ #### 🔅 示例
13
+ ''')
14
+
15
+ ss.md("每次进入这个页面的时候，onPageEnter事件函数会被调用, 上方会弹出一个message")
16
+
17
+ ss.space()
18
+
19
+ mytext = ss.text("当前时间@currentime")
20
+
21
+ def onPageEnter():
22
+ #ss.write("test")
23
+ ss.message("page enter event") ##不知道为什么不起作用
24
+
25
+ #mytext.update_cm() ###这个很重要，否则@test不会响应
26
+
27
+ # 获取当前时间
28
+ now = datetime.now()
29
+ # 格式化时间为字符串
30
+ time_str = now.strftime('%Y-%m-%d %H:%M:%S')
31
+ ss.session["currentime"] = time_str
32
+
33
+
34
+ ss.space()
35
+
36
+ ss.write('''
37
+ ---
38
+ #### 🔎 代码
39
+ ''')
40
+
41
+ ss.md('''
42
+ ```python
43
+ import simplestart as ss
44
+
45
+ def onPageEnter():
46
+ ss.message("page enter event")
47
+
48
+ ```
49
+ ''')
locales/zh/pages/Advanced_Usage/demo_session.py ADDED
@@ -0,0 +1,134 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ '''
2
+ title: ss.session 页面会话变量
3
+ '''
4
+
5
+ import simplestart as ss
6
+
7
+ ss.md("## ss.session - 响应式会话变量")
8
+
9
+ ss.md("通过修改session变量，可以触发视图自动渲染")
10
+ ss.space()
11
+
12
+ ss.md('''
13
+ ---
14
+ #### 🔅 例1 - 基本使用
15
+ ''')
16
+
17
+
18
+ #in this page
19
+ ss.session["count"] = 100
20
+
21
+ mytext = ss.text("The couns is @count")
22
+
23
+
24
+ def change_count():
25
+ ss.session.count += 1
26
+
27
+ ss.button("Add Count", onclick=change_count)
28
+
29
+ ss.write('''
30
+ ---
31
+ #### 🔎 代码
32
+ ''')
33
+
34
+ ss.md('''
35
+ ```python
36
+ import simplestart as ss
37
+
38
+ ss.session["count"] = 100
39
+
40
+ mytext = ss.text("The couns is @count")
41
+
42
+
43
+ def change_count():
44
+ ss.session.count += 1
45
+
46
+ ss.button("Add Count", onclick=change_count)
47
+
48
+ ```
49
+ ''')
50
+
51
+ ss.space()
52
+
53
+ ss.md('''
54
+ ---
55
+ #### 🔅 例2 - 修改字典
56
+ ''')
57
+
58
+ student = {
59
+ "name":"Sam",
60
+ "age":18,
61
+ "gender":"Male",
62
+ "image":"",
63
+ "favorite": "Sport, movie"
64
+ }
65
+
66
+ ss.session.data = student
67
+
68
+ ss.markdown('''
69
+ ### Student Info
70
+ **Name:** @data.name
71
+ **Age:** @data.age
72
+ **Gender:** @data.gender
73
+ **Favorite:** @data.favorite
74
+ ''')
75
+
76
+ def change_student(event):
77
+ student = {
78
+ "name":"Jane",
79
+ "age":17,
80
+ "gender":"Female",
81
+ "favorite": "Music, painting"
82
+ }
83
+ ss.session.data = student
84
+
85
+ def change_info(event):
86
+ ss.session.data["name"] = "Sally"
87
+
88
+ ss.button("Change Student", onclick = change_student)
89
+ ss.button("Change Info", onclick = change_info)
90
+
91
+ ss.write('''
92
+ ---
93
+ #### 🔎 代码
94
+ ''')
95
+
96
+ ss.md('''
97
+ ```python
98
+ import simplestart as ss
99
+
100
+ student = {
101
+ "name":"Sam",
102
+ "age":18,
103
+ "gender":"Male",
104
+ "favorite": "Sport, movie"
105
+ }
106
+
107
+ ss.session.data = student
108
+
109
+ ss.markdown(\'''
110
+ ### Student Info
111
+ **Name:** \@data.name
112
+ **Age:** \@data.age
113
+ **Gender:** \@data.gender
114
+ **Favorite:** \@data.favorite
115
+ \''')
116
+
117
+ def change_student(event):
118
+ student = {
119
+ "name":"Jane",
120
+ "age":17,
121
+ "gender":"Female",
122
+ "image":"",
123
+ "favorite": "Music, painting"
124
+ }
125
+ ss.session.data = student
126
+
127
+ def change_info(event):
128
+ ss.session.data["name"] = "Sally"
129
+
130
+ ss.button("Change Student", onclick = change_student)
131
+ ss.button("Change Info", onclick = change_info)
132
+
133
+ ```
134
+ ''')
locales/zh/pages/Advanced_Usage/demo_template.py ADDED
@@ -0,0 +1,135 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ '''
2
+ title: ss.template 加载VUE模版
3
+ '''
4
+
5
+ import simplestart as ss
6
+
7
+
8
+ ss.md("## ss.template 加载VUE模版")
9
+
10
+ ss.space("mt-8")
11
+ ss.md('''
12
+ 在SimpleStart中，可以通过ss.template定义简单的vue组件, 实现属性和数据交互。
13
+
14
+ #### 函数
15
+ ss.template(src, path, data, handlers)
16
+
17
+ ##### 函数说明
18
+
19
+ | 参数 | 说明 |
20
+ | --- | --- |
21
+ | src | 字符串形式的组件脚本 |
22
+ | path | 外部文件的组件的原代码路径 |
23
+ | data | 用于实现前端组件和Python端的交互数据 |
24
+ | handlers | 在Python端实现前端组件定义的事件 |
25
+
26
+ ''')
27
+
28
+ ss.space("mt-8")
29
+
30
+ ss.md('''
31
+ ---
32
+ #### 示例1
33
+ 在这里例子中，我们定义一个简单的前端组件，组件里定义了一个"myclick"事件，当用户点击"Click me"按钮时，
34
+ Python端的myclick事件处理函数会处理，并且接受前端组件传递的数据。同时，当点击Python端的 "增加数字"
35
+ 按钮时，通过state变量改变前端的数值。
36
+
37
+ ''')
38
+
39
+
40
+ template = '''
41
+ <v-card
42
+ class="mx-auto text-white"
43
+ color="#26c6da"
44
+ max-width="400"
45
+ prepend-icon="mdi-twitter"
46
+ title="Twitter"
47
+ >
48
+ <template v-slot:prepend>
49
+ <v-icon size="x-large"></v-icon>
50
+ </template>
51
+
52
+ <v-card-text class="text-h6 py-2">
53
+ "SimpleStart is a easy way to build webpage and visualize data."
54
+ </v-card-text>
55
+
56
+ <v-card-actions>
57
+ <v-list-item class="w-100">
58
+ <template v-slot:prepend>
59
+ <v-avatar
60
+ color="grey-darken-3"
61
+ 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"
62
+ ></v-avatar>
63
+ </template>
64
+
65
+ <v-list-item-title>Evan You</v-list-item-title>
66
+
67
+ <v-list-item-subtitle>Data Science Engineer</v-list-item-subtitle>
68
+
69
+ <template v-slot:append>
70
+ <div class="justify-self-end">
71
+ <v-icon class="me-1" icon="mdi-heart" \@click="onserver('myclick')"></v-icon>
72
+ <span class="subheading me-2">{{data.vote}}</span>
73
+ <span class="me-1">·</span>
74
+ <v-icon class="me-1" icon="mdi-share-variant"></v-icon>
75
+ <span class="subheading">45</span>
76
+ </div>
77
+ </template>
78
+ </v-list-item>
79
+ </v-card-actions>
80
+ </v-card>
81
+ '''
82
+
83
+ def myclick(event):
84
+ mycard.vote = mycard.vote + 1
85
+
86
+ data = {"vote":256}
87
+ mycard = ss.template(template, data = data, handlers = {"myclick":myclick})
88
+
89
+ def increment(event):
90
+ mycard.vote = mycard.vote + 1
91
+ #mycard.style = "color:red"
92
+
93
+ ss.space()
94
+ ss.button("Thumb Up", onclick=increment)
95
+
96
+ ss.space("mt-8")
97
+
98
+ ss.write('''
99
+ ---
100
+ #### 代码
101
+ ''')
102
+
103
+ ss.md('''
104
+ ```python
105
+ import simplestart as ss
106
+
107
+ def myclick(event):
108
+ mycard.vote = mycard.vote + 1
109
+
110
+ data = {"vote":256}
111
+ mycard = ss.template(template, data = data, handlers = {"myclick":myclick})
112
+
113
+ def increment(event):
114
+ mycard.vote = mycard.vote + 1
115
+ #mycard.style = "color:red"
116
+
117
+ ss.space()
118
+ ss.button("Thumb Up", onclick=increment)
119
+ ```
120
+ ''')
121
+
122
+ ss.space("mt-8")
123
+
124
+
125
+ ss.md('''
126
+ ::: tip
127
+ 组件内对于data的变化如果需要传递到后端，需要显示地调用syncdata或者onserver事件。
128
+ 如上面例子中的 onchange="syncdata", 就是当用户改变了颜色后，将data的值传到python后端。
129
+ :::
130
+ ''')
131
+
132
+ def onPageEnter():
133
+ ss.session["counter"] = 0
134
+ ss.session["xxxx"] = 1
135
+
locales/zh/pages/Advanced_Usage/demo_when.py ADDED
@@ -0,0 +1,104 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ '''
2
+ title: ss.when 条件语句
3
+ '''
4
+
5
+ import simplestart as ss
6
+
7
+ ss.md('''
8
+ ## ss.when 条件语句
9
+ ''')
10
+
11
+ ss.space()
12
+ ss.md('''
13
+ #### 🔅 示例
14
+ ''')
15
+
16
+ #api
17
+ def increment(event):
18
+ ss.session["counter"] += 1
19
+
20
+ def decrement(event):
21
+ ss.session["counter"] -= 1
22
+
23
+
24
+ #conditional func
25
+ def conditioner(event):
26
+ #print("event", event)
27
+ if event["flag"] == 1:
28
+ if ss.session["counter"] >= 5:
29
+ return True
30
+ else:
31
+ return False
32
+ elif event["flag"] == 2:
33
+ return (ss.session["viewcode"] == 1)
34
+
35
+
36
+ # State initialisation
37
+ ss.session["counter"] = 0
38
+ ss.session["viewcode"] = 0
39
+
40
+ #ui
41
+ ss.text("The count is @counter.")
42
+
43
+ ss.button("Increment", onclick=increment)
44
+ ss.button("Decrement", onclick=decrement)
45
+
46
+ ss.write("当counter大于5时，下面将出现新的内容")
47
+
48
+ with ss.when(conditioner, flag = 1): # Conditional rendering
49
+ ss.text("Well done on reaching 5 👋🌷🍾")
50
+
51
+ ss.write("当counter小于5时，新的内容会隐藏")
52
+
53
+
54
+ ss.space()
55
+
56
+ ss.write("#### 🔎 代码")
57
+ ss.write("---")
58
+
59
+ def viewcode():
60
+ ss.session["viewcode"] = 1
61
+
62
+ ss.button("查看", size="small", onclick = viewcode)
63
+
64
+ with ss.when(conditioner, flag = 2):
65
+ ss.md('''
66
+ ```python
67
+ import simplestart as ss
68
+
69
+ #api
70
+ def increment(event):
71
+ ss.session["counter"] += 1
72
+
73
+ def decrement(event):
74
+ ss.session["counter"] -= 1
75
+
76
+
77
+ #conditional func
78
+ def conditioner(event):
79
+ return (ss.session["counter"] >= 5)
80
+
81
+ # State initialisation
82
+ ss.session["counter"] = 0
83
+ ss.session["viewcode"] = 0
84
+
85
+ #ui
86
+ ss.text("The count is @counter.")
87
+
88
+ ss.button("Increment", onclick=increment)
89
+ ss.button("Decrement", onclick=decrement)
90
+
91
+ ss.write("当counter大于5时，下面将出现新的内容")
92
+
93
+ with ss.when(conditioner, flag = 1): # Conditional rendering
94
+ ss.text("Well done on reaching 5 👋🌷🍾")
95
+
96
+ ss.write("当counter小于5时，新的内容会隐藏")
97
+ ```
98
+ ''')
99
+
100
+ ss.md('''
101
+ ::: tip
102
+ 上面的代码查看也是用ss.when实现的
103
+ :::
104
+ ''')
locales/zh/pages/Advanced_Usage/folder.yaml ADDED
@@ -0,0 +1,2 @@
 
 
 
1
+ alias: 高级用法
2
+ order_name: "005"
locales/zh/pages/Chart_Data/demo_bokeh.py ADDED
@@ -0,0 +1,132 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ '''
2
+ title: bokeh 演示
3
+ '''
4
+
5
+ import simplestart as ss
6
+
7
+ from bokeh.plotting import figure
8
+ from bokeh.models import ColumnDataSource
9
+ from bokeh.resources import CDN
10
+ from bokeh.embed import file_html
11
+ from sklearn.datasets import load_iris
12
+ import pandas as pd
13
+
14
+ # 加载 Iris 数据集
15
+ iris = load_iris()
16
+ df = pd.DataFrame(data=iris.data, columns=iris.feature_names)
17
+ df['species'] = iris.target
18
+ df['species'] = df['species'].map({0: 'setosa', 1: 'versicolor', 2: 'virginica'})
19
+
20
+
21
+ # 创建图形数据源和图形对象
22
+ source = ColumnDataSource(data=dict(
23
+ sepal_length=df['sepal length (cm)'],
24
+ sepal_width=df['sepal width (cm)'],
25
+ petal_length=df['petal length (cm)'],
26
+ petal_width=df['petal width (cm)'],
27
+ species=df['species']
28
+ ))
29
+
30
+ # 创建 Bokeh 图表
31
+ p = figure(title="Iris 数据集散点图", x_axis_label='花萼长度 (cm)', y_axis_label='花萼宽度 (cm)',
32
+ tools="pan,wheel_zoom,box_zoom,reset,hover,save", width = 800)
33
+
34
+ # 根据种类设置不同颜色
35
+ colors = {'setosa': 'blue', 'versicolor': 'green', 'virginica': 'red'}
36
+
37
+ for species, color in colors.items():
38
+ df_species = df[df['species'] == species]
39
+ source_species = ColumnDataSource(data=dict(
40
+ sepal_length=df_species['sepal length (cm)'],
41
+ sepal_width=df_species['sepal width (cm)']
42
+ ))
43
+ p.scatter('sepal_length', 'sepal_width', source=source_species, legend_label=species, color=color,
44
+ size=10, alpha=0.5)
45
+
46
+ p.legend.title = 'Species'
47
+ p.legend.location = 'top_left'
48
+
49
+ # 将 Bokeh 图形嵌入到 Streamlit
50
+ html = file_html(p, CDN, "Iris 数据集散点图")
51
+
52
+ #ui
53
+ ss.md('''
54
+ ## simplestart 图表演示 - bokeh
55
+ ''')
56
+
57
+ ss.space()
58
+ ss.md('''
59
+ #### 🔅 示例
60
+ 利用bokeh展示Iris数据的交互式散点图
61
+ ''')
62
+
63
+ ss.space()
64
+ ss.htmlview(html, border = False)
65
+
66
+ ss.space()
67
+ ss.write("#### 🔎 代码")
68
+
69
+ def viewcode():
70
+ ss.session["viewcode"] = 1
71
+
72
+ ss.session["viewcode"] = 0
73
+ ss.button("查看", size="small", onclick = viewcode)
74
+
75
+ def conditioner(event):
76
+ return (ss.session["viewcode"] == 1)
77
+
78
+ code = '''
79
+ ```python
80
+ import simplestart as ss
81
+
82
+ from bokeh.plotting import figure
83
+ from bokeh.models import ColumnDataSource
84
+ from bokeh.resources import CDN
85
+ from bokeh.embed import file_html
86
+ from sklearn.datasets import load_iris
87
+ import pandas as pd
88
+
89
+ # 加载 Iris 数据集
90
+ iris = load_iris()
91
+ df = pd.DataFrame(data=iris.data, columns=iris.feature_names)
92
+ df['species'] = iris.target
93
+ df['species'] = df['species'].map({0: 'setosa', 1: 'versicolor', 2: 'virginica'})
94
+
95
+
96
+ # 创建图形数据源和图形对象
97
+ source = ColumnDataSource(data=dict(
98
+ sepal_length=df['sepal length (cm)'],
99
+ sepal_width=df['sepal width (cm)'],
100
+ petal_length=df['petal length (cm)'],
101
+ petal_width=df['petal width (cm)'],
102
+ species=df['species']
103
+ ))
104
+
105
+ # 创建 Bokeh 图表
106
+ p = figure(title="Iris 数据集散点图", x_axis_label='花萼长度 (cm)', y_axis_label='花萼宽度 (cm)',
107
+ tools="pan,wheel_zoom,box_zoom,reset,hover,save", width = 800)
108
+
109
+ # 根据种类设置不同颜色
110
+ colors = {'setosa': 'blue', 'versicolor': 'green', 'virginica': 'red'}
111
+
112
+ for species, color in colors.items():
113
+ df_species = df[df['species'] == species]
114
+ source_species = ColumnDataSource(data=dict(
115
+ sepal_length=df_species['sepal length (cm)'],
116
+ sepal_width=df_species['sepal width (cm)']
117
+ ))
118
+ p.scatter('sepal_length', 'sepal_width', source=source_species, legend_label=species, color=color,
119
+ size=10, alpha=0.5)
120
+
121
+ p.legend.title = 'Species'
122
+ p.legend.location = 'top_left'
123
+
124
+ # 将 Bokeh 图形嵌入到 Streamlit
125
+ html = file_html(p, CDN, "Iris 数据集散点图")
126
+
127
+ #ui
128
+ ss.htmlview(html, border = False)
129
+ '''
130
+
131
+ with ss.when(conditioner):
132
+ ss.md(code)
locales/zh/pages/Chart_Data/demo_pyplot.py ADDED
@@ -0,0 +1,137 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ '''
2
+ title: pyplot 演示
3
+ '''
4
+
5
+ import streamsync as ss
6
+
7
+ import seaborn as sns
8
+ import matplotlib as mpl
9
+ #mpl.use("Agg") #很重要，否则在ss中会崩溃
10
+ import matplotlib.pyplot as plt
11
+
12
+
13
+ #下载不了，所以加一个参数data_home
14
+ data_home = "./data/seaborn"
15
+
16
+ ss.md('''
17
+ ## ss.pyplot 绘图
18
+ ''')
19
+
20
+
21
+ ss.space()
22
+ ss.md('''
23
+ #### 🔅 示例
24
+ ''')
25
+
26
+ ss.write("#### 1. 画折线图")
27
+
28
+ sns.set_style("whitegrid")
29
+ titanic = sns.load_dataset("titanic", data_home=data_home)
30
+ sns.lineplot(x="age", y="fare", hue="sex", data=titanic)
31
+ plt.show()
32
+
33
+ fig = plt.gcf()
34
+ ss.pyplot(fig, style="border:1px solid gray; width:600px")
35
+
36
+ ss.write("#### 2. 画散点图")
37
+
38
+ sns.set_style("whitegrid")
39
+ tips = sns.load_dataset("tips", data_home=data_home)
40
+ sns.scatterplot(x="total_bill", y="tip", data=tips)
41
+ plt.show()
42
+
43
+ fig = plt.gcf()
44
+ ss.pyplot(fig, style="border:1px solid gray; width:600px")
45
+
46
+ ss.write("#### 3. 画条形图")
47
+
48
+ sns.set_style("whitegrid")
49
+ titanic = sns.load_dataset("titanic",data_home=data_home)
50
+ sns.barplot(x="class", y="survived", data=titanic)
51
+ plt.show()
52
+
53
+ fig = plt.gcf()
54
+ ss.pyplot(fig, style="border:1px solid gray; width:600px")
55
+
56
+
57
+ ss.write("#### 4. 画直方图")
58
+ sns.set_style("whitegrid")
59
+ titanic = sns.load_dataset("titanic",data_home=data_home)
60
+ sns.histplot(x="age", data=titanic)
61
+ plt.show()
62
+
63
+ fig = plt.gcf()
64
+ ss.pyplot(fig, style="border:1px solid gray; width:600px")
65
+
66
+
67
+ ss.space()
68
+
69
+ ss.write("#### 🔎 代码")
70
+ ss.write("---")
71
+
72
+ def viewcode():
73
+ ss.session["viewcode"] = 1
74
+
75
+ ss.button("查看", size="small", onclick = viewcode)
76
+
77
+
78
+ def conditioner(event):
79
+ return ss.session["viewcode"] == 1
80
+
81
+ with ss.when(conditioner):
82
+ ss.md('''
83
+ ```python
84
+ import streamsync as ss
85
+
86
+ import seaborn as sns
87
+ import matplotlib as mpl
88
+ mpl.use("Agg") #很重要，否则在ss中会崩溃
89
+ import matplotlib.pyplot as plt
90
+
91
+
92
+ #下载不了，所以加一个参数data_home
93
+ data_home = "./data/seaborn"
94
+
95
+
96
+ ss.write("#### 1. 画折线图")
97
+
98
+ sns.set_style("whitegrid")
99
+ titanic = sns.load_dataset("titanic", data_home=data_home)
100
+ sns.lineplot(x="age", y="fare", hue="sex", data=titanic)
101
+ plt.show()
102
+
103
+ fig = plt.gcf()
104
+ ss.pyplot(fig, style="border:1px solid gray; width:600px")
105
+
106
+ ss.write("#### 2. 画散点图")
107
+
108
+ sns.set_style("whitegrid")
109
+ tips = sns.load_dataset("tips", data_home=data_home)
110
+ sns.scatterplot(x="total_bill", y="tip", data=tips)
111
+ plt.show()
112
+
113
+ fig = plt.gcf()
114
+ ss.pyplot(fig, style="border:1px solid gray; width:600px")
115
+
116
+ ss.write("#### 3. 画条形图")
117
+
118
+ sns.set_style("whitegrid")
119
+ titanic = sns.load_dataset("titanic",data_home=data_home)
120
+ sns.barplot(x="class", y="survived", data=titanic)
121
+ plt.show()
122
+
123
+ fig = plt.gcf()
124
+ ss.pyplot(fig, style="border:1px solid gray; width:600px")
125
+
126
+
127
+ ss.write("#### 4. 画直方图")
128
+ sns.set_style("whitegrid")
129
+ titanic = sns.load_dataset("titanic",data_home=data_home)
130
+ sns.histplot(x="age", data=titanic)
131
+ plt.show()
132
+
133
+ fig = plt.gcf()
134
+ ss.pyplot(fig, style="border:1px solid gray; width:600px")
135
+ ```
136
+ ''')
137
+
locales/zh/pages/Chart_Data/folder.yaml ADDED
@@ -0,0 +1,2 @@
 
 
 
1
+ alias: 图表数据
2
+ order_name: "003"
locales/zh/pages/Content_Display/demo_audio.py ADDED
@@ -0,0 +1,42 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ '''
2
+ title: Audio 音频播放
3
+ '''
4
+
5
+ import streamsync as ss
6
+
7
+ ss.md("## ss.audio 音频播放")
8
+
9
+
10
+ ss.space()
11
+ ss.md('''
12
+ #### 🔅 示例
13
+ ''')
14
+
15
+ ss.space()
16
+
17
+ audiosrc = "media/test.wav"
18
+ player = ss.audio(audiosrc)
19
+
20
+
21
+ ss.space("mt-8")
22
+
23
+ ss.write('''
24
+ ---
25
+ #### 🔎 代码
26
+ ''')
27
+
28
+ ss.md('''
29
+ ```python
30
+ import simplestart as ss
31
+
32
+ audiosrc = "media/davide_quatela--breathing_barcelona.mp3"
33
+ player = ss.audio(audiosrc)
34
+ ```
35
+ ''')
36
+
37
+
38
+ ss.md('''
39
+ ::: tip
40
+ ss.audio 支持音频格式包括 wav, mp3 等
41
+ :::
42
+ ''')
locales/zh/pages/Content_Display/demo_html.py ADDED
@@ -0,0 +1,52 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ '''
2
+ title: Html 超文本
3
+ '''
4
+
5
+ import streamsync as ss
6
+
7
+
8
+ ss.md("## ss.html 超文本")
9
+
10
+ ss.space("")
11
+
12
+ ss.md('''
13
+ #### 🔅 示例
14
+ ''')
15
+
16
+
17
+ ss.md("### html")
18
+
19
+ ss.html(f"""
20
+ <p>This is a piece of rich text content, which contains <strong>bold</strong> and <em>italic</em> text.</p>
21
+ <style>
22
+ .testclass{{
23
+ color:red;
24
+ font-weight:bold;
25
+ }}
26
+ </style>
27
+ <div class="testclass">this is red</div>
28
+ """)
29
+
30
+ ss.space("mt-8")
31
+
32
+ ss.write('''
33
+ ---
34
+ #### 🔎 代码
35
+ ''')
36
+
37
+ ss.md('''
38
+ ```python
39
+ import simplestart as ss
40
+
41
+ ss.html(f"""
42
+ <p>This is a piece of rich text content, which contains <strong>bold</strong> and <em>italic</em> text.</p>
43
+ <style>
44
+ .testclass{{
45
+ color:red;
46
+ font-weight:bold;
47
+ }}
48
+ </style>
49
+ <div class="testclass">this is red</div>
50
+ """)
51
+ ```
52
+ ''')
locales/zh/pages/Content_Display/demo_image.py ADDED
@@ -0,0 +1,95 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ '''
2
+ title: Image 图像
3
+ '''
4
+
5
+ import simplestart as ss
6
+
7
+ import cv2
8
+ from PIL import Image
9
+ import os
10
+
11
+ ss.md("## ss.image 图像")
12
+
13
+ ss.md('''
14
+ #### 🔅 示例
15
+ ''')
16
+
17
+ ss.space()
18
+
19
+ style = "width:200px;height:200px;margin:10px"
20
+ img = "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
21
+
22
+ cols = ss.columns([60,"flex:40"], border=True)
23
+ with cols[0]:
24
+ mytext = ss.text("This is image")
25
+ ss.space()
26
+ myimg = ss.image(img, style=style, fit="contain")
27
+ ss.text("Image fit mode: fill")
28
+
29
+ def onradiochange(event):
30
+ #ss.message(event.value)
31
+ ss.session["fit_str"] = event.value
32
+ ss.getcm().components[myimg.id]["content"]["options"]["fit"] = event.value
33
+ myimg.update()
34
+
35
+ def onradiochange2(event):
36
+ value = event.value
37
+ index = event.index
38
+
39
+
40
+ source = ["Http", "PIL", "OpenCV", "Local"]
41
+ ss.session["source_str"] = source[index]
42
+
43
+
44
+ if index == 0:
45
+ img = "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
46
+ ss.session["image_path"] = "\"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg\""
47
+ myimg.image = img
48
+ if index == 1:
49
+ image = Image.open('./media/image/dalao.jpeg')
50
+ ss.session["image_path"] = "Image.open('./media/image/dalao.jpeg')"
51
+ myimg.image = image
52
+ if index == 2:
53
+ img = cv2.imread('./media/image/cat.jpeg',cv2.IMREAD_COLOR)
54
+ ss.session["image_path"] = "cv2.imread('./media/image/cat.jpeg',cv2.IMREAD_COLOR)"
55
+ myimg.image = img
56
+ if index == 3:
57
+ file_path = './media/image/dog.jpeg'
58
+ ss.session["image_path"] = "'./media/image/dog.jpeg'"
59
+ myimg.image = file_path
60
+
61
+ myimg.update()
62
+
63
+
64
+ with cols[1]:
65
+ ss.text("image fit mode")
66
+ ss.radio(["fill", "contain", "cover", "none", "scale-down"], index = 1, inline = True, onchange=onradiochange)
67
+ ss.space()
68
+ ss.text("image source")
69
+ ss.radio(["Http image","PIL image", "OpenCV image", "Local image"], index = 0, inline = True, onchange=onradiochange2)
70
+
71
+ ss.space()
72
+
73
+ ss.write('''
74
+ #### 🔎 代码
75
+ ''')
76
+
77
+ ss.md('''
78
+ ```python
79
+ import simplestart as ss
80
+ import cv2
81
+ from PIL import Image
82
+
83
+ style = "width:100px; height:100px; margin:10px"
84
+ img = "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
85
+ ss.image(img, style=style, fit="fill")
86
+ ```
87
+ ''')
88
+
89
+
90
+
91
+ def onPageLoad():
92
+ ss.session["info"] = "x"
93
+ ss.session["fit_str"] = "fill"
94
+ ss.session["source_str"] = "Http"
95
+ ss.session["image_path"] = "\"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg\""
locales/zh/pages/Content_Display/demo_markdown.py ADDED
@@ -0,0 +1,60 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ '''
2
+ title: Markdown 文本
3
+ '''
4
+
5
+ import simplestart as ss
6
+
7
+ ss.md("## ss.markdown md文本")
8
+
9
+ ss.space()
10
+
11
+ ss.md('''
12
+ #### 🔅 示例
13
+ ''')
14
+
15
+ ss.space()
16
+
17
+ ss.markdown("- 19^th^")
18
+ ss.markdown("# 一级标题")
19
+ ss.markdown("## 二级标题")
20
+ ss.markdown("### 三级标题")
21
+
22
+ #水平分割线
23
+ ss.markdown("---")
24
+
25
+ ss.markdown('''
26
+ - list item1
27
+ - list item2
28
+ - list item3
29
+ ''')
30
+
31
+ ss.markdown(":smile:")
32
+
33
+
34
+
35
+ ss.space("mt-8")
36
+
37
+ ss.write('''
38
+ ---
39
+ #### 🔎 代码
40
+ ''')
41
+
42
+ ss.md('''
43
+ ```python
44
+ import simplestart as ss
45
+
46
+ ss.markdown("# 一级标题")
47
+ ss.markdown("## 二级标题")
48
+ ss.markdown("### 三级标题")
49
+
50
+ #水平分割线
51
+ ss.markdown("---")
52
+
53
+ ss.markdown(\'''
54
+ - list item1
55
+ - list item2
56
+ - list item3
57
+ \''')
58
+
59
+ ```
60
+ ''')
locales/zh/pages/Content_Display/demo_message.py ADDED
@@ -0,0 +1,40 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ '''
2
+ title: Message 消息提示
3
+ '''
4
+
5
+ import simplestart as ss
6
+
7
+ ss.md("## ss.message 弹出消息")
8
+
9
+ ss.space()
10
+
11
+
12
+ ss.md('''
13
+ #### 🔅 示例
14
+ ''')
15
+ ss.space()
16
+
17
+
18
+ def showmsg():
19
+ ss.message("Hello, world")
20
+
21
+ showmsg()
22
+ ss.button("message", onclick=showmsg)
23
+
24
+
25
+ ss.space("mt-8")
26
+
27
+ ss.write('''
28
+ ---
29
+ #### 🔎 代码
30
+ ''')
31
+
32
+ ss.md('''
33
+ ```python
34
+ import simplestart as ss
35
+
36
+ def showmsg():
37
+ ss.message("Hello, the world")
38
+
39
+ ```
40
+ ''')
locales/zh/pages/Content_Display/demo_sqlite.py.txt ADDED
@@ -0,0 +1,42 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ '''
2
+ title: Sqlite 数据库
3
+ '''
4
+
5
+ import simplestart as ss
6
+
7
+ ss.md("## ss.sqlite 数据库")
8
+
9
+ ss.space()
10
+ ss.md('''
11
+ 提供 sqlite 数据库的简单操作
12
+ ''')
13
+
14
+ ss.space()
15
+ ss.md('''
16
+ #### 🔅 示例
17
+ ''')
18
+
19
+ ss.md('''
20
+ ::: tip
21
+ 这个例子从sqlite数据库里读取鸢尾花数据集，并以csv表格的方式展示。
22
+ 关于sqlite的管理，simplestart提供了一简单的内置工具，可以进行简单的增、删、改操作。
23
+ :::
24
+ ''')
25
+
26
+ sql = ss.sqlite("./data/ss_data.db")
27
+ df = sql.pd_query("select * from iris")
28
+
29
+ mytable = ss.table(df, editable = True)###, handlers={"current-change":current_change, "selection-change":selection_change})
30
+
31
+ ss.space()
32
+ ss.write("#### 代码")
33
+
34
+ ss.md('''
35
+ ```python
36
+ import simplestart as ss
37
+
38
+ sql = ss.sqlite("./data/ss_data.db")
39
+ data = sql.pd_query("select * from HousingData")
40
+ ss.write(data)
41
+ ```
42
+ ''')
locales/zh/pages/Content_Display/demo_table.py ADDED
@@ -0,0 +1,255 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ '''
2
+ title: Table 表格
3
+ '''
4
+
5
+ import simplestart as ss
6
+ import pandas as pd
7
+
8
+ ss.md("## ss.table 表格数据")
9
+
10
+ ss.md("以表格方式显示数据")
11
+
12
+ ss.space()
13
+
14
+ ss.md('''
15
+ #### 🔅 示例
16
+ ''')
17
+
18
+ '''
19
+ 这里mytable.update会引起前端重新获取getcontent, 包括数据。真实情况不是这样，用户只能在初始时改变参数，所以不会造成频繁获取数据
20
+ '''
21
+ def onchange_index(event):
22
+ value = event.value
23
+
24
+ if value == True:
25
+ ss.getcm().components[mytable.id]["content"]["index"] = True
26
+ ss.session["showIndex"] = ', index = True'
27
+ else:
28
+ ss.getcm().components[mytable.id]["content"]["index"] = False
29
+ ss.session["showIndex"] = ''
30
+ mytable.update()
31
+
32
+ def onchange_border(event):
33
+ value = event.value
34
+
35
+ if value == True:
36
+ ss.getcm().components[mytable.id]["content"]["border"] = True
37
+ ss.session["showBorder"] = ', border = True'
38
+ else:
39
+ ss.getcm().components[mytable.id]["content"]["border"] = False
40
+ ss.session["showBorder"] = ''
41
+ mytable.update()
42
+
43
+
44
+ def onchange_sortable(event):
45
+ value = event.value
46
+
47
+ if value == True:
48
+ ss.getcm().components[mytable.id]["content"]["sortable"] = True
49
+ ss.session["sortable"] = ', sortable = True'
50
+ else:
51
+ ss.getcm().components[mytable.id]["content"]["sortable"] = False
52
+ ss.session["sortable"] = ''
53
+ mytable.update()
54
+
55
+ def onchange_searchable(event):
56
+ value = event.value
57
+
58
+ if value == True:
59
+ ss.getcm().components[mytable.id]["content"]["searchable"] = True
60
+ ss.session["searchable"] = ', searchable = True'
61
+ else:
62
+ ss.getcm().components[mytable.id]["content"]["searchable"] = False
63
+ ss.session["searchable"] = ''
64
+ mytable.update()
65
+
66
+
67
+ def onchange_selectable(event):
68
+ value = event.value
69
+
70
+ if value == True:
71
+ ss.getcm().components[mytable.id]["content"]["selectable"] = True
72
+ ss.session["selectable"] = ', selectable = True'
73
+ else:
74
+ ss.getcm().components[mytable.id]["content"]["selectable"] = False
75
+ ss.session["selectable"] = ''
76
+ mytable.update()
77
+
78
+ def onchange_editable(event):
79
+ value = event.value
80
+
81
+ if value == True:
82
+ ss.getcm().components[mytable.id]["content"]["editable"] = True
83
+ ss.session["editable"] = ', editable = True'
84
+ else:
85
+ ss.getcm().components[mytable.id]["content"]["editable"] = False
86
+ ss.session["editable"] = ''
87
+ mytable.update()
88
+
89
+
90
+ def current_change(state, value):
91
+ ss.session["row_selected"] = value["index"]
92
+
93
+ def selection_change(state, value):
94
+ ss.session["selection_change"] = value["selected"]
95
+
96
+
97
+ # 创建一个包含三列的数据集
98
+ data = {'name': ['👧🏻 Alice', '👦🏻 Bob', '👦🏻 Charlie'],
99
+ 'age': [25, 30, 35],
100
+ 'city': ['New York', 'San Francisco', 'Los Angeles'],
101
+ 'health':[90,80,90]
102
+ }
103
+
104
+ df = pd.DataFrame(data)
105
+
106
+ def rowclicked(event):
107
+ #ss.message("row clicked")
108
+ #ss.write("event", event)
109
+ ss.session["itemname"] = event.value["name"]
110
+
111
+
112
+ cols = ss.columns([70,"flex:30; border-left:1px solid lightgray"], design=True, style="border:1px solid lightgray")
113
+ with cols[0]:
114
+ mytable = ss.table(df, handlers={"click:row": rowclicked})
115
+ ss.md("#### Events")
116
+ ss.write("Row clicked: @itemname")
117
+
118
+
119
+ with cols[1]:
120
+ ss.text("setting")
121
+ ss.checkbox("索引", onchange = onchange_index)
122
+ ss.space()
123
+ ss.checkbox("边框", onchange = onchange_border)
124
+ ss.space()
125
+ ss.checkbox("排序", onchange = onchange_sortable)
126
+ ss.space()
127
+ ss.checkbox("选择", onchange = onchange_selectable)
128
+ ss.space()
129
+ ss.checkbox("搜索", onchange = onchange_searchable)
130
+ ss.space()
131
+ ss.checkbox("编辑", onchange = onchange_editable)
132
+
133
+ ss.space("mt-8")
134
+
135
+ ss.write('''
136
+ ---
137
+ #### 🔎 代码
138
+ ''')
139
+
140
+ ss.md('''
141
+ ```python
142
+ import simplestart as ss
143
+
144
+ def current_change(state, value):
145
+ ss.session["row_selected"] = value["index"]
146
+
147
+ def selection_change(state, value):
148
+ ss.session["selection_change"] = value["selected"]
149
+
150
+ data = {'name': ['Alice', 'Bob', 'Charlie'],
151
+ 'age': [25, 30, 35],
152
+ 'city': ['New York', 'San Francisco', 'Los Angeles']}
153
+ df = pd.DataFrame(data)
154
+
155
+ ss.table(df, handlers={\"current-change\":current_change, \"selection-change\":selection_change})
156
+ ss.md(\"#### Events\")
157
+ ss.write(\"Row selected: \")
158
+ ss.write(\"Selection changed: \")
159
+
160
+ def onPageLoad():
161
+ ss.session["row_selected"] = ''
162
+ ss.session["selection_change"] = ''
163
+
164
+ ```
165
+ ''')
166
+
167
+
168
+ ss.md('''
169
+ ---
170
+ #### 🔅 示例 - 自定义列
171
+ ''')
172
+
173
+
174
+ data = {'name': ['👧🏻 Alice', '👦🏻 Bob', '👦🏻 Charlie'],
175
+ 'age': [25, 30, 35],
176
+ 'city': [':sunny: New York', ':cloud: San Francisco', ':sunny: Los Angeles'],
177
+ 'health':[90,80,90]
178
+ }
179
+
180
+ df = pd.DataFrame(data)
181
+
182
+ cols = ss.columns([70,"flex:30; border-left:1px solid lightgray"], design=True, style="border:1px solid lightgray")
183
+
184
+
185
+ vuecode = '''
186
+ <template>
187
+ <v-clip>123</v-clip>
188
+ </template>
189
+ '''
190
+
191
+ vuecode = "../components/mycell.vue"
192
+
193
+ #mytable_ex = ss.table(df, custom_columns = ["city"], custom_columns_template = vuestr)
194
+ with cols[0]:
195
+ mytable_ex = ss.table(df, custom_columns = ["city"], vue_columns = ["health"], vue_code = vuecode)
196
+ with cols[1]:
197
+ ss.write("每一列可以定制显示")
198
+
199
+ ss.space("mt-8")
200
+
201
+ ss.write('''
202
+ ---
203
+ #### 🔎 代码
204
+ ''')
205
+
206
+ ss.md('''
207
+ ```python
208
+ import simplestart as ss
209
+
210
+ data = {'name': ['👧🏻 Alice', '👦🏻 Bob', '👦🏻 Charlie'],
211
+ 'age': [25, 30, 35],
212
+ 'city': [':sunny: New York', ':cloud: San Francisco', ':sunny: Los Angeles'],
213
+ 'health':[90,80,90]
214
+ }
215
+ df = pd.DataFrame(data)
216
+
217
+ vuestr = \'''
218
+ <template>
219
+ <v-row>
220
+ <v-rating
221
+ v-model="rating" density="compact" color="orange" half-increments></v-rating>
222
+ <v-chip variant="text">{{item.value}}</v-chip>
223
+ </v-row>
224
+ </template>
225
+
226
+ <script>
227
+
228
+ module.exports = {
229
+ props:["item"],
230
+
231
+ data () {
232
+ return {
233
+ rating: 3
234
+ }
235
+ },
236
+ methods: {
237
+ //todo
238
+ },
239
+ mounted: function () {
240
+ this.rating = this.item.value/20
241
+ },
242
+ }
243
+ </script>
244
+ \'''
245
+
246
+ ss.table(df, custom_columns = ["city"], vue_columns = ["health"], vue_code = vuecode)
247
+ ```
248
+ ''')
249
+
250
+ def onPageLoad():
251
+ ss.session["show_border"] = ''
252
+ ss.session["selectable"] = ''
253
+ ss.session["sortable"] = ''
254
+ ss.session["row_selected"] = ''
255
+ ss.session["selection_change"] = ''
locales/zh/pages/Content_Display/demo_text.py ADDED
@@ -0,0 +1,38 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ '''
2
+ title: Text 文本
3
+ '''
4
+
5
+ import streamsync as ss
6
+
7
+ ss.md("## ss.text 文本")
8
+ ss.md("支持style参数")
9
+
10
+
11
+ ss.space()
12
+ ss.space()
13
+ ss.md('''
14
+ #### 🔅 示例
15
+ ''')
16
+
17
+ ss.md("---")
18
+
19
+ #基本用法
20
+ test = ss.text("hello, world")
21
+
22
+ #改变颜色
23
+ ss.text("This is a red string", style="color:red")
24
+
25
+ ss.space()
26
+ ss.write("#### 🔎 代码")
27
+
28
+ ss.md('''
29
+ ```python
30
+ import simplestart as ss
31
+
32
+ #基本用法
33
+ test = ss.text("hello, world")
34
+
35
+ #改变颜色
36
+ ss.text("This is a red string", style="color:red")
37
+ ```
38
+ ''')
locales/zh/pages/Content_Display/demo_video.py ADDED
@@ -0,0 +1,39 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ '''
2
+ title: Video 视频播放
3
+ '''
4
+
5
+ import streamsync as ss
6
+
7
+ ss.md("## ss.video 视频播放")
8
+
9
+ ss.md("支持播放mp4等格式的视频")
10
+
11
+ ss.md('''
12
+ #### 🔅 示例
13
+ ''')
14
+
15
+ src = "https://media.w3.org/2010/05/sintel/trailer.mp4"
16
+
17
+ player = ss.video(src, style="width:50%")
18
+
19
+ ss.text("来源: https://media.w3.org/2010/05/sintel/trailer.mp4", style="color:gray")
20
+
21
+ ss.space("mt-8")
22
+
23
+ ss.write('''
24
+ ---
25
+ #### 🔎 代码
26
+ ''')
27
+
28
+ ss.md('''
29
+ ```python
30
+ import simplestart as ss
31
+
32
+ src = "https://media.w3.org/2010/05/sintel/trailer.mp4"
33
+
34
+ player = ss.video(src, style="width:100%; max-width:640px")
35
+
36
+ #修改视频地址
37
+ #player.src = "..."
38
+ ```
39
+ ''')
locales/zh/pages/Content_Display/demo_write.py ADDED
@@ -0,0 +1,80 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ '''
2
+ title: Write 输出数据
3
+ '''
4
+
5
+ import streamsync as ss
6
+ import pandas as pd
7
+
8
+ ss.md("## ss.write 输出")
9
+
10
+ ss.md("ss.write 类似于print，可以输出文本，列表和其它类型，方便测试和输出")
11
+
12
+ ss.space()
13
+
14
+ ss.md('''
15
+ #### 🔅 示例
16
+ ''')
17
+
18
+
19
+ ss.md("#### 1. 输出文本")
20
+ ss.write("This is a text")
21
+
22
+ ss.md('''
23
+ ```python
24
+ ss.write("This is a text")
25
+ ```
26
+ ''')
27
+
28
+ ss.md("#### 2. 输出多个变量")
29
+ a = "aaa"
30
+ b = "bbb"
31
+ ss.write(a, ",", b)
32
+
33
+ ss.md('''
34
+ ```python
35
+ a = "aaa"
36
+ b = "bbb"
37
+ ss.write(a, ",", b)
38
+ ```
39
+ ''')
40
+
41
+ ss.md("#### 3. 输出列表")
42
+ data = ["aaa", "bbb", "ccc"]
43
+ ss.write(data)
44
+
45
+ data = {"aaa":1, "bbb":2, "ccc":3}
46
+ ss.write(data)
47
+
48
+ ss.md('''
49
+ ```python
50
+ data = ["aaa", "bbb", "ccc"]
51
+ ss.write(data)
52
+
53
+ data = {"aaa":1, "bbb":2, "ccc":3}
54
+ ss.write(data)
55
+ ```
56
+ ''')
57
+
58
+
59
+ ss.md("#### 4. 输出表格")
60
+ # 创建数据
61
+ data = {'name': ['Alice', 'Bob', 'Charlie', 'David'],
62
+ 'age': [25, 30, 35, 40],
63
+ 'city': ['New York', 'Paris', 'London', 'Sydney']}
64
+
65
+ # 将数据转换为 DataFrame 格式
66
+ df = pd.DataFrame(data)
67
+ ss.write(df)
68
+
69
+ ss.md('''
70
+ ```python
71
+ # 创建数据
72
+ data = {'name': ['Alice', 'Bob', 'Charlie', 'David'],
73
+ 'age': [25, 30, 35, 40],
74
+ 'city': ['New York', 'Paris', 'London', 'Sydney']}
75
+
76
+ # 将数据转换为 DataFrame 格式
77
+ df = pd.DataFrame(data)
78
+ ss.write(df)
79
+ ```
80
+ ''')
locales/zh/pages/Content_Display/folder.yaml ADDED
@@ -0,0 +1,2 @@
 
 
 
1
+ alias: 数据展示
2
+ order_name: "002"
locales/zh/pages/Form_Component/demo_button.py ADDED
@@ -0,0 +1,138 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ '''
2
+ title: Button 按钮
3
+ '''
4
+
5
+ import simplestart as ss
6
+
7
+ ss.md('''
8
+ ## ss.button 按钮
9
+ ''')
10
+ ss.md('''
11
+ [在线帮助](https://www.simplestart.cc/zh/doc_form/ss-button.html)
12
+ ''')
13
+ ss.space()
14
+ ss.md('''
15
+ #### 🔅 示例
16
+ ''')
17
+
18
+ #自定义函数
19
+ def myclick():
20
+ mytext.text = "You clicked "
21
+
22
+ def reset():
23
+ mytext.text = "This is button"
24
+ but1.type = ""
25
+ ss.getcm().components[but1.id]["content"]["options"]["icon"] = ""
26
+ ss.getcm().components[but1.id]["content"]["options"]["endicon"] = ""
27
+ ss.getcm().components[but1.id]["content"]["options"]["icon_color"] = "mediumseagreen"
28
+ ss.getcm().components[but1.id]["content"]["options"]["style"] = "background-color:initial;color:initial"
29
+ ss.session["iconstr"] = ''
30
+ ss.session["style_str"] = ''
31
+ ss.session["style"] = ''
32
+
33
+
34
+ #基本用法
35
+ cols = ss.columns([40,"flex:60"], design=True)
36
+ with cols[0]:
37
+ mytext = ss.text("This is button")
38
+ but1 = ss.button("Click it", icon = "mdi-account-circle", onclick=myclick)
39
+
40
+ def onradiochange(event):
41
+ value = event.value
42
+ if value == "default":
43
+ but1.type = ""
44
+ ss.session["buttonstyle"] = ""
45
+ elif value == "outlined":
46
+ but1.type = "outlined"
47
+ ss.session["buttonstyle"] = 'type = "outlined\",'
48
+ elif value == "flat":
49
+ but1.type = "tonal"
50
+ ss.session["buttonstyle"] = 'type = "flat\",'
51
+ elif value == "text":
52
+ but1.type = "text"
53
+ ss.session["buttonstyle"] = 'type = "text\",'
54
+ elif value == "plain":
55
+ but1.type = "plain"
56
+ ss.session["buttonstyle"] = 'type = "plain\",'
57
+
58
+ def oncheckbox_change(state, value):
59
+ if value == True:
60
+ ss.getcm().components[but1.id]["content"]["options"]["icon"] = "aim"
61
+ ss.session["iconstr"] = ' icon="search",'
62
+ else:
63
+ ss.getcm().components[but1.id]["content"]["options"]["icon"] = ""
64
+ ss.session["iconstr"] = ''
65
+ but1.update()
66
+
67
+ def onradiochange2(event):
68
+ index = event.index
69
+
70
+ if index == 0:
71
+ ss.getcm().components[but1.id]["content"]["options"]["icon"] = "mdi-account-circle"
72
+ ss.getcm().components[but1.id]["content"]["options"]["endIcon"] = ""
73
+ ss.session["iconstr"] = ' icon="mdi-account-circle",'
74
+ elif index == 1:
75
+ ss.getcm().components[but1.id]["content"]["options"]["icon"] = ""
76
+ ss.getcm().components[but1.id]["content"]["options"]["endIcon"] = "mdi-alert"
77
+ ss.session["iconstr"] = ' endIcon="mdi-alert",'
78
+ else:
79
+ ss.getcm().components[but1.id]["content"]["options"]["icon"] = ""
80
+ ss.getcm().components[but1.id]["content"]["options"]["endIcon"] = ""
81
+ ss.session["iconstr"] = ''
82
+ but1.update()
83
+
84
+
85
+ def changeColor(bkcolor):
86
+ ss.getcm().components[but1.id]["content"]["options"]["style"] = f"background-color:{bkcolor}; color:white"
87
+ ss.getcm().components[but1.id]["content"]["options"]["icon_color"] = "white"
88
+ ss.session["style_str"] = f'style="background-color:{bkcolor}, color:white"'
89
+ ss.session["style"] = 'style=style,'
90
+ but1.update()
91
+
92
+
93
+ with cols[1]:
94
+ ss.text("按钮属性")
95
+
96
+ ss.write("---")
97
+ ss.radio(["default", "outlined", "flat", "text", "plain"], "default", inline = True, onchange=onradiochange)
98
+
99
+ ss.write("---")
100
+ ss.radio(["图标(前)", "图标(后)", "无图标"], inline = True, onchange=onradiochange2)
101
+
102
+ ss.checkbox("disabled")
103
+
104
+ ss.write("---")
105
+ ss.button("", type = "flat", size = "small", style="background-color:#409eff", onclick=lambda:changeColor('#409eff'))
106
+ ss.button("", type = "flat", size = "small", style="background-color:#67c23a", onclick=lambda:changeColor('#67c23a'))
107
+ ss.button("", type = "flat", size = "small", style="background-color:#e6a23c", onclick=lambda:changeColor('#e6a23c'))
108
+ ss.button("", type = "flat", size = "small", style="background-color:#f56c6c", onclick=lambda:changeColor('#f56c6c'))
109
+ ss.button("", type = "flat", size = "small", style="background-color:#909399", onclick=lambda:changeColor('#909399'))
110
+
111
+
112
+ ss.space()
113
+ ss.button("重置", onclick=reset)
114
+
115
+
116
+ ss.space("mt-8")
117
+
118
+ ss.write("#### 🔎 代码")
119
+
120
+ ss.md('''
121
+ ```python
122
+ import simplestart as ss
123
+
124
+ def clickme():
125
+ mytext.text = "You clicked"
126
+
127
+ mytext = ss.text("This is button")
128
+ @style_str
129
+ ss.button("Click it", @buttonstyle @iconstr @style onclick=clickme)
130
+ ```
131
+ ''')
132
+
133
+
134
+ def onPageLoad():
135
+ ss.session["buttonstyle"] = ""
136
+ ss.session["iconstr"] = ""
137
+ ss.session["style"] = ""
138
+ ss.session["style_str"] = ""
locales/zh/pages/Form_Component/demo_checkbox.py ADDED
@@ -0,0 +1,90 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ '''
2
+ title: Checkbox 多选框
3
+ '''
4
+
5
+ import simplestart as ss
6
+
7
+ ss.write("### ss.checkbox")
8
+
9
+ def onchange(event):
10
+ ss.session["checked_value"] = event.value
11
+
12
+
13
+ ss.md('''
14
+ ---
15
+ #### 🔅 示例1
16
+ ''')
17
+
18
+ ss.md("onchange: @checked_value")
19
+
20
+ ss.checkbox("checkme", onchange = onchange)
21
+ ss.checkbox("initially checked", checked = True, onchange = onchange)
22
+
23
+
24
+ ss.write('''
25
+ ---
26
+ #### 🔎 代码
27
+ ''')
28
+
29
+ ss.md('''
30
+ ```python
31
+ import simplestart as ss
32
+
33
+ def onchange(state, value):
34
+ state["checked_value"] = value
35
+
36
+ #ui
37
+ ss.md("onchange: @checked_value")
38
+
39
+ ss.checkbox("checkme", onchange = onchange)
40
+ ss.checkbox("initially checked", checked = True, onchange = onchange)
41
+
42
+
43
+ ''')
44
+
45
+ ss.space()
46
+ ss.md('''
47
+ ---
48
+ #### 🔅 示例2
49
+ 获取 checkbox 的状态
50
+ ''')
51
+
52
+ mycheck = ss.checkbox("check me", onchange = onchange)
53
+
54
+ def myclick():
55
+ ss.message(mycheck.value)
56
+
57
+ ss.button("获取状态", onclick = myclick)
58
+
59
+ ss.space()
60
+ ss.write('''
61
+ ---
62
+ #### 🔎 代码
63
+ ''')
64
+
65
+ ss.md('''
66
+ ```python
67
+ import simplestart as ss
68
+
69
+ mycheck = ss.checkbox("check me", onchange = onchange)
70
+
71
+ def myclick():
72
+ ss.message(mycheck.value)
73
+
74
+ ss.button("获取状态", onclick = myclick)
75
+
76
+ ''')
77
+
78
+ def onPageLoad():
79
+ ss.session["checked_value"] = ""
80
+
81
+
82
+ def testme(event):
83
+ ss.write(event.tag)
84
+
85
+ check1 = ss.checkbox("test", onchange=testme, eventTag = "sdfsdf")
86
+ check1.checked = True
87
+ check1.label = "aaa"
88
+ #check1.disabled = True
89
+ check1.eventTag = "zzz"
90
+ check1.color = "red"
locales/zh/pages/Form_Component/demo_dialog.py ADDED
@@ -0,0 +1,156 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ '''
2
+ title: Dialog 对话框
3
+ '''
4
+
5
+ import simplestart as ss
6
+
7
+ ss.md("## ss.dialog 对话框")
8
+
9
+ ss.space()
10
+
11
+ ss.md('''
12
+ ---
13
+ #### 🔅 示例
14
+ ''')
15
+
16
+ def testme():
17
+ ss.message("testme")
18
+
19
+ def showit():
20
+ if ss.session["str_fullscreen"] != "":
21
+ dialog.show(fullscreen = True)
22
+ else:
23
+ dialog.show()
24
+
25
+ def myclose(event):
26
+ ss.message("dialog close with result " + event.value)
27
+
28
+ dialog = ss.dialog("对话框标题", onclose=myclose)
29
+ with dialog:
30
+ ss.text("SimpleStart dialog demostration")
31
+ ss.md("---")
32
+ ss.button("testme", onclick=testme)
33
+ ss.md(":smile:")
34
+
35
+ cols = ss.columns([60,"flex:40; border-left:1px solid lightgray"], border=True, style="border:1px solid lightgray")
36
+ with cols[0]:
37
+ mytext = ss.text("This is dialog")
38
+ ss.button("show dialog", onclick=showit)
39
+
40
+ def mycheck(event):
41
+ if event.value == True:
42
+ ss.session["str_fullscreen"] = "fullscreen = True"
43
+ #dialog.show(fullscreen = True)
44
+ else:
45
+ ss.session["str_fullscreen"] = ""
46
+
47
+ with cols[1]:
48
+ ss.text("对话框选项")
49
+ ss.checkbox("全屏", onchange=mycheck)
50
+
51
+ ss.space()
52
+ ss.write('''
53
+ ---
54
+ #### 🔎 代码
55
+ ''')
56
+
57
+ ss.md('''
58
+ ```python
59
+ import simplestart as ss
60
+
61
+ def myclose(event):
62
+ ss.message("dialog close with result " + event.value)
63
+
64
+ dialog = ss.dialog(title="对话框标题", onclose=myclose)
65
+ with dialog:
66
+ ss.text("Opening from the bottom")
67
+ ss.md("---")
68
+ ss.button("testme", onclick=testme)
69
+ ss.md(":smile:")
70
+
71
+ def showit():
72
+ dialog.show(@str_fullscreen)
73
+
74
+ ss.button("show dialog", onclick=showit)
75
+ ```
76
+ ''')
77
+
78
+ def onPageEnter():
79
+ ss.session["str_fullscreen"] = ""
80
+
81
+
82
+ ss.write("---")
83
+ ss.write("其它类型对话框")
84
+
85
+ ss.md("### ss.alert 警告对话框")
86
+
87
+ def show_alert():
88
+ ss.alert("Title", "The file will not be saved")
89
+ ss.button("alert", onclick=show_alert)
90
+
91
+ ss.md('''
92
+ ```python
93
+ import simplestart as ss
94
+
95
+ def show_alert():
96
+ ss.alert("Title", "The file will not be saved")
97
+
98
+ ss.button("alert", onclick=show_alert)
99
+ ```
100
+ ''')
101
+
102
+ ss.md("### ss.confirm 确认对话框")
103
+
104
+ def onconfirm(event):
105
+ ss.message(event.value)
106
+
107
+ def show_confirm():
108
+ ss.confirm("Title", "Are you sure? ", onconfirm)
109
+
110
+ ss.button("confirm", onclick=show_confirm)
111
+
112
+ ss.md('''
113
+ ```python
114
+ import simplestart as ss
115
+
116
+ def onconfirm(event):
117
+ ss.message(event.value)
118
+
119
+ def show_confirm():
120
+ ss.confirm("Title", "Are you sure? ", onconfirm)
121
+
122
+ ss.button("confirm", onclick=show_confirm)
123
+ ```
124
+ ''')
125
+
126
+
127
+ ss.md("### ss.prompt 提示对话框")
128
+
129
+ def myclose(event):
130
+ ss.message(event.value)
131
+
132
+ def show_prompt():
133
+ ss.message(123)
134
+ ss.prompt("title", "please input the value", onclose = myclose)
135
+
136
+ ss.button("prompt", onclick=show_prompt)
137
+
138
+ ss.md('''
139
+ ```python
140
+ import simplestart as ss
141
+
142
+ def myclose(event):
143
+ ss.message(event.value)
144
+
145
+ def show_prompt():
146
+ ss.prompt("title", "please input the value", onclose = myclose)
147
+ ss.button("prompt", onclick=show_prompt)
148
+ ```
149
+ ''')
150
+
151
+
152
+ def show_prompt():
153
+ ss.message(123)
154
+ ss.prompt("title", "please input the value")
155
+
156
+ ss.button("prompt", onclick=show_prompt)
locales/zh/pages/Form_Component/demo_expander.py ADDED
@@ -0,0 +1,40 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ '''
2
+ title: Expander 下拉展开控件
3
+ '''
4
+
5
+ import streamsync as ss
6
+
7
+ ss.md("## ss.expander 下拉展开")
8
+
9
+
10
+ ss.md('''
11
+ #### 🔅 示例
12
+ ''')
13
+
14
+ with ss.expander("关于SimpleStart", expanded = True):
15
+ ss.text("Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! \
16
+ Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!", style="padding:10px")
17
+
18
+
19
+ ss.space()
20
+ ss.write('''
21
+ ---
22
+ #### 🔎 代码
23
+ ''')
24
+
25
+ ss.md('''
26
+ ```python
27
+ import simplestart as ss
28
+
29
+ with ss.expander("关于SimpleStart"):
30
+ ss.text("Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! \
31
+ Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!")
32
+ ```
33
+ ''')
34
+
35
+ ex = ss.expander("关于SimpleStart", expanded = True)
36
+ with ex:
37
+ ss.text("Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! \
38
+ Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!", style="padding:10px")
39
+
40
+ ex.label = "hello"
locales/zh/pages/Form_Component/demo_input.py ADDED
@@ -0,0 +1,67 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ '''
2
+ title: Input 文本输入
3
+ '''
4
+
5
+ import streamsync as ss
6
+
7
+
8
+ ss.md("## ss.input 文本输入")
9
+
10
+ ss.space()
11
+ ss.md("#### 🔅 示例")
12
+
13
+ ss.md("---")
14
+ ss.space()
15
+
16
+ def onchange(state, value):
17
+ ss.message(f"onchange, {value}")
18
+
19
+ def onclear(state, value):
20
+ ss.message("onclear event happend")
21
+
22
+ def onblur(state, value):
23
+ print("onblur")
24
+ ss.message(f"onblur, {value}")
25
+
26
+ def testme():
27
+ ss.message(myinput.value)
28
+
29
+ #ui
30
+ cols = ss.columns([50,50], border = True)
31
+ with cols[0]:
32
+ myinput = ss.input("Hello SimpleStart", clearable=True, width = 300)
33
+
34
+
35
+ def myevent(event):
36
+ if event.tag == "sel1":
37
+ myinput.variant = event.value
38
+ elif event.tag == "sel2":
39
+ myinput.type = event.value
40
+ elif event.tag == "but1":
41
+ ss.message(myinput.value)
42
+
43
+
44
+ with cols[1]:
45
+ ss.selectbox(["filled","outlined","underlined", "solo", "solo-filled", "solo-inverted"], label='#### <span style = "color:gray">Change the input style</span>', \
46
+ value="solo", onchange = myevent, eventTag="sel1")
47
+
48
+ ss.selectbox(["text","time", "date", "week", "month", "password", "color"], label='#### <span style = "color:gray">Change the input type</span>', \
49
+ onchange = myevent, eventTag="sel2")
50
+
51
+ ss.md('#### 获取input值', color="gray")
52
+ ss.button("获取文本值", onclick=myevent, eventTag="but1")
53
+
54
+
55
+ ss.write("---")
56
+ ss.write("#### 🔎 代码")
57
+
58
+ ss.md('''
59
+ ```python
60
+ import simplestart as ss
61
+
62
+ myinput = ss.text_input("Hello SimpleStart", clearable=True, width = )
63
+
64
+ #或者
65
+ #ss.text_input("hello", type="text", variant = "filled")
66
+
67
+ ''')
locales/zh/pages/Form_Component/demo_menu.py ADDED
@@ -0,0 +1,103 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ '''
2
+ title: Menu 菜单
3
+ '''
4
+
5
+ import streamsync as ss
6
+
7
+ ss.md("## ss.menu")
8
+
9
+ ss.md('''
10
+ #### 🔅 示例
11
+ ''')
12
+
13
+ data = [
14
+ {'index': '1', 'title': 'Processing Center', 'icon':'mdi-home'},
15
+ {'type': 'spacer'}, #add spacer
16
+ {
17
+ 'index': '2',
18
+ 'title': 'Workspace',
19
+ 'icon' : 'mdi-plus',
20
+ 'subItems': [
21
+ {'index': '2-1', 'title': 'item one'},
22
+ {'index': '2-2', 'title': 'item two'},
23
+ {'index': '2-3', 'title': 'item three'},
24
+ {
25
+ 'index': '2-4',
26
+ 'title': 'item four',
27
+ 'subItems': [
28
+ {'index': '2-4-1', 'title': 'item one'},
29
+ {'index': '2-4-2', 'title': 'item two'},
30
+ {'index': '2-4-3', 'title': 'item three'},
31
+ ],
32
+ },
33
+ ],
34
+ },
35
+ {'index': '3', 'title': 'Info', 'disabled': True, 'icon':'mdi-cancel'},
36
+ {'index': '4', 'title': 'Orders', 'icon':'mdi-wrench'},
37
+ ]
38
+
39
+ def menu_select(event):
40
+ print("menu1")
41
+ ss.message(event.data["keyPath"])
42
+
43
+
44
+ ss.md("### 顶栏菜单")
45
+ ss.menu(data, direction = "horizontal", onselect = menu_select)
46
+
47
+ ss.space()
48
+ ss.md("### 侧栏菜单")
49
+
50
+ ss.menu(data, direction = "vertical", dark = True, onselect = menu_select)
51
+
52
+
53
+ ss.space()
54
+ ss.write('''
55
+ ---
56
+ #### 🔎 代码
57
+ ''')
58
+
59
+ ss.md('''
60
+ ```python
61
+ import simplestart as ss
62
+
63
+ data = [
64
+ {'index': '1', 'title': 'Processing Center', 'icon':'mdi-home'},
65
+ {'type': 'spacer'}, #add spacer
66
+ {
67
+ 'index': '2',
68
+ 'title': 'Workspace',
69
+ 'icon' : 'mdi-plus',
70
+ 'subItems': [
71
+ {'index': '2-1', 'title': 'item one'},
72
+ {'index': '2-2', 'title': 'item two'},
73
+ {'index': '2-3', 'title': 'item three'},
74
+ {
75
+ 'index': '2-4',
76
+ 'title': 'item four',
77
+ 'subItems': [
78
+ {'index': '2-4-1', 'title': 'item one'},
79
+ {'index': '2-4-2', 'title': 'item two'},
80
+ {'index': '2-4-3', 'title': 'item three'},
81
+ ],
82
+ },
83
+ ],
84
+ },
85
+ {'index': '3', 'title': 'Info', 'disabled': True, 'icon':'mdi-cancel'},
86
+ {'index': '4', 'title': 'Orders', 'icon':'mdi-wrench'},
87
+ ]
88
+
89
+ def menu_select(event):
90
+ print("menu1")
91
+ ss.message(event.data["keyPath"])
92
+
93
+
94
+ ss.md("### Horiontal Menu")
95
+ ss.menu(data, direction = "horizontal", onselect = menu_select)
96
+
97
+ ss.space()
98
+ ss.md("### Vertical Menu")
99
+
100
+ ss.menu(data, direction = "vertical", dark = True, onselect = menu_select)
101
+
102
+ ```
103
+ ''')
locales/zh/pages/Form_Component/demo_radio.py ADDED
@@ -0,0 +1,98 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ '''
2
+ title: Radio 单选框
3
+ '''
4
+
5
+ import simplestart as ss
6
+
7
+ ss.md("## ss.radio 单选框")
8
+
9
+ ss.space()
10
+
11
+ ss.md('''
12
+ #### 🔅 示例
13
+ ''')
14
+
15
+ def onchange(event):
16
+ ss.session["options_value"] = event.value
17
+ ss.session["options_index"] = event.index
18
+
19
+ ss.md("onchange: value:@options_value, index:@options_index")
20
+
21
+ options = ["Option 1", "Option 2", "Option 3"]
22
+ myradio = ss.radio(options, label = "### my radio1", index = 0, onchange = onchange)
23
+
24
+
25
+ options = [{'name':'#### <span style="color:blue">C++</span>', 'value':'C++'},
26
+ {'name':'#### <span style="color:green">Javascript</span>', 'value':'Javascript'},
27
+ {'name':'#### <span style="color:red">Python</span>', 'value':"Python"}
28
+ ]
29
+
30
+ ss.radio(options, inline = True, label = "### my radio2", index = 0, iconColor = "blue", onchange = onchange)
31
+
32
+
33
+
34
+ ss.write("---")
35
+ ss.write("#### 🔎 代码")
36
+
37
+ ss.md('''
38
+ ```python
39
+ import simplestart as ss
40
+
41
+ def onchange(event):
42
+ ss.session["options_value"] = event.value
43
+ ss.session["options_index"] = event.index
44
+
45
+ ss.md("onchange: value:\@options_value, index:\@options_index")
46
+
47
+ options = ["Option 1", "Option 2", "Option 3"]
48
+ myradio = ss.radio(options, label = "### my radio1", index = 0, onchange = onchange)
49
+
50
+
51
+ options = [{'name':'#### <span style="color:blue">C++</span>', 'value':'C++'},
52
+ {'name':'#### <span style="color:green">Javascript</span>', 'value':'Javascript'},
53
+ {'name':'#### <span style="color:red">Python</span>', 'value':"Python"}
54
+ ]
55
+
56
+ ss.radio(options, inline = True, label = "### my radio2", index = 0, iconColor = "blue", onchange = onchange)
57
+
58
+ def onPageLoad():
59
+ ss.session["options_value"] = ""
60
+
61
+ ''')
62
+
63
+
64
+ ss.space()
65
+ ss.md('''
66
+ ---
67
+ #### 🔅 示例 - 获取状态值
68
+ ''')
69
+
70
+ def myclick1():
71
+ ss.message(myradio.value)
72
+
73
+ ss.button("获取状态值", onclick = myclick1)
74
+
75
+ def myclick2():
76
+ ss.message(myradio.index)
77
+
78
+ ss.button("获取状态值索引", onclick = myclick2)
79
+
80
+ ss.write("---")
81
+ ss.write("#### 🔎 代码段")
82
+
83
+ ss.md('''
84
+ ```python
85
+ #...
86
+ def myclick1():
87
+ ss.message(myradio.value)
88
+
89
+ ss.button("获取状态值", onclick = myclick1)
90
+
91
+ def myclick2():
92
+ ss.message(myradio.index)
93
+
94
+ ss.button("获取状态值索引", onclick = myclick2)
95
+ ''')
96
+
97
+ def onPageLoad():
98
+ ss.session["options_value"] = ""
locales/zh/pages/Form_Component/demo_selectbox.py ADDED
@@ -0,0 +1,80 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ '''
2
+ title: Selectbox 选择器
3
+ '''
4
+
5
+ import simplestart as ss
6
+
7
+ ss.md("## ss.selectbox 选择器")
8
+
9
+ ss.space()
10
+ ss.md('''
11
+ #### 🔅 示例1
12
+ 在页面上创建一个带标题的，有3个选项的selectbox.
13
+ ''')
14
+ ss.space()
15
+
16
+ options = ["option1","option2", "option3"]
17
+
18
+ def selchange(event):
19
+ ss.message(f"You select {event.value}, index of {event.index}")
20
+
21
+ select1 = ss.selectbox(options, index=0, title = "### Please select", onchange = selchange)
22
+
23
+
24
+
25
+ ss.write("#### 🔎 代码")
26
+
27
+ ss.md("""
28
+ ```python
29
+ import simplestart as ss
30
+
31
+ options = ["option1","option2", "option3"]
32
+
33
+ def selchange(event):
34
+ ss.session["select_value"] = event.value
35
+ ss.session["select_index"] = select1.index
36
+
37
+ ss.write("info value: index:")
38
+ select1 = ss.selectbox(options, value="option1", onchange = selchange)
39
+
40
+
41
+ ```
42
+ """)
43
+
44
+ ss.md('''
45
+ #### 🔅 示例2
46
+ 获取selectbox当前的选项. 除了在selectbox的onchange事件里，通过event的index和value获取用户的选项信息外，还可以通过selectbox的变量获取用户的选择信息。
47
+ ''')
48
+ ss.space()
49
+
50
+ def onclick1():
51
+ ss.message(select1.value)
52
+
53
+ ss.button("当前选项值", onclick = onclick1)
54
+
55
+ def onclick2():
56
+ ss.message(select1.index)
57
+
58
+ ss.button("当前选项索引", onclick = onclick2)
59
+
60
+ ss.space()
61
+
62
+ ss.write("#### 🔎 代码段")
63
+
64
+ ss.md("""
65
+ ```python
66
+
67
+ #...
68
+
69
+ def onclick1():
70
+ ss.message(select1.value)
71
+
72
+ ss.button("当前选项值", onclick = onclick1)
73
+
74
+ def onclick2():
75
+ ss.message(select1.index)
76
+
77
+ ss.button("当前选项索引", onclick = onclick2)
78
+
79
+ ```
80
+ """)
locales/zh/pages/Form_Component/demo_slider.py ADDED
@@ -0,0 +1,41 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ '''
2
+ title: Slider 滑块
3
+ '''
4
+
5
+ import simplestart as ss
6
+
7
+ ss.md("## ss.slider 滑块")
8
+
9
+ ss.space()
10
+
11
+ ss.md('''
12
+ #### 🔅 示例
13
+ ''')
14
+
15
+ sld = ss.md("### Please drag the slider to change the value")
16
+
17
+ info = ss.text("500")
18
+
19
+ def onchange(event):
20
+ info.text = str(event.value)
21
+
22
+ sld = ss.slider("<b>my slider</b>", value = 500, min = 0, max = 1000, onchange = onchange, style="width:50%")
23
+
24
+ ss.space()
25
+
26
+ ss.write("#### 🔎 代码")
27
+
28
+ ss.md('''
29
+ ```python
30
+ import simplestart as ss
31
+
32
+ info = ss.text("500")
33
+
34
+ def onchange(state, value):
35
+ info.text = value
36
+
37
+ ss.slider(500, 0, 1000, onchange = onchange)
38
+
39
+ #sld.min = 200
40
+ #sld.step = 5
41
+ ''')
locales/zh/pages/Form_Component/demo_textarea.py ADDED
@@ -0,0 +1,49 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ '''
2
+ title: Textarea 文本域
3
+ '''
4
+
5
+ import streamsync as ss
6
+
7
+ ss.md("## ss.textarea 文本域")
8
+
9
+
10
+ ss.space()
11
+ ss.md("#### 🔅 示例")
12
+
13
+ ss.md("---")
14
+
15
+ #基本用法
16
+ #test = ss.text_input("hello, world", type="textarea")
17
+ mytext = ss.textarea("hello, world")
18
+
19
+ ss.write("---")
20
+ ss.write("#### 🔎 代码")
21
+
22
+ ss.md('''
23
+ ```python
24
+ import simplestart as ss
25
+
26
+ mytext = ss.textarea("hello, world")
27
+
28
+ ''')
29
+
30
+ ss.space()
31
+ ss.md("#### 🔅 获取文本域的文本值")
32
+ ss.md("---")
33
+
34
+ def myclick():
35
+ ss.message(mytext.value)
36
+
37
+ ss.button("获取文本", onclick = myclick)
38
+
39
+ ss.write("---")
40
+ ss.write("#### 🔎 代码段")
41
+
42
+ ss.md('''
43
+ ```python
44
+ #...
45
+ def myclick():
46
+ ss.message(mytext.value)
47
+
48
+ ss.button("获取文本", onclick = myclick)
49
+ ''')
locales/zh/pages/Form_Component/demo_upload.py ADDED
@@ -0,0 +1,45 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ '''
2
+ title: Upload 文件上传
3
+ '''
4
+
5
+ import streamsync as ss
6
+ import pandas as pd
7
+
8
+ ss.write("备注：python-multipart需要安装包加入")
9
+
10
+ ss.md("## ss.upload 文件上传")
11
+
12
+
13
+ ss.space()
14
+ ss.md("#### 🔅 示例 - 上传图片")
15
+ ss.space()
16
+
17
+
18
+ def onsucess(event):
19
+ filename = event.value
20
+ path = f'{ss.baseinfo["package_path"]}/uploads/{filename}'
21
+ myimage.image = path
22
+
23
+ ss.upload("Upload Image ...", accept="image/png, image/jpeg, image/bmp", icon="mdi-camera", onsucess = onsucess)
24
+
25
+ myimage = ss.image()
26
+
27
+ ss.space()
28
+ ss.write("---")
29
+ ss.write("#### 🔎 代码")
30
+
31
+ ss.md('''
32
+ ```python
33
+ import simplestart as ss
34
+
35
+ def onsucess(event):
36
+ filename = event.value
37
+ path = f'{ss.baseinfo["package_path"]}/uploads/{filename}'
38
+
39
+ myimage.image = path
40
+
41
+ ss.upload(label = "Upload Image ...", accept="image/png, image/jpeg, image/bmp", icon="mdi-camera", onsucess = onsucess)
42
+
43
+ myimage = ss.image()
44
+
45
+ ''')
locales/zh/pages/Form_Component/folder.yaml ADDED
@@ -0,0 +1,2 @@
 
 
 
1
+ alias: 表单组件
2
+ order_name: "001"
locales/zh/pages/Form_Component/untitled.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ 遗传性血管性水肿, 缓激肽, C1酯酶抑制剂, 急性腹部疼痛, 妊娠, 非组胺性水肿, 发作治疗, 喉头水肿, 预防, 触发因素
locales/zh/pages/Layout_Related/demo_columns.py ADDED
@@ -0,0 +1,103 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ '''
2
+ title: Columns 列布局
3
+ '''
4
+
5
+ import streamsync as ss
6
+
7
+ ss.md("## ss.columns 列布局")
8
+
9
+ ss.space()
10
+ ss.md("#### 🔅 示例")
11
+
12
+ ss.space()
13
+
14
+ ss.md("### 平均间距")
15
+
16
+ def onchange1(event):
17
+ #cols_ex1.design = True
18
+ cols_ex1_id = cols1[0].id #通过cols_ex1不能直接得到
19
+
20
+ if event.value == True:
21
+ ss.getcm().components[cols_ex1_id]["content"]["options"]["border"] = True
22
+ ss.session["cols1_design"] = ', border = True'
23
+ else:
24
+ ss.getcm().components[cols_ex1_id]["content"]["options"]["border"] = False
25
+ ss.session["cols1_design"] = ''
26
+ ss.update_cm(cols_ex1_id)
27
+
28
+ ss.checkbox("border", checked = True, onchange = onchange1)
29
+
30
+ cols1 = ss.columns(2, border=True)
31
+
32
+ with cols1[0]:
33
+ ss.text("First of two columns")
34
+
35
+ with cols1[1]:
36
+ ss.text("Second of two columns")
37
+
38
+
39
+ ss.space()
40
+ ss.write("---")
41
+ ss.write("#### 🔎 代码")
42
+ ss.md('''
43
+ ```python
44
+ import simplestart as ss
45
+
46
+ cols1 = ss.columns(2, border = True)
47
+
48
+ with cols1[0]:
49
+ ss.text("First of two columns")
50
+
51
+ with cols1[1]:
52
+ ss.text("Second of two columns")
53
+ ```
54
+ ''')
55
+
56
+ ss.space()
57
+
58
+
59
+ ss.md("### 按比例间距")
60
+
61
+ def onchange2(event):
62
+ #cols_ex1.design = True
63
+ cols_ex2_id = cols2[0].id #通过cols_ex1不能直接得到
64
+
65
+ if event.value == True:
66
+ ss.getcm().components[cols_ex2_id]["content"]["options"]["border"] = True
67
+ ss.session["cols2_design"] = ', border = True'
68
+ else:
69
+ ss.getcm().components[cols_ex2_id]["content"]["options"]["border"] = False
70
+ ss.session["cols2_design"] = ''
71
+ ss.update_cm(cols_ex2_id)
72
+
73
+
74
+ ss.checkbox("border", checked = True, onchange = onchange2)
75
+
76
+ cols2 = ss.columns([4,6], border = True)
77
+
78
+ with cols2[0]:
79
+ ss.text("First of two columns")
80
+ with cols2[1]:
81
+ ss.text("Second of two columns")
82
+
83
+
84
+ ss.space()
85
+ ss.write("---")
86
+ ss.write("#### 🔎 代码")
87
+ ss.md('''
88
+ ```python
89
+ import simplestart as ss
90
+
91
+ cols1 = ss.columns([4,6], border = True)
92
+
93
+ with cols1[0]:
94
+ ss.text("First of two columns")
95
+
96
+ with cols1[1]:
97
+ ss.text("Second of two columns")
98
+ ```
99
+ ''')
100
+
101
+ def onPageLoad():
102
+ ss.session["cols1_design"] = ''
103
+ ss.session["cols2_design"] = ''
locales/zh/pages/Layout_Related/demo_row.py ADDED
@@ -0,0 +1,104 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ '''
2
+ title: Row 行布局
3
+ '''
4
+
5
+ import streamsync as ss
6
+
7
+ ss.md("## ss.row 行布局")
8
+
9
+ ss.space()
10
+ ss.md("#### 🔅 示例")
11
+ ss.write("通过 ss.row 将两个按钮限制在一行内显示，同时利用ss.spacer 改变按钮的布局")
12
+
13
+ ss.space()
14
+
15
+ def onchange1():
16
+ pass
17
+
18
+
19
+ #ui
20
+
21
+ style = "background:#d3d3d354; padding:5px;"
22
+
23
+ ss.space()
24
+ ss.write("#### 1. Normal")
25
+ ss.space()
26
+ with ss.row(style=style):
27
+ ss.button("button1")
28
+ ss.button("button2")
29
+
30
+ ss.space()
31
+ ss.write("#### 2. Center")
32
+ ss.space()
33
+ with ss.row(style=style):
34
+ ss.spacer()
35
+ ss.button("button1")
36
+ ss.button("button2")
37
+ ss.spacer()
38
+
39
+ ss.space()
40
+ ss.write("#### 3. Right align")
41
+ ss.space()
42
+ with ss.row(style=style):
43
+ ss.spacer()
44
+ ss.button("button1")
45
+ ss.button("button2")
46
+
47
+ ss.space()
48
+ ss.write("#### 4. Right respectively")
49
+ ss.space()
50
+ with ss.row(style=style):
51
+ ss.spacer()
52
+ ss.button("button1")
53
+ ss.spacer()
54
+ ss.button("button2")
55
+
56
+
57
+ ss.space("mt-16")
58
+ ss.write("#### 🔎 代码")
59
+
60
+ ss.md('''
61
+ ```python
62
+ import simplestart as ss
63
+
64
+ style = "background:#d3d3d354; padding:5px;"
65
+ ss.space()
66
+ ss.write("#### 1. Normal")
67
+ ss.space()
68
+ with ss.row(style=style):
69
+ ss.button("button1")
70
+ ss.button("button2")
71
+
72
+ ss.space()
73
+ ss.write("#### 2. Center")
74
+ ss.space()
75
+ with ss.row(style=style):
76
+ ss.spacer()
77
+ ss.button("button1")
78
+ ss.button("button2")
79
+ ss.spacer()
80
+
81
+ ss.space()
82
+ ss.write("#### 3. Right align")
83
+ ss.space()
84
+ with ss.row(style=style):
85
+ ss.spacer()
86
+ ss.button("button1")
87
+ ss.button("button2")
88
+
89
+ ss.space()
90
+ ss.write("#### 4. Right respectively")
91
+ ss.space()
92
+ with ss.row(style=style):
93
+ ss.spacer()
94
+ ss.button("button1")
95
+ ss.spacer()
96
+ ss.button("button2")
97
+
98
+ ''')
99
+
100
+ ss.md('''
101
+ ::: tip
102
+ ss.space 表示增加间距, ss.spacer 是用来填补间距达到修改布局的作用
103
+ :::
104
+ ''')
locales/zh/pages/Layout_Related/demo_section.py ADDED
@@ -0,0 +1,84 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ '''
2
+ title: Section 一般容器
3
+ '''
4
+
5
+ import simplestart as ss
6
+
7
+ ss.md("## ss.section 容器")
8
+
9
+ ss.md("section 父容器, 可以装载其它组件, 支持style参数")
10
+
11
+
12
+ ss.space()
13
+ ss.md('''
14
+ #### 🔅 示例
15
+ ''')
16
+
17
+ #api
18
+ def clear():
19
+ section.empty()
20
+
21
+ def write_something():
22
+ section.text("Hello, I am inside section 2")
23
+
24
+ #ui
25
+ with ss.section("Section1", shadow = 10, border = True, rounded=True, width = "50%", height=300):
26
+ ss.text("This is inside the section 1")
27
+
28
+
29
+ ss.space()
30
+
31
+ section = ss.section()
32
+ section.text("This is inside the section 2")
33
+
34
+ ss.space("mt-4 mb-4")
35
+ ss.text("outside the section")
36
+
37
+
38
+ ss.md("---")
39
+
40
+ ss.button("clear", onclick=clear)
41
+
42
+ ss.button("add something", onclick=write_something)
43
+
44
+ ss.space()
45
+
46
+ ss.write("#### 🔎 代码")
47
+
48
+ ss.md("""
49
+ ```python
50
+ import simplestart as ss
51
+
52
+ #api
53
+ def clear():
54
+ section.empty()
55
+
56
+ def write_something():
57
+ section.text("Hello, I am inside section 2")
58
+
59
+ #ui
60
+ with ss.section(title = "Section1", shadow = 10, border = True, rounded=True, width = "50%", height=300):
61
+ ss.text("This is inside the section 1")
62
+
63
+
64
+ ss.space()
65
+
66
+ section = ss.section()
67
+ section.text("This is inside the section 2")
68
+
69
+ ss.space()
70
+ ss.text("outside the section")
71
+
72
+ ss.md("---")
73
+
74
+ ss.button("clear", onclick=clear)
75
+ ss.button("add something", onclick=write_something)
76
+
77
+ ```
78
+ """)
79
+
80
+ ss.md('''
81
+ ::: tip
82
+ 除了可以通过 with 语法添加组件，也可以直接通过section.text(), section.button()等方式添加容器内的组件
83
+ :::
84
+ ''')
locales/zh/pages/Layout_Related/demo_sidebar.py ADDED
@@ -0,0 +1,56 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ '''
2
+ title: Sidebar 侧边栏
3
+ '''
4
+
5
+ import simplestart as ss
6
+
7
+ ss.md("## ss.sidebar 侧边栏")
8
+
9
+ ss.md("在屏幕左侧的侧边栏内显示各种组件，例如可以放置数据控制和一些设置。")
10
+
11
+ ss.md('''
12
+ #### 🔅 示例
13
+ ''')
14
+
15
+
16
+ sidebar = ss.sidebar()
17
+
18
+ with sidebar:
19
+ ss.button("click")
20
+ ss.selectbox(["one", "two", "three"])
21
+
22
+
23
+ def testme(state, value):
24
+ with sidebar:
25
+ ss.text("text in sidebar")
26
+
27
+
28
+ ss.button("test", onclick = testme)
29
+
30
+
31
+ ss.space()
32
+
33
+ ss.write("#### 🔎 代码")
34
+
35
+ ss.md('''
36
+ ```python
37
+ import simplestart as ss
38
+
39
+ sidebar = ss.sidebar()
40
+
41
+ with sidebar:
42
+ ss.button("click")
43
+ ss.selectbox(["one", "two", "three"])
44
+
45
+
46
+ def testme(state, value):
47
+ with sidebar:
48
+ ss.text("text in sidebar")
49
+ #or
50
+ #sidebar.text("text in sidebar")
51
+
52
+
53
+ ss.button("test", onclick = testme)
54
+
55
+ ```
56
+ ''')
locales/zh/pages/Layout_Related/demo_style.py ADDED
@@ -0,0 +1,71 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ '''
2
+ title: Style 样式设置
3
+ '''
4
+
5
+ import simplestart as ss
6
+
7
+ ss.md("## ss.style 样式设置")
8
+
9
+ ss.space()
10
+ ss.md("#### 🔅 示例")
11
+ ss.write("向 HTML 文档中注入 CSS 样式")
12
+
13
+ ss.html('''
14
+ <div class="test1">this is a sample1</div>
15
+ <div class="test2">this is a sample2</div>
16
+ ''')
17
+
18
+
19
+ ss.style('''
20
+ .test1{
21
+ background-color:lightgray;
22
+ padding:5px;
23
+ width:150px;
24
+ margin-bottom:10px;
25
+ border:1px solid lightblue
26
+ }
27
+ .test2{
28
+ color:red;
29
+ border:1px solid lightgreen;
30
+ padding:5px;
31
+ width:150px;
32
+ }
33
+ ''')
34
+
35
+ ss.space()
36
+
37
+ ss.write("#### 🔎 代码")
38
+
39
+
40
+ ss.space()
41
+
42
+ ss.write('''
43
+ ---
44
+ #### 代码
45
+ ''')
46
+
47
+ ss.md('''
48
+ ```python
49
+ import simplestart as ss
50
+
51
+ ss.html(\'''
52
+ <div class="test1">this is a sample1</div>
53
+ <div class="test2">this is a sample2</div>
54
+ \''')
55
+
56
+ ss.style(\'''
57
+ .test1{
58
+ background-color:lightgray;
59
+ padding:5px;
60
+ width:150px;
61
+ margin-bottom:10px;
62
+ border:1px solid lightblue
63
+ }
64
+ .test2{
65
+ color:red;
66
+ border:1px solid lightgreen;
67
+ padding:5px;
68
+ width:150px;
69
+ }
70
+ \''')
71
+ ''')
locales/zh/pages/Layout_Related/demo_tabs.py ADDED
@@ -0,0 +1,38 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ '''
2
+ title: Tabs 标签页
3
+ '''
4
+
5
+ import simplestart as ss
6
+
7
+ ss.md("## ss.tabs 标签页")
8
+
9
+ ss.space("mt-16")
10
+ ss.md("#### 🔅 示例")
11
+
12
+ tabtitles = ["tab1", "tab2", "tab3"]
13
+ tabs = ss.tabs(tabtitles)
14
+
15
+ with tabs[0]:
16
+ ss.text("this is tab 1")
17
+ with tabs[1]:
18
+ ss.text("this is tab 2")
19
+ with tabs[2]:
20
+ ss.text("this is tab 3")
21
+
22
+ ss.space()
23
+ ss.write("#### 🔎 代码")
24
+
25
+ ss.md('''
26
+ ```python
27
+ import simplestart as ss
28
+
29
+ tabtitles = ["tab1", "tab2", "tab3"]
30
+ tabs = ss.tabs(tabtitles)
31
+
32
+ with tabs[0]:
33
+ ss.text("this is tab 1")
34
+ with tabs[1]:
35
+ ss.text("this is tab 2")
36
+ with tabs[2]:
37
+ ss.text("this is tab 3")
38
+ ''')
locales/zh/pages/Layout_Related/folder.yaml ADDED
@@ -0,0 +1,2 @@
 
 
 
1
+ alias: 布局相关
2
+ order_name: "004"