自存 angular material design 表单输入框lable右对齐样式

  1. 单个输入框的文字lable放输入框左边实现

  material design 的组件库示例没有文字描述放左边的样式 ,所以mat-lable并没有放在mat-form-field中

          <div class="input-container col-6"><mat-label>商品售价<span class="text-error">*</span></mat-label><mat-form-field appearance="fill"><input matInput placeholder="请输入" required formControlName="sellingPrice"></mat-form-field></div>

 2.label文字右对齐,对lable、输入框父级容器使用flex布局,justify-content: end;使输入框右边对齐

// 输入框容器样式
.input-container {display: flex;align-items: baseline;justify-content: end;
}

3.一行两个输入表单组件是使用了bootstrap的栅格系统 col-6 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://xiahunao.cn/news/2803888.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

【springBoot】springAOP

AOP的概述 AOP是面向切面编程。切面就是指某一类特定的问题&#xff0c;所以AOP也可以理解为面向特定方法编程。AOP是一种思想&#xff0c;拦截器&#xff0c;统一数据返回和统一异常处理是AOP思想的一种实现。简单来说&#xff1a;AOP是一种思想&#xff0c;对某一类事务的集…

基于springboot+vue的中小型医院网站(前后端分离)

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战&#xff0c;欢迎高校老师\讲师\同行交流合作 ​主要内容&#xff1a;毕业设计(Javaweb项目|小程序|Pyt…

TDesign Vue Next Starter中后台项目的生产环境部署与CSP内容安全策略、CORS跨源资源共享和服务后端开发

TDesign Vue Next Starter中后台项目的生产环境部署与CSP内容安全策略、CORS跨源资源共享和服务后端开发 目录 TDesign Vue Next Starter中后台项目的生产环境部署与CSP内容安全策略、CORS跨源资源共享和服务后端开发 一、TDesign Vue Next Starter中后台项目模板 1.1、项目…

Ubuntu20.04 查看系统版本号

目录 uname -auname -vlsb_release -acat /etc/issuecat /proc/version uname -a 查看系统发行版本号和操作系统版本 uname -v 查看版本号 lsb_release -a 查看发行版本信息 cat /etc/issue 查看系统版本 cat /proc/version 查看内核的版本号

vivado FSM Components

Vivado合成功能 •同步有限状态机&#xff08;FSM&#xff09;组件的特定推理能力。 •内置FSM编码策略&#xff0c;以适应您的优化目标。 •FSM提取默认启用。 •使用-fsm_extraction off可禁用fsm提取。 FSM描述 Vivado综合支持Moore和Mealy中的有限状态机&#xff08;…

ROX amine,Rhodamine X amine,可和羧酸等官能团反应

​您好&#xff0c;欢迎来到新研之家 文章关键词&#xff1a;Rhodamine X amine, ROX amine &#xff0c;Rhodamine X amine&#xff0c; ROX NH2&#xff0c;氨基ROX &#xff0c;ROX氨基&#xff0c;Rhodamine X氨基 一、基本信息 【产品简介】&#xff1a;ROX can also b…

C++的deque容器->基本概念、构造函数、赋值操作、大小操作、插入和删除、数据存取、排序

#include<iostream> using namespace std; #include <deque> //deque构造函数 void printDeque(const deque<int>& d) { for (deque<int>::const_iterator it d.begin(); it ! d.end(); it) { //*it 100; 容器中的数据不可以修…

DiceCTF 2024 -- pwn

baby-talk 题目给了 Dockerfile&#xff0c;但由于笔者 docker 环境存在问题启动不起来&#xff0c;所以这里用虚拟机环境做了&#xff08;没错&#xff0c;由于不知道远程 glibc 版本&#xff0c;所以笔者远程也没打通&#xff09;笔者本地环境为 glibc 2.31-0ubuntu9.9。然后…

开发技术-Java 获取集合中元素下标并移动至指定位置

1. 说明 某些业务需要特定的元素在列表的最后或者指定位置展示。 2. 代码 import lombok.AllArgsConstructor; import lombok.Data;import java.util.*; import java.util.stream.Collectors; import java.util.stream.IntStream;Data AllArgsConstructor class Student {St…

第七篇【传奇开心果系列】python的文本和语音相互转换库技术点案例示例:Sphinx自动电话系统(IVR)经典案例

传奇开心果博文系列 系列博文目录python的文本和语音相互转换库技术点案例示例系列 博文目录前言一、雏形示例代码二、扩展思路介绍三、Sphinx多语言支持示例代码四、Sphinx和语音合成库集成示例代码五、Sphinx语音识别前自然语言预处理示例代码六、Sphinx语音识别自动电话系统…

CSP-J 2023 T3 一元二次方程

文章目录 题目题目背景题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1 提示 题目传送门题解思路总代码 提交结果尾声 题目 题目背景 众所周知&#xff0c;对一元二次方程 a x 2 b x c 0 , ( a ≠ 0 ) ax ^ 2 bx c 0, (a \neq 0) ax2bxc0,(a0)&#xff0c;可…

C++种pair的初始化及与unordered_map的区别

pair的初始化及与unordered_map的区别 概述pair初始化开发环境头文件示例运行结果 与unordered_map的区别 概述 本文旨在介绍pair初始化&#xff0c;同时简述pair与unordered_map的区别。 pair初始化 pair是一个模板类&#xff0c;可以存储两个类型的数据为一个对象。 开发…

零基础备考PMP,需要多长时间?

PMP是一门专业性很强的项目管理知识&#xff0c;考试当然是有一定的难度&#xff0c;但是也没有难到让你怀疑人生的程度。 如果你在学习PMP之前&#xff0c;已经有一些经验&#xff0c;那么备考一个半月基本上是没多大问题的&#xff0c;如果你是零基础小白&#xff0c;那么备…

微信小程序开发 基本学习(了解和认识)

目录 一、小程序简介 二、注册小程序账号 安装微信发者工具 三、创建小程序项目 四、项目结构 1.了解项目的基本组成结构 2.小程序页面的组成结构 3.新建小程序页面 4.修改项目首页 5.WXML模板 5.1什么是WXML 5.2WXML和HTML的区别 6.WXSS样式 6.1什么是WXSS 6.2.W…

Flutter GLSL - 肆 | 从条纹到马赛克

theme: cyanosis Flutter & GLSL 系列文章&#xff1a; 《Flutter & GLSL - 壹 | Shader 让绘制无限强大》《Flutter & GLSL - 贰 | 从坐标到颜色》《Flutter & GLSL - 叁 | 变量传参》《Flutter & GLSL - 肆 | 从条纹到马赛克》 案例代码开源地址 【skele…

微服务篇之分布式系统理论

一、CAP定理 1.什么是CAP 1998年&#xff0c;加州大学的计算机科学家 Eric Brewer 提出&#xff0c;分布式系统有三个指标&#xff1a; 1. Consistency&#xff08;一致性&#xff09;。 2. Availability&#xff08;可用性&#xff09;。 3. Partition tolerance &#xff0…

高级语言期末2013级A卷

1.对长度为n的整型数组a进行冒泡排序 #include <stdio.h>void sort(int *a,int n) {for(int i0; i<n-1; i)for(int j0; j<n-i-1; j)if(a[j]>a[j1]) {int tempa[j];a[j]a[j1];a[j1]temp;} } 2.编写函数&#xff0c;实现按照如下公式计算的功能 #include <st…

挑战30天学完Python:Day18 正则表达式

&#x1f4d8; Day 18 &#x1f389; 本系列为Python基础学习&#xff0c;原稿来源于 30-Days-Of-Python 英文项目&#xff0c;大奇主要是对其本地化翻译、逐条验证和补充&#xff0c;想通过30天完成正儿八经的系统化实践。此系列适合零基础同学&#xff0c;或仅了解Python一点…

【ArcGIS】利用高程进行坡度分析

在ArcGIS中利用高程进行坡度分析 坡度ArcGIS实操参考 坡度 坡度是地表单元陡缓的程度&#xff0c;通常把坡面的垂直高度和水平距离的比值称为坡度。 坡度的表示方法有百分比法、度数法、密位法和分数法四种&#xff0c;其中以百分比法和度数法较为常用。 &#xff08;1&#…

Stable Diffusion 3 Early Preview发布

2月22日&#xff0c;Stability AI 发布了 Stable Diffusion 3 early preview&#xff0c;这是一种开放权重的下一代图像合成模型。据报道&#xff0c;它继承了其前身&#xff0c;生成了详细的多主题图像&#xff0c;并提高了文本生成的质量和准确性。这一简短的公告并未附带公开…