@ accided/ads (帮助)

Admin Design System - Ecube Labs admin应用程序的回放组件库.

安装

npm install @ceed/ads
# or
yarn add @ceed/ads

使用量

与 Bundler( Vite, Webpack等) 相通 :

import { Button, ThemeProvider } from '@ceed/ads';

function App() {
  return (
    <ThemeProvider>
      <Button variant="solid">Click me</Button>
    </ThemeProvider>
  );
}

浏览器 MEN( 通过 CDN)

你用得着 @ceed/ads 直接在浏览器中没有捆绑器通过 esm.sh (英语)。 。 。 .

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>@ceed/ads Browser Example</title>
  </head>
  <body>
    <div id="root"></div>

    <script type="module">
      import React from 'https://esm.sh/react@18';
      import { createRoot } from 'https://esm.sh/react-dom@18/client';
      import { Button, ThemeProvider } from 'https://esm.sh/@ceed/ads';

      const App = () =>
        React.createElement(ThemeProvider, null, React.createElement(Button, { variant: 'solid' }, 'Hello from CDN!'));

      createRoot(document.getElementById('root')).render(React.createElement(App));
    </script>
  </body>
</html>

带有导入地图

用于更清洁的进口,用途 导入地图数字 :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>@ceed/ads with Import Maps</title>
  </head>
  <body>
    <div id="root"></div>

    <script type="importmap">
      {
        "imports": {
          "react": "https://esm.sh/react@18",
          "react/jsx-runtime": "https://esm.sh/react@18/jsx-runtime",
          "react-dom/client": "https://esm.sh/react-dom@18/client",
          "@ceed/ads": "https://esm.sh/@ceed/ads"
        }
      }
    </script>

    <script type="module">
      import React from 'react';
      import { createRoot } from 'react-dom/client';
      import { Button, ThemeProvider } from '@ceed/ads';

      const App = () =>
        React.createElement(ThemeProvider, null, React.createElement(Button, { variant: 'solid' }, 'Hello from CDN!'));

      createRoot(document.getElementById('root')).render(React.createElement(App));
    </script>
  </body>
</html>

与JSX(使用esm.sh)

esm.sh 支持通过 ?jsx-runtime=automatic 参数 :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>@ceed/ads with JSX</title>
  </head>
  <body>
    <div id="root"></div>

    <script type="importmap">
      {
        "imports": {
          "react": "https://esm.sh/react@18",
          "react/jsx-runtime": "https://esm.sh/react@18/jsx-runtime",
          "react-dom/client": "https://esm.sh/react-dom@18/client",
          "@ceed/ads": "https://esm.sh/@ceed/ads"
        }
      }
    </script>

    <script type="module">
      import { createRoot } from 'react-dom/client';
      import { jsx } from 'react/jsx-runtime';
      import { Button, Stack, ThemeProvider } from '@ceed/ads';

      const App = () =>
        jsx(ThemeProvider, {
          children: jsx(Stack, {
            spacing: 2,
            children: [
              jsx(Button, { variant: 'solid', children: 'Solid' }),
              jsx(Button, { variant: 'outlined', children: 'Outlined' }),
              jsx(Button, { variant: 'soft', children: 'Soft' }),
            ],
          }),
        });

      createRoot(document.getElementById('root')).render(jsx(App, {}));
    </script>
  </body>
</html>

文档

• 故事书
• 组合