00:00
好了,各位,路由学完了之后啊,我们就进入一个比较轻松的环节,我们来学习一些UI组件库的使用,哎,就是帮我们去绘制页面的是吧?来同学分析一下现在我写的这个案例啊,同学好像不说非常精美吧,但是至少这个样子也还是看得过去的是吧?同学们我用了什么写的样式呢?是我纯自己手写的CSS吗?不是,回到代码当中带大家看一眼,或许大家都忽略了,同学们,我们是不是用了bootstrap这个成型的样式库啊,你比如说同学我来到这个里边,我一旦把这行引入住调,你回到页面里边,你再看样式是不是都丢了,这可是纯纯的HTML,最原生的效果是不是奇丑无比啊。哎,所以说我们呢,是用到了这个bootd drop,但是这也不是一个最好的方式,同学我就问你一个事儿啊,你说这是不是属于头部的这个区域,我是不是把头部抽成了一个组件。
01:00
那个组件是不是叫做hier啊,同学们,那你回到代码当中,你看看咱的hier是怎么写的啊,Src下的components下的hier同学,我问一下这组件是不是咱自己定义的呀?哎,是的,你自己写的文件夹,你自己写的GS叉对吧?那我再问你同学,这里边这些结构是不是也你自己写的呀?你说什么配置杠嗨的,是不是都是得自己写这些东西呀?哎,那你说同学能不能有这种库呢?像这种啊叭较成型的东西就是这种文字又大是吧,而且还加粗了,而且明显在整个页面里起到一个标识的作用,一个大标题,有没有一些库就能帮我去封装这些东西呢?也就是说目前这个hier是我自己写的,那能不能有一些成型的库帮我直接写好这hier呢?那文字本身就是加粗放大的啊,然后我只需要剔掉里边的内容就可以了。有没有这样的库呢?有,而且不在少数同学前端里边三个比较主流的框架,比如说最开始的angel,有人为angel封装了一套UI组件库,而且呢,同学有很多的大厂都在做这种事儿啊,那包括我们现在学的react也有人,哎,针对react封装的那些很多成型的UI组件库,就有一种效果,不用你自己去写过多的样式,开箱即用,就你把我这button引进来,我那button自带背景,自带高亮效果,就一切是都写好的啊,而且针对view也有人去做设计啊,那现在谁的UI组件库最多呢?其实相对来说view的UI组件库的会多一点啊,然后其次是react,然后是安了,好吧,嗯,那回到课件当中,同学们走。
02:45
课件,哎,在这儿那第六章的学习了是吧?UI组件库,那UI组件库啊,其实是有很多的同学啊,那我们不可能说把所有的都讲给大家,讲一个国内里边咱们用的最多的是吧?其实国外有一个呢,也挺出名的叫ma特的UI,这个库呢,也是针对react所封装的一个UI组件库,给你写好了很多的按钮啊,输入框啊,提示效果呀,都写好了,你可以去用啊,那我们呢,不讲这个,因为在国内呢,用的不是很多,我们一定要讲一个,哎,对大家以后工作有帮助的谁呢?就是蚂蚁金服出品的一个叫做aunt design design这个词是不是有设计的意思啊同学们,那aunt是不是那个动物那个蚂蚁那个意思吧?哎,所以说aunt design就是蚂蚁设计啊,蚂蚁金服前端团队出的一个基于react封装的一个UI组件库,能让你在中更加方便快速的搭建整体这个UI页面。
03:46
OK啊,来了,我们看看它官网呢给大家了,Geth地址呢也给大家了,嗯,回到代码当中,同学们我先做点准备性的工作,好吧,我先把脚手架呢停掉啊各位停掉,然后啊,我把我之前所写的代码啊就都删掉了,因为毕竟这里边都是还是路由那些东西呢,是吧,什么components啊,Pages啊这些我就都删掉了,APP呢,我给它全选删除rcc,我创建一个非常干净的APP,好,然后我在下边呢,同学我随便写一个按钮啊,Button,这是HTML里边最原生的按钮了,对吗?同学们,哎,写一个叫点我来同学我运行一下脚手架啊看看怎么样,那么还有一个问题啊,就是在这儿index里边,哎在这儿我呢,由于现在也不写路由相关的东西,所以说我也不想用这个路由器,好吗?诶删掉,那这APP呢,也无需再包裹这些东西了,诶好用就用,那你不用就当然别包裹了呀,是吧,回成一行。
04:46
走。诶,这个呢,给它拿上来好嘞啊,运行一下我的脚手架啊n PM start走,你看看这个按钮长什么样啊,你如果真的是一点样式也不写,你看看HTML里那个最原始的按钮,不能说非常丑啊,反正是不太好看是吧?哎,来吧,那我们把这个aunt design给它用起来,这个aunt design啊,有一个简称,你不觉得每次你说aunt design auntt design这有点绕口吗?它有个简称叫做auntt d啊ant那个design的词不说了,就叫auntt d,可以这样讲吧同学,基于react封装的UI组件库昂D的地位呢,那肯定是非常高的,而且呢,使用量它比较大,所以说哎,我们说说它好吧,那么官网你可以复制这个地址,或者呢,大家可以打开百度呢去搜一下也行啊,那我就是把这地址呢,就粘过来了,on.design回到浏览器中啊,开一个页面走。
05:47
那咱们就来到了aunt design的官网是吧?哎,你看他这儿呢,设计的还挺有意思的哈,来回再变,嗯,蚂蚁金服出品,同学,支付宝是不是蚂蚁金服旗下的呀,所以说你能够明显感觉出来它这个组件库的设计呢,整体是以这种蓝色为色调的,看到没?哎,好,那说老师我想用,那我怎么用呢?我慢慢来啊,首先呢,先安装它,咋安装呢?我就直接跟大家说啊,非常简单啊,脚手架启动了是吧?哎,那就再开一个,嗯,12AD谁呢,千万别安装on啊,然后杠design不用这么写啊,千万别这么写,直接就叫on d哎,敲回车把它安装上,嗯,稍等它呢,慢慢的安装它的,我们回到文档里瞄一瞄,同学呢,有这么几个选项啊,如果你想做一些基本的使用,就接下来我带着你进行一些基本的使用,咱不做什么进阶的操作啊,在下一个章节。
06:47
点我们进行点进阶的操作,什么按需引入啊,什么自定义主题啊,那是下一章节的事儿啊,我们基本使用呢,你点这个组件就行,哎,那同学你看啊,整体这个深蓝色,这个淡蓝色,还有这边的这种啊,还有这些东西你觉不觉得都是那种支付宝蓝那种感觉呀,支付宝是那个蓝色的图标里边整体的主色调是不是也是蓝色啊,那蚂蚁金服出品它的主色调呢,也是这蓝色,说老师这东西怎么用啊,其实非常简单啊,同学这里边呢,给你提供了很多的东西,你比如说按钮啊,图标啊,排版啊等等这些,我们呢,就从最开始来,你比如说同学我想写几个on地里的按钮,我就看看比我这种原生的傻按钮好看在哪啊?那怎么用呢?点击button按钮啊,好,然后在这儿呢,就说何时使用同学咱不用听他说这些啊,UI组件库使用的原则就是接地,接地气点说啊同学UI组件库都。
07:47
不是这么玩的,你是不是想写按钮,你就点按钮,然后你就往下找,它给你提供了这么多的按钮,圆角的,方角的,带图标的,带文字的,对不对,还有一些这个警告的,还有一些,哎带就很多吧,是吧,还有链接形式的,你就看看你想写那按钮跟这里边儿的谁比较像。
08:08
说老师我就想用这种,那就这种行,那你就找到这段代码是怎么写的,把它拿过来就可以了,同学,UI组件库的东西您千万别背,没有太大的意义,对吧?UI组件库都有自己的文档,人家告诉你怎么写咱就怎么写,同学,咱先不做太高级的事儿啊,咱就做这按钮。哎,它里边写了一个词叫primary button primary什么意思呀,叫主要的,重要的,所以说这个蓝色的按钮就是主按钮,老师我想问一下,凭什么主按钮就让它是蓝色的呢?因为蚂蚁金服出的这个昂D呢,整体色调那就是蓝色,所以说人家的主色调那就是蓝色,那主按钮当然就是蓝色呀,诶说老师那我想用这按钮可以呀。他说老师我怎么用了,这代码在哪,怎么写呀,看每一个小小的展示区里啊,它都有这五个选项,说说是干嘛的,首先第一个说老师在什么code night boxs,这是什么地方?同学,这是一个在线编程的一个网站,你把它打开啊,你点它就跳到一个新的页面,可以在你电脑没有任何编译器的情况下,你在这个里边也可以进行写代码,也能看出效果,但是这个呀,同学咱几乎不用,因为一般我们都在自己的项目里直接就把它用起来了,没人上这儿去写代码去,而且最主要的是加载特别慢是吧,你看同学觉不觉得这是一个在线的VS扣的有点那种感觉是吧?哎,朱老师,那后边那几个呢,你看1234这四个同学都是在线编程的网站,可以让你手头没有编译器,没有Vs code的,没有NPM的情况下,也能去练习一下这个组件的使用,对吧,但是我们是有这些环。
09:54
境的,那所以说我们几乎不用前四个说老师,那最后一个呢,你看显示代码,同学,这才是重头戏,人家教你怎么写,他写的再精美,不告诉你怎么写,白玩儿是吧?哎,点击这个一点,同学,你看代码这不就来了吗?说老师,我怎么看这些代码呢?同学啊,你得根据上边这个效果,你去看下边这个代码,那我想问大家的是,上边有几个东西呢?数一下12345对吗?那你观察代码里边同学。
10:24
这边有三个,换了个行有两个,那所以说这三个当然指的就是这三个,那这两个当然指的就是换行之后的这两个,对不对?那你要写哪个呀?老师我要写第一个呀,那所以说你只把这第一行button给它复制过来就可以了啊,但是得有个前提,你得引入button同学,这个button呢,可不同于你在HTML里面写的这个小写的啊,Button你的小写的是原生的,注意哥们儿,人家那个B是大写的,是on d帮你设计好的组件,那所以说呢,人家这么引入,那咱也这么引入呗,复制回到你的代码当中,有前提啊昂,D你得安装,你没安装怎么引入呢?对吧?八引进来了,然后再把他写的那个复制过来,咱先不自己写,咱先复制是吧,放在这儿巧回车,诶,你看对吧,他教我这么写的呀,那来咱试试看啊,回到第一个终端里边,这啥意思正在变译。
11:25
如果特别慢,给你个建议就直接把它停掉,但是现在它缓过来了是吧?好,打开这个3000,我们看一下效果,哎呀同学有点让你大失所望了,这按钮好像也并没有它那么好看呀,这是什么情况啊?那我说一下同学在它的文档里呀,没有给你体现出引入样式的那部分代码啊,那怎么引入样式呢?来同学你说你这么写昂D是什么意思呢?像这种不写路径直接就写报名,同学,那你说像这种react呀,On d呀,我们都管这种叫做第三方库或者叫第三方包,对吧?这些东西你直接写名,直接写名的东西,他会默默的来到note modus里面去找你,比如说你只写了一个aunt d,没有写路径,他就默默的来到no modus里面,直接就去找了,明白不?
12:15
哎,这就是NPM这个包与包管理器的时候,咱们当时讲的这个是不是,嗯说老师那你告诉我吧,样式在哪呢?样式在哪呢?你先找到昂特D那个文件夹看没看到这有一个an开头的on d里边有一个Dis,这里边有一个on d.CSS同学就这哥们儿,就这里边包含着样式,所以说你得把它引进来啊,那划起来走咋引入啊,原来怎么引入就怎么引入呗,引入on地下的Dis下的谁呢?On d.CSS老师点CSS能省略吗?不能。这种点CSS是不能省略的,能省略后缀的,在脚手架里边只有两个,一个点GS,一个点GS叉,OK,好嘞,同学,样式这回是不是就引进来了,别急,保存一下,等着它编译,它没编译完呢,第一次啊,使用on d的时候可能稍微时间会久一点啊,你以后再启动就能快一点了。好了,同学,这回呢,我再打开3000,同学怎么样,按钮是不是到位了?哎,同学,你看这比你自己要写按钮方便的多吧?老师,我没觉得方便到哪儿去,我自己写也行。同学,你看人还有这效果呢,鼠标一放,它有一个呼吸的这种效果是吧?啊说老师那我也觉得它一般,那是因为你还没有用太炫酷的组件啊,那咱们接下来呢,观察一下它这个代码,回到刚才的Vs code里边,同学,你看他怎么写的啊,首先呢,跟你正常写button是一样的啊,开始标签,结束标签,中间写按钮里的内容,然后这他写了一个type,等于primary,这什么意思呀?嗯,这什么意思呢?就是主按钮说老师那我要去掉呢。
13:52
那诶咱试试呗哈,来同学,我再写一个按钮,这个按钮我去掉type等于prely,那我们再看一下效果呗,回到页面瞧着同学,如果你不说它是主按钮,它就是默认按钮,默认按钮的效果就是也有呼吸效果,鼠标放上去淡蓝色的边框啊,文字也变成淡蓝色,OK,这就是默认按钮,说老师,那我想问问这type除了写primary还能写啥呀?是吧?同学不能说他教啥,那咱就看啥,那咱有自己的需求呢,那怎么办呀?哎,同学,看这每一个组件的最后在右侧都有一个APIAPI什么意思啊,就是都有哪些属性可以配置,你可以简单这么理解,点一下API来吧同学,那你想找哪个配置项,你是不是想找tap,那你就来到这儿去找谁呢?找tap?嗯,是不是出来了,告诉你这个东西能设置按钮的类型,哎呀同学。
14:52
课有这么多选项呢,是吗?首先说一下这个primary刚才我们已经练过了是吧?哎,说老师这个default呢,如果你不写它就是default啊,说老师那这个呢,Link啥意思呢?那我们简单试一下啊,回到代码当中再来一下。
15:11
诶走type等于什么呢?叫做link,那我们这回再看看这按钮啊,咱都改一改,别一直都叫primary button啊叫按钮一复制,那这呢当然就叫做按钮二。这叫按钮三好保存,回到页面看一下效果,同学,你看明白啥叫link了吧,哎,就好像是一个链接那种形式啊,没有了边框,没有了背景对吧?哎,所以说一定要学会看它这个文档,知道吧?啊说老师我总感觉这个button没什么意思,它这没有什么太大的这个感觉,那行,咱再练一个回到这儿啊,找到icon icon什么意思啊同学,图标是吧,你点击一下这图标。
16:00
等着它加载到这页面里面来,同学他给你提供了很多的这种图标,特别的好看啊,比如说往左的往右的对不对,而且呢,最主要的还给你提供了一些成型的品牌图标,你比如说同学YouTube是吧,哎,这视频网站你看YouTube。啊说老师还有什么呢,微信,你比如说但是你不能搜这个微微信信你不能搜这个,你搜WeChat看微信还有啥呢?咱常见的微博,嗯都在这儿了,你比如说往左的按钮,你就搜一个left,你看各种往左的按钮来咱试试,比如说我就喜欢wech这图标,那咋办呢。同学,往下滚动看看,他教你怎么基本使用的,在这儿就出来了,你看有这么多是吧,当然也有一些是动态的是吧?点击这个看代码,同学你看啊,他说让你从这里边引入东西,对吗?同学aunt d呢,有很多的子库,子库是什么意思呀,就是单独又形成了一个库,你就比如说同学咱们学习react,一个得用react核心库,一个是得用react-do呀,它并没有说把这些库呢都毁成一个,说就叫react,哥们儿你就引入吧,这一引入就啥都有了,不是它有很多的子库,为了实现一些特殊的功能,对于昂D来说也是,现在呢,已经是昂特D4.x版本了,昂特D呢,想当年在3.x版本的时候,也是所有东西,一堆东西全都放在这个库里,就叫aunt d,后来呢,觉得哎呀没必要,这个库弄得太大了,有些人根本就不用图标,所以说他把图标呢放到这个库里了,那咱们需要做。
17:40
做的呢,就是从这个库里边呢去引入图标啊,说老师呢,我就想在页面就展示这微信,那怎么办?你就告诉我啊,同学看啊,首先你点一下这个微信,点完了告诉你,诶已经粘贴到你的剪切板了,那你需要做的就是回到代码当中,在下方敲个回车粘贴,你看同学你看它的名字WeChat outlined啥意思,带有边框的微信图标,说老师那这不就得了吗?那我看看效果呗,同学你回到页面它肯定得报错,说WeChat outlined is not DeFined没有定义,同学你这直接用组件肯定不行啊,你能猜到说老师我可能在昂D里边这么引入这图标,但是刚才我说了,同学人家没把图标也放在这个库里边,人家放在了一个子库里边是吧?那个子库叫什么名字呢?我们也得去查看文档才知道,点开这儿发现那个子库叫这个名字,那所以说你需要做的事就是回到代码当中怎么办呀,引入。
18:40
啊,花括号from哪个库,这个库也没有必要去记它,对吧,看文档就可以,然后你再引入这个什么WeChat outlined,那这时候保存稍等,等它变异。哎,稍等一会儿,你每一次引入一个新的库呢,它都要便利里边的东西啊,可能就会稍微慢一点啊,等等再给它两秒钟啊,好了,出来了,回到页面呢,咱看一下效果,同学咋样,微信这是不是出来了,哎,你看这图标这不就有了吗?啊朱老师,那别的图标也都是这么用的,对呀,你只要找到你喜欢的图标就可以这么用啊,你就比如说同学我现在还想弄一个微博啊,那比如说就相中这个了,那你就摁一下就复制了,然后在这敲回车,图标就来了,那当然同理,你得去这个库里边是不是把这个微博图标引入。
19:27
好了,一保存一回来一看效果,你看微博也有了,对不对,哎,好说老师那图标我感觉也一般般,没让我感觉出来它有多,呃,怎么说呢,这个强大是吧,那同学来,咱往下看点这个效果明显一点的啊啊,如果再往下一点点看也行,同学啊,但是效果不明显,还有就是啊同学们,那你想想它这么多的组件是吧,我们不可能从头到尾把每一个都给它练一练对吧,你就比如说这种带有图标的按钮,那咱们就是吧,就不可能一个一个都过呀,所以说我是这样的,给大家找几个有代表性的,站在大家的角度,啥也不知道是吧,我也没学过,我怎么去看文档,去找到这个东西,我去用是吧?哎,所以说就是说不是教你每一个都去就去怎么用,而是说找几个有代表性的,让你学会这种方式对吧?嗯,好了,打开这个,你比如说同学举个例子,我想要这种图标,然后这种按钮就里边带个放大镜,有个search,那咋办呢?
20:26
你打开代码呗,咱看呗,第几个按钮123是第三个按钮啊,你找啊说老师的第三个往下找,这应该不对,它里边带的是search是吧?往下找啊,那应该是这个第三个吗?这个那你需要做的就是把它复制过来,然后放在你这儿,比如说按钮都让它挨在一起走,同学,那你看这按钮跟刚才那些按钮啥区别呢?有啥区别?首先它也是主按钮对不对,里边也有自己的这个按钮文字对不对,但是你发没发现同学在这儿,嗯,咋的了,它是不是多了一个属性叫做icon,你猜啥意思,就是按钮里的图标呗,然后它配了一个什么图标,Search outlined搜索图标,而且是带边框的,那你需要,诶是不是来这儿引入这图标啊?哎,你保存等着它编译,回头看效果,这不就来了吗?对吧?哎,这多快速啊,但是咱说了我还想带大家看点那种,一看就觉得诶,行,一看就哎炫酷是吧?来找几个有代表性的,说白了就是找点复杂的让你。
21:26
看一下你自己实现起来它真是有点费劲的是吧,你比如说呢,最具代表性的就是这个日期选择框。就这种一点击让你选择日期,同学这东西要是你自己写,其真是费点劲的啊,而且里边还有什么按月来回翻呢,然后什么按年来回翻呢,这种是吧,这是选择日期,这是选择周,第几周是吧?来比如说我就想把这个搞到页面上去,那怎么办呀,大家现在已经都学会了是吧,看哪个跟咱们想要的长得像,完了咱就瞄代码对吧?然后如果说你想进行点高级配置找谁是吧?API哎,就这么回事,来吧,同学你看说老师这里边东西多呀,跟刚才那不一样的呀,你别急,你就关注你想写的东西啊同学,这是属于123455个里边的第一个对不对,那你往下找,你就找这个嘛,React到点render,你就找那结构,同学是不是要第一个来复制走。
22:21
回到代码当中,往这放行吧,但是你是不是没有data peer这个组件,你别觉得这个dateer一定就是从on d里边引入的,不一定啊,你看他的文档怎么说好吧,他怎么说的,他说date peer啊,那还真是从这,那咱就听他的话,那就复制。然后呢?在这是吧,逗号引入啊,再往下看,如果是这就行了,其实这还有一个on change,什么意思呢?就是你选择了一个日期之后啊,它的回调函数是吧?哎,说老师那你咋知道的呢?那就算我不知道来我不知道我也没跟你说啊,那你看他说on change is not DeFine,那怎么样,那你就可以先考虑不写这个on change对吧?回到页面看效果来日期选择框就位了,对吧?哎,按照年月日来划分啊,选这个是吧,哎就选上了,说老师,那比如说我想拿到选的这个时间呢,对吧?那咋办呢?那你看一下人家官方文档怎么写的,是不是有一个on change。
23:20
对吧,然后呢,啊,函数就在这呢,能拿到date,还有这个时间的字符串,对吧,说老师,那他身上还有什么选项呢?除了这个unchang还有什么呢?说了是不是看API呀,来走往下滑往下滑,你找吧,这个里边一定会出现刚才你所看到的那个onch change,来往下找往下找,呃,我看看啊,是在哪呢?在这你看以下API为data peer和什么range peer共享的API,那你先找找看看有没有on change呗,找来找去,找找找找找on change on开头的好像没有是吧?那你别急,你再往下看,这不就是date paperer,哎,你用的是谁呀?
24:00
Dateer啊,那你看人不说了吗?Date peer身上API你找吧,On change1定有,你看时间发生变化的回调,你刚才选了11月1日,你后来选了11月2日,那肯定就得有个回调嘛,对吧?哎,然后就诶你只要一更改他就去调这个回调,对不对?哎,所以说你看查API慢慢查都是能查到的,我知道同学们现在可能有一个疑惑,老师啊,他多呀,这么多东西,那我得同学那我这样跟你讲啊,就是说如果你想把昂特D里边每一个组件你都用到,每一个组件的每一个属性你都用到啊,你都把它说都用了一遍,同学你至少你得做几年的项目,你才是说,哎,能把昂地里边这些东西都用到,你知道吧,哎,所以说同学不要说追求说哪一个我都用一用,你学会一个通用的技巧就可以是吧,嗯,那其实这里边呢,还有一些别的同学,你比如说啊,还有什么呢,Input框。
25:00
是吧,啊也可以引入说老师你刚才说那什么意思呢,就是不一定东西都是从on d里边引入的,你看一下这块你就明白了,同学回到官网,其实它上边呢,那个例子里,他写了一个这个同学就这个东西。就是选择一个时间段,你知道吧,就是一个开始日期,一个结束日期,就这种选一个段,你知道吧?哎,那你看这个东西,比如说我想把第一个搞到页面上,就来点代码,同学走第一个谁是不是r peer,你仔细看,同学我从aunt d上引入的是谁?Date peer,然后我date peer的身上引入了谁range peer明白不?哎,就是先引入他,再从这个人的身上再引入一个下属的昂特D经常干这种事儿,哎,那所以说你需要把这段代码给它拿过来,然后回到你的哎代码当中,然后在上方呢回车,在这儿给它取好,然后如果你想用的话,那就很简单呀,你把这组件往这一写一走好了,同学回到页面看效果走选时间段的是不是出来了,你看对吧,这不就可以了吗?哎,那你看看同学这些东西,你直接一写效果就出来了,总比你自己要亲自写方便吧,是不是同学?嗯,而且你看它的主。
26:14
色调,你就比如说选择日期,那这为什么是淡蓝色的边框呢?Today啊,选择今天为什么是蓝色的呢?一句话整体的页面风格,主题颜色都是那种支付宝的蓝色是吧?哎,这就是昂特D的一个最基本的使用,如果说再往下聊,同学把每一个组件,每一个属性都聊一下,同学你信不信,十天的课程咱都不一定能给他讲的完,所以说以后学会怎么用是吧?同学,哎,就比如说我想用栅格,那就点开,哎,看看栅格里边有什么,哪个是你想要的啊,其实同学说句实在话啊,你说难度在哪呢?其实难度在分析它这个代码,大家觉得呢?哎,难度在分析这儿知道吧,就是哪一个结构对应哪一块代码,但是如果你看多了呢,其实也就还好是吧,嗯,好,那最后呢,我说一个问题,同学,你说是什么样的项目都能用昂D吗?
27:10
同学,咱就拿这按钮来说,是你给我提供了很多的选择是吧?啊带颜色的不带颜色的是吧,还有这种什么哎,这危险的按钮啊等等这些,说老师我我就想问一个问题,这东西是什么项目都能用昂特地吗?当然不是,同学你比如说啊,你们公司呢,要做一个像淘宝这种,哎非常成型的有自己这个品牌的这个电商网站,同学我问一下淘宝里边哪一个按钮,你觉得昂特地里边能给你提供,咱就不说别的同学,就淘宝搜索这按钮都大有文章在里,你觉不觉得这块的颜色和这块的颜色是不一样的,兄弟,它是个渐变,而且你再仔细观察,其实它是一个非,怎么说呢?就是哎直接过渡过去的,其实中间它还有一些哎细腻的色彩,所以说你像这种就不能用on d。
28:01
说老师们昂D适用于哪些项目呢?这咱得说明白,别一说昂D就就就肯定得用同学举个例子,那按钮都是这种的,对不对?长方形的,如果设计师设计的按钮是那种圆角特别大的,你比如说是这种的,是这种按钮,哎,圆角特别大的,我问一下安D能行吗?可能说直接使用不行,你是不是还得自己写点样式,所以说他也不是万能的,它适用于哪种项目呢?这种项目哎,我把呢,这个公司里边的一个内部的管理系统呢,截了个图啊,当然我把关键的一些东西呢,我给它改了个名,让他打开,你就比如说其实这儿呢,是我们,哎内部在用的一个系统,当然了菜单的名啊,还有关键的信息呀,都被我改掉了,就让你感受一下这种感觉,特别适用于这种成型的后台管理系统,你就比如说同学这新增按钮。它到底圆角有多大,我是不是也不太关心呀啊,总之你这个东西能有一个非常良好的展示,看起来不那么审美疲劳是吧?而且呢,最主要是系统稳定就行,所以说on d什么的特别适合搭建这种系统,OK,嗯,好,那既然呢,都聊到这个on d了是吧?那再说说同学还有哪些这个UI组件库呢?其实还有很多同学,你比如说还有一个非常知名的啊,叫做element UI,不知道大家知不知道啊,Element UI这个呢,是饿了么团队出的,一个学过view的小伙伴呢,肯定用过这个库,那这个库呢,就是最开始啊,人家是基于view去设计的啊,专门给view用的,后来啊,诶,大家觉得这element UI真不错,后来这个团队呢,又出了什么呢?Element UI for react啥意思?哎,让react也能用element UI,然后咱再说。
29:50
说这aunt d同学,其实这个aunt d吧,最开始的时候人家就是为react服务的,后来大家觉得,哎,他真不错,然后这团队又出了什么呢?昂d for view,哎,就是为了抢占市场嘛啊,还有这个element UI,然后如果呢,大家想做这个移动端相关的,那给大家推荐一个有赞团队出的一个want UI也是很不错的,这个UI呢,就是也是基于view的啊,等以后大家学完view去可以用用它啊,这个东西主要是对移动端进行封装啊,当然不是这网站啊,打错了啊,那个是一个别人总结的东西啊VT want啊,咱上它那个官网去看,呃,在哪儿呢?在这儿,嗯,打开它是不是这儿啊。
30:36
不是这儿不是这儿,它有一个自己的官网啊万UI来搜一下吧,万官网,呃,不是这个不是这个应该是我看看啊哪个了,应该是这个吧,这个找一下。应该是这个吧,来打开看一眼,但是刚才他说显示的是不对的,他这应该给了一个呃,PAGE4这。看一下啊,哎,这就是它的官网,你比如说也有按钮,但你打开这按钮同学你看它就嗯,你感没感觉它像一个手机一样,对吧?哎,所以说它是针对于移动端所设计的,而是给谁用的呢?给view用的啊,这里边也有一些比如说按钮啊,你看也有图标,同学都得设计点图标对不对?哎,那这个呢,就是UI组件库啊,给大家扩展了两个,一个是element UI,一个是want,其实你要查的话还有很多很多,我们呢就不进行一一列举了,好吧,那这小节呢,我们先停一下,我们学会了昂D的基本使用对不对?哎,先找东西看哪个是你想要的,然后呢,点击它,然后看代码就可以了,那这小节呢,我们先停一下。
我来说两句