用Python写网页的工具 SimpleStart 库介绍 - 03常用组件及样式管理

SimpleStart 内置了 Element Plus 和 Vuetify 前端框架，提供的大部分组件都是 Element Plus 风格。

SimpleStart 提供了一些常见的 web 组件，包括：

1. 文本显示：text 文本, html 超文本, markdown 标记
2. 表单控件：text_input 文本输入框, checkbox 多选框, button 按钮, radio 单选框, selectbox 下拉选择框, slider 滑块
3. 信息反馈：message 弹出消息, dialog 对话框
4. 多媒体：image 图像, audio 音频, video 视频
5. 页面布局: space 空间, column 列, sidebar 侧边栏, section 父容器, expander 下拉展开
6. 数据库: Sqlite, table 表格
7. 模版类: template 简单模版, loadvue 加载自定义类

等其它组件。

这些是一些常用的组件。虽然看上去还不是很多，但是通过 SimpleStart 的模板组件，可以很容易地将 Element Plus 或者 Vuetify 的组件添加到页面上，这个以后再介绍。

今天介绍一下如何修改组件的样式。

第1种方法是在创建组件的时候，添加 style 参数，例如我们需要修改 text 文本框的 css 样式，可以这样

import simplestart as ss

style = '''
    color: red;
    margin:10px;
'''

#创建一个红色文本字体，间距为10px的文本框

ss.text("Sample", style = style)

第2种方法是通过ss.style方式，对页面已有的组件进行hack修改

import simplestart as ss

#创建一个html页面元素
ss.html('''
    <div class="test1">this is a div</div>
    <span class="test2">this is a text</span>
''')

#修改样式
ss.style('''
    .test1{
        dislplay:inline-block !important;
        background-color:lightgray;
        padding:5px;
        width:100px;
    }
    .test2{
        color:red;
    }
''')

ss.style方式可以对页面中的其他元素进行修改。

simplestart API 接口文档