### Basic TimeSelect Setup

Source: https://github.com/liuzhong0117/element-plus/blob/dev/docs/en-US/component/time-select.md

Configure el-time-select with start, end, and step times to provide a list of fixed time options for users.

```vue
<template>
  <el-time-select
    v-model="value"
    start="08:30"
    step="00:15"
    end="18:30"
    placeholder="Select time"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value = ref('')
</script>
```

--------------------------------

### Install Dependencies

Source: https://github.com/liuzhong0117/element-plus/blob/dev/docs/en-US/guide/dev-guide.md

Installs all project dependencies using pnpm. Ensure you have pnpm installed globally.

```shell
pnpm i
```

--------------------------------

### Basic Container Example

Source: https://github.com/liuzhong0117/element-plus/blob/dev/docs/en-US/component/container.md

A fundamental example showcasing the usage of the el-container component.

```html
<el-container>
  <el-header>Header</el-header>
  <el-main>Main</el-main>
</el-container>
```

--------------------------------

### Start Local Development Environment

Source: https://github.com/liuzhong0117/element-plus/blob/dev/docs/en-US/guide/dev-guide.md

Starts the local development server for real-time development and testing of components.

```shell
pnpm dev
```

--------------------------------

### Install Element Plus

Source: https://github.com/liuzhong0117/element-plus/blob/dev/packages/theme-chalk/README.md

Install the element-plus package using npm.

```shell
npm i element-plus
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/liuzhong0117/element-plus/blob/dev/CONTRIBUTING.md

Installs the necessary dependencies for the Element Plus project. Ensure you have Node.js and pnpm installed.

```shell
cd $THE_PROJECT_PATH_YOU_DOWNLOADED
# If you haven't installed yet
pnpm install
```

--------------------------------

### Page Header Complete Example

Source: https://github.com/liuzhong0117/element-plus/blob/dev/docs/en-US/component/page-header.md

A comprehensive example demonstrating the full capabilities of the Page Header component.

```vue
<template>
  <el-page-header @back="goBack" content="Detail page">
    <template #breadcrumb>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
        <el-breadcrumb-item>promotion management</el-breadcrumb-item>
        <el-breadcrumb-item>promotion list</el-breadcrumb-item>
        <el-breadcrumb-item>promotion detail</el-breadcrumb-item>
      </el-breadcrumb>
    </template>
    <template #icon>
      <el-icon><ArrowLeft /></el-icon>
    </template>
    <template #title>
      <div class="title">Return list</div>
    </template>
  </el-page-header>
</template>

<script lang="ts" setup>
import { ArrowLeft } from '@element-plus/icons-vue'

const goBack = () => {
  console.log('go back')
}
</script>

<style scoped>
.title {
  font-size: 18px;
  font-weight: 500;
}
</style>
```

--------------------------------

### Install Auto Import Plugins

Source: https://github.com/liuzhong0117/element-plus/blob/dev/docs/en-US/guide/quickstart.md

Install necessary packages for on-demand component and function auto-importing.

```shell
npm install -D unplugin-vue-components unplugin-auto-import
```

--------------------------------

### Verify Installation

Source: https://github.com/liuzhong0117/element-plus/blob/dev/CONTRIBUTING.md

Runs tests and checks code formatting to verify that the project has been set up correctly. These commands ensure your environment is ready for development.

```shell
pnpm t
pnpm format
```

--------------------------------

### Install Nuxt Module

Source: https://github.com/liuzhong0117/element-plus/blob/dev/docs/en-US/guide/quickstart.md

Install the official Element Plus Nuxt module for seamless integration.

```shell
npm install -D @element-plus/nuxt
```

--------------------------------

### Install @element-plus/icons-vue

Source: https://github.com/liuzhong0117/element-plus/blob/dev/docs/en-US/component/icon.md

Install the Element Plus Icons Vue package using npm, yarn, or pnpm.

```shell
# Choose a package manager you like.

# NPM
$ npm install @element-plus/icons-vue
# Yarn
$ yarn add @element-plus/icons-vue
# pnpm
$ pnpm install @element-plus/icons-vue
```

--------------------------------

### Install Element Plus with Package Managers

Source: https://github.com/liuzhong0117/element-plus/blob/dev/docs/en-US/guide/installation.md

Use npm, yarn, or pnpm to install Element Plus. This is the recommended method for use with bundlers like Vite or webpack.

```shell
# NPM
$ npm install element-plus --save
```

```shell
# Yarn
$ yarn add element-plus
```

```shell
# pnpm
$ pnpm install element-plus
```

--------------------------------

### Image Preview

Source: https://github.com/liuzhong0117/element-plus/blob/dev/docs/en-US/component/image.md

Enable image preview by providing an array of image URLs to the `preview-src-list` prop. The `initial-index` prop can set the starting preview image.

```html
<el-image :src="url" :preview-src-list="srcList"></el-image>
<el-image :src="url" :preview-src-list="srcList" initial-index="2" :infinite="false"></el-image>
```

--------------------------------

### Manual Component Import Example

Source: https://github.com/liuzhong0117/element-plus/blob/dev/docs/en-US/guide/quickstart.md

Demonstrates manually importing a single component and its styles within a Vue component. Requires unplugin-element-plus for style imports.

```html
<template>
  <el-button>I am ElButton</el-button>
</template>
<script>
  import { ElButton } from 'element-plus'
  export default {
    components: { ElButton },
  }
</script>
```

--------------------------------

### Full Import in main.ts

Source: https://github.com/liuzhong0117/element-plus/blob/dev/docs/en-US/guide/quickstart.md

Use this for a straightforward setup where bundle size is not a primary concern. It imports all Element Plus components and styles.

```typescript
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')
```

--------------------------------

### Import and Use Element Plus

Source: https://github.com/liuzhong0117/element-plus/blob/dev/packages/element-plus/README.md

Demonstrates how to import and use the Element Plus library in a Node.js environment. This is a basic setup for integrating Element Plus.

```javascript
const elementPlus = require('element-plus');

// TODO: DEMONSTRATE API
```

--------------------------------

### Run Local Component Playground

Source: https://github.com/liuzhong0117/element-plus/blob/dev/CONTRIBUTING.md

Starts a local playground environment to test changes made to specific components. This is useful for isolated component development.

```shell
# If you would like to run a local playground to test out your changes against
# Some specific component
pnpm dev
```

--------------------------------

### Basic Virtualized Table Usage

Source: https://github.com/liuzhong0117/element-plus/blob/dev/docs/en-US/component/table-v2.md

Demonstrates the performance of the Virtualized Table by rendering a basic example with 10 columns and 1000 rows. Ensure the component is wrapped in `<client-only>` for SSR/SSG environments.

```vue
<template>
  <el-auto-resizer>
    <template #default="{ height, width ">
      <el-table-v2
        :columns="columns"
        :data="data"
        :height="height"
        :width="width"
      />
    </template>
  </el-auto-resizer>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const columns = [
  { width: 150, key: 'action', title: 'Operation' },
  { width: 200, key: 'name', title: 'Name' },
  { width: 250, key: 'address', title: 'Address' },
  { width: 150, key: 'email', title: 'Email' },
  { width: 100, key: 'state', title: 'State' },
  { width: 100, key: 'city', title: 'City' },
  { width: 100, key: 'zip', title: 'Zip' },
  { width: 100, key: 'country', title: 'Country' },
  { width: 100, key: 'phone', title: 'Phone' },
  { width: 100, key: 'status', title: 'Status' },
]

const data = ref([])

for (let i = 0; i < 1000; ++i) {
  data.value.push({
    key: i,
    action: 'action',
    name: 'name' + i,
    address: 'address' + i,
    email: 'email' + i,
    state: 'state' + i,
    city: 'city' + i,
    zip: 'zip' + i,
    country: 'country' + i,
    phone: 'phone' + i,
    status: 'status' + i,
  })
}
</script>
```

--------------------------------

### Alert with Icon and Description

Source: https://github.com/liuzhong0117/element-plus/blob/dev/docs/en-US/component/alert.md

An example combining both an icon and a detailed description within the Alert component for enhanced clarity.

```vue
<template>
  <el-alert title="Alert with icon and description" 
            type="info" 
            description="This contains a detailed description and an icon." 
            show-icon />
</template>

<script lang="ts" setup>

</script>

```

--------------------------------

### Pagination with More Elements and Event Handling

Source: https://github.com/liuzhong0117/element-plus/blob/dev/docs/en-US/component/pagination.md

A comprehensive example demonstrating various pagination elements and handling page size and current page changes using `size-change` and `current-change` events. The `page-sizes` attribute configures the options for the page size selector.

```html
<el-pagination
  :page-sizes="[100, 200, 300, 400]"
  :default-page-size="100"
  layout="total, sizes, prev, pager, next, jumper"
  :total="1000"
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
/>
```

--------------------------------

### Example of Element Plus Component Usage

Source: https://github.com/liuzhong0117/element-plus/blob/dev/docs/en-US/guide/installation.md

Demonstrates the basic structure for using Element Plus components like el-table within an HTML template. Ensure to use double-closed tags for compatibility.

```html
<el-table>
  <el-table-column></el-table-column>
  <el-table-column></el-table-column>
</el-table>
```

--------------------------------

### Top Navigation Example

Source: https://github.com/liuzhong0117/element-plus/blob/dev/docs/en-US/guide/nav.md

Component for top navigation. Suitable for sites with few navigation items and large content chunks, conforming to a natural top-to-bottom browsing order.

```vue
<template>
  <el-menu mode="horizontal" :ellipsis="false" background-color="#545454" text-color="#fff" active-text-color="#ffd04b">
    <el-menu-item index="0">Logo</el-menu-item>
    <el-menu-item index="1">Home</el-menu-item>
    <el-menu-item index="2">About</el-menu-item>
    <el-menu-item index="3">Services</el-menu-item>
    <el-menu-item index="4">Contact</el-menu-item>
    <el-menu-item index="5" style="margin-left: auto;">Login</el-menu-item>
  </el-menu>
</template>

<script lang="ts" setup>
// No script logic needed for this example
</script>

<style>
/* Add any specific styles for the top navigation if needed */
.el-menu--horizontal {
  border-bottom: none;
}
</style>
```

--------------------------------

### Check Tree Nodes

Source: https://github.com/liuzhong0117/element-plus/blob/dev/docs/en-US/component/tree.md

Demonstrates how to get and set checked nodes using either the node or key approach. The `node-key` prop is required when using the key approach.

```vue
<template>
  <el-tree
    ref="treeRef"
    :data="data"
    show-checkbox
    node-key="id"
    @check-change="handleCheckChange"
  />
  <div class="buttons">
    <el-button @click="getCheckedNodes">Get Checked Nodes</el-button>
    <el-button @click="setCheckedNodes">Set Checked Nodes</el-button>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

interface TreeNode {
  id: number
  label: string
  children?: TreeNode[]
}

const data: TreeNode[] = [
  {
    id: 1,
    label: 'Level one 1',
    children: [
      {
        id: 11,
        label: 'Level two 1-1',
        children: [
          {
            id: 111,
            label: 'Level three 1-1-1',
          },
        ],
      },
      {
        id: 12,
        label: 'Level two 1-2',
      },
    ],
  },
  {
    id: 2,
    label: 'Level one 2',
    children: [
      {
        id: 21,
        label: 'Level two 2-1',
      },
      {
        id: 22,
        label: 'Level two 2-2',
      },
    ],
  },
  {
    id: 3,
    label: 'Level one 3',
    children: [
      {
        id: 31,
        label: 'Level two 3-1',
      },
      {
        id: 32,
        label: 'Level two 3-2',
      },
    ],
  },
]

const treeRef = ref<InstanceType<typeof ElTree>>()

const handleCheckChange = (data: TreeNode, checked: boolean, node: any) => {
  console.log(data, checked, node)
}

const getCheckedNodes = () => {
  console.log(treeRef.value!.getCheckedNodes(true))
}

const setCheckedNodes = () => {
  treeRef.value!.setCheckedNodes([
    { id: 1, label: 'Level one 1' },
    { id: 2, label: 'Level one 2' },
  ])
}
</script>

```

--------------------------------

### On-demand Import of Transitions

Source: https://github.com/liuzhong0117/element-plus/blob/dev/docs/en-US/guide/transitions.md

Import transition components and styles on demand for better bundle size management. This example shows how to import `ElCollapseTransition` and base CSS for fade/zoom effects.

```typescript
// collapse
import { ElCollapseTransition } from 'element-plus'
// fade/zoom
import 'element-plus/lib/theme-chalk/base.css'
import App from './App.vue'

const app = createApp(App)
app.component(ElCollapseTransition.name, ElCollapseTransition)
```

--------------------------------

### Multi-select with Virtualized Select

Source: https://github.com/liuzhong0117/element-plus/blob/dev/docs/en-US/component/select-v2.md

Enables selecting multiple options in the virtualized select component. This example shows the basic setup for multi-selection.

```vue
<template>
  <el-select-v2
    v-model="value"
    :options="options"
    multiple
    placeholder="Please select"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value = ref<string[]>([])
const options = ref([
  { value: 'Option 1', label: 'Option 1' },
  { value: 'Option 2', label: 'Option 2' },
  { value: 'Option 3', label: 'Option 3' },
  { value: 'Option 4', label: 'Option 4' },
])
</script>
```

--------------------------------

### Preview Website

Source: https://github.com/liuzhong0117/element-plus/blob/dev/docs/en-US/guide/dev-guide.md

Launches the project's website for previewing components. This command is useful for checking the appearance and behavior of existing components.

```shell
pnpm docs:dev
```

--------------------------------

### Using ElLoading Service

Source: https://github.com/liuzhong0117/element-plus/blob/dev/docs/en-US/component/loading.md

Import and invoke the `ElLoading.service` method with configuration options. The method returns a loading instance that can be closed using its `close` method. Note that full-screen loading is a singleton.

```APIDOC
## Service

Import Loading service:

```ts
import { ElLoading } from 'element-plus'
```

Invoke it:

```ts
const loadingInstance = ElLoading.service(options)
nextTick(() => {
  loadingInstance.close()
})
```

### Parameters

`options` is the configuration object for the Loading service. Refer to the table below for details.

### Return Value

`ElLoading.service(options)` returns a Loading instance.

### Instance Methods

- `close()`: Closes the loading indicator.

### Singleton Behavior

For full-screen loading (`fullscreen: true`), the service acts as a singleton. Invoking `ElLoading.service({ fullscreen: true })` multiple times before closing will return the same instance.

```ts
const loadingInstance1 = ElLoading.service({ fullscreen: true })
const loadingInstance2 = ElLoading.service({ fullscreen: true })
console.log(loadingInstance1 === loadingInstance2) // true
```

Calling `close()` on any instance will close the full-screen loading.

## Global Property $loading

If Element Plus is imported entirely, a global method `$loading` is registered to `app.config.globalProperties`. It can be invoked using `this.$loading(options)` and also returns a Loading instance.
```

--------------------------------

### Tour Placement

Source: https://github.com/liuzhong0117/element-plus/blob/dev/docs/en-US/component/tour.md

Demonstrates changing the placement of the guide relative to the target element. Supports 12 placements. When `target` is empty, the guide shows in the center.

```vue
<template>
  <el-button @click="openTour">Open Tour</el-button>
  <el-tour v-model="tourVisible">
    <el-tour-step title="Top Start" description="This step is placed at the top start." placement="top-start">
      <template #target>
        <el-button>Target 1</el-button>
      </template>
    </el-tour-step>
    <el-tour-step title="Bottom End" description="This step is placed at the bottom end." placement="bottom-end">
      <template #target>
        <el-button>Target 2</el-button>
      </template>
    </el-tour-step>
    <el-tour-step title="Center" description="This step is placed in the center." :mask="false">
      <template #target>
        <el-button>Target 3</el-button>
      </template>
    </el-tour-step>
  </el-tour>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const tourVisible = ref(false)

const openTour = () => {
  tourVisible.value = true
}
</script>
```

--------------------------------

### Card Style Tabs

Source: https://github.com/liuzhong0117/element-plus/blob/dev/docs/en-US/component/tabs.md

Set `type` to `card` to get a card-styled tab.

```html
<template>
  <el-tabs type="card" v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="User" name="first">User</el-tab-pane>
    <el-tab-pane label="Config" name="second">Config</el-tab-pane>
    <el-tab-pane label="Role" name="third">Role</el-tab-pane>
    <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
  </el-tabs>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const activeName = ref('first')

const handleClick = (tab, event) => {
  console.log(tab, event)
}
</script>
```

--------------------------------

### Hybrid Layout Example

Source: https://github.com/liuzhong0117/element-plus/blob/dev/docs/en-US/component/layout.md

Combine different column spans to create more complex hybrid layouts.

```vue
<el-row :gutter="20">
  <el-col :span="4"><div class="grid-content" /></el-col>
  <el-col :span="4"><div class="grid-content" /></el-col>
  <el-col :span="16"><div class="grid-content" /></el-col>
</el-row>
<el-row :gutter="20">
  <el-col :span="6"><div class="grid-content" /></el-col>
  <el-col :span="6"><div class="grid-content" /></el-col>
  <el-col :span="6"><div class="grid-content" /></el-col>
</el-row>
<el-row :gutter="20">
  <el-col :span="8"><div class="grid-content" /></el-col>
  <el-col :span="8"><div class="grid-content" /></el-col>
</el-row>
```

--------------------------------

### Basic Usage of Descriptions

Source: https://github.com/liuzhong0117/element-plus/blob/dev/docs/en-US/component/descriptions.md

Demonstrates the fundamental implementation of the Descriptions component to display key-value pairs.

```vue
<template>
  <el-descriptions title="User Info">
    <el-descriptions-item label="Username">kooriookami</el-descriptions-item>
    <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
    <el-descriptions-item label="Location">Suzhou Park</el-descriptions-item>
    <el-descriptions-item label="Remarks">
      <el-tag size="small">School</el-tag>
    </el-descriptions-item>
    <el-descriptions-item label="Address">
      No. 18, Wantang Road, Xixiang Town, Analytic Technology Park, Zhejiang Province, China
    </el-descriptions-item>
  </el-descriptions>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const size = ref('')
</script>
```

--------------------------------

### Column Offset Example

Source: https://github.com/liuzhong0117/element-plus/blob/dev/docs/en-US/component/layout.md

Use the `offset` attribute on `el-col` to create horizontal space before a column, effectively offsetting it.

```vue
<el-row :gutter="20">
  <el-col :span="6"><div class="grid-content" /></el-col>
  <el-col :span="6" :offset="6"><div class="grid-content" /></el-col>
</el-row>
<el-row :gutter="20">
  <el-col :span="4" :offset="4"><div class="grid-content" /></el-col>
  <el-col :span="4" :offset="8"><div class="grid-content" /></el-col>
</el-row>
```

--------------------------------

### Simple Card Without Header

Source: https://github.com/liuzhong0117/element-plus/blob/dev/docs/en-US/component/card.md

A simple card example where the header section is omitted, focusing only on the body content.

```vue
<template>
  <el-card class="box-card">
    <div v-for="item in 4" :key="item" class="text item">
      {{ 'List item ' + item }}
    </div>
  </el-card>
</template>

<style>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 480px;
}
</style>
```

--------------------------------

### Enable Inline Editing in Table

Source: https://github.com/liuzhong0117/element-plus/blob/dev/docs/en-US/component/table-v2.md

Allows users to edit table data directly within cells, similar to the selection example.

```vue
<script setup>
import { ref } from 'vue'

const tableData = ref([
  {
    date: '2016-05-03',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    zip: '90071',
  },
  {
    date: '2016-05-02',
    name: 'John',
    state: 'California',
    city: 'Los Angeles',
    zip: '90071',
  },
  {
    date: '2016-05-04',
    name: 'Dick',
    state: 'California',
    city: 'Los Angeles',
    zip: '90071',
  },
  {
    date: '2016-05-01',
    name: 'Hammer',
    state: 'California',
    city: 'Los Angeles',
    zip: '90071',
  },
  {
    date: '2016-05-08',
    name: 'Alice',
    state: 'California',
    city: 'Los Angeles',
    zip: '90071',
  },
  {
    date: '2016-05-06',
    name: 'Bob',
    state: 'California',
    city: 'Los Angeles',
    zip: '90071',
  },
])

const columns = [
  {
    key: 'date',
    dataKey: 'date',
    title: 'Date',
    width: 150,
    cellRenderer: (row) => {
      return (
        <el-input
          modelValue={row.rowData.date}
          onInput={(e) => {
            row.rowData.date = e
          }}
        />
      )
    },
  },
  {
    key: 'name',
    dataKey: 'name',
    title: 'Name',
    width: 150,
    cellRenderer: (row) => {
      return (
        <el-input
          modelValue={row.rowData.name}
          onInput={(e) => {
            row.rowData.name = e
          }}
        />
      )
    },
  },
  {
    key: 'state',
    dataKey: 'state',
    title: 'State',
    width: 150,
    cellRenderer: (row) => {
      return (
        <el-input
          modelValue={row.rowData.state}
          onInput={(e) => {
            row.rowData.state = e
          }}
        />
      )
    },
  },
  {
    key: 'city',
    dataKey: 'city',
    title: 'City',
    width: 150,
    cellRenderer: (row) => {
      return (
        <el-input
          modelValue={row.rowData.city}
          onInput={(e) => {
            row.rowData.city = e
          }}
        />
      )
    },
  },
  {
    key: 'zip',
    dataKey: 'zip',
    title: 'Zip',
    width: 150,
    cellRenderer: (row) => {
      return (
        <el-input
          modelValue={row.rowData.zip}
          onInput={(e) => {
            row.rowData.zip = e
          }}
        />
      )
    },
  },
]
</script>

<template>
  <el-table-v2
    :columns="columns"
    :data="tableData"
    :width="700"
    :height="400"
  />
</template>

```

--------------------------------

### Basic Usage of Virtualized Select

Source: https://github.com/liuzhong0117/element-plus/blob/dev/docs/en-US/component/select-v2.md

Demonstrates the fundamental implementation of the virtualized select component. Ensure the component is wrapped in `<client-only>` when used in SSR or SSG environments.

```vue
<template>
  <el-select-v2 v-model="value" :options="options" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value = ref('')
const options = ref([
  { value: 'Option 1', label: 'Option 1' },
  { value: 'Option 2', label: 'Option 2' },
  { value: 'Option 3', label: 'Option 3' },
  { value: 'Option 4', label: 'Option 4' },
])
</script>
```

--------------------------------

### Accessible Tooltip

Source: https://github.com/liuzhong0117/element-plus/blob/dev/docs/en-US/component/tooltip-v2.md

Shows how to implement an accessible tooltip, ensuring usability for users with disabilities. This example focuses on ARIA attributes and keyboard navigation.

```vue
<template>
  <el-tooltip
    content="Hello World"
    placement="top"
    aria-label="Tooltip"
  >
    <el-button>Tooltip</el-button>
  </el-tooltip>
</template>
```

--------------------------------

### Drawer Basic Usage

Source: https://github.com/liuzhong0117/element-plus/blob/dev/docs/en-US/component/drawer.md

Demonstrates how to use the Drawer component with default settings. Control visibility using `model-value`. Customize direction and size as needed.

```vue
<template>
  <div>
    <el-button type="text" @click="dialog = true">open drawer</el-button>
    <el-drawer v-model="dialog" title="I am a title">
      <span>I am the content of the drawer</span>
    </el-drawer>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const dialog = ref(false)
</script>
```

--------------------------------

### Add and Close Tabs

Source: https://github.com/liuzhong0117/element-plus/blob/dev/docs/en-US/component/tabs.md

Only card type Tabs support adding and closing tabs dynamically. This example demonstrates how to manage tabs programmatically.

```html
<template>
  <el-tabs type="card" v-model="editableTabsValue" @edit="handleTabsEdit" @tab-click="handleClick">
    <el-tab-pane
      v-for="(item, index) in editableTabs"
      :key="item.name"
      :label="item.title"
      :name="item.name"
    >
      {{ item.content }}
    </el-tab-pane>
  </el-tabs>
</template>
<script lang="ts" setup>
import { ref } from 'vue'

let tabIndex = 2
const editableTabsValue = ref('2')
const editableTabs = ref([
  {
    title: 'Tab 1',
    name: '1',
    content: 'Tab 1 content',
  },
  {
    title: 'Tab 2',
    name: '2',
    content: 'Tab 2 content',
  },
])

const handleTabsEdit = (targetName, action) => {
  if (action === 'add') {
    const newTabName = ++tabIndex + ''
    editableTabs.value.push({
      title: 'New Tab',
      name: newTabName,
      content: 'New Tab content',
    })
    editableTabsValue.value = newTabName
  } else if (action === 'remove') {
    const tabs = editableTabs.value
    let activeName = editableTabsValue.value
    if (activeName === targetName) {
      tabs.forEach((tab, index) => {
        if (tab.name === targetName) {
          const nextTab = tabs[index + 1] || tabs[index - 1]
          if (nextTab) {
            activeName = nextTab.name
          }
        }
      })
    }
    editableTabsValue.value = activeName
    editableTabs.value = tabs.filter(tab => tab.name !== targetName)
  }
}

const handleClick = (tab, event) => {
  console.log(tab, event)
}
</script>
```

--------------------------------

### Basic Steps Configuration

Source: https://github.com/liuzhong0117/element-plus/blob/dev/docs/en-US/component/steps.md

Configure the active step using the `active` attribute (0-indexed). Set a fixed width for steps with the `space` attribute (in px), or leave it responsive. Customize the status of completed steps using `finish-status`.

```vue
<template>
  <el-steps :active="1" finish-status="success">
    <el-step title="Steps" description="This is a step description."></el-step>
    <el-step title="Steps 1" description="This is a step description."></el-step>
    <el-step title="Steps 2" description="This is a step description."></el-step>
  </el-steps>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const active = ref(0)
</script>
```

--------------------------------

### Steps with Status

Source: https://github.com/liuzhong0117/element-plus/blob/dev/docs/en-US/component/steps.md

Set step titles using the `title` attribute or by overriding with a named slot. This example demonstrates how to display the status for each step.

```vue
<template>
  <el-steps :active="1">
    <el-step title="Finished" status="success"></el-step>
    <el-step title="In Progress" status="process"></el-step>
    <el-step title="Pending" status="wait"></el-step>
    <el-step title="Error" status="error"></el-step>
  </el-steps>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const active = ref(0)
</script>
```

--------------------------------

### Draggable Dialog Example

Source: https://github.com/liuzhong0117/element-plus/blob/dev/docs/en-US/component/dialog.md

Set `draggable` to `true` to enable dragging. The `overflow` attribute (version 2.5.4+) allows dragging outside the viewport.

```vue
<template>
  <el-button type="text" @click="dialogTableVisible = true">open a Form nested in a dialog</el-button>
  <el-dialog v-model="dialogTableVisible" title="Shipping address" draggable>
    <el-form :model="form">
      <el-form-item label="Delivery address" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="Activity zones" :label-width="formLabelWidth">
        <el-select v-model="form.region" placeholder="please select your zone">
          <el-option label="Zone one" value="shanghai" />
          <el-option label="Zone two" value="beijing" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogTableVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogTableVisible = false">Confirm</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'

const dialogTableVisible = ref(false)
const tableLabelWidth = '80px'

const formLabelWidth = '140px'

const form = reactive({
  name: '',
  region: '',
  date: '',
})
</script>
```

--------------------------------

### Import Theme with Sass

Source: https://github.com/liuzhong0117/element-plus/blob/dev/packages/theme-chalk/README.md

Import the chalk theme using Sass.

```css
@use 'element-plus/lib/theme-chalk/index.scss';
```

--------------------------------

### Nested Drawer Example

Source: https://github.com/liuzhong0117/element-plus/blob/dev/docs/en-US/component/drawer.md

Shows how to implement multiple layers of Drawer components. For nested drawers, it is mandatory to set the `append-to-body` attribute to `true`.

```vue
<template>
  <el-button text @click="drawer = true">
    open nested drawer
  </el-button>

  <el-drawer v-model="drawer" title="Outer Drawer 1" :append-to-body="true">
    <template #default>
      <el-button text @click="innerDrawer = true">
        open inner drawer
      </el-button>
      <el-drawer
        v-model="innerDrawer"
        title="Inner Drawer 2"
        direction="rtl"
        :append-to-body="true"
      >
        <template #default>
          <p>Some content for the inner drawer</p>
        </template>
        <template #footer>
          <div style="flex: auto">
            <el-button @click="innerDrawer = false">cancel</el-button>
            <el-button type="primary" @click="innerDrawer = false">confirm</el-button>
          </div>
        </template>
      </el-drawer>
    </template>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="drawer = false">cancel</el-button>
        <el-button type="primary" @click="drawer = false">confirm</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const drawer = ref(false)
const innerDrawer = ref(false)
</script>
```

--------------------------------

### Basic Affix Usage

Source: https://github.com/liuzhong0117/element-plus/blob/dev/docs/en-US/component/affix.md

Demonstrates the basic usage of the Affix component, which is fixed at the top of the page by default.

```vue
<template>
  <el-affix>
    <el-button type="primary">Affix button</el-button>
  </el-affix>
</template>

<script lang="ts" setup>
import { ElAffix, ElButton } from "element-plus"
</script>
```

--------------------------------

### Form Accessibility

Source: https://github.com/liuzhong0117/element-plus/blob/dev/docs/en-US/component/form.md

When a `el-form-item` contains multiple inputs, it gets the WAI-ARIA role of `group`. Ensure individual inputs have assistive labels assigned.

```vue
<template>
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
    <el-form-item label="Activity name" prop="name">
      <el-input v-model="ruleForm.name"></el-input>
    </el-form-item>
    <el-form-item label="Activity zone" prop="region">
      <el-select v-model="ruleForm.region" placeholder="please select your zone">
        <el-option label="Zone one" value="shanghai"></el-option>
        <el-option label="Zone two" value="beijing"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="Activity time" required>
      <el-col :span="11">
        <el-form-item prop="date1">
          <el-date-picker type="date" placeholder="Pick a date" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
        </el-form-item>
      </el-col>
      <el-col class="line" :span="2">-</el-col>
      <el-col :span="11">
        <el-form-item prop="date2">
          <el-time-picker placeholder="Pick a time" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
        </el-form-item>
      </el-col>
    </el-form-item>
    <el-form-item label="Instant delivery" prop="delivery">
      <el-switch v-model="ruleForm.delivery"></el-switch>
    </el-form-item>
    <el-form-item label="Activity type" prop="type">
      <el-checkbox-group v-model="ruleForm.type">
        <el-checkbox label="Lunch" name="type"></el-checkbox>
        <el-checkbox label="Dinner" name="type"></el-checkbox>
        <el-checkbox label="Breakfast" name="type"></el-checkbox>
        <el-checkbox label="Coffee" name="type"></el-checkbox>
      </el-checkbox-group>
    </el-form-item>
    <el-form-item label="Special facilities" prop="resource" label-width="200px">
      <el-radio-group v-model="ruleForm.resource">
        <el-radio label="Sponsorship">Sponsorship</el-radio>
        <el-radio label="Venue">Venue</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="Activity form" prop="desc">
      <el-input type="textarea" v-model="ruleForm.desc"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')">Create</el-button>
      <el-button @click="resetForm('ruleForm')">Reset</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
  export default {
    data() {
      return {
        ruleForm: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        rules: {
          name: [
            { required: true, message: 'Please input Activity name', trigger: 'blur' },
            { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }
          ],
          region: [
            { required: true, message: 'Please select Activity zone', trigger: 'change' }
          ],
          date1: [
            { type: 'date', required: true, message: 'Please pick a date', trigger: 'change' }
          ],
          date2: [
            { type: 'object', required: true, message: 'Please pick a time', trigger: 'change' }
          ],
          type: [
            { type: 'array', required: true, message: 'Please select at least one activity type', trigger: 'change' }
          ],
          resource: [
            { required: true, message: 'Please select activity resource', trigger: 'change' }
          ],
          desc: [
            { required: true, message: 'Please input activity form', trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>
```

--------------------------------

### File List with Thumbnail

Source: https://github.com/liuzhong0117/element-plus/blob/dev/docs/en-US/component/upload.md

Demonstrates how to display uploaded files with thumbnails in a list format.

```vue
<template>
  <el-upload
    action="https://jsonplaceholder.typicode.com/posts/"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :file-list="fileList"
  >
    <el-button type="primary">Click to upload</el-button>
  </el-upload>
  <el-dialog v-model="dialogVisible">
    <img w-full :src="dialogImageUrl" alt="Preview Image" />
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const fileList = ref([
  {
    name: 'element-ui-logo.svg',
    url: 'https://element-plus.org/images/element-ui-logo.svg',
  },
  {
    name: 'element-ui-logo2.svg',
    url: 'https://element-plus.org/images/element-ui-logo.svg',
  },
])

const dialogImageUrl = ref('')
const dialogVisible = ref(false)

const handleRemove = (file, uploadFiles) => {
  console.log(file, uploadFiles)
}

const handlePreview = (file) => {
  dialogImageUrl.value = file.url
  dialogVisible.value = true
}
</script>
```

--------------------------------

### Basic Tree Usage

Source: https://github.com/liuzhong0117/element-plus/blob/dev/docs/en-US/component/tree.md

Demonstrates the fundamental structure of a tree component.

```vue
<template>
  <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

interface TreeNode {
  label: string
  children?: TreeNode[]
}

const handleNodeClick = (data: TreeNode) => {
  console.log(data)
}

const data = ref<TreeNode[]>([
  {
    label: 'Level one 1',
    children: [
      {
        label: 'Level two 1-1',
        children: [
          {
            label: 'Level three 1-1-1'
          }
        ]
      }
    ]
  },
  {
    label: 'Level one 2',
    children: [
      {
        label: 'Level two 2-1',
        children: [
          {
            label: 'Level three 2-1-1'
          }
        ]
      }
    ]
  }
])

const defaultProps = ref({
  children: 'children',
  label: 'label'
})
</script>
```

--------------------------------

### Level 2 Categories Example

Source: https://github.com/liuzhong0117/element-plus/blob/dev/docs/en-US/guide/nav.md

Component for displaying level 2 navigation categories. Recommended for use with breadcrumbs to aid user location and navigation.

```vue
<template>
  <div class="categories-container">
    <div v-for="(item, index) in categories" :key="index" class="category-item">
      <div class="category-header">
        <div class="category-icon">
          <el-icon><component :is="item.icon" /></el-icon>
        </div>
        <div class="category-name">{{ item.name }}</div>
      </div>
      <el-divider v-if="item.children && item.children.length > 0" />
      <div v-if="item.children && item.children.length > 0" class="sub-categories">
        <div v-for="(subItem, subIndex) in item.children" :key="subIndex" class="sub-category-item">
          {{ subItem.name }}
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const categories = ref([
  {
    name: 'Category 1',
    icon: 'Document',
    children: [
      { name: 'Subcategory 1.1' },
      { name: 'Subcategory 1.2' },
    ],
  },
  {
    name: 'Category 2',
    icon: 'Setting',
    children: [
      { name: 'Subcategory 2.1' },
    ],
  },
  {
    name: 'Category 3',
    icon: 'Bell',
    children: [],
  },
])
</script>

<style scoped>
.categories-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.category-item {
  padding: 15px;
  background-color: var(--categories-c-bg);
  border-radius: 4px;
  width: 250px;
  cursor: pointer;
}

.category-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.category-icon {
  color: var(--categories-c-icon);
}

.category-name {
  color: var(--categories-c-text);
  font-weight: bold;
}

.sub-categories {
  padding-left: 15px;
}

.sub-category-item {
  color: var(--categories-c-text);
  margin-bottom: 5px;
}
</style>
```

--------------------------------

### Level 1 Categories Example

Source: https://github.com/liuzhong0117/element-plus/blob/dev/docs/en-US/guide/nav.md

Component for displaying level 1 navigation categories. Suitable for simply structured sites with only one level of pages.

```vue
<template>
  <div class="categories-container">
    <div v-for="(item, index) in categories" :key="index" class="category-item">
      <div class="category-icon">
        <el-icon><component :is="item.icon" /></el-icon>
      </div>
      <div class="category-name">{{ item.name }}</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const categories = ref([
  { name: 'Category 1', icon: 'Document' },
  { name: 'Category 2', icon: 'Setting' },
  { name: 'Category 3', icon: 'Bell' },
])
</script>

<style scoped>
.categories-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.category-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background-color: var(--categories-c-bg);
  border-radius: 4px;
  cursor: pointer;
}

.category-icon {
  color: var(--categories-c-icon);
}

.category-name {
  color: var(--categories-c-text);
}
</style>
```

--------------------------------

### Basic Tour Usage

Source: https://github.com/liuzhong0117/element-plus/blob/dev/docs/en-US/component/tour.md

Demonstrates the most basic implementation of the Tour component.

```vue
<template>
  <el-button @click="openTour">Open Tour</el-button>
  <el-tour v-model="tourVisible">
    <el-tour-step title="Step 1" description="This is the first step.">
      <template #target>
        <el-button>Target 1</el-button>
      </template>
    </el-tour-step>
    <el-tour-step title="Step 2" description="This is the second step.">
      <template #target>
        <el-button>Target 2</el-button>
      </template>
    </el-tour-step>
  </el-tour>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const tourVisible = ref(false)

const openTour = () => {
  tourVisible.value = true
}
</script>
```

--------------------------------

### Provide Button Configurations

Source: https://github.com/liuzhong0117/element-plus/blob/dev/docs/en-US/component/config-provider.md

Configure global settings for buttons, such as size and auto-insert-space.

```vue
<script setup>
import { ConfigProvider } from 'element-plus'

ConfigProvider.global.autoInsertSpace = false
</script>

<template>
  <el-config-provider :button="{ autoInsertSpace: true }">
    <el-button type="primary">Confirm</el-button>
  </el-config-provider>
</template>
```

--------------------------------

### Basic Skeleton Usage

Source: https://github.com/liuzhong0117/element-plus/blob/dev/docs/en-US/component/skeleton.md

Demonstrates the fundamental usage of the Skeleton component. This is the simplest way to implement a skeleton screen.

```vue
<template>
  <el-skeleton style="width: 100%" animated />
</template>

<script lang="ts" setup>
// No script needed for basic usage demonstration
</script>
```

--------------------------------

### Switch Sizes

Source: https://github.com/liuzhong0117/element-plus/blob/dev/docs/en-US/component/switch.md

Demonstrates different size options for the Switch component.

```html
<template>
  <el-switch v-model="value1" size="large" />
  <el-switch v-model="value2" />
  <el-switch v-model="value3" size="small" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value1 = ref(true)
const value2 = ref(true)
const value3 = ref(true)
</script>
```