-
Notifications
You must be signed in to change notification settings - Fork 591
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
2,485 changed files
with
387,427 additions
and
12 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
{"title":"Container","meta":{"title":"Container","description":"\n<p>Change the default container by passing a function to <code>container</code>;\nenable <code>useAbsolute</code> to use <code>absolute position</code> to implement affix component;</p>\n","order":"3"},"codes":{"jsx":"import { Affix, Button } from '@alifd/next';\n\nclass Demo extends React.Component {\n\n _containerRefHandler(ref) {\n this.container = ref;\n }\n\n render() {\n return (\n <div className=\"custom-affix-container\" ref={this._containerRefHandler.bind(this)}>\n <div className=\"affix-wrapper\">\n <Affix container={() => this.container} offsetTop={0} useAbsolute>\n <Button type=\"secondary\">Affixed Button</Button>\n </Affix>\n </div>\n </div>\n );\n }\n}\n\n\n\nReactDOM.render(<Demo />, mountNode);\n","css":".custom-affix-container {\n height: 150px;\n overflow-y: scroll;\n width: 50px;\n background: url(https://img.alicdn.com/tfs/TB1AbJXSpXXXXXJXpXXXXXXXXXX-32-32.jpg) repeat 50% 50%;\n}\n\n.custom-affix-container .affix-wrapper {\n padding-top: 100px;\n height: 500px;\n}\n"},"body":"\n````jsx\nimport { Affix, Button } from '@alifd/next';\n\nclass Demo extends React.Component {\n\n _containerRefHandler(ref) {\n this.container = ref;\n }\n\n render() {\n return (\n <div className=\"custom-affix-container\" ref={this._containerRefHandler.bind(this)}>\n <div className=\"affix-wrapper\">\n <Affix container={() => this.container} offsetTop={0} useAbsolute>\n <Button type=\"secondary\">Affixed Button</Button>\n </Affix>\n </div>\n </div>\n );\n }\n}\n\n\n\nReactDOM.render(<Demo />, mountNode);\n````\n\n````css\n.custom-affix-container {\n height: 150px;\n overflow-y: scroll;\n width: 50px;\n background: url(https://img.alicdn.com/tfs/TB1AbJXSpXXXXXJXpXXXXXXXXXX-32-32.jpg) repeat 50% 50%;\n}\n\n.custom-affix-container .affix-wrapper {\n padding-top: 100px;\n height: 500px;\n}\n````","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 _next = require(\"@alifd/next\");\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\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo() {\n _classCallCheck(this, Demo);\n\n return _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).apply(this, arguments));\n }\n\n _createClass(Demo, [{\n key: \"_containerRefHandler\",\n value: function _containerRefHandler(ref) {\n this.container = ref;\n }\n }, {\n key: \"render\",\n value: function render() {\n var _this2 = this;\n\n return React.createElement(\n \"div\",\n { className: \"custom-affix-container\", ref: this._containerRefHandler.bind(this) },\n React.createElement(\n \"div\",\n { className: \"affix-wrapper\" },\n React.createElement(\n _next.Affix,\n { container: function container() {\n return _this2.container;\n }, offsetTop: 0, useAbsolute: true },\n React.createElement(\n _next.Button,\n { type: \"secondary\" },\n \"Affixed Button\"\n )\n )\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), mountNode);})()</script><div class=\"highlight\"><pre class=\"language-jsx\"><code class=\"language-jsx\"><span class=\"token keyword\">import</span> <span class=\"token punctuation\">{</span> Affix<span class=\"token punctuation\">,</span> Button <span class=\"token punctuation\">}</span> <span class=\"token keyword\">from</span> <span class=\"token string\">'@alifd/next'</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token keyword\">class</span> <span class=\"token class-name\">Demo</span> <span class=\"token keyword\">extends</span> <span class=\"token class-name\">React<span class=\"token punctuation\">.</span>Component</span> <span class=\"token punctuation\">{</span>\n\n <span class=\"token function\">_containerRefHandler</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">ref</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>container <span class=\"token operator\">=</span> ref<span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span>\n\n <span class=\"token function\">render</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">return</span> <span class=\"token punctuation\">(</span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>div</span> <span class=\"token attr-name\">className</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>custom-affix-container<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">ref</span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=</span><span class=\"token punctuation\">{</span><span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span><span class=\"token function\">_containerRefHandler</span><span class=\"token punctuation\">.</span><span class=\"token function\">bind</span><span class=\"token punctuation\">(</span><span class=\"token keyword\">this</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">}</span></span><span class=\"token punctuation\">></span></span><span class=\"token plain-text\">\n </span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>div</span> <span class=\"token attr-name\">className</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>affix-wrapper<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span><span class=\"token plain-text\">\n </span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span><span class=\"token class-name\">Affix</span></span> <span class=\"token attr-name\">container</span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=</span><span class=\"token punctuation\">{</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>container<span class=\"token punctuation\">}</span></span> <span class=\"token attr-name\">offsetTop</span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=</span><span class=\"token punctuation\">{</span><span class=\"token number\">0</span><span class=\"token punctuation\">}</span></span> <span class=\"token attr-name\">useAbsolute</span><span class=\"token punctuation\">></span></span><span class=\"token plain-text\">\n </span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span><span class=\"token class-name\">Button</span></span> <span class=\"token attr-name\">type</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>secondary<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span><span class=\"token plain-text\">Affixed Button</span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span><span class=\"token class-name\">Button</span></span><span class=\"token punctuation\">></span></span><span class=\"token plain-text\">\n </span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span><span class=\"token class-name\">Affix</span></span><span class=\"token punctuation\">></span></span><span class=\"token plain-text\">\n </span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>div</span><span class=\"token punctuation\">></span></span><span class=\"token plain-text\">\n </span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>div</span><span class=\"token punctuation\">></span></span>\n <span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n\n\n\nReactDOM<span class=\"token punctuation\">.</span><span class=\"token function\">render</span><span class=\"token punctuation\">(</span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span><span class=\"token class-name\">Demo</span></span> <span class=\"token punctuation\">/></span></span><span class=\"token punctuation\">,</span> mountNode<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre></div><style type=\"text/css\">.custom-affix-container {\n height: 150px;\n overflow-y: scroll;\n width: 50px;\n background: url(https://img.alicdn.com/tfs/TB1AbJXSpXXXXXJXpXXXXXXXXXX-32-32.jpg) repeat 50% 50%;\n}\n\n.custom-affix-container .affix-wrapper {\n padding-top: 100px;\n height: 500px;\n}</style><div class=\"highlight\"><pre class=\"language-css\"><code class=\"language-css\"><span class=\"token selector\">.custom-affix-container</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">height</span><span class=\"token punctuation\">:</span> 150px<span class=\"token punctuation\">;</span>\n <span class=\"token property\">overflow-y</span><span class=\"token punctuation\">:</span> scroll<span class=\"token punctuation\">;</span>\n <span class=\"token property\">width</span><span class=\"token punctuation\">:</span> 50px<span class=\"token punctuation\">;</span>\n <span class=\"token property\">background</span><span class=\"token punctuation\">:</span> <span class=\"token url\">url(https://img.alicdn.com/tfs/TB1AbJXSpXXXXXJXpXXXXXXXXXX-32-32.jpg)</span> repeat 50% 50%<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token selector\">.custom-affix-container .affix-wrapper</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">padding-top</span><span class=\"token punctuation\">:</span> 100px<span class=\"token punctuation\">;</span>\n <span class=\"token property\">height</span><span class=\"token punctuation\">:</span> 500px<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span></code></pre></div>"} |
Oops, something went wrong.