09_Nav Components 导航组件

SHeader 页头

SHeader is a simple header component that is generated based on routing information

properties inherits SCard

• in property spacing : the spacing of header
• in property <[SOption]> value : route value of header
• in property source : split icon of header

functions

callbacks

• callback clicked(int,SOption) : run if you click the header

example

import {SHeader} from "../../index.slint";
import {Themes} from "../../use/index.slint";

component TestHeader inherits Window {
  width: 600px;
  height: 400px;
  VerticalLayout {
    padding: 30px;
    spacing: 30px;
    SHeader {
      theme: Dark;
    }
    SHeader {
      theme: Error;
    }
    SHeader {
      theme: Primary;
      font-size: 16px;
      clicked(index,node)=>{
        txt.index = index;
        txt.name = node.label;
      }
    }
    txt:=Text{
      font-size: 18px;
      in-out property <int> index;
      in-out property <string> name;
      text: "route-index:" + index + " route-name:" + name;
    }
  }
}

SMenu 菜单

SMenu is a menu bar located on the left side that you can quickly generate through the menu-data property

properties

• in-out property icon-box-size : menu item size ⛔
• in-out property icon-size : menu item icon size ⛔;
• in property <[MenuData]> menu-data : menu item data (generate menus through it)
• in-out property active : which item is active
• private property hover-icon-color : menu item icon color changed when hover

callbacks

• callback change(int,MenuData) : run if you click menu item
• callback clicked-account() : run if you click account icon
• callback clicked-setting() : run if you click setting icon

example

import { SMenu , SIcon} from "../../index.slint";
import {UseIcons} from "../../use/index.slint";

component TestMenu inherits Window {
    height: 600px;
    width: 300px;
    Rectangle {
      x: 0;
      y: 0;
      height:parent.height;
      width: menu.width;
      menu:=SMenu {
        theme: Dark;
        change(index,item)=>{
          debug(index);
          debug(item);
        }
        clicked-account()=>{
          debug("clicked account");
        }
      }
    }
}

STab标签页

provide tab functionality, so that users can switch between different content sections

properties inherits SCard

• in property theme : Surrealism Themes
• in property font-size : header font size
• in property font-weight : header font weight
• in property <[SOption]> tabs : tab datas
• in-out property active : active item

functions

• function to-left() : let tab header to pre page
• function to-right() : let tab header to next page

callbacks

• callback change(SOption) : run after you change the tab
• callback mounted(string) : run when init callback happend

example

import { STab , STabPanel} from "../../index.slint";
import { SText } from "../../src/text/index.slint";
export component TestTab {
    height: 400px;
    width: 400px;
    function show-panel(index:string) {
        panel1.visible = false;
        panel2.visible = false;
        if(index==panel1.index){
            panel1.visible = true;
        }else if(index==panel2.index){
            panel2.visible = true;
        }else{
            panel1.visible = true;
        }
    }
    STab {
        tabs:[
            {label:"test1",value:"0"},
            {label:"test2",value:"1"},
            {label:"test3",value:"2"}
          ];
        changed(kv) => {
            show-panel(kv.value);
        }
        mounted(index) => {
            show-panel(index);
        }
        panel1:=STabPanel {
            index: "0";
            SText {
                text: "This is a Panel -> test1";
            }
        }
        panel2:=STabPanel {
            index: "1";
            SText {
                text: "This is a Panel -> test2";
            }
        }
    }
}