用Python写网页的工具 SimpleStart 库介绍 - 10网页的页面布局-菜单-移动适配

本文链接：https://blog.csdn.net/shinesoft/article/details/136278765

这是最近介绍 SimpleStart 进行网页开发的最后一章内容，后续我会推出使用 SimpleStart 具体案例开发的分享。

本章内容

1. SimpleStart 网页页面的布局
2. 菜单的实现
3. 移动适配说明

1. SimpleStart 网页页面的布局

一个最简单的 SimpleStart 单页面应用就是一个主页面，元素基本上按照上下排序。如果要加入多列布局，我们可以使用 ss.column 列布局组件。该组件的使用也很简单

cols = ss.columns(3) #等比例将页面分为3列
with cols[0]:
	ss.write("这是第1列")
with cols[1]:
	ss.write("这是第1列")
with cols[2]:
	ss.write("这是第1列")

如果不想按照等比例划分列，可以用一个数组说明比例关系，比如 ss.columns([1,2,3])，这是页面将按照1:2:3的比例划分为3列。如果你想看清楚页面的列划分，在开发阶段，可以使用 design=True参数，这时页面将显示列的边界线。

一个完整的页面应用还包括侧边栏和顶部工具栏。这两个是怎么出现的呢？

当你创建了多页面应用的时候，SimpleStart 会自动将页链接显示在 侧边栏内。而顶部工具栏需要在配置文件 config.yaml中设置。一个简单的config.yaml文件内容是这样的

#base
title: "SimpleStart"
port: 8000
show_sidemenu: False
show_topbar: True
topbar_height: 60

这个例子设置了显示顶部工具栏，并且工具栏的高度是60px。那么它的内容在哪里呢？
非常简单，在项目的子目录 pages 里面，你创建一个文件 header.py , 在这里面添加元素即可。
例如

#header.py
import simplestart as ss
ss.button("Home")
ss.button("Docs")
ss.button("Blog")

一个完整的布局示意图

2. 菜单的实现

我们看到了在网页上出现了顶部工具栏，并且也添加了3个链接按钮。那如何添加下拉菜单呢？
我们利用 ss.template 模版类，在header.py 里添加element plus的菜单组件就可以了。

#header.py

import simplestart as ss

ss.button("Home2")

ss.button("Docs")

ss.button("Blog")

ss.template('''
  <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    \@select="handleSelect"
  >
    <el-sub-menu index="2">
      <template #title>顶部菜单</template>
      <el-menu-item index="2-1">item one</el-menu-item>
      <el-menu-item index="2-2">item two</el-menu-item>
      <el-menu-item index="2-3">item three</el-menu-item>
      <el-sub-menu index="2-4">
        <template #title>item four</template>
        <el-menu-item index="2-4-1">item one</el-menu-item>
        <el-menu-item index="2-4-2">item two</el-menu-item>
        <el-menu-item index="2-4-3">item three</el-menu-item>
      </el-sub-menu>
    </el-sub-menu>
  </el-menu>
''')
#hack一下，否则因为宽度太小，菜单标题只显示省略号
ss.style('''
.el-menu--horizontal{
    min-width:200px;
    margin-right:0;
}
''')