2-3 【初识组件】顶部 TabBar

2-3 【初识组件】顶部 TabBar
根组件下面包含了很多的子组件
2-3 【初识组件】顶部 TabBar
组件就是控制屏幕的某一个部分,某一个区域

2-3 【初识组件】顶部 TabBar
组件是可以相互包含的
组件是定义在类里面的,类里面有属性和方法
2-3 【初识组件】顶部 TabBar

注解会标记一个class是component
2-3 【初识组件】顶部 TabBar
模板决定了组件长得什么样子
2-3 【初识组件】顶部 TabBar
style是风格什么样子
2-3 【初识组件】顶部 TabBar

2-3 【初识组件】顶部 TabBar

2-3 【初识组件】顶部 TabBar

开始做顶部的tabBar
把原来的代码都删除掉
2-3 【初识组件】顶部 TabBar

2-3 【初识组件】顶部 TabBar

2-3 【初识组件】顶部 TabBar

2-3 【初识组件】顶部 TabBar
emmet
emmet的语法:
https://docs.emmet.io/

先写上这三个

2-3 【初识组件】顶部 TabBar

2-3 【初识组件】顶部 TabBar
写css:
2-3 【初识组件】顶部 TabBar
这样就横过来显示,不是竖着显示了
2-3 【初识组件】顶部 TabBar
上下为0 左右为5px
2-3 【初识组件】顶部 TabBar
四个是上右下左,是对称的,所以可以写成 0 5 这种形式
2-3 【初识组件】顶部 TabBar
这样之间就有了间隔
2-3 【初识组件】顶部 TabBar
把文字下面的斜划线去掉
2-3 【初识组件】顶部 TabBar

左右和上面都没有贴合
2-3 【初识组件】顶部 TabBar
还是没有很好的贴合的,主要是由于它外部产生的
 2-3 【初识组件】顶部 TabBar
在最外层的styles.css内去写css代码。这个是全局的
2-3 【初识组件】顶部 TabBar

2-3 【初识组件】顶部 TabBar

现在就全完的贴合了
2-3 【初识组件】顶部 TabBar

ngFor

使用ngFor循环的形式
2-3 【初识组件】顶部 TabBar
这就要求tabs是一个数组
在ts内定义属性,这是个数组
2-3 【初识组件】顶部 TabBar
ngFor循环出来的菜单
2-3 【初识组件】顶部 TabBar

ngFor是一个指令

回顾

组件就是控制屏幕的某块区域的视图
class通过属性和方法与视图交互


2-3 【初识组件】顶部 TabBar
html的内容可以这么写,这是内敛的写法
2-3 【初识组件】顶部 TabBar

ant design的例子都是内联的写法
https://ng.ant.design/components/grid/zh
2-3 【初识组件】顶部 TabBar



通过chrome的插件Augury看组件Tree
2-3 【初识组件】顶部 TabBar
这里可以查看依赖注入的顺序
2-3 【初识组件】顶部 TabBar








 

上一篇:android:应用程序崩溃当我点击后退按钮(activitygroup TabWidget)


下一篇:微信小程序~TabBar底部导航切换栏