首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Angular Material 2-显示两行的mat-tab-标签文本(如标题和副标题)

Angular Material 2是一个基于Angular框架的UI组件库,它提供了一套现成的可重用组件,用于构建现代化的Web应用程序。其中包括了mat-tab组件,用于创建标签页。

要显示两行的mat-tab标签文本,可以使用mat-tab-label-wrapper元素来包裹标签文本,并在其中添加两个mat-tab-label元素,分别用于显示标题和副标题。

以下是一个示例代码:

代码语言:html
复制
<mat-tab-group>
  <mat-tab>
    <ng-template mat-tab-label>
      <div class="tab-label-wrapper">
        <div class="title">标题</div>
        <div class="subtitle">副标题</div>
      </div>
    </ng-template>
    <!-- 标签页内容 -->
  </mat-tab>
</mat-tab-group>

在上面的示例中,我们使用了ng-template来定义mat-tab-label的模板,然后在模板中使用div元素来创建一个包含标题和副标题的标签文本。通过添加自定义的CSS类(例如.tab-label-wrapper、.title和.subtitle),可以对标签文本进行样式调整。

对于Angular Material 2的更多信息和使用方法,你可以参考腾讯云的Angular Material 2产品介绍页面:Angular Material 2产品介绍

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Ng-Matero:基于 Angular Material 搭建中后台管理框架

matero-poster.jpg 前言 目前市面上关于 Angular Material 后台框架比较少,大多都是收费主题,而且都不太好用。...经过一个多月设计与思考,我开发了这款基于 Angular Material 中后台管理框架,初期架构设计已经完成,在接下来版本中会提供 schematics 支持及 vscode snippet...目录结构 先看一下目录结构,这个目录结构遵循了 Angular 最佳实践,尽量保证结构规范化与合理性。....text-red-500,与之对应对比色可以是 .text-light,.text-dark 页面标题 框架默认提供了 page-header breadcrumb 两个通用组件,其中 page-header...默认包含 breadcrumb,可以通过设置 showBreadCrumb="false" 关闭面包屑,另外可以通过 title subtitle 设置标题副标题,page-header 同样支持颜色系统

2.9K20

HIG:Extensions - Home Screen Quick Actions

每个主屏幕快速操作都包括:一个标题,左侧或右侧图标(取决于您app在主屏幕上位置)一个可选择副标题标题副标题始终左对齐。 新信息出现时,app 甚至可以动态更新其快速操作。...例如,消息提供了用于打开最近对话快速操作。 ? TIP:某些 app 在其快速操作列表上方显示一个 widget。 例如,股票快速操作列表出现在显示您当前股票价值 widget 下方。...·为每个快速操作提供一个简洁标题 操作标题应传达行动结果;例如“Directions Home”,“创建新联系人”“新留言”。如果您需要提供更多信息,请提供副标题。...邮件使用副标题来展示收件箱VIP文件夹中是否有未读邮件。不要在标题副标题中包含app名称或任何无关信息,缩短文案以避免截断,并在编写文案时考虑到本地化。...·不要使用 emoji 代替图标 Emoji 不能与右对齐文本正确对齐。另外,emojis是全彩色,而快速动作图标是单色

76210

Human Interface Guidelines ——Tables

使用table可以以列表形式干净有效地显示大量或少量信息。  一般来说,table非常适合基于文本内容,并且通常在split view一侧显示为导航方式,相关内容则显示在另一边。...iOS两种table 样式 plain(使用较多) 行可以分为贴上标签sections,可选索引(通讯录右边ABCD...)可以沿着table右边纵向出现。...这种方式适合展示不需要补充信息项是一个很好选择。  有副标题(Subtitle)  一行左对齐title,接下来是一行左对齐subtitle。...当然,添加这些元素会减少可用于 title subtitle 空间。 使用时注意 ·保持文本简洁以避免截断 截断单词短语很难扫视辨认。...文本截断在所有table cell 样式中都是自动,它可以表现出一些问题,具体取决于使用 cell 样式截断发生位置。

1.2K30

Bootstrap响应式前端框架笔记二——排版标签与类

Bootstrap响应式前端框架笔记二——排版标签与类     Bootstrap中对h标签字体字号进行了微调,开发者除了可以直接使用这些标签进行标题修饰外,还可以使用.h1到.h6类来将其他元素字体进行修饰...Bootstrap heading     在标题或者其他标签中使用small标签或者small类可以添加内部副标题副标题除了字号会进行缩小调整外,还会修改文字颜色,示例如下: 可以使用small标签或者.samll类来向标题中添加副标题 h3标题 small标签副标题 h3Class...类 small类副标题 效果如下: ?    ...使用abbr标签可以进行某些内容缩略显示,示例如下: 使用abbr标签可以将某些文本进行缩略设置,当鼠标放置在对应文本上时,会显示标签中title所设置内容 <abbr title="这个是详细信息

2.5K20

打造 Material 字体样式主题 | 实现篇

然而,了解每一种样式作用及其使用场景是非常有用: textAppearanceHeadline* 样式应用于标题 textAppearanceSubtitle* 样式应用于副标题 textAppearanceBody...样式应用于小号文本,例如输入框提示错误信息 textAppearanceOverline 样式也应用于小号文本,但是它具有大写英文字母更大字符间距,因此更适合于小标题 Label,例如日期选择器标题...但是您如何知道诸如某个按钮使用 textAppearanceButton 作为它文本标签样式呢?让我们来看看以下几种方式。...在 默认样式中使用 MDC 属性 当自定义 View 使用了 标签时将可被样式化。复用 MDC 中 attr name 有利于保持统一。...动效 推荐开发者使用 Material Design 组件 我们一既往地期待您在 GitHub 上提交 错误报告 功能需求。

1.6K20

53-R可视化-二-基础包绘图入门功夫

# 1.符号线条 lty # 线条类型,2 为虚线 lwd # 线条宽度,1 为最粗 pch # 点符号类型,17 为实心三角 # 2....# 副标题名字颜色 fg # 图形前景色 bg # 图形后景色 # 3....文本属性 cex.axis # 同cex,只是控制坐标轴刻度文字缩放倍数。 cex.lab # 坐标轴名称缩放。 cex.main # 标题缩放。 cex.sub # 副标题缩放。...坐标 title(),有以下参数: main # 标题 col.main # 标题颜色 sub # 副标题 col.sub # 副标题颜色 xlab # x轴 ylab # y轴 col.lab # 坐标轴名字颜色...$y [1] 4.05972 重置默认设置 一般来说,绘图函数barplot等,都已经包含了默认标题标签,我们可以重置它们: par(ann = FALSE) 看看哪里不同了~ 这么做主要一个目的就是

1.3K30

AngularDart Material Design 输入 顶

请改用angular2 forms API disabled bool  是否禁用此输入(只读输入) displayBottomPanel bool  是否显示错误,提示文本字符计数器面板...label String  此输入标签。 如果没有在文本框中输入任何内容,则显示默认文本。当用户输入文本时,它会消失。...请改用angular2 forms API disabled bool  是否禁用此输入(只读输入) displayBottomPanel bool  是否显示错误,提示文本字符计数器面板...当需要可见标签时,请使用标签代替此标签。 label String  此输入标签。 如果没有在文本框中输入任何内容,则显示默认文本。当用户输入文本时,它会消失。...displayBottomPanel bool  是否显示错误,提示文本字符计数器面板。

5.2K40

【原创】bootstrap框架学习 第五课

我是副标题2 h2 效果图: 我是标题1 h1. 我是副标题1 h1 我是标题2 h2....我是副标题2 h2 三.引导主题副本class=“lead” 引导主体副本 这是一个演示引导主体副本用法实例...四、默认强调标签粗体文本、斜体文本 本行内容是在标签内 本行内容是在标签内 本行内容是在标签内...九、总结更多排版类 类 描述 实例 .lead 使段落突出显示 尝试一下 .small 设定小文本 (设置为父文本 85% 大小) 尝试一下 .text-left 设定文本左对齐 尝试一下 .text-center...显示在 元素中文本以小号字体展示 尝试一下 .blockquote-reverse 设定引用右对齐 尝试一下 .list-unstyled 移除默认列表样式,列表项中左对齐 ( <ul

1.8K30

Angular 工具篇之文档管理

在安装 Compodoc 之前,我们先来简单了解一下它特点: 生成文档结构清晰。 支持多种主题风格,比如 laravel, original, material, postmark 等。...支持快速检索,基于强大 lunr.js 搜索引擎。 支持 JSDoc 高亮,支持 @param, @returns, @link, @ignore @example 标签。...: -p, –tsconfig [config] —— 指定 tsconfig.json 文件路径 -n, –name [name] —— 文档标题 -s, –serve —— 启动本地文档服务器(...-d, –output [folder] —— 指定文档输出目录 -h, –help —— 显示帮助信息 若需查看完整配置项,可以浏览 compodoc - usage。...@param —— 定义一个参数类型描述 @link —— 定义链接另一个方法、文档或外部链接 @example —— 定义一个示例用法 了解完上述标签,我们来看一个比较完整示例(来源于 ionic-code-documentation

1.6K10

使用element_text在ggplot2中自定义文本

( ) element_rect( ) element_blank( ) 本节来介绍主题元素element_text() ,使用它控制绘图中文本元素许多部分,字体大小、颜色字体类型。...ggplot2element_text()剖析 element_text() 控制元素列表 axis.title.x: 自定义 x 轴标签/标题 axis.title.y : 自定义 y 轴标签/标题...axis.text.x : 自定义 x 轴刻度标签 axis.text.y : 自定义 y 轴刻度标签 legend.title: 自定义图例标题文本 legend.text:自定义图例文本 plot.title...: 自定义图像主标题 plot.subtitle: 自定义图像副标题 plot.caption: 自定义图像脚注 plot.tag: 自定义绘图标签 加载R包 library(tidyverse)...hjust = 0.5, face="bold",family = "Tahoma")) 6. plot.subtitle( )自定义副标题

2.4K10

Bootstrap【第二章】—全局CSS之排版、代码、表格

标题  标题h1--h6html中效果一样 副标题:在副标题 在Bootstrap中,标题可以有副标题副标题比正标题字体小一点,样式有点不太一样...示例如下: 标记:I like you 很久了 被span标签包起来文本 you 样式被添加背景色    1.3.2....缩略语:当鼠标悬停在缩写缩写词上就会显示完整内容  基本缩略语: 示例代码:HTML是一门超简单网页语言...基本代码块:多行代码可以使用标签 示例代码: 花间一壶酒,独酌无相亲 举杯邀明月, 对影成三人 pre标签内容所有的空格 都会原样显示,...标签文本编辑格式,会按照原样显示 设置pre区域显示垂直滚动条: 代码示例:

1.4K20

不懂设计产品不是好开发

Typography 3.1 Text Styles Material设计有13种不同文本样式,用于在屏幕上格式化绘制文本。...Headlines是大型文本,范围从1到6。标题6是最小标题,用于应用栏对话框标题。Headline5用于对话框中文本。其余标题可以用来突出简短重要文本和数字。...它们用于列表中内容。例如,Subtitle1用于标题文本,Subtitle2用于副标题文本或用于强调通常属于Subtitle1列表文本。 Body texts用于长文本。...Flutter中默认材料文本样式是BodyText2。BodyText1可用于强调通常为BodyText2文本。 CaptionOverline是最小样式,用于注释,如图像标题,图表图例。...Button文本样式与动作相关,用于按钮、标签、对话框卡片。

2.5K20

Android开发笔记(一百一十九)工具栏ToolBar

:theme属性值改为第一步定义风格,android:theme="@style/AppBaseTheme" 3、页面布局文件根节点改为LinearLayout,且为vertical垂直方向;然后增加一个...setTitle : 设置标题文字。 setTitleTextAppearance : 设置标题文字风格。 setTitleTextColor : 设置标题文字颜色。...setSubtitle : 设置副标题文字。副标题标题下方。 setSubtitleTextAppearance : 设置副标题文字风格。...setSubtitleTextColor : 设置副标题文字颜色。 setNavigationIcon : 设置导航图标。导航图标在工具栏图标左边。...方法在旧SearchView中是隐藏,在新SearchView中是开放,所以旧控件只能传递搜索文本给结果页面,而新控件允许传递其他额外信息给搜索结果页面。

1.8K30

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券