Today, we are pleased to announce the release of Element Plus Stable. Since the first COMMIT, over 1 year and 7 months of iterative development, 2,635 commits, 2,494 PR posts submitted by 256 contributors, 137 Alpha and Beta builds, and with the support of everyone in the community, The first official version of Element Plus is finally here.

Major update

The TypeScript and Vue 3

Element Plus, developed in TypeScript and Vue 3.2, provides a complete type definition file. Composition APIS are used to reduce coupling and simplify logic.

compatibility

Since Vue 3 is no longer compatible with Internet Explorer, Element Plus has also upgraded the least-compatible version.
The Edge of 79 or more Firefox 78 or more Chrome 64 or more A Safari 12 or more

If you want to use Element Plus normally on older browsers, use Babel, ESBuild, or some other conversion tool and introduce polyfills accordingly. It is worth noting that Element Plus uses ResizeObserver. If compatibility needs, you need to introduce resize-Observer-Polyfill. See ResizeObserver Compatibility for details.

The ESM and CJS

Element Plus supports ESM, CJS, and UMD formats. Generally, you do not need to pay attention to the format of the import. The build tool automatically matches and converts the format to the target format. No additional configuration is required.

design

Component size system by default/medium/small/mini switch to a more natural large/default/small, on the basis of the default, need to increase the large choice, need to narrow the select small.

The padding is optimized for a more general 4px system, using 4/8 px as an atomic unit to control the padding consistency of the entire system. That is, the large component padding is also large, and the small component padding is also small. Please refer to the size modification instructions for details.

icon

To use Element Plus’s built-in ICONS, users often need to reference a font file of ~75KB and an additional network request, which in most cases is a completely unnecessary overhead and a permanent pain point for users who are concerned with size and home page loading speed.

Therefore, we changed all Font ICONS to Inline Vue SVG components, which means that all components are placed in the same request along with your packaging code, so that there are no additional network requests for the Font file, and there are no small squares that cannot render the Font due to network request failures. And the ICONS are better defined.

You can download older versions of font files to keep older projects compatible.

  • Unpkg.com/element-plu…
  • Unpkg.com/browse/elem…

configuration

Element Plus adds a global configuration management component, config-Provider, to replace the Element UI’s global configuration, vue.prototype.$Element. You can perform global configuration in the following two ways.

Ts import {createApp} from 'vue' import ElementPlus from 'element-plus' import App from './ app.vue ' CreateApp (App).use(ElementPlus, {size: 'small'}).mount('# App ') app.vue<template>
  <el-config-provider :size="small">
    <el-button>Button</el-button>
  </el-config-provider>
</template>
Copy the code

For more details on API changes, see the Element Plus Incompatible Changes and Upgrades guide.

New components and design resources

On the basis of migrating existing components, four new components, Space, Skeleton, Empty and Affix, have been added to the official version to enrich the choice of developers. And added the select-v2 component using virtual scrolling to optimize presentation performance for long lists.

We have also created and uploaded the latest Figma design resource file with all component information for the convenience of product managers and designers.

The release of the official version means that the overall migration and adaptation work is over and the API design is basically stable, but this is only the beginning. In subsequent iterations, we will focus on optimizing interaction details and adding additional features, including but not limited to the following:

The dark theme

In the official release, we have integrated the new capabilities of CSS Variables, which will be more convenient and perform better than the previous SASS variable configuration mode. Based on this capability, we are working on the dark theme, which will be coming soon in a later version.

High-performance table component

At the time of the Beta release, we mentioned providing tables that use virtualization capabilities to optimize the performance of the Table component in the case of large data volumes. This feature is not included in the current release and will be added in future iterations. A big part of the reason we haven’t implemented this feature is that we’ve been trying to figure out what works best for our users. Either we add a virtualized table rendering engine directly, or we provide a rendering interface that lets users add virtualized components (such as vue-virtual-Scroller) to render themselves. Later, we will refer to the implementation of relevant components in the market and provide a set of solutions to make the Table component of Element Plus more user-friendly.

Related to the ecological

  • Element Plus Icons – A collection of Element Plus Icons.
  • Element Plus Playground – you can try it here! 😆
  • Element Plus Vite Starter – Vite quick start template.
  • Unplugin-element-plus – Element Plus loads style plug-ins on demand.
  • Design Materials – Logos, memes and other resources for the Element Plus community.
  • Awesome -element-plus – A list of element Plus libraries, templates and resources.