Lines Matching refs:sm
11 | sm | md | lg |
27 | sm | md | lg |
36 | | sm | md | lg |
48 GridCol({span: {sm:6, md: 6, lg:4}}) {
59 GridCol({span: {sm:6, md: 6, lg:8}}) {
72 if (currentBreakpoint === 'sm') {
85 歌单封面由封面图片、歌单介绍及常用操作三部分组成，这三部分的布局在md和lg断点下完全相同，但在sm断点下有较大差异。此场景同样可以用栅格实现。
87 | | sm | md/lg |
100 @StorageProp('currentBreakpoint') currentBreakpoint: string = 'sm';
142 .height(this.currentBreakpoint === 'sm' ? this.imgHeight : 70)
145 .padding({ left: this.currentBreakpoint === 'sm' ? 20 : 0 })
147 top: this.currentBreakpoint === 'sm' ? 0 : 30,
148 bottom: this.currentBreakpoint === 'sm' ? 0 : 20
167 left: this.currentBreakpoint === 'sm' ? 20 : 0,
168 right: this.currentBreakpoint === 'sm' ? 20 : 0
171 top: this.currentBreakpoint === 'sm' ? 15 : 0,
172 bottom: this.currentBreakpoint === 'sm' ? 15 : 0
181 GridCol({ span: { sm: 4, md: 10 }, offset: { sm: 0, md: 1, lg: 1 } }) {
185 GridCol({ span: { sm: 8, md: 10 }, offset: { sm: 0, md: 2, lg: 2 } }) {
189 GridCol({ span: { sm: 12, md: 10 }, offset: { sm: 0, md: 2, lg: 2 } }) {
192 top: this.currentBreakpoint === 'sm' ? 15 : 0,
193 bottom: this.currentBreakpoint === 'sm' ? 15 : 0
199 .padding({ top: this.currentBreakpoint === 'sm' ? 50 : 70 })
207 不同断点下，歌单列表的样式基本一致，但sm和md断点下是歌单列表是单列显示，lg断点下是双列显示。可以通过[List组件](../../reference/apis-arkui/arkui-ts/t…
216 @StorageProp('currentBreakpoint') currentBreakpoint: string = 'sm';
290 .margin({ top: 50, bottom: this.currentBreakpoint === 'sm' ? this.coverHeight : 0 })
346 其中歌单封面和歌单列表这两部分的相对位置，在sm断点下是上下排布，在md和lg断点下是左右排布，也可以用栅格来实现目标效果。
348 | | sm | md | lg |
364 GridCol({ span: { xs: 12, sm: 12, md: 6, lg: 4 } }) {
368 GridCol({ span: { xs: 12, sm: 12, md: 6, lg: 8 } }) {
404 | sm | md | lg |