[improvement] rename packages dir to src (#3659)
This commit is contained in:
neverland
@@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-nav-bar
|
||||
:title="$t('title')"
|
||||
:left-text="$t('back')"
|
||||
:right-text="$t('button')"
|
||||
left-arrow
|
||||
@click-left="onClickLeft"
|
||||
@click-right="onClickRight"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('advancedUsage')">
|
||||
<van-nav-bar
|
||||
:title="$t('title')"
|
||||
:left-text="$t('back')"
|
||||
left-arrow
|
||||
>
|
||||
<template #right>
|
||||
<van-icon name="search" />
|
||||
</template>
|
||||
</van-nav-bar>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
onClickLeft() {
|
||||
this.$toast(this.$t('back'));
|
||||
},
|
||||
onClickRight() {
|
||||
this.$toast(this.$t('button'));
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,74 @@
|
||||
# NavBar
|
||||
|
||||
### Install
|
||||
|
||||
``` javascript
|
||||
import { NavBar } from 'vant';
|
||||
|
||||
Vue.use(NavBar);
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
### Basic Usage
|
||||
|
||||
```html
|
||||
<van-nav-bar
|
||||
title="Title"
|
||||
left-text="Back"
|
||||
right-text="Button"
|
||||
left-arrow
|
||||
@click-left="onClickLeft"
|
||||
@click-right="onClickRight"
|
||||
/>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
methods: {
|
||||
onClickLeft() {
|
||||
Toast('Back');
|
||||
},
|
||||
onClickRight() {
|
||||
Toast('Button');
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Advanced Usage
|
||||
|
||||
```html
|
||||
<van-nav-bar title="Title" left-text="Back" left-arrow>
|
||||
<van-icon name="search" slot="right" />
|
||||
</van-nav-bar>
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|------|------|------|------|
|
||||
| title | Title | `String` | `''` |
|
||||
| left-text | Left Text | `String` | `''` |
|
||||
| right-text | Right Text | `String` | `''` |
|
||||
| left-arrow | Whether to show left arrow | `Boolean` | `false` |
|
||||
| fixed | Whether to fixed top | `Boolean` | `false` |
|
||||
| border | Whether to show bottom border | `Boolean` | `true` |
|
||||
| z-index | Z-index | `Number` | `1` |
|
||||
|
||||
### Slots
|
||||
|
||||
| Name | Description |
|
||||
|------|------|
|
||||
| title | Custom title |
|
||||
| left | Custom left side content |
|
||||
| right | Custom right side content |
|
||||
|
||||
### Events
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|------|------|------|
|
||||
| click-left | Triggered when click left button | - |
|
||||
| click-right | Triggered when click right button | - |
|
||||
@@ -0,0 +1,67 @@
|
||||
@import '../style/var';
|
||||
|
||||
.van-nav-bar {
|
||||
position: relative;
|
||||
height: @nav-bar-height;
|
||||
line-height: @nav-bar-height;
|
||||
text-align: center;
|
||||
background-color: @nav-bar-background-color;
|
||||
user-select: none;
|
||||
|
||||
.van-icon {
|
||||
color: @nav-bar-icon-color;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
&__arrow {
|
||||
min-width: 1em;
|
||||
font-size: @nav-bar-arrow-size;
|
||||
|
||||
+ .van-nav-bar__text {
|
||||
margin-left: -20px;
|
||||
padding-left: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
&--fixed {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__title {
|
||||
max-width: 60%;
|
||||
margin: 0 auto;
|
||||
color: @nav-bar-title-text-color;
|
||||
font-weight: 500;
|
||||
font-size: @nav-bar-title-font-size;
|
||||
}
|
||||
|
||||
&__left,
|
||||
&__right {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&__left {
|
||||
left: 15px;
|
||||
}
|
||||
|
||||
&__right {
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
&__text {
|
||||
display: inline-block;
|
||||
margin: 0 -15px;
|
||||
padding: 0 15px;
|
||||
color: @nav-bar-text-color;
|
||||
vertical-align: middle;
|
||||
|
||||
&:active {
|
||||
background-color: @active-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,89 @@
|
||||
import { createNamespace, noop } from '../utils';
|
||||
import { inherit } from '../utils/functional';
|
||||
import Icon from '../icon';
|
||||
|
||||
// Types
|
||||
import { CreateElement, RenderContext } from 'vue/types';
|
||||
import { ScopedSlot, DefaultSlots } from '../utils/types';
|
||||
|
||||
export type NavBarProps = {
|
||||
title?: string;
|
||||
fixed?: boolean;
|
||||
zIndex: number;
|
||||
border: boolean;
|
||||
leftText?: string;
|
||||
rightText?: string;
|
||||
leftArrow?: boolean;
|
||||
};
|
||||
|
||||
export type NavBarSlots = DefaultSlots & {
|
||||
left?: ScopedSlot;
|
||||
title?: ScopedSlot;
|
||||
right?: ScopedSlot;
|
||||
};
|
||||
|
||||
export type NavBarEvents = {
|
||||
'click-left'?(event: Event): void;
|
||||
'click-right'?(event: Event): void;
|
||||
};
|
||||
|
||||
const [createComponent, bem] = createNamespace('nav-bar');
|
||||
|
||||
function NavBar(
|
||||
h: CreateElement,
|
||||
props: NavBarProps,
|
||||
slots: NavBarSlots,
|
||||
ctx: RenderContext<NavBarProps>
|
||||
) {
|
||||
return (
|
||||
<div
|
||||
class={[
|
||||
bem({ fixed: props.fixed }),
|
||||
{ 'van-hairline--bottom': props.border }
|
||||
]}
|
||||
style={{ zIndex: props.zIndex }}
|
||||
{...inherit(ctx)}
|
||||
>
|
||||
<div class={bem('left')} onClick={ctx.listeners['click-left'] || noop}>
|
||||
{slots.left
|
||||
? slots.left()
|
||||
: [
|
||||
props.leftArrow && (
|
||||
<Icon class={bem('arrow')} name="arrow-left" />
|
||||
),
|
||||
props.leftText && (
|
||||
<span class={bem('text')}>{props.leftText}</span>
|
||||
)
|
||||
]}
|
||||
</div>
|
||||
<div class={[bem('title'), 'van-ellipsis']}>
|
||||
{slots.title ? slots.title() : props.title}
|
||||
</div>
|
||||
<div class={bem('right')} onClick={ctx.listeners['click-right'] || noop}>
|
||||
{slots.right
|
||||
? slots.right()
|
||||
: props.rightText && (
|
||||
<span class={bem('text')}>{props.rightText}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
NavBar.props = {
|
||||
title: String,
|
||||
fixed: Boolean,
|
||||
leftText: String,
|
||||
rightText: String,
|
||||
leftArrow: Boolean,
|
||||
border: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
zIndex: {
|
||||
type: Number,
|
||||
default: 1
|
||||
}
|
||||
};
|
||||
|
||||
export default createComponent<NavBarProps, NavBarEvents>(NavBar);
|
||||
@@ -0,0 +1,23 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div>
|
||||
<div class="van-nav-bar van-hairline--bottom" style="z-index: 1;">
|
||||
<div class="van-nav-bar__left"><i class="van-icon van-icon-arrow-left van-nav-bar__arrow">
|
||||
<!----></i><span class="van-nav-bar__text">返回</span></div>
|
||||
<div class="van-nav-bar__title van-ellipsis">标题</div>
|
||||
<div class="van-nav-bar__right"><span class="van-nav-bar__text">按钮</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-nav-bar van-hairline--bottom" style="z-index: 1;">
|
||||
<div class="van-nav-bar__left"><i class="van-icon van-icon-arrow-left van-nav-bar__arrow">
|
||||
<!----></i><span class="van-nav-bar__text">返回</span></div>
|
||||
<div class="van-nav-bar__title van-ellipsis">标题</div>
|
||||
<div class="van-nav-bar__right"><i class="van-icon van-icon-search">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@@ -0,0 +1,17 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`render left & right slot 1`] = `
|
||||
<div class="van-nav-bar van-hairline--bottom" style="z-index: 1;">
|
||||
<div class="van-nav-bar__left">Custom Left</div>
|
||||
<div class="van-nav-bar__title van-ellipsis"></div>
|
||||
<div class="van-nav-bar__right">Custom Right</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`render title slot 1`] = `
|
||||
<div class="van-nav-bar van-hairline--bottom" style="z-index: 1;">
|
||||
<div class="van-nav-bar__left"></div>
|
||||
<div class="van-nav-bar__title van-ellipsis">Custom Title</div>
|
||||
<div class="van-nav-bar__right"></div>
|
||||
</div>
|
||||
`;
|
||||
@@ -0,0 +1,4 @@
|
||||
import Demo from '../demo';
|
||||
import demoTest from '../../../test/demo-test';
|
||||
|
||||
demoTest(Demo);
|
||||
@@ -0,0 +1,23 @@
|
||||
import NavBar from '..';
|
||||
import { mount } from '../../../test/utils';
|
||||
|
||||
test('render left & right slot', () => {
|
||||
const wrapper = mount(NavBar, {
|
||||
scopedSlots: {
|
||||
left: () => 'Custom Left',
|
||||
right: () => 'Custom Right'
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('render title slot', () => {
|
||||
const wrapper = mount(NavBar, {
|
||||
scopedSlots: {
|
||||
title: () => 'Custom Title'
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
@@ -0,0 +1,76 @@
|
||||
# NavBar 导航栏
|
||||
|
||||
### 引入
|
||||
|
||||
``` javascript
|
||||
import { NavBar } from 'vant';
|
||||
|
||||
Vue.use(NavBar);
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 基础用法
|
||||
|
||||
```html
|
||||
<van-nav-bar
|
||||
title="标题"
|
||||
left-text="返回"
|
||||
right-text="按钮"
|
||||
left-arrow
|
||||
@click-left="onClickLeft"
|
||||
@click-right="onClickRight"
|
||||
/>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
methods: {
|
||||
onClickLeft() {
|
||||
Toast('返回');
|
||||
},
|
||||
onClickRight() {
|
||||
Toast('按钮');
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 高级用法
|
||||
|
||||
通过插槽定制内容
|
||||
|
||||
```html
|
||||
<van-nav-bar title="标题" left-text="返回" left-arrow>
|
||||
<van-icon name="search" slot="right" />
|
||||
</van-nav-bar>
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
|------|------|------|------|------|
|
||||
| title | 标题 | `String` | `''` | - |
|
||||
| left-text | 左侧文案 | `String` | `''` | - |
|
||||
| right-text | 右侧文案 | `String` | `''` | - |
|
||||
| left-arrow | 是否显示左侧箭头 | `Boolean` | `false` | - |
|
||||
| fixed | 是否固定在顶部 | `Boolean` | `false` | - |
|
||||
| border | 是否显示下边框 | `Boolean` | `true` | 1.4.7 |
|
||||
| z-index | 元素 z-index | `Number` | `1` | - |
|
||||
|
||||
### Slots
|
||||
|
||||
| 名称 | 说明 |
|
||||
|------|------|
|
||||
| title | 自定义标题 |
|
||||
| left | 自定义左侧区域内容 |
|
||||
| right | 自定义右侧区域内容 |
|
||||
|
||||
### Events
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
|------|------|------|
|
||||
| click-left | 点击左侧按钮时触发 | - |
|
||||
| click-right | 点击右侧按钮时触发 | - |
|
||||
Reference in New Issue
Block a user