timmy / Streamlit 嵌入 HTML
0 mi piace
0 forks
2 files
Ultima volta attivo 10 months ago
此範例展示如何在 Streamlit 應用中嵌入 HTML、CSS 和 JavaScript，允許自訂 UI 元素、樣式和互動功能，使 Web 應用更具靈活性和可視化效果。
| 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> |
timmy / 使用 Lit 建立互動式年份時間軸
0 mi piace
0 forks
1 files
Ultima volta attivo 10 months ago
這段 HTML + Lit 程式碼使用 Web Components 技術，建立了一個 年份時間軸 (<timeline-element>)，用於 以視覺化方式顯示歷史事件或時間序列。它包含 多個事件 (<event-element>)，每個事件都有標題和描述，並根據奇偶數自動 排列在時間軸的左右兩側。此時間軸支援 動態效果（懸停陰影、點擊事件），並針對 手機響應式調整顯示方式，適用於 歷史紀錄、產品發展時間軸、事件展示 等場景，提供 互動性高、現代化的時間軸視覺呈現。
| 1 | <!doctype html> |
| 2 | <html lang="zh-Hant"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8" /> |
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| 6 | <title>年份時間軸 - Lit 元素</title> |
| 7 | <style> |
| 8 | body { |
| 9 | font-family: "Microsoft JhengHei", Arial, sans-serif; |
| 10 | background-color: #f0f0f0; |
timmy / 使用 Streamlit 建立 YAML 員工資料管理系統
0 mi piace
0 forks
2 files
Ultima volta attivo 10 months ago
此程式使用 Streamlit 讀取、編輯並儲存員工資料至 YAML 檔案，提供直覺化 UI 介面，並支援欄位過濾與年齡篩選，適用於企業資料管理。
| 1 | employees: |
| 2 | - Age: 34 |
| 3 | City: New York |
| 4 | Name: Alice |
| 5 | Occupation: Engineer |
| 6 | Salary: 70000 |
| 7 | - Age: 27 |
| 8 | City: Los Angeles |
| 9 | Name: Bob |
| 10 | Occupation: Doctor |
timmy / 使用 Streamlit 建立 YAML 編輯器
0 mi piace
0 forks
1 files
Ultima volta attivo 10 months ago
此程式使用 Streamlit 讓使用者讀取、編輯並儲存 YAML 文件，透過 pandas 轉換為表格格式，適用於設定檔管理與資料編輯工具。
| 1 | from io import StringIO |
| 2 | |
| 3 | import pandas as pd |
| 4 | import streamlit as st |
| 5 | import yaml |
| 6 | |
| 7 | |
| 8 | # 定義 YamlHandler 類 |
| 9 | class YamlHandler: |
| 10 | def __init__(self, file_path): |
timmy / 使用 Streamlit 建立 YAML 設定檔編輯器
0 mi piace
0 forks
2 files
Ultima volta attivo 10 months ago
此程式使用 Streamlit 讀取、編輯並存儲 YAML 設定檔，透過 pandas 轉換為表格格式，提供直覺化 UI 介面，適用於設定管理與資料修改。
| 1 | age: 30 |
| 2 | is_active: true |
| 3 | name: John Doe |
timmy / 使用 Streamlit 建立線上訂餐系統
0 mi piace
0 forks
1 files
Ultima volta attivo 10 months ago
這是一個使用 Streamlit 構建的訂餐系統，包含訂購人選擇、餐廳菜單顯示、主餐及加點品項的選擇與數量輸入，並計算和顯示訂單詳情與總價。
| 1 | from datetime import date |
| 2 | |
| 3 | import streamlit as st |
| 4 | |
| 5 | # 定義 Customer 類別 |
| 6 | class Customer: |
| 7 | def __init__(self, name, email, preferences): |
| 8 | self.name = name |
| 9 | self.email = email |
| 10 | self.preferences = preferences |
timmy / 使用 Streamlit 建立文件內容查看器
0 mi piace
0 forks
1 files
Ultima volta attivo 10 months ago
此程式使用 Streamlit 讓使用者上傳文字或 Markdown 檔案，顯示其內容，並透過暫存檔處理，可應用於文件檢視與內容處理工具。
| 1 | import streamlit as st |
| 2 | import os |
| 3 | |
| 4 | # 標題 |
| 5 | st.title("文件內容查看器") |
| 6 | |
| 7 | # 文件上傳 |
| 8 | uploaded_file = st.file_uploader("請上傳文字或 Markdown 文件", type=["txt", "md"]) |
| 9 | |
| 10 | # 如果有文件被上傳 |
Più nuovi
Più vecchi