timmy / Streamlit 整合 Lit Web Component
0 Favoriten
0 Forks
1 Dateien
Zuletzt aktiv 10 months ago
此範例展示如何在 Streamlit 應用中嵌入 Lit Web Component，而不依賴 CDN。使用 Web Components 技術，可封裝自訂 UI 元件，並透過 JavaScript 互動，適用於建立模組化的前端元件，提升 Web 應用的可維護性與重用性。
| 1 | import streamlit as st |
| 2 | import streamlit.components.v1 as components |
| 3 | |
| 4 | st.title("使用 Lit Web Component (無 CDN)") |
| 5 | |
| 6 | lit_component = """ |
| 7 | <script type="module"> |
| 8 | class MyLitComponent extends HTMLElement { |
| 9 | constructor() { |
| 10 | super(); |
timmy / Streamlit 聊天應用示範
0 Favoriten
0 Forks
1 Dateien
Zuletzt aktiv 10 months ago
| 1 | import streamlit as st |
| 2 | import random |
| 3 | import time |
| 4 | |
| 5 | st.write("Streamlit loves LLMs! 🤖 [Build your own chat app](https://docs.streamlit.io/develop/tutorials/llms/build-conversational-apps) in minutes, then make it powerful by adding images, dataframes, or even input widgets to the chat.") |
| 6 | |
| 7 | st.caption("Note that this demo app isn't actually connected to any LLMs. Those are expensive ;)") |
| 8 | |
| 9 | # Initialize chat history |
| 10 | if "messages" not in st.session_state: |
timmy / 使用 Lit 和 Tailwind CSS 建立商品卡片
0 Favoriten
0 Forks
1 Dateien
Zuletzt aktiv 10 months ago
這段 HTML 結合 Lit 和 Tailwind CSS，建立了一個 自訂 Web Component <product-card>，用於顯示 商品資訊卡片。它包含 商品圖片、名稱、價格、庫存狀態、尺寸選擇、購買按鈕及收藏按鈕，適用於 電商網站、購物平台或商品展示頁面，並支援 響應式設計，提供現代且直覺的購物體驗。
| 1 | <!DOCTYPE html> |
| 2 | <html lang="en"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8"> |
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 6 | <title>Product Card</title> |
| 7 | <!-- 引入 Tailwind CSS --> |
| 8 | <script src="https://cdn.tailwindcss.com"></script> |
| 9 | <!-- 引入 Lit --> |
| 10 | <script type="module" src="https://cdn.jsdelivr.net/npm/lit@2.8.0/+esm"></script> |
timmy / 使用 Lit 與 Tailwind CSS 建立 Web Component
0 Favoriten
0 Forks
1 Dateien
Zuletzt aktiv 10 months ago
這段 HTML 結合 Lit 和 Tailwind CSS，建立了一個 自訂 Web Component <my-component>，用於展示 帶有標題、描述和按鈕的簡單 UI 卡片。它示範了 如何在 Lit 中使用 Tailwind CSS，並透過 Light DOM 渲染確保樣式生效，適用於 前端開發測試、組件設計或 UI 開發的快速原型。
| 1 | <!DOCTYPE html> |
| 2 | <html lang="en"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8"> |
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 6 | <title>Lit with Tailwind CSS</title> |
| 7 | <!-- 引入 Tailwind CSS --> |
| 8 | <script src="https://cdn.tailwindcss.com"></script> |
| 9 | <!-- 引入 Lit --> |
| 10 | <script type="module" src="https://cdn.jsdelivr.net/npm/lit@2.8.0/+esm"></script> |
Neuer
Älter