This is a solution to the Multi-step form challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- Complete each step of the sequence
- Go back to a previous step to update their selections
- See a summary of their selections on the final step and confirm their order
- View the optimal layout for the interface depending on their device's screen size
- See hover and focus states for all interactive elements on the page
- Receive form validation messages if:
- A field has been missed
- The email address is not formatted correctly
- A step is submitted, but no selection has been made
- Semantic HTML5 markup
- CSS custom properties
- CSS Grid
- TypeScript
- Angular - Angular framework
- PrimeNG - UI components
- Bootstrap - For layout self
- carousel - component from NG bootstrap
- Step1: create new Angular project, run
ng new MultiStepFormSelf - Step2: add required package
- Step3: use
npm run startto start this simple project
- add bootstrap:
- run
npm install bootstrap
- run
- add PrimeNG
- run
npm install primeng primeicons
- run
- add ngBootstrap for carousel
- run
ng add @ng-bootstrap/ng-bootstrap
- run
-
carousel - NgbCarousel (轮播图)
-
FormBuilder
-
typescript - Type: 给类型起一个新的名字，也就是别名
-
Angular 元素名：
- ng-container：“不存在的”标签， 使其可以不借助包装元素（也就是说，可以不用多创建一个div，直接使用ng-container）同时使用 ngFor 和 ngIf 了，并且逻辑层次上也更加清晰。
-- 参考: ng-container 简介
- ng-template：-- 参考: 指南
-
学到一些新的CSS属性：
- counter-increment：参考: W3Cschool self: 给指定的选择器增加计数器，这个元素的值，是计数器的名字
-
学到一些新的单位/方法：
- fr: 是一个长度单位，常用在网格布局中；来自单词
fraction，表示作为剩余空间的一部分，将剩余部分按分配的数字按比例分配，可用来弹性布局 - vh: 是基于视图窗口的单位，vh:1% 表示视口宽度的1%
- vw: 是基于视图窗口的单位，vw:1% 表示视口高度的1%
- dvh: d是dynamic，动态的视口单位
- rem/em：都是相对长度单位，rem相对于根元素
<html>, em相对于父元素 - calc(): 使用：
width: calc(100% - 80px);calc()函数-MDN - clamp(): 这个函数的作用是把一个值限制在一个上限和下限之间，当这个值超过最小值和最大值的范围时，在最小值和最大值之间选择一个值使用。
参数： 最小值、首选值、最大值，即clamp(MIN, VAL, MAX) 其实就是表示 max(MIN, min(VAL, MAX))
使用：
font-size: clamp(1rem, 10vw, 2rem);，无论窗口怎么改变，字体大小不会小于设置的最小值，也不会超过设置的最大值。 选值规则：- 当首选值比最小值要小时，则使用最小值。
- 当首选值介于最小值和最大值之间时，用首选值。
- 当首选值比最大值要大时，则使用最大值。 clamp()函数-MDN
- fr: 是一个长度单位，常用在网格布局中；来自单词
-
CSS网格布局：网格
-
scss:
- 定义全局变量：
css只能使用
--来定义全局变量的，scss可以使用--也可以使用$来定义全局变量，所以建议--来定义。 参考: CSS、SCSS全局变量声明与使用 - @font-face
@font-face { font-family: "Ubuntu"; font-weight: 500; src: url("assets/fonts/ubuntu-medium-webfont.woff2") format("woff2"); }
- format: format 属性是帮助浏览器识别字体的。浏览器是不能根据字体 url 后缀去自动识别字体格式的，所以使用format 属性来帮助浏览器识别字体格式。
参考：CSS 引入字体
- 定义全局变量：
css只能使用
- @simonem-f From gitbhub - useful reference