首页 > 其他分享 >streamlit 展示自定义 html 以及 css

streamlit 展示自定义 html 以及 css

时间:2023-12-03 15:33:35浏览次数:64  
标签:style 自定义 tag html streamlit css

目前探索出来的有效方法:

style = """
        <style>
        .memo-box {
            border: 1px solid #ccc;
            padding: 10px;
            margin-bottom: 20px;
        }

        .tag {
            font-size: 12px;
            color: #888;
        }
        </style>
        """
html = """
<div class="memo-box">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla viverra mauris sit amet neque ullamcorper, sed rhoncus tortor dapibus. Fusce auctor nisi nec nisi rutrum, vitae rutrum lacus tincidunt.</p>
    <span class="tag">#tag</span>
  </div>
"""
st.components.v1.html(style + html)

style 和 html 要放在一起,如果分开的话,style 可能不会生效。

参考链接:
discuss.streamlit.io/t/applying-custom-css-to-manually-created-containers/33428/2
Components API - Streamlit Docs

标签:style,自定义,tag,html,streamlit,css
From: https://www.cnblogs.com/zkmjolnir/p/17873258.html

相关文章

  • Java开发者的Python快速进修指南:自定义模块及常用模块
    好的,按照我们平常的惯例,我先来讲一下今天这节课的内容,以及Java和Python在某些方面的相似之处。Python使用import语句来导入包,而Java也是如此。然而,两者之间的区别在于Python没有类路径的概念,它直接使用.py文件的文件名作为导入路径,并将其余的工作交给Python解释器来扫描和处理。另......
  • Spring是如何解析自定义的xml标签
    SpringSPISpring借鉴了JavaSPI思想来解析各种标签,我们称之为SpringSPI。SpringSPI沿用了JavaSPI的设计思想,但在实现上和JavaSPI及DubboSPI也存在差异,Spring通过spring.handlers和spring.factories两种方式实现SPI机制,可以在不修改Spring源码的前提下,做到对Spring框架的扩......
  • 【python笔记】contextlib,自定义with语句
    参考书籍:《深度学习入门——自制框架》[日]斋藤康毅步骤18.5使用with语句切换with语法python中的with语句,用于自动进行后处理。如文件读写:withopen('sample.txt','w')asf:f.write('hellosb!')这段代码等价于f=open('sample.txt','w')f.write('hellosb!&......
  • 【JavaSE】异常(异常体系、异常处理方式、自定义异常)
    异常介绍异常体系一定要能阐述异常的体系结构!异常类的祖先类:Throwable所有的异常都是一个类,如果不清楚可以在API帮助文档查询运行时异常:编译时没有错误,运行时可能会出错,通常是代码不严谨导致的编译时异常(不包含语法错误):主要起提醒作用,需要在运行之前给出解决方式异常处理......
  • 使用样式表和 rcParams字典自定义 Matplotlib属性和样式
    3种方式自定义Matplotlib的属性和样式1.运行时通过rcParams字典动态设置2.使用样式表3. 更改matplotlibrc文件在运行时设置rcParams优先于样式表、样式工作表优先于文件matplotlibrc即1>2>31. 运行时通过rcParams字典动态设置通过字典matplotlib.rcParams,动态修改......
  • vue 富文本编辑器 wangeditor 自定义上传图片 以及 解决 复制粘贴 word 没有图片的情
    本人比较喜欢用这一款编辑器,官方文档:(用于VueReact|wangEditor),很详细。我主要来说说怎么使用customPaste自定义粘贴的,怎么解决复制粘贴word,没有图片的情况。主要是关于wangeditor在vue2的使用效果图:先把完整代码放这里:<template><divclass="addpost_course"......
  • vue3使用富文本编辑器wangEditor 5,增加自定义下拉框,并动态改变下拉框内容
    官方资料wangEditor官网效果展示准备工作这里按照wangEditor官网提供的Vue3Demo操作就行,下面的内容可以直接跳过安装yarnadd@wangeditor/editor#或者npminstall@wangeditor/editor--saveyarnadd@wangeditor/editor-for-vue@next#或者npminstall@w......
  • SpringBoot自定义注解导出Excel
    先定义一个注解importjava.lang.annotation.Retention;importjava.lang.annotation.RetentionPolicy;@Retention(RetentionPolicy.RUNTIME)public@interfaceExcelHander{Stringvalue()default"";StringlinkFiled()default"";Cel......
  • HTML5 Video视频组件支持的视频编码格式
    一、HTML5Video视频格式与浏览器的支持情况当前,<video>元素支持三种视频格式:MP4,WebM,和Ogg:浏览器MP4WebMOggInternetExplorerYESNONOChromeYESYESYESFirefoxYESYESYESSafariYESNONOOperaYES(从Opera25起)YESYESMP4=带有......
  • 在Unity中模块化管理自定义功能和资源
    之前在做Unity项目时,有时会遇到多个项目共用同一部分代码或资源的情况。而当被共用的部分需要更新的时候,手动复制替换非常麻烦,并且可能会有遗漏。对于这个问题,一个很好的解决办法是将可复用的文件打包为自定义包(CustomPackage),使用git等版本控制工具来管理每个包的内容。什么是Pa......