表达式
材料3 为Angular所取的表达式组件,以Angular Material's M3代币和CDK相接而成. 编织材料3 这是 用于大小、形状、运动和行为.
尝试其中的组件 游乐场。 。 。 .
使用量
npm install @adam01230/expressive-angular
包含样式一次, 在您的角材料主题旁边 :
@use '@adam01230/expressive-angular' as exp;
html {
@include exp.tokens; // --exp-motion-* springs as linear() easings with durations, --exp-corner-* sizes
@include exp.material-buttons; // every Angular Material button and icon button gets Compose's shapes and padding
@include exp.icon-button;
@include exp.button;
@include exp.button-group;
@include exp.split-button;
@include exp.floating-toolbar;
@include exp.docked-toolbar;
@include exp.segmented-list; // children of .exp-segmented-list become Compose's segmented list items
@include exp.card; // .exp-card, .exp-card-elevated, .exp-card-outlined
@include exp.menu; // every mat-menu gets Compose's Expressive menu shapes
@include exp.navigation-bar; // a and button children of .exp-navigation-bar become Compose's navigation bar items
@include exp.navigation-rail; // the same for .exp-navigation-rail, collapsed or .exp-navigation-rail-expanded
@include exp.search; // exp-search
@include exp.bottom-sheet; // exp-bottom-sheet
@include exp.side-sheet; // .exp-side-sheet, exp-modal-side-sheet
}
按钮是角材料的指令, 所以聚焦,波纹和触摸目标停留材料的:
<button mat-icon-button expIconButton aria-label="History" [selected]="open()"><mat-icon>history</mat-icon></button>
<button mat-icon-button expIconButton appearance="tonal" aria-label="Send"><mat-icon>send</mat-icon></button>
<button mat-icon-button expIconButton appearance="filled" size="l" width="wide" shape="square" aria-label="Play">
<mat-icon>play_arrow</mat-icon>
</button>
<exp-button-group aria-label="Billing" connected [(value)]="interval">
<button matButton="tonal" expButton value="month">Monthly</button>
<button matButton="tonal" expButton value="year">Yearly</button>
</exp-button-group>
<exp-split-button size="m">
<button matButton="filled"><mat-icon>edit</mat-icon> Edit</button>
<button matButton="filled" aria-label="More" [matMenuTriggerFor]="menu">
<mat-icon>keyboard_arrow_down</mat-icon>
</button>
</exp-split-button>
<exp-floating-toolbar aria-label="Formatting" vibrant [expanded]="editing()">
<button mat-icon-button expIconButton expToolbarLeading aria-label="Undo"><mat-icon>undo</mat-icon></button>
<button mat-icon-button expIconButton [morph]="false" aria-label="Bold" [selected]="bold()" (click)="toggleBold()">
<mat-icon>format_bold</mat-icon>
</button>
<button matFab expToolbarFab aria-label="Done"><mat-icon>check</mat-icon></button>
</exp-floating-toolbar>
<exp-docked-toolbar aria-label="Message">
<button mat-icon-button expIconButton aria-label="Archive"><mat-icon>archive</mat-icon></button>
<button mat-icon-button expIconButton aria-label="Delete"><mat-icon>delete</mat-icon></button>
</exp-docked-toolbar>
<mat-menu #view="matMenu">
<exp-menu-group label="Sort by">
<button mat-menu-item role="menuitemradio" aria-checked="true" class="exp-menu-item-selected">Date</button>
<button mat-menu-item role="menuitemradio" aria-checked="false">Name</button>
</exp-menu-group>
<exp-menu-group>
<button mat-menu-item>
<mat-icon>refresh</mat-icon><span>Refresh</span><span class="exp-menu-item-trailing">⌘R</span>
</button>
</exp-menu-group>
</mat-menu>
<exp-loading-indicator aria-label="Loading" />
<exp-loading-indicator contained aria-label="Saving" />
<exp-linear-progress wavy [value]="uploaded" aria-label="Upload" />
<exp-circular-progress wavy aria-label="Loading" />
<exp-slider><input type="range" aria-label="Volume" min="0" max="1" formControlName="volume" /></exp-slider>
<exp-slider vertical reverse><input type="range" aria-label="Level" formControlName="level" /></exp-slider>
<exp-range-slider>
<input type="range" aria-label="From" min="0" max="100" formControlName="from" />
<input type="range" aria-label="To" min="0" max="100" formControlName="to" />
</exp-range-slider>
<nav class="exp-navigation-bar">
<a routerLink="/" routerLinkActive ariaCurrentWhenActive="page"><mat-icon>home</mat-icon><span>Home</span></a>
<a routerLink="/saved" routerLinkActive ariaCurrentWhenActive="page"
><mat-icon>favorite</mat-icon><span>Saved</span></a
>
</nav>
<div class="exp-segmented-list">
<div>Notifications</div>
<a href="/language">Language</a>
<div>
<a class="exp-segmented-list-action" href="/orders/2">Order 2</a>
<button matButton="outlined">Received</button>
</div>
</div>
导入 ExpIconButton, (中文(简体) ), ExpButton, (中文(简体) ), ExpButtonGroup, (中文(简体) ), ExpSplitButton, (中文(简体) ), ExpFloatingToolbar, (中文(简体) ), ExpToolbarFab, (中文(简体) ), ExpDockedToolbar, (中文(简体) ),
ExpLoadingIndicator, (中文(简体) ), ExpMenuGroup, (中文(简体) ), ExpLinearProgress, (中文(简体) ), ExpCircularProgress, (中文(简体) ), ExpSlider 财务报告和审定财务报表 ExpRangeSlider 从 @adam01230/expressive-angular。 。 。 .
图标按钮 appearance 实值 standard, (中文(简体) ), filled, (中文(简体) ), tonal 或者说 outlined· ; size 运行从 xs 改为 xl, (中文(简体) ), width 实值
narrow, (中文(简体) ), uniform 或者说 wide,以及 shape 实值 round 或者说 square。 。 。 . [morph]="false" 保持切换的形状
按下或选中 。 拆分按钮取两个相同外观的材料按钮(filled, (中文(简体) ), tonal, (中文(简体) ), elevated 或者说 outlined; 计 数
当菜单打开时, 尾随它变成一粒药丸并翻转它的图标。 浮动工具栏是 horizontal 或者说 vertical,标准或 vibrant; 时 expanded 是虚假的
expToolbarLeading 财务报告和审定财务报表 expToolbarTrailing 项去掉,或 expToolbarFab,整个栏折成
联邦调查局。 里面的图标按钮取出工具栏的内容颜色; Compose的工具栏使用切换来保持其形状,
这样 [morph]="false"。一个停靠的工具栏横跨屏幕底部,由安全区域内置器自行铺垫;其
arrangement 实值 space-between 或者说 fixed (以中心为中心,相隔32px),和 --exp-docked-toolbar-container 财务报告和审定财务报表
--exp-docked-toolbar-content 改变颜色。 线性进展指标需要 value 从0到100,或者在等待不明时没有; wavy 将指标转换为
表达的波浪. contained 将加载指示器放在圆形初级容器上, 如 作曲 ContainedLoadingIndicator。 。 。 .
循环进度指标与线性指标相同,为40px,当wavy时为48px;给它另一个 width 财务报告和审定财务报表 height
以调整大小。 滑动画作曲家 Slider 围绕本地人 <input type="range">,保留值,表单
绑定、标签和键盘; 无 step 属性是连续的,其中有一个会按下并显示每个步骤的点.
A 类 vertical 滑块填充其高度,从上而下运行,或从下而上运行 reverse。 。 。 .
区域滑动器需要两个相同的输入 min, (中文(简体) ), max 财务报告和审定财务报表 step,第一个开始;一个媒体移动更接近
拇指, 和不通过另一个.
与 exp.menu,每个 mat-menu 外观类似"Confose"的"Expressive"菜单:一个有套件的四舍五入组. 拿着
输入 exp-menu-groups 将菜单分成不同的组,每个组都有可选 label分类
exp-menu-item-selected 标记选定的项目; 设置 role 财务报告和审定财务报表 aria-checked 你自己来 线索图标或快捷键
进入一个 .exp-menu-item-trailing 横跨标签之后. --exp-menu-container 更改菜单颜色.
按钮组也使用 [formControl] 或者说 formControlName 替换 [(value)]与 deselectable,单击选定的按钮,将数值清除为无效.
每个孩子 .exp-segmented-list 成为被分割的列表项: 2px 相隔, 小角, 大外角
首先,最后一点。 自行列出项目内容;列表设定其形状,粘贴,高度和颜色.
--exp-segmented-list-container 更改项目“ Surface” 颜色,用于设置在 Surface 页上的列表.
一个是 a[href] 或一个 button 整个可以点击,并使用 作曲的徘徊,聚焦和按下状态.
当一个物品按住自己的按钮时,保持它 div 并给出其主链接或按钮类
exp-segmented-list-action:它的点击区域然后覆盖整个项目,其他按钮在上方仍可点击.
与 exp.card, (中文(简体) ), .exp-card, (中文(简体) ), .exp-card-elevated 财务报告和审定财务报表 .exp-card-outlined 编曲已经填满,提升和
概述的卡片:容器、其角和颜色;自行铺设并铺设内容。 是一张牌
a[href] 或一个 button 可点击,并取出"作曲"的徘徊,聚焦和被压的状态和高地. 一张纸牌
按钮 div 并给出它的主要链接 阶级 exp-card-action,如分块列表.
--exp-card-container 更改容器颜色.
与 exp.navigation-bar,每个 a 或者说 button 在一个 .exp-navigation-bar 成为导航条项目( 成像器)
ShortNavigationBar:第一个孩子是图标,剩下的是标签. 项目与 aria-current 被选中, 因此
routerLinkActive 与 ariaCurrentWhenActive="page" 驱动它。 由底部安全区域内设的栏杆本身;
--exp-navigation-bar-container 更改颜色.
exp.navigation-rail 对一个 .exp-navigation-rail (编剧) WideNavigationRail: 96px 宽与
标签在图标下,或,与 .exp-navigation-rail-expanded,其最宽项(220px至360px)
图标旁边的标签。 A 类 .exp-navigation-rail-header 孩子,比如切换课的按钮,坐到上面
以图标为中心。 铁路是父母的高度; --exp-navigation-rail-container 更改颜色.
exp-modal-navigation-rail 取而代之的是导航抽屉 ModalWideNavigationRail 与
hideOnCollapse: 绑定 [(open)] 它从起跑线上滑入一条被扩大的铁路 作为车道
锁定焦点并关闭 Escape 或单击 scrim 的对话框 。 将相同的标题和物品放入其中
.exp-navigation-rail,在导航后自己关闭它. --exp-modal-navigation-rail-container 更改其
颜色.
exp-search 是 Confose 的搜索栏: 显示 [(query)] 或 placeholder 当点击时,打开
以输入字段和您放入的内容搜索为模式对话框 exp-search,例如结果链接。 以
默认字段保持不变,结果会下降至下; [fullScreen]="true" 填充屏幕并添加一个
后面的按钮,像手机. [(expanded)] 显示是否打开, 输入发送 (searched) 与询问,和逃跑,
剪接和后扣关上. --exp-search-container 更改颜色.
exp-bottom-sheet 是 Compose 的模式底页:绑定 [(open)] 它从下边滑出,
最多640px宽,在内容上方有一个拖动柄。 一个比窗户打开的一半高的床单
半路并完全打开拖放或向上滚动; 拖放、 逃出、 斜线或完全打开工作表的拖放控柄
关闭它。 柄条总是可以被拖走的,其余的被子则会同时被半开. 完全打开,内容
以本地方式滚动,在滚动到顶端时将其拉下. handleLabel 命名屏幕阅读器的控点,以及 --exp-bottom-sheet-container 更改其
颜色.
exp-standard-bottom-sheet 是 作曲的平面图 BottomSheetScaffold:它坐落在其位置的下方
父目录, 显示其顶端 peekHeight 像素( 默认为56) , 并在拖放或单击时完全打开
处理; [(expanded)] 告诉和设置。 与一个 middleHeight 它也取决于许多像素 显示,告诉和设置 [(middle)],把柄从一看到一看再打开 打开, 将其内容向下拉, 而滚动到顶部折叠 。 在父母自己的内容下留下偷窥高度的空间.
作曲没有副片,所以 exp.side-sheet 从Android的材料组件中取取其值.
.exp-side-sheet 是标准工作表:256px面板(--exp-side-sheet-width 将它修改为两者)在地表上供您放在内容旁.
exp-modal-side-sheet 从端边滑入到一圈:绑定 [(open)],列出标题、内容和
里面的动作, 和一丝向边缘, 逃出或斜线关闭它. --exp-side-sheet-container 财务报告和审定财务报表
--exp-modal-side-sheet-container 改变它们的颜色. .exp-side-sheet-detached 财务报告和审定财务报表 [detached]="true" 将工作表设置为
16px 有大角 整个圆。 进去, .exp-side-sheet-header (后面的按钮,然后是)
.exp-side-sheet-headline,然后最后一个关闭按钮),内容和 .exp-side-sheet-actions 给出光谱
垫子.
运动标志也靠自己工作:
.thing {
transition: transform var(--exp-motion-fast-spatial-duration) var(--exp-motion-fast-spatial);
}
发展
npm install
npm start # showcase on http://localhost:4200
npm run build # library to dist/expressive-angular, then the showcase
npm run test:ci # unit tests, single run
npm run lint
npm run format:check
释放
弹出 projects/expressive-angular/package.json合并,然后运行 Release 工作流程 main (行动)——发布——
运行工作流程)。 它建立图书馆,出版到npm @adam01230/expressive-angular 并创建 GitHub
释放 v<version>。发布不需要令牌: npm 信任此寄存器 release.yml (npm 软件包设置) –
信任出版商).
许可证
麻省理工学院. 从Jetpack Compose(Apache 2. 0)中提取的值记入 NOTICE。 。 。 .