Skip to content

Commit 24b8da9

Browse files
haoziqaqhaoziqaq
committed
feat(app-bar): add type and size props, implement surface style and large size variant
- Introduced `type` prop to AppBar for surface styling. - Added `size` prop to support large size variant. - Updated styles in appBar.less for surface and large size. - Enhanced tests to cover new props and styles. - Updated documentation for new usage examples. - Added new icons for navigation (arrow-left, arrow-right, arrow-up).
1 parent 569af2b commit 24b8da9

25 files changed

Lines changed: 440 additions & 136 deletions

File tree

‎packages/varlet-icons/svg/arrow-left.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎packages/varlet-icons/svg/arrow-right.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎packages/varlet-icons/svg/arrow-up.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎packages/varlet-ui/src/app-bar/AppBar.vue‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@
66
n(),
77
n('$--box'),
88
[safeAreaTop, n('--safe-area-top')],
9+
[type === 'surface', n('--surface')],
10+
[size === 'large', n('--large')],
911
[round, n('--round')],
1012
[fixed, n('--fixed')],
1113
[border, n('--border')],

‎packages/varlet-ui/src/app-bar/__tests__/index.spec.js‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,49 @@ describe('test app bar component props', () => {
2121
wrapper.unmount()
2222
})
2323

24+
test('app bar type', async () => {
25+
const wrapper = mount(VarAppBar)
26+
27+
expect(wrapper.find('.var-app-bar').classes('var-app-bar--surface')).toBe(false)
28+
29+
await wrapper.setProps({
30+
type: 'surface',
31+
})
32+
33+
expect(wrapper.find('.var-app-bar').classes('var-app-bar--surface')).toBe(true)
34+
35+
wrapper.unmount()
36+
})
37+
38+
test('app bar size', async () => {
39+
const wrapper = mount(VarAppBar)
40+
41+
expect(wrapper.find('.var-app-bar').classes('var-app-bar--large')).toBe(false)
42+
43+
await wrapper.setProps({
44+
size: 'large',
45+
})
46+
47+
expect(wrapper.find('.var-app-bar').classes('var-app-bar--large')).toBe(true)
48+
49+
wrapper.unmount()
50+
})
51+
52+
test('app bar surface type with custom color and textColor', () => {
53+
const wrapper = mount(VarAppBar, {
54+
props: {
55+
type: 'surface',
56+
color: 'red',
57+
textColor: 'blue',
58+
},
59+
})
60+
61+
expect(wrapper.find('.var-app-bar').classes('var-app-bar--surface')).toBe(true)
62+
expect(wrapper.find('.var-app-bar').attributes('style')).toContain('background: red;')
63+
expect(wrapper.find('.var-app-bar').attributes('style')).toContain('color: blue;')
64+
wrapper.unmount()
65+
})
66+
2467
test('app bar round', () => {
2568
const wrapper = mount(VarAppBar, {
2669
props: {

‎packages/varlet-ui/src/app-bar/appBar.less‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,11 @@
33
--app-bar-title-padding: 0 12px;
44
--app-bar-title-font-size: var(--font-size-lg);
55
--app-bar-text-color: #fff;
6+
--app-bar-surface-color: #fff;
7+
--app-bar-surface-text-color: rgba(0, 0, 0, 0.87);
8+
--app-bar-surface-border-bottom: thin solid var(--color-outline);
69
--app-bar-height: 54px;
10+
--app-bar-large-height: 64px;
711
--app-bar-left-gap: 6px;
812
--app-bar-right-gap: 6px;
913
--app-bar-border-radius: 4px;
@@ -63,6 +67,15 @@
6367
border-radius: var(--app-bar-border-radius);
6468
}
6569

70+
&--large &__toolbar {
71+
height: var(--app-bar-large-height);
72+
}
73+
74+
&--surface {
75+
background: var(--app-bar-surface-color);
76+
color: var(--app-bar-surface-text-color);
77+
}
78+
6679
&--safe-area-top {
6780
padding-top: constant(safe-area-inset-top);
6881
padding-top: env(safe-area-inset-top);
@@ -78,4 +91,8 @@
7891
&--border {
7992
border-bottom: var(--app-bar-border-bottom);
8093
}
94+
95+
&--surface&--border {
96+
border-bottom: var(--app-bar-surface-border-bottom);
97+
}
8198
}

‎packages/varlet-ui/src/app-bar/docs/en-US.md‎

Lines changed: 107 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,27 @@ Provide navigation function for the page, often used at the top of the page.
66

77
### Basic Usage
88

9-
Set the title of the app bar through the `title` prop.
10-
119
```html
1210
<template>
13-
<var-app-bar title="title" />
11+
<var-app-bar>
12+
<template #left>
13+
<var-button round text>
14+
<var-icon name="arrow-left" :size="24" />
15+
</var-button>
16+
</template>
17+
18+
<template #right>
19+
<var-button round text>
20+
<var-icon name="magnify" :size="24" />
21+
</var-button>
22+
<var-button round text>
23+
<var-icon name="heart" :size="24" />
24+
</var-button>
25+
<var-button round text>
26+
<var-icon name="dots-vertical" :size="24" />
27+
</var-button>
28+
</template>
29+
</var-app-bar>
1430
</template>
1531
```
1632

@@ -20,63 +36,103 @@ Turn on rounded border with the `round` prop.
2036

2137
```html
2238
<template>
23-
<var-app-bar title="Use Border Radius" title-position="center" round />
39+
<var-app-bar round>
40+
<template #left>
41+
<var-button round text>
42+
<var-icon name="arrow-left" :size="24" />
43+
</var-button>
44+
</template>
45+
46+
<template #right>
47+
<var-button round text>
48+
<var-icon name="magnify" :size="24" />
49+
</var-button>
50+
<var-button round text>
51+
<var-icon name="heart" :size="24" />
52+
</var-button>
53+
<var-button round text>
54+
<var-icon name="dots-vertical" :size="24" />
55+
</var-button>
56+
</template>
57+
</var-app-bar>
2458
</template>
2559
```
2660

27-
### Custom Background Color
61+
### Large Size
2862

2963
```html
3064
<template>
31-
<var-app-bar
32-
title="title"
33-
title-position="center"
34-
color="linear-gradient(90deg, rgba(72,176,221,1) 0%, rgba(0,208,161,1) 100%)"
35-
/>
65+
<var-app-bar size="large">
66+
<template #left>
67+
<var-button round text>
68+
<var-icon name="arrow-left" :size="24" />
69+
</var-button>
70+
</template>
71+
72+
<template #right>
73+
<var-button round text>
74+
<var-icon name="magnify" :size="24" />
75+
</var-button>
76+
<var-button round text>
77+
<var-icon name="heart" :size="24" />
78+
</var-button>
79+
<var-button round text>
80+
<var-icon name="dots-vertical" :size="24" />
81+
</var-button>
82+
</template>
83+
</var-app-bar>
3684
</template>
3785
```
3886

39-
### Add Title Slot
87+
### Add Left And Right Slot
4088

4189
```html
4290
<template>
43-
<var-app-bar>Add Title Slot</var-app-bar>
91+
<var-app-bar>
92+
<template #left>
93+
<var-button round text>
94+
<var-icon name="arrow-left" :size="24" />
95+
</var-button>
96+
</template>
97+
98+
<template #right>
99+
<var-button round text>
100+
<var-icon name="magnify" :size="24" />
101+
</var-button>
102+
<var-button round text>
103+
<var-icon name="heart" :size="24" />
104+
</var-button>
105+
<var-button round text>
106+
<var-icon name="dots-vertical" :size="24" />
107+
</var-button>
108+
</template>
109+
</var-app-bar>
44110
</template>
45111
```
46112

47-
### Add Left And Right Slot
113+
### Surface App Bar
114+
115+
Use `type="surface"` for a low-emphasis surface appearance, suitable for desktop and admin pages.
48116

49117
```html
50118
<template>
51-
<var-app-bar title="Title">
119+
<var-app-bar type="surface" :elevation="false" border>
52120
<template #left>
53-
<var-button
54-
color="transparent"
55-
text-color="#fff"
56-
round
57-
text
58-
>
59-
<var-icon name="chevron-left" :size="24" />
121+
<var-button round text>
122+
<var-icon name="arrow-left" :size="24" />
60123
</var-button>
61124
</template>
62125

63126
<template #right>
64-
<var-menu>
65-
<var-button
66-
color="transparent"
67-
text-color="#fff"
68-
round
69-
text
70-
>
71-
<var-icon name="menu" :size="24" />
72-
</var-button>
73-
74-
<template #menu>
75-
<var-cell ripple>OPTION</var-cell>
76-
<var-cell ripple>OPTION</var-cell>
77-
<var-cell ripple>OPTION</var-cell>
78-
</template>
79-
</var-menu>
127+
<var-button round text>
128+
<var-icon name="magnify" :size="24" />
129+
</var-button>
130+
<var-button round text>
131+
<var-icon name="heart" :size="24" />
132+
</var-button>
133+
<var-button round text>
134+
<var-icon name="dots-vertical" :size="24" />
135+
</var-button>
80136
</template>
81137
</var-app-bar>
82138
</template>
@@ -97,23 +153,22 @@ const active = ref(0)
97153
image="https://varletjs.org/tree.jpeg"
98154
image-linear-gradient="to right top, rgba(29, 68, 147, 0.5) 0%, rgba(74, 198, 170, 0.9) 100%"
99155
>
100-
Title
101156
<template #left>
102-
<var-button round text color="transparent" text-color="#fff">
103-
<var-icon name="menu" :size="24" />
157+
<var-button round text>
158+
<var-icon name="arrow-left" :size="24" />
104159
</var-button>
105160
</template>
106161

107162
<template #right>
108-
<var-button round text color="transparent" text-color="#fff">
109-
<var-icon name="map-marker-radius" :size="24" />
110-
</var-button>
111-
<var-button round text color="transparent" text-color="#fff">
112-
<var-icon name="star" :size="24" />
163+
<var-button round text>
164+
<var-icon name="magnify" :size="24" />
113165
</var-button>
114-
<var-button round text color="transparent" text-color="#fff">
166+
<var-button round text>
115167
<var-icon name="heart" :size="24" />
116168
</var-button>
169+
<var-button round text>
170+
<var-icon name="dots-vertical" :size="24" />
171+
</var-button>
117172
</template>
118173

119174
<template #content>
@@ -141,6 +196,8 @@ const active = ref(0)
141196
|------------------|------------------------------------------------------| --- |---------|
142197
| `color` | Background | _string_ | `-` |
143198
| `text-color` | Text color | _string_ | `-` |
199+
| `type` ***3.18.0*** | AppBar type, can be set to `primary` `surface` | _string_ | `primary` |
200+
| `size` ***3.18.0*** | Size, can be set to `normal` `large` | _string_ | `normal` |
144201
| `title` | Title | _string_ | - |
145202
| `title-position` | Title location, can be set to `left`, `center`, `right` | _string_ | `left` |
146203
| `elevation` | Elevation level, options `true` `false` and level of `0-24` | _string \| number \| boolean_| `true` |
@@ -171,6 +228,10 @@ Here are the CSS variables used by the component. Styles can be customized using
171228
| `--app-bar-color` | `var(--color-primary)` |
172229
| `--app-bar-text-color` | `#fff` |
173230
| `--app-bar-height` | `54px` |
231+
| `--app-bar-large-height` | `64px` |
232+
| `--app-bar-surface-color` | `#fff` |
233+
| `--app-bar-surface-text-color` | `rgba(0, 0, 0, 0.87)` |
234+
| `--app-bar-surface-border-bottom` | `thin solid var(--color-outline)` |
174235
| `--app-bar-title-padding` | `0 12px` |
175236
| `--app-bar-title-font-size` | `var(--font-size-lg)` |
176237
| `--app-bar-left-gap` | `6px` |

0 commit comments

Comments
 (0)