Browsed by
月份:2018年3月

Select

Select

[toc] 概述 OVERVIEW <mat-select>是用来在选项集合中选择一个值的表单控件,与原生的<select>元素类似。你可以在Material Design spec中阅读更多关于下拉框的信息。此组件用于<mat-form-field>元素内。 <mat-select> is a form control for selecting a value from a set of options, similar to the native <select> element. You can read more about selects in the Material Design spec. It is designed to work inside of a <mat-form-field> element. 在<mat-select>中增加<mat-option>元素,可在下拉框中增加选项。每个<mat-option>都由一个value属性,当用户选择一个选项时,这个值可用于设置下拉框的值。<mat-option>的内容用于对用户展示。 To add options to the select, add <mat-option> elements to the <mat-select>. Each <mat-option> h…

阅读全文 Read More

Datepicker

Datepicker

[toc] 概述 OVERVIEW 日期选择器允许用户通过文本输入一个日期,或者通过日历选择一个日期。由多个组件和指令协作构成。 The datepicker allows users to enter a date either through text input, or by choosing a date from the calendar. It is made up of several components and directives that work together. 在input中关联一个日期选择器 Connecting a datepicker to an input 日期选择器由一个文本输入框和一个弹出日历组成,在文本输入框中通过matDatepicker属性关联。 A datepicker is composed of a text input and a calendar pop-up, connected via the matDatepicker property on the text input. <input [matDatepicker]=”myDatepicker”> <mat-datepicker #myDatepicker></mat-datepicker> 提供了一个可选的日期选择器切换按钮。可在上述例子中添加一个切换: An optional datepicker toggle button is availa…

阅读全文 Read More

第一阶段

第一阶段

关于Angular Material的官方文档翻译即将完成,剩下的4篇已进入校对阶段,即将发布。在整个Angular Material文档的翻译中,还经历了其改版的一个过程,导致重新翻译并校对了部分文章,这倒是google一贯的尿性:兼容什么的不要想,我升级,你就负责兼容我就行了,要不你就用旧的。 从设计方面来看,Angular Material本身还是不错的,因为一边在翻译,一边也在使用antd进行demo开发,对照着来看,antd的格局现在略小,不过其本地化做得不错,至少很适合中国国情。 还有一些遗留性的工作,基本上是官方文档本身不完善,例如有的方法或者属性没有说明(通过命名倒是都能知道是啥功能)。后续这部分的补充可能不会太及时,因为很难度对照,官方文档并没有一个更新日志或者说明。既然第一阶段即将告一段落,后续的工作可能得先定一个方向。个人想的是,可能会结合实际的demo,带来一个Angular Material的开发入门手册,即从头开始写一个小框架,基本满足一些业务开发,并将各个组件进行一下组合。官方的入门可能不是特别实在,毕竟大多数人希望的是给出一些实际可以跑的代码,然后能看到实际的页面。中国程序员的路还有蛮长的要走。。。 或者是其他一些东西,比如目前工作上用到的一些,随着工作进展,其实也可总结一下并形成文档。再或者是搞个小的业务系统框架之类的,反正自己别闲下来吧。

Tabs

Tabs

[toc] 概述 OVERVIEW Angular Material标签页将内容分配到不同的视图中,一次只有一个视图可见。每个标签页的标签显示在标签页头部,激活的标签页的标签会有一个动态墨水样式条。当标签页的标签列表超过头部的宽度时,会出现分页控件来让用户左右滚动标签。 Angular Material tabs organize content into separate views where only one view can be visible at a time. Each tab’s label is shown in the tab header and the active tab’s label is designated with the animated ink bar. When the list of tab labels exceeds the width of the header, pagination controls appear to let the user scroll left and right across the labels. 激活的标签页可通过selectedIndex输入来设置,或者当用户选择头部的标签页标签时也可以激活。 The active tab may be set using the selectedIndex input or when the user selects one of the tab lab…

阅读全文 Read More

Stepper

Stepper

[toc] 概述 OVERVIEW Angular Material的stepper通过分割内容为逻辑的步骤,提供了一个向导式的工作流。 Angular Material’s stepper provides a wizard-like workflow by dividing content into logical steps. Material的stepper基于CDK stepper构建,用于驱动步骤化的工作流逻辑。Material stepper继承了CDK stepper并应用了Material Design样式。 Material stepper builds on the foundation of the CDK stepper that is responsible for the logic that drives a stepped workflow. Material stepper extends the CDK stepper and has Material Design styling. Stepper变量 Stepper variants stepper组件有两种:mat-horizontal-stepper和mat-vertical-stepper。使用方法相同,不同的只是方向。mat-horizontal-stepper选择器可用于创建水平的stepper,mat-vertical-stepper用于创建垂直的stepper。mat-step组件可…

阅读全文 Read More

Chips

Chips

[toc] 概述 OVERVIEW “展示单独的、键盘可访问的、小圆片状的一系列值。 “ displays a list of values as individual, keyboard accessible, chips. <mat-chip-list> <mat-chip>Papadum</mat-chip> <mat-chip>Naan</mat-chip> <mat-chip>Dal</mat-chip> </mat-chip-list> 非样式化的chips Unstyled chips 会默认应用Material Design样式。使用可使一个chip不应用样式。然后你可以通过添加自己的CSS来自定义样式。 By default, has Material Design styles applied. For a chip with no styles applied, use. You can then customize the chip appearance by adding your own CSS. 提示:除mat-chip类外,“也接收mat-basic-chipCSS类。 Hint: “ receives the mat-basic-chip CSS class in addition to the mat-chip class…

阅读全文 Read More

跨域下每次获取session id不同

跨域下每次获取session id不同

在跨域的情况下,每次拦截请求获取session,无法取得预先存储在session中的对象。打印出sessionId发现每次的sessionId均不同。 首先确保服务端已经开启了允许跨域访问,排除服务端问题 @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(“/**”).allowedOrigins(“*”).allowedMethods(“GET”, “POST”, “PUT”, “PATCH”, “DELETE”, “OPTIONS”).allowCredentials(true).maxAge(3600); } 然后需要在客户端发ajax请求时设置属性 const newReq = req.clone({withCredentials: true}); 问题解决!