ember-polaris
is an ember-cli
addon to make Shopify's Polaris design system accessible to Ember developers.
NOTE: this addon is still in development. As such, not all of the components available in the React component library have been built yet, and some features of those which have been built are currently unimplemented. Check the component list for a list of those which are currently available.
Install ember-polaris
using ember-cli
:
$ ember install @smile-io/ember-polaris
This addon will install ember-cli-sass in the host app. It will also set up your app's app/styles/app.scss
to @import "ember-polaris";
, creating the file if it does not already exist.
For icons to work you will need to:
public
, ex: public/assets/images/svg/polaris
ember-svg-jar
ember-svg-jar
options to your ember-cli-build.js
:// ember-cli-build.js
var app = new EmberApp(defaults, {
...
svgJar: {
strategy: 'inline',
inline: {
stripPath: false,
optimizer: {
removeDimensions: true,
},
sourceDirs: [
'public/assets/images/svg',
],
}
},
...
});
If your app does not already import ember-template-compiler
, you may get an error similar to this one when passing a hash of componentName
and props
into one of the ember-polaris
components:
Uncaught TypeError: _ember.default.HTMLBars.compile is not a function
If that happens, you need to add an import statement to its ember-cli-build.js
.
// ember-cli-build.js
app.import('node_modules/ember-source/dist/ember-template-compiler.js');
NOTE: This setup will be handled by ember-polaris
in the future.
ember-polaris
provides a set of Ember components intended to implement the same behavior and functionality as the Shopify Polaris React components. In general the usage can be inferred from the Polaris component documentation, with some exceptions as described below.
We have tried to keep the components provided by ember-polaris
as similar to the original Polaris React components as possible. However, there are cases where it makes sense to do things in a more Ember-friendly way, and where this is true we will describe the ember-polaris
usage and how it differs from the original Shopify components.
children
propertyA large number of the Polaris React components have a children
property listed in their documentation. In these cases, the corresponding ember-polaris
component can be given a text
attribute which will take the place of the children
property and specify the text to be rendered by the component. Alternatively these components can be used in block form to achieve the same result. Note that the block content will take precedence over the text
attribute (if one is supplied):
element
propertySome Polaris React components accept an element
property which changes the tag rendered by the component. In ember-polaris
, this is replaced by the tagName
attribute unless otherwise noted. This attribute cannot be dynamic - the following code would cause an error:
actions
propertySome Polaris React components accept an actions
property as a list of actions which can be performed. In ember-polaris
, this is renamed to avoid collisions with the Ember actions
hash. The new name will be different based on the component - check the documentation for the specific component to find out what attribute to pass the actions list as.
Below is a categorised list of the components available in ember-polaris
. Click an item to see more information and usage examples for that component.
See the Contributing guide for details.
This project is licensed under the MIT License.
Ember检查器是一个浏览器插件,用于调试Ember应用程序。 灰烬检查员包括以下主题 - S.No. 灰烬检查员方式和描述 1 安装Inspector 您可以安装Ember检查器来调试您的应用程序。 2 Object Inspector Ember检查器允许与Ember对象进行交互。 3 The View Tree 视图树提供应用程序的当前状态。 4 检查路由,数据选项卡和库信息 您可以看到检查
英文原文: http://emberjs.com/guides/getting-ember/index/ Ember构建 Ember的发布管理团队针对Ember和Ember Data维护了不同的发布方法。 频道 最新的Ember和Ember Data的 Release,Beta 和 Canary 构建可以在这里找到。每一个频道都提供了一个开发版、最小化版和生产版。更多关于不同频道的信息可以查看博客
ember-emojione ember-emojione is your emoji solution for Ember, based on the EmojiOne project. EmojiOne version 2 is used, which is free to use for everyone (CC BY-SA 4.0), you're only required to giv
Ember 3D Ember 3D is an Ember addon for using Three.js - an easy to use, lightweight, javascript 3D library. It is designed to: Prescribe a solid file structure to Three.js code using ES6 modules. Ena
Ember Table An addon to support large data set and a number of features around table. Ember Table canhandle over 100,000 rows without any rendering or performance issues. Ember Table 3.x supports: Emb
vscode-ember This is the VSCode extension to use the Ember Language Server. Features All features currently only work in Ember-CLI apps that use classic structure and are a rough first draft with a lo
ember-headlessui This is a work-in-progress implementation of: https://github.com/tailwindlabs/headlessui A set of completely unstyled, fully accessible UI components for Ember.js, designed to integra
Ember Popper An Ember-centric wrapper around Popper.js. Currently an alpha in active development. See the dummy app for examples Compatibility Ember.js v3.12 or above Ember CLI v2.13 or above Node.js