ui 与主题匹配的所有 Gists

timmy / Streamlit 嵌入 HTML

0 喜欢

0 派生

2 文件

最后活跃于 10 months ago

此範例展示如何在 Streamlit 應用中嵌入 HTML、CSS 和 JavaScript，允許自訂 UI 元素、樣式和互動功能，使 Web 應用更具靈活性和可視化效果。

css customization html integration javascript streamlit ui webapp

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 喜欢

0 派生

1 文件

最后活跃于 10 months ago

這段 HTML + Lit 程式碼使用 Web Components 技術，建立了一個年份時間軸 (<timeline-element>)，用於以視覺化方式顯示歷史事件或時間序列。它包含多個事件 (<event-element>)，每個事件都有標題和描述，並根據奇偶數自動排列在時間軸的左右兩側。此時間軸支援動態效果（懸停陰影、點擊事件），並針對手機響應式調整顯示方式，適用於歷史紀錄、產品發展時間軸、事件展示等場景，提供互動性高、現代化的時間軸視覺呈現。

interactive javascript lit responsive-design timeline ui web-components

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 喜欢

0 派生

2 文件

最后活跃于 10 months ago

此程式使用 Streamlit 讀取、編輯並儲存員工資料至 YAML 檔案，提供直覺化 UI 介面，並支援欄位過濾與年齡篩選，適用於企業資料管理。

data-management employee-management filtering pandas python streamlit ui yaml

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 喜欢

0 派生

1 文件

最后活跃于 10 months ago

此程式使用 Streamlit 讓使用者讀取、編輯並儲存 YAML 文件，透過 pandas 轉換為表格格式，適用於設定檔管理與資料編輯工具。

configuration-management data-editor pandas python streamlit ui yaml

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 喜欢

0 派生

2 文件

最后活跃于 10 months ago

此程式使用 Streamlit 讀取、編輯並存儲 YAML 設定檔，透過 pandas 轉換為表格格式，提供直覺化 UI 介面，適用於設定管理與資料修改。

configuration-editor data-management pandas python streamlit ui yaml

1	age: 30
2	is_active: true
3	name: John Doe

timmy / 使用 Streamlit 建立線上訂餐系統

0 喜欢

0 派生

1 文件

最后活跃于 10 months ago

這是一個使用 Streamlit 構建的訂餐系統，包含訂購人選擇、餐廳菜單顯示、主餐及加點品項的選擇與數量輸入，並計算和顯示訂單詳情與總價。

automation food-ordering interactive python streamlit ui web-app

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 喜欢

0 派生

1 文件

最后活跃于 10 months ago

此程式使用 Streamlit 讓使用者上傳文字或 Markdown 檔案，顯示其內容，並透過暫存檔處理，可應用於文件檢視與內容處理工具。

automation file-upload markdown python streamlit text-processing ui

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	# 如果有文件被上傳