+{"title":"Basic","meta":{"title":"Basic","description":"\n<p>The simple usage is to wrap your components direcly with Affix component.</p>\n","order":"0"},"codes":{"jsx":"import { Affix, Button } from '@alifd/next';\n\nReactDOM.render(<div className=\"custom-affix-wrapper\">\n <Affix>\n <Button type=\"secondary\">Affixed Button</Button>\n </Affix>\n</div>, mountNode);\n","css":".custom-affix-wrapper {\n padding: 40px 0;\n}\n"},"body":"\n````jsx\nimport { Affix, Button } from '@alifd/next';\n\nReactDOM.render(<div className=\"custom-affix-wrapper\">\n <Affix>\n <Button type=\"secondary\">Affixed Button</Button>\n </Affix>\n</div>, mountNode);\n````\n\n````css\n.custom-affix-wrapper {\n padding: 40px 0;\n}\n````","html":"<script>(function(){\"use strict\";\n\nvar _next = require(\"@alifd/next\");\n\nReactDOM.render(React.createElement(\n \"div\",\n { className: \"custom-affix-wrapper\" },\n React.createElement(\n _next.Affix,\n null,\n React.createElement(\n _next.Button,\n { type: \"secondary\" },\n \"Affixed Button\"\n )\n )\n), 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\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>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-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>Affix</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>Button</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>Button</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>Affix</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 punctuation\">,</span> mountNode<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre></div><style type=\"text/css\">.custom-affix-wrapper {\n padding: 40px 0;\n}</style><div class=\"highlight\"><pre class=\"language-css\"><code class=\"language-css\"><span class=\"token selector\">.custom-affix-wrapper</span> <span class=\"token punctuation\">{</span>\n <span class=\"token property\">padding</span><span class=\"token punctuation\">:</span> 40px 0<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span></code></pre></div>"}
0 commit comments