Element UI

The el-result component is used to provide feedback to users regarding the outcome of an operation or to display access exceptions (e.g., 404 errors, success messages, or warnings).

<el-result icon="success" title="Success Tip" subTitle="Please follow the instructions">
  <template slot="extra">
    <el-button type="primary" size="medium">Back</el-button>
  </template>
</el-result>

The el-progress component is used to display the progress of current operations and inform users of the current status. It supports three visual types: line (default), circle, and dashboard.

<el-progress :percentage="50"></el-progress>

The el-slider component allows users to drag a handle within a fixed range to select a value. It supports single value selection, range selection, vertical orientation, and custom marks.

<el-slider v-model="value"></el-slider>

The Skeleton component was added in version 2.15.3. It is used to show placeholder content while data is loading.

<el-skeleton></el-skeleton>

In lazy mode, the tree cannot predict if a node is a leaf until data is loaded. You can use the isLeaf key in the props configuration to explicitly tell the tree which property in your data indicates a leaf node, preventing the display of an expand icon on leaf nodes.

<el-tree
  :props="props"
  :load="loadNode"
  lazy
  show-checkbox>
</el-tree>

<script>
  export default {
    data() {
      return {
        props: {
          label: 'name',
          children: 'zones',
          isLeaf: 'leaf' // The key in your data that indicates if it's a leaf
        },
      };
    },
    // ... loadNode implementation
  };
</script>

The list-type prop allows you to change how the uploaded files are displayed. Supported values are:

• text: Default list style.
• picture: Displays files with thumbnails in a list.
• picture-card: Displays files as a grid of cards (Photo Wall style).

In version 2.15.4, you can configure a global size field when introducing Element. This setting changes the default size for all components across your application. Additionally, many components like Button, Form, FormItem, Tag, Radio, Checkbox, ColorPicker, and Table support a size prop which accepts medium, small, and mini.

// Example concept: configuring size globally during initialization
// Note: Actual implementation depends on your build/import setup
const element = {
  size: 'small'
};

You can control how the value increments and how many decimal places are allowed:

• Steps: Use the step attribute to define the increment amount.
• Step Strictly: Set step-strictly to true to ensure the input value is always a multiple of the step value.
• Precision: Use the precision attribute to set the number of decimal places.

Note: precision must be a non-negative integer and should not be less than the decimal places used in the step value.

<template>
  <!-- Step strictly example -->
  <el-input-number v-model="num" :step="2" step-strictly></el-input-number>

  <!-- Precision example -->
  <el-input-number v-model="num" :precision="2" :step="0.1" :max="10"></el-input-number>
</template>

Element is a UI toolkit specifically designed for Vue 2.x.

• For Vue 3.0+: Use Element Plus instead.
• For MiniProgram development: Use MorJS.
• Browser Support: Element supports modern browsers and Internet Explorer 10+.

For optimal readability, Element follows these line-height patterns:

• line-height: 1: No line height (compact/tight)
• line-height: 1.3: Compact
• line-height: 1.5: Regular (standard for body text)
• line-height: 1.7: Loose

Element UI uses a structured color system to ensure visual consistency. The palette is divided into three main categories:

1. Main Color: The primary brand color (default is a bright blue #409EFF).
2. Secondary Colors: Scene-specific colors used to indicate different states or levels of importance:
   • success: Positive actions/states (#67C23A)
   • warning: Cautionary states (#E6A23C)
   • danger: Destructive or error states (#F56C6C)
   • info: Informational states (#909399)
3. Neutral Colors: Used for text, backgrounds, and borders to establish hierarchy:
   • Text: textPrimary, textRegular, textSecondary, textPlaceholder.
   • Borders: borderBase, borderLight, borderLighter, borderExtraLight.
   • Basics: white, black, and transparent.