پرش به محتوا
بناBana UI

حالت نمایش

پالت رنگی

با ↑ ↓ جابه‌جا شوید و Enter را بزنید. Esc برای بستن.

آلفا نسخهٔ 0.1.0-alpha.0

رابط‌های فارسی را روی پایه‌ای استوار بساز.

Bana UI فریم‌ورک رابط کاربری راست‌به‌چپ و بدون وابستگی است: HTML معنایی، تقویم شمسی، ۶۵۴ آیکون و قالب مدیریت کامل، همه در چند ده کیلوبایت.

شروع کنیددیدن قالب‌ها
npm i @bana-ui/core

یا بدون npm: دو فایل از پوشهٔ dist/ را در صفحه بگذارید. راهنما

سفارش تازه

زنده
CSS (gzip)
۱۶٫۴ KB
هستهٔ JS (gzip)
۹٫۶ KB
وابستگی
۰
آیکون
۶۵۴
صفحهٔ قالب
۱۴۱
پالت رنگی
۱۰

چرا بنا؟

ابزاری که برای زبان، تقویم و عادت‌های وب فارسی ساخته شده، نه اینکه بعداً به آن‌ها وصله شده باشد.

بدون وابستگی

هیچ بسته‌ای نصب نمی‌کنید. دو فایل CSS و یک ماژول JS کافی است؛ بدون Build و بدون چارچوب دیگر.

اول راست‌به‌چپ

همهٔ استایل‌ها با ویژگی‌های منطقی CSS نوشته شده‌اند؛ فارسی پیش‌فرض است و LTR هم بی‌دردسر کار می‌کند.

HTML معنایی

به همان عنصرهای استاندارد با ویژگی ui ظاهر می‌دهید: <button ui="primary"> به‌جای ده کلاس.

تقویم شمسی واقعی

تاریخ‌ساز تا سال ۳۱۷۶، بازه، چندانتخابی، میان‌بُر سال، ساعت و مناسبت‌های ثابت.

۶۵۴ آیکون SVG

بدون دانلود و بدون Icon Font، با نشان‌های ترکیبی که هزاران حالت می‌سازند.

قالب مدیریت کامل

پنج مجموعه با ۱۴۱ صفحهٔ آماده: CRM، مالی، فروشگاه، پروژه و کیت اصلی.

دسترس‌پذیر و امن

هدف WCAG 2.2 AA؛ قالب‌ها بدون script و style درون‌خطی‌اند و با CSP سخت‌گیرانه کار می‌کنند.

تم و Token

پالت OKLCH، ده رنگ اصلی، حالت تیره و سه تراکم؛ همه با متغیرهای --bana-* قابل تغییر.

فقط HTML

عنصر استاندارد را بنویسید و ویژگی ui را اضافه کنید. جاوااسکریپت فقط وقتی لازم است که رفتار بخواهید.

HTML
<button ui="primary">ذخیره</button>
<button ui="secondary">انصراف</button>
<button ui="danger">حذف</button>
<button ui="ghost">بیشتر</button>
HTML
<label ui="field">
  <span>موبایل</span>
  <input name="mobile" inputmode="tel" required>
  <small>مثلاً ۰۹۱۲۰۰۰۰۰۰۰</small>
</label>
HTML
<input name="date" data-datepicker
       data-presets="today,last7,thisMonth">
نامامتیاز
مریم۹۱
علی۸۴
سارا۹۷
رضا۷۹
HTML
<div ui="data-table" data-page-size="5">
  <table ui="table">…</table>
</div>

رنگ خودتان را انتخاب کنید

پالت‌ها در فضای OKLCH ساخته شده‌اند و هر پله‌شان برای متن و پس‌زمینه کنتراست مناسب دارد. یک کاشی را بزنید؛ همین صفحه همان لحظه تغییر می‌کند.

تم‌ها و Tokenها

هرچه برای یک پنل لازم دارید

از دکمه تا پنل مدیریت؛ هر جزء مستند و دارای نمونهٔ زنده است.

دکمه و فرمورودی، Combobox، سوییچ، اعتبارسنجی فارسیDate Picker شمسیبازه، چندانتخابی، تقویم مناسبت‌هاData Tableمرتب‌سازی، جست‌وجو و صفحه‌بندیDialog و Drawerروی dialog بومی مرورگر ساخته شدهCommand Menuجست‌وجوی سریع با Ctrl+KSchemaساخت فرم و اعتبارسنجی از روی JSONآیکون‌ها۶۵۴ آیکون و نشان ترکیبیAdmin Kitقالب پنل مدیریت و ۱۴۱ صفحه

قالب‌های آمادهٔ مدیریت

پنج مجموعه با پوسته، منو و پالت مخصوص خودشان؛ همه ساده‌اند، بدون inline script و style و قابل ویرایش.

پیش‌نمایش قالب CRMCRMمشتری‌یار — فروش و ارتباط با مشتریپیش‌نمایش قالب مالیمالیپول‌نما — مالی شخصیپیش‌نمایش قالب فروشگاهفروشگاهبازارچه — مدیریت فروشگاهپیش‌نمایش قالب پروژهپروژهکارگاه — مدیریت پروژه

همهٔ ۱۴۱ صفحه

در سه گام شروع کنید

  1. فایل‌ها را بگذارید

    CSS را در head و اسکریپت تم را پیش از آن بیاورید تا صفحه چشمک نزند.

    HTML
    <script src="dist/bana-init.js"></script>
<link rel="stylesheet" href="dist/bana.min.css">

  2. رفتار را روشن کنید

    اگر تقویم، جدول یا Dialog می‌خواهید، ماژول را وارد و استارت کنید.

    HTML
    <script type="module">
  import { Bana } from "./dist/bana.js";
  Bana.start();
</script>

  3. بنویسید

    هر عنصر استاندارد با ویژگی ui ظاهر می‌گیرد.

    HTML
    <button ui="primary">شروع</button>
<input data-datepicker name="date">

مستندات کامل