组件演示
[{"title":"基本用法","id":"components-totop-demo-basic","tags":[],"filepath":"site/components/totop/demo/basic.md","directory":"components/totop/demo","filename":"basic","meta":{"title":"基本用法","description":"\n<p>基本用法。</p>\n","order":"0","filepath":"site/components/totop/demo/basic.md","filename":"basic","directory":"components/totop/demo","id":"components-totop-demo-basic","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _classnames = require('classnames');\n\nvar _classnames2 = _interopRequireDefault(_classnames);\n\nvar _uxcore = require('uxcore');\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\n;\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.state = {};\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'render',\n value: function render() {\n return React.createElement(\n 'div',\n null,\n React.createElement(_uxcore.Totop, null),\n React.createElement(\n 'h1',\n { style: { fontSize: 22 } },\n '\\u7EC4\\u4EF6\\u5728\\u5C4F\\u5E55\\u7684\\u53F3\\u4E0B\\u65B9'\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-totop-demo-basic'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\"><span class=\"hljs-keyword\">import</span> classnames <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'classnames'</span>;;\n\n<span class=\"hljs-keyword\">import</span> { Totop } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class</span> <span class=\"hljs-title\">Demo</span> <span class=\"hljs-keyword\">extends</span> <span class=\"hljs-title\">React</span>.<span class=\"hljs-title\">Component</span> </span>{\n\n constructor(props) {\n <span class=\"hljs-keyword\">super</span>(props);\n <span class=\"hljs-keyword\">this</span>.state = {\n };\n }\n\n render() {\n <span class=\"hljs-keyword\">return</span> (\n <span class=\"xml\"><span class=\"hljs-tag\"><<span class=\"hljs-title\">div</span>></span>\n <span class=\"hljs-tag\"><<span class=\"hljs-title\">Totop</span> /></span>\n <span class=\"hljs-tag\"><<span class=\"hljs-title\">h1</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">fontSize:</span> <span class=\"hljs-attribute\">22</span> }}></span>组件在屏幕的右下方<span class=\"hljs-tag\"></<span class=\"hljs-title\">h1</span>></span>\n <span class=\"hljs-tag\"></<span class=\"hljs-title\">div</span>></span>\n )</span>;\n }\n}\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\"><<span class=\"hljs-title\">Demo</span> /></span>,\n document.getElementById('components-totop-demo-basic')\n);</span></code></pre></div>"},"status":"public","toc":""}]
import classnames from 'classnames';;
import { Totop } from 'uxcore';
class Demo extends React.Component {
constructor(props) {
super(props);
this.state = {
};
}
render() {
return (
<div>
<Totop />
<h1 style={{ fontSize: 22 }}>组件在屏幕的右下方</h1>
</div>
);
}
}
ReactDOM.render(
<Demo />,
document.getElementById('components-totop-demo-basic')
);
API
Props
配置项 | 类型 | 必填 | 默认值 | 功能/备注 |
---|---|---|---|---|
prefixCls | string | optional | "kuma-totop" | 不想使用 kuma 主题时使用 |
className | string | optional | - | 额外的顶级类名 |
to | number | optional | 10 | 回到顶部时据顶端距离,单位 px |
distance | number | optional | 30 | 向下滑多少距离出现回到顶部 |
duration | number | optional | 600 | 动画持续时间 |
theme | string | optional | - | 默认为方形,另提供 "lcircle" 和 "mcircle" 两个选项 |
children | react element | optional | 除回到顶部按钮外的其他元素,用户自由定义 |