feat(ui/app-bar): support round prop

varletjs · Dec 9, 2022 · 21557ea · 21557ea
1 parent 810e0ae
commit 21557ea
Show file tree

Hide file tree

Showing 12 changed files with 163 additions and 404 deletions.
diff --git a/packages/varlet-ui/src/app-bar/AppBar.vue b/packages/varlet-ui/src/app-bar/AppBar.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    :class="classes(n(), [elevation, n('$-elevation--3')])"
+    :class="classes(n(), [round, n('--round')], [elevation, n('$-elevation--3')])"
     :style="{
       background: color,
       color: textColor,

diff --git a/packages/varlet-ui/src/app-bar/__tests__/index.spec.js b/packages/varlet-ui/src/app-bar/__tests__/index.spec.js
@@ -3,13 +3,13 @@ import VarAppBar from '../AppBar'
 import { mount } from '@vue/test-utils'
 import { createApp } from 'vue'
 
-test('test appbar use', () => {
+test('test app bar use', () => {
   const app = createApp({}).use(AppBar)
   expect(app.component(AppBar.name)).toBeTruthy()
 })
 
-describe('test appbar component props', () => {
-  test('test appbar color', () => {
+describe('test app bar component props', () => {
+  test('test app bar color', () => {
     const wrapper = mount(VarAppBar, {
       props: {
         color: 'red',
@@ -20,7 +20,18 @@ describe('test appbar component props', () => {
     wrapper.unmount()
   })
 
-  test('test appbar textColor', () => {
+  test('test app bar round', () => {
+    const wrapper = mount(VarAppBar, {
+      props: {
+        round: true,
+      },
+    })
+
+    expect(wrapper.find('.var-app-bar').classes('var-app-bar--round')).toBeTruthy()
+    wrapper.unmount()
+  })
+
+  test('test app bar textColor', () => {
     const wrapper = mount(VarAppBar, {
       props: {
         textColor: 'red',
@@ -31,7 +42,7 @@ describe('test appbar component props', () => {
     wrapper.unmount()
   })
 
-  test('test appbar title', () => {
+  test('test app bar title', () => {
     const wrapper = mount(VarAppBar, {
       props: {
         title: 'text',
@@ -42,7 +53,7 @@ describe('test appbar component props', () => {
     wrapper.unmount()
   })
 
-  test('test appbar titlePosition', async () => {
+  test('test app bar titlePosition', async () => {
     const wrapper = mount(VarAppBar, {
       props: {
         titlePosition: 'left',
@@ -65,7 +76,7 @@ describe('test appbar component props', () => {
     wrapper.unmount()
   })
 
-  test('test appbar elevation', async () => {
+  test('test app bar elevation', async () => {
     const wrapper = mount(VarAppBar, {
       props: {
         elevation: true,
@@ -83,8 +94,8 @@ describe('test appbar component props', () => {
   })
 })
 
-describe('test appbar slots', () => {
-  test('test appbar default slot', () => {
+describe('test app bar slots', () => {
+  test('test app bar default slot', () => {
     const wrapper = mount(VarAppBar, {
       slots: {
         default: () => 'This is default slot',
@@ -96,7 +107,7 @@ describe('test appbar slots', () => {
     wrapper.unmount()
   })
 
-  test('test appbar left slot', () => {
+  test('test app bar left slot', () => {
     const wrapper = mount(VarAppBar, {
       slots: {
         left: () => 'This is left slot',
@@ -108,7 +119,7 @@ describe('test appbar slots', () => {
     wrapper.unmount()
   })
 
-  test('test appbar right slot', () => {
+  test('test app bar right slot', () => {
     const wrapper = mount(VarAppBar, {
       slots: {
         right: () => 'This is right slot',

diff --git a/packages/varlet-ui/src/app-bar/appBar.less b/packages/varlet-ui/src/app-bar/appBar.less
@@ -5,6 +5,7 @@
   --app-bar-height: 54px;
   --app-bar-left-gap: 6px;
   --app-bar-right-gap: 6px;
+  --app-bar-border-radius: 4px;
 }
 
 .var-app-bar {
@@ -47,4 +48,8 @@
     top: 0;
     right: var(--app-bar-right-gap);
   }
+
+  &--round {
+    border-radius: var(--app-bar-border-radius);
+  }
 }
diff --git a/packages/varlet-ui/src/app-bar/docs/en-US.md b/packages/varlet-ui/src/app-bar/docs/en-US.md
@@ -1,203 +1,103 @@
 # AppBar
 
-### Basic AppBar
+### Basic Usage
 
-Set the navigation bar title through the `title` attribute.
+Set the title of the app bar through the `title` prop.
 
 ```html
 <template>
-  <var-app-bar title="title" />
-</template>
-```
-
-### Custom Style
-
-Set the position of the title and the color of the navigation bar through the `title-position` and `color` attributes.
-
-```html
-<template>
-  <var-app-bar
-    title="title"
-    title-position="center"
-    color="#00c48f"
-  />
+   <var-app-bar title="title" />
 </template>
 ```
 
 ### Add Slots At Title
 
 ```html
 <template>
-  <var-app-bar>Add the title from the slot</var-app-bar>
-</template>
-```
-
-### Add Left Slot
-
-```html
-<script setup>
-import { Snackbar } from '@varlet/ui'
-
-const goBack = () => {
-  Snackbar({
-    content: 'Go Back',
-    position: 'top'
-  })
-}
-</script>
-
-<template>
-  <var-app-bar title="title">
-    <template #left>
-      <var-button
-        round
-        text
-        color="transparent"
-        text-color="#ffffff"
-        @click="goBack"
-      >
-        <var-icon name="chevron-left" :size="24" />
-      </var-button>
-    </template>
-  </var-app-bar>
-</template>
-```
-
-### Add Right Slot
-
-```html
-<script setup>
-import { Snackbar } from '@varlet/ui'
-
-const searchData = () => {
-  Snackbar({
-    content: 'search',
-    position: 'top'
-  })
-}
-</script>
-
-<template>
-  <var-app-bar title="title">
-    <template #right>
-      <var-button
-        round
-        text
-        color="transparent"
-        text-color="#ffffff"
-        @click="searchData"
-      >
-        <var-icon name="magnify" :size="24" />
-      </var-button>
-    </template>
-  </var-app-bar>
+   <var-app-bar>Add Slots At Title</var-app-bar>
 </template>
 ```
 
 ### Add Left And Right Slot
 
 ```html
-<script setup>
-import { ref } from 'vue'
-import { Snackbar } from '@varlet/ui'
-
-const offsetY = ref(false)
-const menuList = ref([
-  { label: 'options1', value: 'menu1' },
-  { label: 'options2', value: 'menu2' }
-])
-
-const goBack = () => {
-  Snackbar({
-    content: 'Go Back',
-    position: 'top'
-  })
-}
-</script>
-
 <template>
   <var-app-bar title="Title">
     <template #left>
       <var-button
+        color="transparent"
+        text-color="#ffffff"
         round
         text
-        color="transparent"
-        text-color="#fff"
-        @click="goBack"
       >
         <var-icon name="chevron-left" :size="24" />
       </var-button>
     </template>
 
     <template #right>
-      <var-menu 
-        class="app-bar-example-menu" 
-        :offset-y="42" 
-        :offset-x="-20" 
-        v-model:show="offsetY"
-      >
+      <var-menu placement="bottom-start" :offset-y="12">
         <var-button
-          round
-          text
           color="transparent"
           text-color="#ffffff"
-          @click="offsetY = true"
+          round
+          text
         >
           <var-icon name="menu" :size="24" />
         </var-button>
 
         <template #menu>
-          <div class="app-bar-example-menu-list">
-            <var-cell
-              class="app-bar-example-menu-cell"
-              v-for="value in menuList"
-              :key="value.value"
-              v-ripple
-            >
-              {{ value.label }}
-            </var-cell>
-          </div>
+          <var-cell v-ripple>OPTION</var-cell>
+          <var-cell v-ripple>OPTION</var-cell>
+          <var-cell v-ripple>OPTION</var-cell>
         </template>
       </var-menu>
     </template>
   </var-app-bar>
 </template>
+```
 
-<style>
-.app-bar-example-menu {   
-  background: transparent; 
-}
+### Use Border Radius
 
-.app-bar-example-menu-list {
-  background: #fff;
-}
+Turn on rounded border with the `round` prop.
 
-.app-bar-example-menu-cell {
-  display: block;
-  padding: 10px;
-}
-</style>
+```html
+<template>
+   <var-app-bar title="Use Border Radius" title-position="center" round />
+</template>
+```
+
+### Custom Background Color
+
+```html
+<template>
+   <var-app-bar
+     title="title"
+     title-position="center"
+     color="linear-gradient(var(--color-primary), var(--color-info))"
+   />
+</template>
 ```
 
 ## API
 
 ### Props
 
-| Prop | Description | Type | Default |
-| --- | --- | --- | --- |
-| `color` | Background | _string_ | `-` |
-| `text-color` | Text color  | _string_ | `-` |
-| `title` | Title | _string_ | - |
-| `title-position` | Title location,Can be set to `left`,`center`,`right` | _string_ | `left` |
-| `elevation` | Set altitude for navigation bar | _boolean_ | `true` |
+| Prop             | Description                                          | Type | Default |
+|------------------|------------------------------------------------------| --- |---------|
+| `color`          | Background                                           | _string_ | `-`     |
+| `text-color`     | Text color                                           | _string_ | `-`     |
+| `title`          | Title                                                | _string_ | -       |
+| `title-position` | Title location,Can be set to `left`,`center`,`right` | _string_ | `left`  |
+| `elevation`      | Whether to use elevation                             | _boolean_ | `true`  |
+| `round`          | Whether to use rounded border                        | _boolean_ | `false` |
 
 ### Slots
 
-| Name | Description | SlotProps |
-| --- | --- | --- |
+| Name | Description                                                 | SlotProps |
+| --- |-------------------------------------------------------------| --- |
 | `default` | Customize the title content to override the `title` content | `-` |
-| `left` | Insert the content to the left of the AppBar | `-` |
-| `right` | Insert the content to the right of the AppBar | `-` |
+| `left` | Insert the content to the left of the app bar               | `-` |
+| `right` | Insert the content to the right of the app bar              | `-` |
 
 ### Style Variables
 Here are the CSS variables used by the component, Styles can be customized using [StyleProvider](#/en-US/style-provider)
@@ -210,3 +110,4 @@ Here are the CSS variables used by the component, Styles can be customized using
 | `--app-bar-title-padding` | `0 12px` |
 | `--app-bar-left-gap` | `6px` |
 | `--app-bar-right-gap` | `6px` |
+| `--app-bar-border-radius` | `4px` |