streamlit_embed_html.py
· 597 B · Python
Raw
import streamlit as st
import streamlit.components.v1 as components
st.title("嵌入 HTML 內容的範例")
# 使用 components.html() 來插入自訂 HTML
html_code = """
<div style="text-align:center;">
<h2 style="color: blue;">這是自訂的 HTML 標題</h2>
<p style="font-size: 18px;">這是一段內嵌的 HTML 內容，你可以自由修改。</p>
<button onclick="alert('你點擊了按鈕！')">點我一下</button>
</div>
"""
# 透過 components.html() 來顯示 HTML，height 參數設定顯示區域的高度
components.html(html_code, height=200)
| 1 | import streamlit as st |
| 2 | import streamlit.components.v1 as components |
| 3 | |
| 4 | st.title("嵌入 HTML 內容的範例") |
| 5 | |
| 6 | # 使用 components.html() 來插入自訂 HTML |
| 7 | html_code = """ |
| 8 | <div style="text-align:center;"> |
| 9 | <h2 style="color: blue;">這是自訂的 HTML 標題</h2> |
| 10 | <p style="font-size: 18px;">這是一段內嵌的 HTML 內容，你可以自由修改。</p> |
| 11 | <button onclick="alert('你點擊了按鈕！')">點我一下</button> |
| 12 | </div> |
| 13 | """ |
| 14 | |
| 15 | # 透過 components.html() 來顯示 HTML，height 參數設定顯示區域的高度 |
| 16 | components.html(html_code, height=200) |
| 17 |
streamlit_html_example.py
· 406 B · Python
Raw
import streamlit as st
st.title("嵌入 HTML 的範例")
html_code = """
<div style="border: 2px solid #4CAF50; padding: 10px; border-radius: 5px;">
<h2 style="color: #4CAF50;">這是一個 HTML 區塊</h2>
<p>你可以在這裡嵌入 HTML, CSS, 甚至 JavaScript。</p>
<button onclick="alert('Hello, Streamlit!')">點擊我</button>
</div>
"""
st.components.v1.html(html_code, height=200)
| 1 | import streamlit as st |
| 2 | |
| 3 | st.title("嵌入 HTML 的範例") |
| 4 | |
| 5 | html_code = """ |
| 6 | <div style="border: 2px solid #4CAF50; padding: 10px; border-radius: 5px;"> |
| 7 | <h2 style="color: #4CAF50;">這是一個 HTML 區塊</h2> |
| 8 | <p>你可以在這裡嵌入 HTML, CSS, 甚至 JavaScript。</p> |
| 9 | <button onclick="alert('Hello, Streamlit!')">點擊我</button> |
| 10 | </div> |
| 11 | """ |
| 12 | |
| 13 | st.components.v1.html(html_code, height=200) |
| 14 |