From d5ee23be278edaf6ea4836e18af503c2527b788a Mon Sep 17 00:00:00 2001 From: imed jaberi Date: Mon, 16 Sep 2019 17:02:11 +0200 Subject: [PATCH 01/14] done translate ui-components.md to ar .. --- content/community/tools-ui-components.md | 137 +++++++++++------------ 1 file changed, 68 insertions(+), 69 deletions(-) diff --git a/content/community/tools-ui-components.md b/content/community/tools-ui-components.md index a0535c829..4fe665fb0 100644 --- a/content/community/tools-ui-components.md +++ b/content/community/tools-ui-components.md @@ -1,80 +1,79 @@ --- id: ui-components -title: UI Components +title: مكونات UI layout: community permalink: community/ui-components.html --- -## Free Components {#free-components} -* **[Amaze UI React](https://github.com/amazeui/amazeui-react) (in Chinese):** [Amaze UI](https://github.com/allmobilize/amazeui) components built with React. -* **[Ant Design of React](https://github.com/ant-design/ant-design)** An enterprise-class UI design language and React-based implementation. -* **[Belle](https://github.com/nikgraf/belle/):** Configurable React Components with great UX. -* **[chartify](https://github.com/kirillstepkin/chartify)**: Ultra lightweight and customizable React.js chart component. -* **[Elemental UI](http://elemental-ui.com):** A UI toolkit for React websites and apps, themeable and composed of individually packaged components -* **[Grommet](https://grommet.io/)** The most advanced open source UX framework for enterprise applications. -* **[Halogen](https://yuanyan.github.io/halogen/):** A collection of highly customizable loading spinner animations with React. +## المكونات الحرة {#free-components} +* **[Amaze UI React](https://github.com/amazeui/amazeui-react) (بالصيني):** [Amaze UI](https://github.com/allmobilize/amazeui) مكونات بنيت بواسطة React. +* **[Ant Design of React](https://github.com/ant-design/ant-design)** لغة تصميم واجهة المستخدم من صنف المؤسسات والتنفيذ القائم على React. +* **[Belle](https://github.com/nikgraf/belle/):** مكونات شكلية لـ React مع تجربة مستخدم جيدة. +* **[chartify](https://github.com/kirillstepkin/chartify)**: مكون رسم بياني لـ React.js خفيف الحجم و قابل للتخصيص. +* **[Elemental UI](http://elemental-ui.com):** مجموعة أدوات واجهة المستخدم لمواقع React وتطبيقاتها ، قابلة للتغيير وتتكون من مكونات منفصلة. +* **[Grommet](https://grommet.io/)** إطار تجربة المستخدم ( UX ) الموجه لتطبيقات المؤسسات. (مفتوح المصدر) +* **[Halogen](https://yuanyan.github.io/halogen/):** مجموعة من رسوم التحميل الدوارة عالية التخصيص لـ React. * **[Khan Academy's component library](https://khan.github.io/react-components/)** -* **[markdown-to-jsx](https://www.npmjs.com/package/markdown-to-jsx)**: compiles markdown into safe React JSX without using dangerous escape hatches. -* **[Material-UI](https://material-ui.com/):** React components that implement Google's Material Design. -* **[Mobiscroll Lite for React](https://mobiscroll.com/forms/react):** A collection of 15 free UI components ranging from inputs, selects, sliders, alerts to rating. -* **[Onsen UI React Components](https://onsen.io/v2/react.html):** UI components for hybrid mobile apps with both Material Design for Android and flat design for iOS. -* **[PrimeReact](https://www.primefaces.org/primereact/):** A rich UI component suite for React featuring 70+ open source components. -* **[React Amazing Grid](https://github.com/Amazing-Space-Invader/react-amazing-grid)** Flex grid with inline styles. -* **[Material Components for React](https://github.com/material-components/material-components-web-react)** MDC React is the official implementation of Google's Material Design Components. -* **[React Native for Web](https://github.com/necolas/react-native-web)** Makes it possible to run React Native components and APIs on the web using React DOM. +* **[markdown-to-jsx](https://www.npmjs.com/package/markdown-to-jsx)**: يقوم بتحويل شيفرة الـ Markdown إلى شيفرة React JSX آمنة. +* **[Material-UI](https://material-ui.com/):** مكتبة لمكونات React تعتمد على Google Material Design. +* **[Mobiscroll Lite for React](https://mobiscroll.com/forms/react):** مجموعة مكونة من 15 مكونًا من مكونات واجهة المستخدم المجانية (inputs, selects,sliders ..etc). +* **[Onsen UI React Components](https://onsen.io/v2/react.html):** مكونات واجهة المستخدم لتطبيقات الهواتف الهجينة التي تعمد على الـ Material Design لنظام الـ Android وعلى Flat Design لنظام الـ iOS. +* **[PrimeReact](https://www.primefaces.org/primereact/):** مجموعة مكونات واجهة المستخدم غنية لـ React تضم اكثر من 70 مكون مفتوحة المصدر. +* **[React Amazing Grid](https://github.com/Amazing-Space-Invader/react-amazing-grid)** نظام التقاسيم مع الأنماط المضمنة. +* **[Material Components for React](https://github.com/material-components/material-components-web-react)** MDC React هو التنفيذ الرسمي لمكونات التي تعتمد على لـ Google Material Design. +* **[React Native for Web](https://github.com/necolas/react-native-web)** يجعل من الممكن تشغيل مكونات React Native وواجهات برمجة التطبيقات على الويب باستخدام React DOM. * **[react-amiga-guru-meditation](https://github.com/gfazioli/react-amiga-guru-meditation):** React JS Class to display a Amiga Guru Meditation Tribute * **[react-autosuggest](https://github.com/moroshko/react-autosuggest)** WAI-ARIA compliant React autosuggest component -* **[react-beautiful-dnd](https://github.com/atlassian/react-beautiful-dnd):** Beautiful, accessible drag and drop for lists with React.js -* **[react-bootstrap](https://github.com/stevoland/react-bootstrap):** Bootstrap 3 components built with React. -* **[react-bootstrap-dialog](https://github.com/akiroom/react-bootstrap-dialog):** React Dialog component for react-bootstrap, instead of `window.alert` or `window.confirm` -* **[react-bootstrap-table2](https://github.com/react-bootstrap-table/react-bootstrap-table2):** It's a react table for Bootstrap. -* **[react-component](https://github.com/react-component/):** A collection of react components maintained by Alibaba/Alipay employee. -* **[react-data-menu](https://github.com/dkozar/react-data-menu):** Smart data-driven menu rendered in an overlay. Hints-based aligning with custom renderers and factories. Never clipped by other components or screen edges. -* **[react-date-picker](https://github.com/Hacker0x01/react-datepicker):** A simple and reusable datepicker component for React. -* **[react-dates](https://github.com/OpusCapita/react-dates):** Date-inputs + date-picker -* **[react-dnd](https://github.com/gaearon/react-dnd)** Flexible HTML5 drag-and-drop mixin for React with full DOM control -* **[react-document-title](https://github.com/gaearon/react-document-title)** Declarative, nested, stateful, isomorphic document.title for React -* **[react-dropzone](https://github.com/felixrieseberg/React-Dropzone):** React Dropzone for File-Uploads -* **[react-forms](https://prometheusresearch.github.io/react-forms/):** Form rendering and validation for React -* **[react-highlight](https://github.com/akiran/react-highlight):** React component for syntax highlighting -* **[react-image](https://github.com/mbrevda/react-image):** Like `` and Enhanced Image Component for React. -* **[react-input-autosize](https://github.com/JedWatson/react-input-autosize):** Like `` but resizes automatically to fit all its content. -* **[react-intense](https://github.com/brycedorn/react-intense):** A component for viewing large images up close -* **[react-joyride](https://github.com/gilbarbara/react-joyride):** Create walkthroughs and guided tours for your ReactJS apps. -* **[react-ladda](https://github.com/jsdir/react-ladda):** React wrapper for Ladda buttons. -* **[react-lorem-component](https://github.com/martinandert/react-lorem-component):** Lorem Ipsum placeholder component. -* **[react-notification](https://github.com/pburtchaell/react-notification):** Snackbar style notifications -* **[react-select](https://github.com/JedWatson/react-select):** Native React Select / Multiselect input field, similar to Selectize / Chosen / Select2 -* **[react-selectize](https://furqanzafar.github.io/react-selectize/):** A stateless & flexible Select component, designed as a drop in replacement for React.DOM.Select, inspired by Selectize -* **[react-sigma](https://www.npmjs.com/package/react-sigma)**: Lightweight but powerful library for drawing network graphs -* **[react-slick](https://github.com/akiran/react-slick):** Carousel component built with React -* **[react-sparklines](https://borisyankov.github.io/react-sparklines/):** Beautiful and expressive sparklines component -* **[react-spreadsheet](https://github.com/felixrieseberg/React-Spreadsheet-Component):** React Spreadsheets / Editable tables with Excel-Style keyboard input and navigation -* **[react-toggle](https://github.com/gfazioli/react-toggle):** A React UI component to display a toggle button control -* **[react-tappable](https://github.com/JedWatson/react-tappable)** A Tappable React Component that provides native-feeling onTap events for mobile React apps -* **[react-textarea-autosize](https://github.com/andreypopp/react-textarea-autosize):** Like `