python学习

streamlit学习笔记四-----暂称为组件吧

创建静态组件

如果您创建 Streamlit 组件的目标仅仅是显示 HTML 代码或从 Python 可视化库中呈现图表，Streamlit 提供了两种方法来极大地简化流程：components.html() 和 components.iframe()。

  1. 渲染一个 HTML 字符串用： 

    1
    streamlit.components.v1.html(html, width=None, height=None, scrolling=False)

    html (str) – 要嵌入 iframe 的 HTML 字符串。注意是字符串，如果是文件名，则会出错

width (int) – 以 CSS 像素为单位的框架宽度。 默认为报告的默认元素宽度。

height (int) – 以 CSS 像素为单位的框架高度。 默认为 150。

scrolling (bool) – 如果为 True，则在内容大于 iframe 时显示滚动条。 否则，不显示滚动条。 默认为假。
例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
import streamlit as st
import streamlit.components.v1 as components

# bootstrap 4 collapse example

   html_data= """
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <div id="accordion">
      <div class="card">
        <div class="card-header" id="headingOne">
          <h5 class="mb-0">
            <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
            Collapsible Group Item #1
            </button>
          </h5>
        </div>
        <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
          <div class="card-body">
            Collapsible Group Item #1 content
          </div>
        </div>
      </div>
      <div class="card">
        <div class="card-header" id="headingTwo">
          <h5 class="mb-0">
            <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
            Collapsible Group Item #2
            </button>
          </h5>
        </div>
        <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
          <div class="card-body">
            Collapsible Group Item #2 content
          </div>
        </div>
      </div>
    </div>
    """
    components.html(html_data, width=None, height=300,scrolling=False)
)

  1. 呈现 iframe URL用用：

    1
    streamlit.components.v1.iframe(src, width=None, height=None, scrolling=False)

    参数
    src (str) – 要嵌入的页面的 URL。

width (int) – 以 CSS 像素为单位的框架宽度。 默认为报告的默认元素宽度。

height (int) – 以 CSS 像素为单位的框架高度。 默认为 150。

scrolling (bool) – 如果为 True，则在内容大于 iframe 时显示滚动条。 否则，不显示滚动条。 默认为假。
例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
import streamlit as st
import pandas as pd
import numpy as np
import streamlit.components.v1 as components

st.set_page_config( page_title="Streamlit 练习 ",   layout="wide" )

page_html_luckysheet = """ 
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <div id="accordion">
      <div class="card">
        <div class="card-header" id="headingOne">
          <h5 class="mb-0">
            <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
            Collapsible Group Item #1
            </button>
          </h5>
        </div>
        <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
          <div class="card-body">
            Collapsible Group Item #1 content
          </div>
        </div>
      </div>
      <div class="card">
        <div class="card-header" id="headingTwo">
          <h5 class="mb-0">
            <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
            Collapsible Group Item #2
            </button>
          </h5>
        </div>
        <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
          <div class="card-body">
            Collapsible Group Item #2 content
          </div>
        </div>
      </div>
    </div>
"""
# st.markdown( page_html_head, unsafe_allow_html=True)
container_top = st.container()
container_body = st.container()

# Top
with container_top:
    st.markdown(" [新浪网](https://www.sina.com.cn) /[我的笔记](https://superigbt_superigbt.gitee.io) ")
    st.image("/home/frankli/temp/建站/banner/mybanner4-1.jpg",caption='my banner', use_column_width=True)


# Body
with container_body:
    # components.iframe( "https://superigbt_superigbt.gitee.io/")
    left_side, right_side = st.columns([1,6])
    # 左边，注意with语句的下一行缩进
    with left_side: 
                    left_side.subheader(" 左边的窄列，预留菜单树 ")
    # 右边,注意缩进。
    with right_side: 
                    components.html( page_html_luckysheet )
                    components.iframe("https://superigbt_superigbt.gitee.io",width=None, height=600, scrolling=True)