improve anchor detail

components/anchor/AnchorLink.tsx

@@ -11,6 +11,7 @@ export interface AnchorLinkProps {
   title?: Element;
   bounds: number;
   target?: () => HTMLElement | Window;
+  affix?: boolean;
 }
 
 export default class AnchorLink extends React.Component<AnchorLinkProps, any> {
@@ -67,9 +68,9 @@ export default class AnchorLink extends React.Component<AnchorLinkProps, any> {
   }
 
   render() {
-    const { prefixCls, href, children, title, bounds } = this.props;
+    const { prefixCls, href, children, title, bounds, affix } = this.props;
     const { anchorHelper } = this.context;
-    const active = anchorHelper && anchorHelper.getCurrentAnchor(bounds) === href;
+    const active = affix && anchorHelper && anchorHelper.getCurrentAnchor(bounds) === href;
     const cls = classNames({
       [`${prefixCls}-link`]: true,
       [`${prefixCls}-link-active`]: active,

components/anchor/demo/basic.md

@@ -20,7 +20,7 @@ const { Link } = Anchor;
 ReactDOM.render(
   <Anchor>
     <Link href="#components-anchor-demo-basic" title="Basic demo" />
-    <Link href="#components-anchor-demo-independ" title="Independ demo" />
+    <Link href="#components-anchor-demo-fixed" title="Fixed demo" />
     <Link href="#API" title="API">
       <Link href="#Anchor-Props" title="Anchor Props" />
       <Link href="#Link-Props" title="Link Props" />

components/anchor/demo/fixed.md

@@ -7,7 +7,7 @@ title:
 
 ## zh-CN
 
-不会随页面滚动变化。
+不浮动，状态不随页面滚动变化。
 
 ## en-US
 
@@ -20,7 +20,7 @@ const { Link } = Anchor;
 ReactDOM.render(
   <Anchor affix={false}>
     <Link href="#components-anchor-demo-basic" title="Basic demo" />
-    <Link href="#components-anchor-demo-independ" title="Independ demo" />
+    <Link href="#components-anchor-demo-fixed" title="Fixed demo" />
     <Link href="#API" title="API">
       <Link href="#Anchor-Props" title="Anchor Props" />
       <Link href="#Link-Props" title="Link Props" />

components/anchor/index.en-US.md

@@ -5,11 +5,11 @@ cols: 1
 title: Anchor
 ---
 
-A hyperlink to a location on same page.
+Hyperlinks to scroll on one page.
 
 ## When To Use
 
-For displaying anchor hyperlink on page, and jump between them.
+For displaying anchor hyperlinks on page, and jump between them.
 
 ## API
 
@@ -26,4 +26,4 @@ For displaying anchor hyperlink on page, and jump between them.
 | Property        | Description           | Type               | Default       |
 |-------------|----------------|--------------------|--------------|
 | href    | target of hyperlink  | String |         |
-| title | content of  hyperlink | String |         |
+| title | content of  hyperlink | React.Node |         |

components/anchor/index.tsx

@@ -86,13 +86,14 @@ export default class Anchor extends React.Component<AnchorProps, any> {
         onClick: this.anchorHelper.scrollTo,
         prefixCls: this.props.prefixCls,
         bounds: this.props.bounds,
+        affix: this.props.affix,
       });
     }
     return child;
   }
 
   render() {
-    const { prefixCls, offsetTop, style, className = '', affix} = this.props;
+    const { prefixCls, offsetTop, style, className = '', affix } = this.props;
     const { activeAnchor } = this.state;
     const inkClass = classNames({
       [`${prefixCls}-ink-ball`]: true,
@@ -106,20 +107,24 @@ export default class Anchor extends React.Component<AnchorProps, any> {
 
     const anchorClass = classNames({
       [`${prefixCls}`]: true,
-      affix,
+      'fixed': !affix,
     });
 
-    const anchorContent = (<div className={wrapperClass} style={style}>
-      <div className={anchorClass}>
-        <div className={`${prefixCls}-ink`} >
-          <span className={inkClass} ref="ink" />
+    const anchorContent = (
+      <div className={wrapperClass} style={style}>
+        <div className={anchorClass}>
+          <div className={`${prefixCls}-ink`} >
+            <span className={inkClass} ref="ink" />
+          </div>
+          {React.Children.map(this.props.children, this.renderAnchorLink)}
         </div>
-        {React.Children.map(this.props.children, this.renderAnchorLink)}
       </div>
-    </div>);
+    );
 
-    return affix === false ? anchorContent : <Affix offsetTop={offsetTop}>
-      {anchorContent}
-    </Affix>;
+    return affix === false ? anchorContent : (
+      <Affix offsetTop={offsetTop}>
+        {anchorContent}
+      </Affix>
+    );
   }
 }

components/anchor/index.zh-CN.md

@@ -27,4 +27,4 @@ title: Anchor
 | 成员        | 说明           | 类型               | 默认值       |
 |-------------|----------------|--------------------|--------------|
 | href    | 锚点链接   | String |         |
-| title | 文字内容   | String |         |
+| title | 文字内容   | React.Node |         |

components/anchor/style/index.less

@@ -9,12 +9,6 @@
     }
 
     &-ink {
-      display: none;
-      padding-left: 0;
-    }
-
-    &.affix &-ink {
-      display: block;
       position: absolute;
       width: 9px;
       height: 100%;
@@ -30,7 +24,6 @@
         margin: 0 auto;
       }
       &-ball {
-        display: none;
         position: absolute;
         width: 9px;
         height: 9px;
@@ -45,12 +38,15 @@
         }
       }
     }
+
+    &.fixed &-ink &-ink-ball {
+      display: none;
+    }
   }
 
   &-anchor-link {
-    padding-left: 16px;
+    padding: 4px 0 4px 16px;
     line-height: 1;
-    margin: 12px 0;
 
     &-title {
       display: block;