React اور جدید CSS کے ساتھ شاندار ویب انٹرفیس بنانا

// Button.stories.jsx
import { Button } from './Button';

export default {
  title: 'Components/Button',
  component: Button,
  argTypes: {
    variant: {
      options: ['primary', 'secondary', 'ghost'],
      control: { type: 'select' },
    },
    size: {
      options: ['sm', 'md', 'lg'],
      control: { type: 'select' },
    },
  },
};

export const Primary = {
  args: { variant: 'primary', children: 'Click me' },
};

export const Secondary = {
  args: { variant: 'secondary', children: 'Click me' },
};

اسٹوری بک ڈیزائنرز اور ڈویلپرز کو اجزاء پر الگ تھلگ تعاون کرنے کے قابل بناتی ہے، اس بات کو یقینی بناتی ہے کہ ہر جزو کو ایپلی کیشن میں ضم کرنے سے پہلے صحیح طریقے سے کام کرے۔

مائیکرو انٹرایکشنز اور اینیمیشنز

سوچی سمجھی اینیمیشنز صارفین کی رہنمائی کرتی ہیں، فیڈ بیک فراہم کرتی ہیں، اور پولش کا احساس پیدا کرتی ہیں۔ Framer Motion React کے لیے معروف اینیمیشن لائبریری ہے۔ Framer Motion کے ساتھ

بنیادی اینیمیشنز

import { motion } from 'framer-motion';

function FadeInCard({ children }) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.4, ease: 'easeOut' }}
    >
      {children}
    </motion.div>
  );
}

سٹیگرڈ لسٹ اینیمیشنز

import { motion } from 'framer-motion';

const container = {
  hidden: { opacity: 0 },
  show: {
    opacity: 1,
    transition: { staggerChildren: 0.1 },
  },
};

const item = {
  hidden: { opacity: 0, x: -20 },
  show: { opacity: 1, x: 0 },
};

function AnimatedList({ items }) {
  return (
    <motion.ul variants={container}
      initial="hidden" animate="show">
      {items.map(i => (
        <motion.li key={i.id} variants={item}>
          {i.label}
        </motion.li>
      ))}
    </motion.ul>
  );
}

CSS-صرف مائیکرو انٹرایکشنز

ہر ایک اینیمیشن کی ضرورت نہیں ہے۔ CSS ٹرانزیشنز اور ٹرانسفارمز بہت سے عام تعاملات کو مؤثر طریقے سے ہینڈل کرتے ہیں:

.interactive-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.interactive-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.button-press:active {
  transform: scale(0.97);
}

قابل رسائی اجزاء پیٹرنز

رسائی اختیاری نہیں ہے - یہ پیشہ ور ویب انٹرفیس کے لیے ایک ضرورت ہے۔ ان نمونوں پر عمل کریں تاکہ یہ یقینی بنایا جا سکے کہ آپ کے اجزاء سب کے لیے کام کرتے ہیں۔

فوکس مینجمنٹ

جب موڈل کھلتے ہیں، تو فوکس موڈل پر منتقل کریں۔ جب وہ بند ہو جائیں، تو محرک عنصر پر توجہ مرکوز کریں۔ پس منظر کے مواد کے ساتھ تعامل کو روکنے کے لیےinertانتساب کا استعمال کریں:

function Modal({ isOpen, onClose, children }) {
  const closeRef = useRef();
  const previousFocus = useRef();

  useEffect(() => {
    if (isOpen) {
      previousFocus.current = document.activeElement;
      closeRef.current?.focus();
    } else {
      previousFocus.current?.focus();
    }
  }, [isOpen]);

  if (!isOpen) return null;

  return (
    <div role="dialog" aria-modal="true">
      <button ref={closeRef} onClick={onClose}
        aria-label="Close dialog">X</button>
      {children}
    </div>
  );
}

کی بورڈ نیویگیشن

تمام متعامل عناصر کی بورڈ قابل رسائی ہونا چاہیے۔ اپنی مرضی کے اجزاء جیسے ڈراپ ڈاؤن مینو، ٹیبز، اور carousels کو کی بورڈ کے تعامل کے لیے WAI-ARIA ڈیزائن پیٹرن کی پیروی کرنی چاہیے۔

رنگین کنٹراسٹ اور بصری ڈیزائن

یقینی بنائیں کہ متن WCAG 2.1 کنٹراسٹ تناسب پر پورا اترتا ہے: عام متن کے لیے 4.5:1، بڑے متن کے لیے 3:1۔ معلومات پہنچانے کے لیے اکیلے رنگ پر انحصار نہ کریں — اضافی اشارے کے طور پر شبیہیں، ٹیکسٹ لیبلز، یا پیٹرن استعمال کریں۔

ریسپانسیو ڈیزائن کی حکمت عملی

جدید ریسپانسیو ڈیزائن بریک پوائنٹس سے آگے ہے۔ فلوئڈ ڈیزائن اپروچ استعمال کریں جو تمام سکرین کے سائز میں آسانی سے ڈھل جائے۔

Fluid Typography

ٹائپوگرافی بنانے کے لیےclamp()کا استعمال کریں جو کم سے کم اور زیادہ سے زیادہ سائز کے درمیان آسانی سے پیمانہ ہو:

h1 {
  font-size: clamp(1.75rem, 4vw, 3rem);
  line-height: 1.2;
}

p {
  font-size: clamp(0.9rem, 1.5vw, 1.125rem);
  line-height: 1.6;
}

ریسپانسیو سپیسنگ

.section {
  padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 3vw, 2rem);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1rem, 2vw, 2rem);
}

ڈارک موڈ کا نفاذ

ڈارک موڈ کو الٹنے والے رنگوں سے زیادہ کی ضرورت ہوتی ہے۔ ایک الگ رنگ پیلیٹ ڈیزائن کریں جو مناسب کنٹراسٹ اور بصری درجہ بندی کو برقرار رکھے:

:root {
  --bg-primary: #ffffff;
  --bg-secondary: #f1f5f9;
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --border-color: #e2e8f0;
}

[data-theme='dark'] {
  --bg-primary: #0f172a;
  --bg-secondary: #1e293b;
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --border-color: #334155;
}

React میں، ایک سیاق و سباق فراہم کرنے والے کے ساتھ تھیم کا نظم کریں اور لوکل سٹوریج پر صارف کی ترجیح کو برقرار رکھیں:

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState(() => {
    if (typeof window === 'undefined') return 'light';
    return localStorage.getItem('theme') ||
      (window.matchMedia('(prefers-color-scheme: dark)').matches
        ? 'dark' : 'light');
  });

  useEffect(() => {
    document.documentElement.setAttribute('data-theme', theme);
    localStorage.setItem('theme', theme);
  }, [theme]);

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

پرفارمنس ایکس ٹیگ ایکس ایکس ایکس ایکس ایکس ایکس ایکس ایکس ایکس ایکس ایکس ایکس ایکس ایکس ایکس ایکس ایکس ایکس ایکس ایکس ایکس ایکس ایکس ایکس ایکس ایکس ایکس ایکس ایکس ایکس ایکس ایکس ایکس ایکس ایکس ایکس ایکس ایکس ایکس ایکس ایکس ایکس ایکس ایکس ایکس ایکس ایکس ایکس ایکس ایکس ایکس ایکس ایکس ایکس ایکس ایکس ایکس ایکس ایکس ایکس ایکس ایکس ایکس ایکس میں یہ بھی تیز ہونا چاہئے. اپنے UI کو جوابدہ رکھنے کے لیے ان CSS کارکردگی کی تکنیکوں کو لاگو کریں۔

CSS کنٹینمنٹ

containپراپرٹی براؤزر کو بتاتی ہے کہ کسی عنصر کا مواد باقی صفحہ سے آزاد ہے، رینڈرنگ آپٹیمائزیشن کو فعال کرتا ہے:

.card {
  contain: layout style paint;
}

.sidebar {
  contain: layout size style;
}

XTAG2626XX خاصیت کوwill-changeXX کو استعمال کرنے کے لیے مرضی کو تبدیل کرے گا۔ آنے والی متحرک تصاویر کے بارے میں براؤزر کو اشارہ کریں۔ اسے تھوڑا سا لگائیں — زیادہ استعمال میموری کی کھپت کو بڑھا سکتا ہے:

.animated-element {
  will-change: transform, opacity;
}

/* Remove after animation completes */
.animated-element.done {
  will-change: auto;
}

مواد کی مرئیت

بہت سے حصوں والے لمبے صفحات کے لیے،content-visibility: autoبراؤزر کو آف اسکرین مواد کو مکمل طور پر پیش کرنے کو چھوڑنے کی اجازت دیتا ہے: XTAG2747X7X77X

شاندار ویب انٹرفیس بنانا ایک ایسا فن ہے جو بصری ڈیزائن، تکنیکی مہارت اور صارفین کے لیے ہمدردی کو ملا دیتا ہے۔ جدید سی ایس ایس طاقتور لے آؤٹ سسٹمز، فلوڈ ڈیزائن کی تکنیک اور کارکردگی کی اصلاح فراہم کرتا ہے۔ React کا جزو ماڈل اسٹائل، رویے، اور قابل رسائی عمارت کے بلاکس کو دوبارہ استعمال کرنے میں آسانی پیدا کرتا ہے۔ ان ٹیکنالوجیز کو سوچ سمجھ کر حرکت پذیری، قابل رسائی طریقہ کار، اور ایک اچھی طرح سے ساختہ ڈیزائن سسٹم کے ساتھ ملا کر، آپ ایسے انٹرفیس بنا سکتے ہیں جو نہ صرف خوبصورت ہوں بلکہ تیز، قابل رسائی اور برقرار رکھنے کے قابل بھی ہوں۔ ڈیزائن ٹوکنز اور لے آؤٹ پرائمیٹوز کی ایک ٹھوس بنیاد کے ساتھ شروع کریں، انٹرایکٹیویٹی اور اینیمیشن میں پرت، آلات اور معاون ٹیکنالوجیز پر ٹیسٹ کریں، اور حقیقی صارف کے تاثرات کی بنیاد پر اعادہ کریں۔