8 changed files with 77 additions and 84 deletions
@ -0,0 +1,29 @@ |
|||||
|
@import '~antd/lib/style/themes/default.less'; |
||||
|
|
||||
|
.globalFooter { |
||||
|
margin: 48px 0 24px 0; |
||||
|
padding: 0 16px; |
||||
|
text-align: center; |
||||
|
|
||||
|
.links { |
||||
|
margin-bottom: 8px; |
||||
|
|
||||
|
a { |
||||
|
color: @text-color-secondary; |
||||
|
transition: all 0.3s; |
||||
|
|
||||
|
&:not(:last-child) { |
||||
|
margin-right: 40px; |
||||
|
} |
||||
|
|
||||
|
&:hover { |
||||
|
color: @text-color; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.copyright { |
||||
|
color: @text-color-secondary; |
||||
|
font-size: @font-size-base; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,40 @@ |
|||||
|
import React from 'react'; |
||||
|
import classNames from 'classnames'; |
||||
|
import styles from './index.less'; |
||||
|
|
||||
|
export interface GlobalFooterProps { |
||||
|
links?: Array<{ |
||||
|
key?: string; |
||||
|
title: React.ReactNode; |
||||
|
href: string; |
||||
|
blankTarget?: boolean; |
||||
|
}>; |
||||
|
copyright?: React.ReactNode; |
||||
|
style?: React.CSSProperties; |
||||
|
className?: string; |
||||
|
} |
||||
|
|
||||
|
const GlobalFooter: React.SFC<GlobalFooterProps> = ({ className, links, copyright }) => { |
||||
|
const clsString = classNames(styles.globalFooter, className); |
||||
|
return ( |
||||
|
<footer className={clsString}> |
||||
|
{links && ( |
||||
|
<div className={styles.links}> |
||||
|
{links.map(link => ( |
||||
|
<a |
||||
|
key={link.key} |
||||
|
title={link.key} |
||||
|
target={link.blankTarget ? '_blank' : '_self'} |
||||
|
href={link.href} |
||||
|
> |
||||
|
{link.title} |
||||
|
</a> |
||||
|
))} |
||||
|
</div> |
||||
|
)} |
||||
|
{copyright && <div className={styles.copyright}>{copyright}</div>} |
||||
|
</footer> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export default GlobalFooter; |
||||
@ -1,34 +0,0 @@ |
|||||
--- |
|
||||
order: 0 |
|
||||
title: 全局搜索 |
|
||||
--- |
|
||||
|
|
||||
通常放置在导航工具条右侧。(点击搜索图标预览效果) |
|
||||
|
|
||||
````jsx |
|
||||
import HeaderSearch from 'ant-design-pro/lib/HeaderSearch'; |
|
||||
|
|
||||
ReactDOM.render( |
|
||||
<div |
|
||||
style={{ |
|
||||
textAlign: 'right', |
|
||||
height: '64px', |
|
||||
lineHeight: '64px', |
|
||||
boxShadow: '0 1px 4px rgba(0,21,41,.12)', |
|
||||
padding: '0 32px', |
|
||||
width: '400px', |
|
||||
}} |
|
||||
> |
|
||||
<HeaderSearch |
|
||||
placeholder="站内搜索" |
|
||||
dataSource={['搜索提示一', '搜索提示二', '搜索提示三']} |
|
||||
onSearch={(value) => { |
|
||||
console.log('input', value); // eslint-disable-line |
|
||||
}} |
|
||||
onPressEnter={(value) => { |
|
||||
console.log('enter', value); // eslint-disable-line |
|
||||
}} |
|
||||
/> |
|
||||
</div> |
|
||||
, mountNode); |
|
||||
```` |
|
||||
@ -1,22 +0,0 @@ |
|||||
--- |
|
||||
title: HeaderSearch |
|
||||
subtitle: |
|
||||
cols: 1 |
|
||||
order: 8 |
|
||||
--- |
|
||||
|
|
||||
Usually placed as an entry to the global search, placed on the right side of the navigation toolbar. |
|
||||
|
|
||||
## API |
|
||||
|
|
||||
参数 | 说明 | 类型 | 默认值 |
|
||||
----|------|-----|------ |
|
||||
placeholder | placeholder text | string | - |
|
||||
dataSource | current list of prompts | string[] | - |
|
||||
onSearch | Called when searching items. | function(value) | - |
|
||||
onChange | Called when select an option or input value change, or value of input is changed | function(value) | - |
|
||||
onSelect | Called when a option is selected. param is option's value and option instance. | function(value) | - |
|
||||
onPressEnter | Callback when pressing Enter | function(value) | - |
|
||||
onVisibleChange | Show or hide the callback of the text box | function(value) |- |
|
||||
defaultOpen | The input box is displayed for the first time. | boolean | false |
|
||||
open | The input box is displayed | boolean |false |
|
||||
@ -1,22 +0,0 @@ |
|||||
--- |
|
||||
title: HeaderSearch |
|
||||
subtitle: 顶部搜索框 |
|
||||
cols: 1 |
|
||||
order: 8 |
|
||||
--- |
|
||||
|
|
||||
通常作为全局搜索的入口,放置在导航工具条右侧。 |
|
||||
|
|
||||
## API |
|
||||
|
|
||||
参数 | 说明 | 类型 | 默认值 |
|
||||
----|------|-----|------ |
|
||||
placeholder | 占位文字 | string | - |
|
||||
dataSource | 当前提示内容列表 | string[] | - |
|
||||
onSearch | 搜索补全项的时候调用 | function(value) | - |
|
||||
onChange | 选中 option,或 input 的 value 变化时,调用此函数 | function(value) | - |
|
||||
onSelect | 被选中时调用,参数为选中项的 value 值 | function(value) | - |
|
||||
onPressEnter | 按下回车时的回调 | function(value) | - |
|
||||
onVisibleChange | 显示或隐藏文本框的回调 | function(value) |- |
|
||||
defaultOpen | 输入框首次显示是否显示 | boolean | false |
|
||||
open | 控制输入框是否显示 | boolean |false |
|
||||
Loading…
Reference in new issue