ComponentKit.js - Examples

Button Component

Primary Buttons

Secondary Buttons

Outline Buttons

Different Sizes

const primaryButton = new ComponentKit.Button({
    text: 'Primary Button',
    variant: 'primary',
    onClick: () => alert('Primary clicked!')
});
primaryButton.render('#container');
            

Input Component

Text Input

Email Input with Validation

Password Input

Required Input

const emailInput = new ComponentKit.Input({
    type: 'email',
    label: 'Email Address',
    placeholder: 'user@example.com',
    required: true,
    validation: { email: true }
});
emailInput.render('#container');
            

Card Component

Basic Card

Card with Actions

Elevated Card

Outlined Card

const card = new ComponentKit.Card({
    title: 'Card Title',
    content: 'This is the card content.',
    variant: 'elevated',
    actions: [
        { text: 'Action 1', onClick: () => alert('Action 1!') },
        { text: 'Action 2', variant: 'secondary' }
    ]
});
card.render('#container');
            

ProgressGift Component

Basic Progress Gift

Custom Gift Icon

High Score Progress

Control Buttons

const progressGift = new ComponentKit.ProgressGift({
    maxPoints: 100,
    giftIcon: '🎁',
    onGiftEarned: (gifts, points) => {
        console.log(`Поздравляем! Подарок #${gifts} получен!`);
        console.log(`Осталось очков: ${points}`);
    }
});

// Добавить очки
progressGift.addPoints(25);

// Рендер
progressGift.render('#container');
            

Modal Component

Basic Modal

Confirmation Modal

Large Modal

Custom Modal

const modal = new ComponentKit.Modal({
    title: 'Confirm Action',
    content: 'Are you sure you want to proceed?',
    size: 'medium',
    actions: [
        { text: 'Cancel', variant: 'secondary' },
        { text: 'Confirm', variant: 'primary', onClick: () => alert('Confirmed!') }
    ]
});
modal.open();
            

Complete Form Example

// Create a complete form with validation
const form = document.createElement('form');

const nameInput = new ComponentKit.Input({
    label: 'Full Name',
    placeholder: 'Enter your name',
    required: true
});

const emailInput = new ComponentKit.Input({
    type: 'email',
    label: 'Email',
    placeholder: 'user@example.com',
    validation: { email: true }
});

const submitButton = new ComponentKit.Button({
    text: 'Submit Form',
    variant: 'primary',
    onClick: () => validateAndSubmit()
});

// Render components
nameInput.render(form);
emailInput.render(form);
submitButton.render(form);
            