@accera/solar-components 中文文档教程

Question

Solar Components

This is a implementation of Accera's WebComponents 中的设计系统。

Why Stencil?

Stencil 是一个用于轻松构建 Web 组件的编译器。

Stencil 将最流行的前端框架的最佳概念结合到编译时而非运行时工具中。 Stencil 采用 TypeScript、JSX、微型虚拟 DOM 层、高效的单向数据绑定、异步渲染管道（类似于 React Fiber）和开箱即用的延迟加载，并生成 100% 基于标准的 Web 组件，这些组件可以运行在任何支持自定义元素 v1 规范的浏览器中。

Stencil 组件只是 Web 组件，因此它们可以在任何主要框架或根本没有框架的情况下工作。

Getting Started

要开始在此库中开发新组件，请将此 repo 克隆到一个新目录：

然后运行：

npm install
npm start

按照 Stencil docs 到创建你的组件。

这个库是基于 Atomic Design 构建的，利用了它的模块化方法。

要为生产构建此库，请运行：

npm run build

Components Guidelines

• Naming: All components should start with ac prefix;
• Styling: Don't use :slotted CSS selector, because it not works properly in Edge and it breaks the rules of Atomic Design.

Using this Library

With any application

• In your project, run npm install @accera/solar-components@beta --save
• Put a script tag similar to this in the head of your index.html:

<script src='node_modules/@accera/solar-components/dist/solar.js'></script>

• Then you can use an Solar element anywhere in your template, JSX, html etc
• Note that your project needs to support NPM packages

With React

• In your project, run npm install @accera/solar-components@beta --save
• In the main script of your application, update the code to something like:

```jsx harmony 从“反应”导入反应； 从 'react-dom' 导入 ReactDOM； 导入“./index.css”； 从'./App'导入应用程序； 从 './registerServiceWorker' 导入 registerServiceWorker；

// test-component 是我们组成的 Web 组件的名称 // 发布到 npm: 从'@accera/solar-components/dist/loader'导入{defineCustomElements}；

ReactDOM.render(, document.getElementById('root')); 注册服务工作者（）； defineCustomElements(window);

- Anytime you want to use a web component from this library, you use:

jsx和谐 从'@accera/solar-components/dist/collection/react'导入{SolarComponent}；

导出函数示例（道具）{ 返回 （ ); }

### Theming

This library use CSS variables to work with themes. You can customize colors declaring it in your main CSS file:

CSS ：根 { --color-primary-normal: #FF5E00; --color-primary-normal-rgb: 255, 94, 0; --color-primary-dark: #cc4b00; --color-primary-dark-rgb: 204, 75.2, 0; --color-primary-light: #ff7e33; --color-primary-light-rgb: 255, 126.2, 51; --color-secondary-normal: #0080FF; --color-secondary-normal-rgb: 0, 128, 255; --color-secondary-dark: #0066cc; --color-secondary-dark-rgb: 0, 102.4, 204; --color-secondary-light: #3399ff; --color-secondary-light-rgb: 51, 153.4, 255; }

Check out the [_default.theme.scss](https://github.com/accera-tech/solar-components/blob/master/src/theme/_default.theme.scss) to discover all the theme variables that you can customize.

### Extending your Style

Also, you can apply the global style of Solar in your application putting this code in the `head` of your `index.html`.

HTML

Or import it in your CSS/SCSS using:

scss @import "node_modules/@accera/solar-components/dist/solar.css";

This will add some features like:
- Typography Styles (`h1 h2 p...`)
- Webkit scrollbar styles
- Tooltip util

You can also use the variables defined in this lib in your SCSS:

scss @import "node_modules/@accera/solar-components/dist/theme/variables"; ```

Contributing

考虑按照这些文档为这个 repo 做出贡献：

• Stenciljs Styleguide
• Atomic Design

Best Practices

• WebComponents.org
• Google WebComponents
• Open WebComponents
• WebComponents Gold Standard