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