Learn ELEMENT-UI with Real Code Examples

<template>
    <div style="text-align:center; margin-top:50px">
        <el-card>
        <h2>Counter: {{ count }}</h2>
        <el-button type="primary" @click="increment">+</el-button>
        <el-button type="danger" @click="decrement">-</el-button>
        <el-button type="default" @click="reset">Reset</el-button>
        <br /><br />
        <el-button type="warning" @click="toggleTheme">Switch Theme</el-button>
        </el-card>
    </div>
</template>

<script>
import { ref } from 'vue';
export default {
    setup() {
        const count = ref(0);
        const isDark = ref(false);

        const increment = () => count.value++;
        const decrement = () => count.value--;
        const reset = () => count.value = 0;
        const toggleTheme = () => {
        isDark.value = !isDark.value;
        document.body.className = isDark.value ? 'dark-theme' : '';
        };

        return { count, increment, decrement, reset, toggleTheme };
    }
};
</script>

<style>
.dark-theme {
    background-color: #333;
    color: #fff;
}
</style>

Demonstrates a simple counter layout using Element UI components and Vue.js for interactivity.

<template>
    <div style="text-align:center; margin-top:50px">
        <el-button type="primary">Primary</el-button>
        <el-button type="success">Success</el-button>
        <el-button type="warning">Warning</el-button>
        <el-button type="danger">Danger</el-button>
        <el-button type="info">Info</el-button>
        <el-button disabled>Disabled</el-button>
    </div>
</template>
<script>export default {}</script>

Shows different types of buttons in Element UI.

<template>
    <div style="text-align:center; margin-top:50px">
        <el-input placeholder="Enter your name" v-model="name" style="width:300px"></el-input>
        <p>You typed: {{ name }}</p>
    </div>
</template>
<script>
import { ref } from 'vue';
export default {
    setup() {
        const name = ref('');
        return { name };
    }
};
</script>

Demonstrates a text input using Element UI Input component.

<template>
    <div style="text-align:center; margin-top:50px">
        <el-switch v-model="isOn" active-text="On" inactive-text="Off"></el-switch>
        <p>Switch is {{ isOn ? 'On' : 'Off' }}</p>
    </div>
</template>
<script>
import { ref } from 'vue';
export default { setup() { const isOn = ref(false); return { isOn }; } };
</script>

Shows a toggle switch using Element UI Switch component.

<template>
    <div style="text-align:center; margin-top:50px; width:300px; margin-left:auto; margin-right:auto">
        <el-slider v-model="value"></el-slider>
        <p>Value: {{ value }}</p>
    </div>
</template>
<script>
import { ref } from 'vue';
export default { setup() { const value = ref(50); return { value }; } };
</script>

Demonstrates a slider component using Element UI Slider.

<template>
    <div style="text-align:center; margin-top:50px">
        <el-checkbox v-model="checked">Accept Terms</el-checkbox>
        <p>{{ checked ? 'Checked' : 'Unchecked' }}</p>
    </div>
</template>
<script>
import { ref } from 'vue';
export default { setup() { const checked = ref(false); return { checked }; } };
</script>

Shows checkboxes using Element UI Checkbox component.

<template>
    <div style="text-align:center; margin-top:50px">
        <el-radio-group v-model="picked">
        <el-radio label="A">Option A</el-radio>
        <el-radio label="B">Option B</el-radio>
        <el-radio label="C">Option C</el-radio>
        </el-radio-group>
        <p>Picked: {{ picked }}</p>
    </div>
</template>
<script>
import { ref } from 'vue';
export default { setup() { const picked = ref('A'); return { picked }; } };
</script>

Demonstrates radio buttons using Element UI Radio component.

<template>
    <div style="text-align:center; margin-top:50px; width:300px; margin-left:auto; margin-right:auto">
        <el-progress :percentage="value"></el-progress>
    </div>
</template>
<script>
import { ref, onMounted } from 'vue';
export default {
    setup() {
        const value = ref(0);
        onMounted(() => {
        setInterval(() => { value.value = value.value >= 100 ? 0 : value.value + 10; }, 1000);
        });
        return { value };
    }
};
</script>

Shows a progress bar using Element UI Progress component.

<template>
    <div style="text-align:center; margin-top:50px">
        <el-table :data="tableData" style="width: 50%">
        <el-table-column prop="name" label="Name"></el-table-column>
        <el-table-column prop="age" label="Age"></el-table-column>
        </el-table>
    </div>
</template>
<script>
import { ref } from 'vue';
export default {
    setup() {
        const tableData = ref([
        { name: 'Alice', age: 25 },
        { name: 'Bob', age: 30 },
        { name: 'Charlie', age: 22 }
        ]);
        return { tableData };
    }
};
</script>

Demonstrates a simple table using Element UI Table component.

<template>
    <div style="text-align:center; margin-top:50px">
        <el-button type="primary" @click="dialogVisible = true">Open Dialog</el-button>
        <el-dialog title="Hello" :visible.sync="dialogVisible">
        <p>This is an Element UI dialog example.</p>
        <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">Close</el-button>
        </span>
        </el-dialog>
    </div>
</template>
<script>
import { ref } from 'vue';
export default { setup() { const dialogVisible = ref(false); return { dialogVisible }; } };
</script>

Shows a modal dialog using Element UI Dialog component.