@ember-eui/ 核心

本项目旨在提供执行Css层的嵌入组件 https://elastic.github.io/eui (英语)

图标

EUI 图标在框外工作:它们与加通捆绑在一起,没有构建 需要配置( 用于需要 ember-svg-jar) (中文(简体) ).

<EuiIcon @type="chevronSingleDown" />

每个EUI图标都是自己的块,第一次装入,所以应用 只下载他们使用的图标。 直到它来到一个空的图标 大小取而代之; await render() 编号 : settled() 在测试中等待它. 应立即显示的预装图标 :

import { preloadIcons } from '@ember-eui/core/utils/preload-icons';

export default class ApplicationRoute extends Route {
  async beforeModel() {
    await preloadIcons(['chevronSingleDown', 'cross', 'magnify']);
  }
}

要使用自己的图标,请添加 @svg-jar/plugin 你的应用程序 vite.config.mjs (单位:千美元)svgJar({ target: 'ember' })如此 svg 文件 可作为组件导入。 然后直接通过组件:

import MyLogo from '../icons/my-logo.svg';

<EuiIcon @type={{MyLogo}} />
<EuiBadge @iconType={{MyLogo}}>New</EuiBadge>

或按名称注册,例如,一个完整的文件夹同时与 iconsFromGlob (icons以文件命名,就像ember-svg-jar所做的):

// app/routes/application.js
import Route from '@ember/routing/route';
import { service } from '@ember/service';
import { iconsFromGlob } from '@ember-eui/core/utils/icons-from-glob';

export default class ApplicationRoute extends Route {
  @service euiConfig;

  beforeModel() {
    this.euiConfig.updateConfig({
      'euiIcon.icons': iconsFromGlob(
        import.meta.glob('../icons/**/*.svg', { eager: true })
      ),
    });
  }
}

<EuiIcon @type="my-logo" />
<EuiButton @iconType="rocket">Launch</EuiButton>

保持这些svgs public/: Vite 不想要从中获取文件 从JavaScript导入的公用目录(它在开发中警告). 移动例如:. public/assets/*.svg 改为 app/icons/ 保持相同的名称.

其他字符串作为 <img> 用那个URL.

兼容性

• Ember.js v7.1 或以上 (中文(简体) )
• Ember CLI v7.1 或以上 (单位:千美元)
• 节点.js v20.19或以上

安装

ember install @ember-eui/core

捐款

见 捐款 详细指南.

公关真的很受欢迎

许可证

本项目根据以下规定获得许可证: MIT 许可证,但 来源于 弹性UI (EUI) (数量) 组件样式、图标、端口组件逻辑和文档示例), 根据《弹性许可证》2.0或 服务器侧公共许可证,v 1. 见 备注。 。 。 .

Ember EUI是一个社区项目,不附属于或认可 弹性.