From 5de923955baf58ecaee9ff5249dc5d2aab0db1aa Mon Sep 17 00:00:00 2001 From: sadeghbarati Date: Thu, 23 Apr 2020 20:08:42 +0430 Subject: [PATCH 1/7] translated faq: Styling and CSS --- content/docs/faq-styling.md | 31 ++++++++++++++++--------------- 1 file changed, 16 insertions(+), 15 deletions(-) diff --git a/content/docs/faq-styling.md b/content/docs/faq-styling.md index 7436c3b07..55bbfa9b4 100644 --- a/content/docs/faq-styling.md +++ b/content/docs/faq-styling.md @@ -6,9 +6,9 @@ layout: docs category: FAQ --- -### How do I add CSS classes to components? {#how-do-i-add-css-classes-to-components} +### چگونه میتوانم کلاس های CSS را به کامپوننت ها اضافه کنم? {#how-do-i-add-css-classes-to-components} -Pass a string as the `className` prop: +یک رشته را به عنوان ویژگی به `className` دهید: ```jsx render() { @@ -16,7 +16,7 @@ render() { } ``` -It is common for CSS classes to depend on the component props or state: +این معمولی است که کلاس های CSS وابسته به props یا state کامپوننت باشند: ```jsx render() { @@ -28,24 +28,25 @@ render() { } ``` ->Tip -> ->If you often find yourself writing code like this, [classnames](https://www.npmjs.com/package/classnames#usage-with-reactjs) package can simplify it. +> راهنما +> +> اگر شما اغلب اوقات همچین کدی را می نویسید، پکیج [classnames](https://www.npmjs.com/package/classnames#usage-with-reactjs) می تواند آن را ساده تر کند. -### Can I use inline styles? {#can-i-use-inline-styles} +### آیا میتوانم از استایل های درون خطی (inline styles) استفاده کنم? {#can-i-use-inline-styles} -Yes, see the docs on styling [here](/docs/dom-elements.html#style). +بله، اسناد مربوط به طراحی ظاهر را [اینجا](/docs/dom-elements.html#style) ببینید. -### Are inline styles bad? {#are-inline-styles-bad} +### آیا استایل های درون خطی بد هستند? {#are-inline-styles-bad} -CSS classes are generally better for performance than inline styles. +کلاس های CSS معمولاً عملکرد بهتری نسبت به استایل های درون خطی دارند. -### What is CSS-in-JS? {#what-is-css-in-js} +### CSS-in-JS چیست? {#what-is-css-in-js} -"CSS-in-JS" refers to a pattern where CSS is composed using JavaScript instead of defined in external files. Read a comparison of CSS-in-JS libraries [here](https://github.com/MicheleBertoli/css-in-js). +"CSS-in-JS" اشاره دارد به یک الگو که در آن CSS توسط Javascript ترکیب شده است به جای اینکه داخل یک فایل خارجی تعریف شده باشند. مقایسه کتابخانه های CSS-in-JS را در [اینجا](https://github.com/MicheleBertoli/css-in-js) بخوانید. -_Note that this functionality is not a part of React, but provided by third-party libraries._ React does not have an opinion about how styles are defined; if in doubt, a good starting point is to define your styles in a separate `*.css` file as usual and refer to them using [`className`](/docs/dom-elements.html#classname). +_توجه داشته باشید که این عملکرد جزئی از ری اکت نمی باشد، بلکه توسط کتابخانه های شخص ثالث ارائه شده._ ری اکت هیچ نظری درباره نحوه ی تعریف استایل ها ندارد؛ اگر شک و شبهه ای دارید، یک نقطه شروع خوب این است که استایل های خود را درون فایل جداگانه `*.css` تعریف کرده و طبق معمول با استفاده از [`className`](/docs/dom-elements.html#classname) به آن ها مراجعه کنید. -### Can I do animations in React? {#can-i-do-animations-in-react} -React can be used to power animations. See [React Transition Group](https://reactcommunity.org/react-transition-group/) and [React Motion](https://github.com/chenglou/react-motion) or [React Spring](https://github.com/react-spring/react-spring), for example. +### آیا میتوانم با ری اکت انیمیشن انجام دهم? {#can-i-do-animations-in-react} + +ری اکت میتواند برای قدرت بخشیدن به انیمیشن ها استفاده شود. به مثال های [React Transition Group](https://reactcommunity.org/react-transition-group/) و [React Motion](https://github.com/chenglou/react-motion) یا [React Spring](https://github.com/react-spring/react-spring)، نگاه بیاندازید. From c5b46878add94e9025d796b06fd8fa27980b4d29 Mon Sep 17 00:00:00 2001 From: sadeghbarati Date: Thu, 23 Apr 2020 20:22:15 +0430 Subject: [PATCH 2/7] persian Question mark --- content/docs/faq-styling.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/content/docs/faq-styling.md b/content/docs/faq-styling.md index 55bbfa9b4..7d5b76d9b 100644 --- a/content/docs/faq-styling.md +++ b/content/docs/faq-styling.md @@ -6,7 +6,7 @@ layout: docs category: FAQ --- -### چگونه میتوانم کلاس های CSS را به کامپوننت ها اضافه کنم? {#how-do-i-add-css-classes-to-components} +### چگونه میتوانم کلاس های CSS را به کامپوننت ها اضافه کنم؟ {#how-do-i-add-css-classes-to-components} یک رشته را به عنوان ویژگی به `className` دهید: @@ -32,21 +32,21 @@ render() { > > اگر شما اغلب اوقات همچین کدی را می نویسید، پکیج [classnames](https://www.npmjs.com/package/classnames#usage-with-reactjs) می تواند آن را ساده تر کند. -### آیا میتوانم از استایل های درون خطی (inline styles) استفاده کنم? {#can-i-use-inline-styles} +### آیا میتوانم از استایل های درون خطی (inline styles) استفاده کنم؟ {#can-i-use-inline-styles} بله، اسناد مربوط به طراحی ظاهر را [اینجا](/docs/dom-elements.html#style) ببینید. -### آیا استایل های درون خطی بد هستند? {#are-inline-styles-bad} +### آیا استایل های درون خطی بد هستند؟ {#are-inline-styles-bad} کلاس های CSS معمولاً عملکرد بهتری نسبت به استایل های درون خطی دارند. -### CSS-in-JS چیست? {#what-is-css-in-js} +### CSS-in-JS چیست؟ {#what-is-css-in-js} "CSS-in-JS" اشاره دارد به یک الگو که در آن CSS توسط Javascript ترکیب شده است به جای اینکه داخل یک فایل خارجی تعریف شده باشند. مقایسه کتابخانه های CSS-in-JS را در [اینجا](https://github.com/MicheleBertoli/css-in-js) بخوانید. _توجه داشته باشید که این عملکرد جزئی از ری اکت نمی باشد، بلکه توسط کتابخانه های شخص ثالث ارائه شده._ ری اکت هیچ نظری درباره نحوه ی تعریف استایل ها ندارد؛ اگر شک و شبهه ای دارید، یک نقطه شروع خوب این است که استایل های خود را درون فایل جداگانه `*.css` تعریف کرده و طبق معمول با استفاده از [`className`](/docs/dom-elements.html#classname) به آن ها مراجعه کنید. -### آیا میتوانم با ری اکت انیمیشن انجام دهم? {#can-i-do-animations-in-react} +### آیا میتوانم با ری اکت انیمیشن انجام دهم؟ {#can-i-do-animations-in-react} ری اکت میتواند برای قدرت بخشیدن به انیمیشن ها استفاده شود. به مثال های [React Transition Group](https://reactcommunity.org/react-transition-group/) و [React Motion](https://github.com/chenglou/react-motion) یا [React Spring](https://github.com/react-spring/react-spring)، نگاه بیاندازید. From fc23fb623e3e4c2f62274b135d4449b0dcc57d3d Mon Sep 17 00:00:00 2001 From: sadeghbarati Date: Thu, 23 Apr 2020 20:36:29 +0430 Subject: [PATCH 3/7] Add spacing between letters --- content/docs/faq-styling.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/content/docs/faq-styling.md b/content/docs/faq-styling.md index 7d5b76d9b..2e996214f 100644 --- a/content/docs/faq-styling.md +++ b/content/docs/faq-styling.md @@ -6,7 +6,7 @@ layout: docs category: FAQ --- -### چگونه میتوانم کلاس های CSS را به کامپوننت ها اضافه کنم؟ {#how-do-i-add-css-classes-to-components} +### چگونه می توانم کلاس های CSS را به کامپوننت ها اضافه کنم؟ {#how-do-i-add-css-classes-to-components} یک رشته را به عنوان ویژگی به `className` دهید: @@ -32,7 +32,7 @@ render() { > > اگر شما اغلب اوقات همچین کدی را می نویسید، پکیج [classnames](https://www.npmjs.com/package/classnames#usage-with-reactjs) می تواند آن را ساده تر کند. -### آیا میتوانم از استایل های درون خطی (inline styles) استفاده کنم؟ {#can-i-use-inline-styles} +### آیا می توانم از استایل های درون خطی (inline styles) استفاده کنم؟ {#can-i-use-inline-styles} بله، اسناد مربوط به طراحی ظاهر را [اینجا](/docs/dom-elements.html#style) ببینید. @@ -47,6 +47,6 @@ render() { _توجه داشته باشید که این عملکرد جزئی از ری اکت نمی باشد، بلکه توسط کتابخانه های شخص ثالث ارائه شده._ ری اکت هیچ نظری درباره نحوه ی تعریف استایل ها ندارد؛ اگر شک و شبهه ای دارید، یک نقطه شروع خوب این است که استایل های خود را درون فایل جداگانه `*.css` تعریف کرده و طبق معمول با استفاده از [`className`](/docs/dom-elements.html#classname) به آن ها مراجعه کنید. -### آیا میتوانم با ری اکت انیمیشن انجام دهم؟ {#can-i-do-animations-in-react} +### آیا می توانم با ری اکت انیمیشن انجام دهم؟ {#can-i-do-animations-in-react} ری اکت میتواند برای قدرت بخشیدن به انیمیشن ها استفاده شود. به مثال های [React Transition Group](https://reactcommunity.org/react-transition-group/) و [React Motion](https://github.com/chenglou/react-motion) یا [React Spring](https://github.com/react-spring/react-spring)، نگاه بیاندازید. From 342ee6da76e0844ea446d9f1de6703cbd7e80e92 Mon Sep 17 00:00:00 2001 From: Sadegh Barati Date: Sat, 2 May 2020 02:28:55 +0430 Subject: [PATCH 4/7] Update content/docs/faq-styling.md Co-authored-by: Abolfazl Rezvani Naraqi --- content/docs/faq-styling.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/faq-styling.md b/content/docs/faq-styling.md index 2e996214f..10943415c 100644 --- a/content/docs/faq-styling.md +++ b/content/docs/faq-styling.md @@ -42,7 +42,7 @@ render() { ### CSS-in-JS چیست؟ {#what-is-css-in-js} -"CSS-in-JS" اشاره دارد به یک الگو که در آن CSS توسط Javascript ترکیب شده است به جای اینکه داخل یک فایل خارجی تعریف شده باشند. مقایسه کتابخانه های CSS-in-JS را در [اینجا](https://github.com/MicheleBertoli/css-in-js) بخوانید. +"CSS-in-JS" اشاره دارد به یک الگو که در آن CSS توسط Javascript تشکیل شده است به جای اینکه داخل یک فایل خارجی تعریف شده باشد. مقایسه کتابخانه های CSS-in-JS را در [اینجا](https://github.com/MicheleBertoli/css-in-js) بخوانید. _توجه داشته باشید که این عملکرد جزئی از ری اکت نمی باشد، بلکه توسط کتابخانه های شخص ثالث ارائه شده._ ری اکت هیچ نظری درباره نحوه ی تعریف استایل ها ندارد؛ اگر شک و شبهه ای دارید، یک نقطه شروع خوب این است که استایل های خود را درون فایل جداگانه `*.css` تعریف کرده و طبق معمول با استفاده از [`className`](/docs/dom-elements.html#classname) به آن ها مراجعه کنید. From 72302986e260617cc7b0fffbabd9a6cb970dcf76 Mon Sep 17 00:00:00 2001 From: Sadegh Barati Date: Sat, 2 May 2020 02:29:43 +0430 Subject: [PATCH 5/7] Update content/docs/faq-styling.md Co-authored-by: Abolfazl Rezvani Naraqi --- content/docs/faq-styling.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/faq-styling.md b/content/docs/faq-styling.md index 10943415c..3abf3f409 100644 --- a/content/docs/faq-styling.md +++ b/content/docs/faq-styling.md @@ -16,7 +16,7 @@ render() { } ``` -این معمولی است که کلاس های CSS وابسته به props یا state کامپوننت باشند: +اینکه کلاس های CSS وابسته به props یا state کامپوننت باشند معمول است : ```jsx render() { From 24869669ef447b449c39b93afc06f4c27ba935f2 Mon Sep 17 00:00:00 2001 From: Sadegh Barati Date: Sat, 2 May 2020 02:30:02 +0430 Subject: [PATCH 6/7] Update content/docs/faq-styling.md Co-authored-by: Abolfazl Rezvani Naraqi --- content/docs/faq-styling.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/faq-styling.md b/content/docs/faq-styling.md index 3abf3f409..5a58fec34 100644 --- a/content/docs/faq-styling.md +++ b/content/docs/faq-styling.md @@ -8,7 +8,7 @@ category: FAQ ### چگونه می توانم کلاس های CSS را به کامپوننت ها اضافه کنم؟ {#how-do-i-add-css-classes-to-components} -یک رشته را به عنوان ویژگی به `className` دهید: +متنی به عنوان prop به `className` اختصاص می دهیم. ```jsx render() { From eaed6a6c0284ebf05a82ad874aa1a869a6e398a2 Mon Sep 17 00:00:00 2001 From: Sadegh Barati Date: Sat, 2 May 2020 02:30:09 +0430 Subject: [PATCH 7/7] Update content/docs/faq-styling.md Co-authored-by: Abolfazl Rezvani Naraqi --- content/docs/faq-styling.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/faq-styling.md b/content/docs/faq-styling.md index 5a58fec34..10f850a4b 100644 --- a/content/docs/faq-styling.md +++ b/content/docs/faq-styling.md @@ -40,7 +40,7 @@ render() { کلاس های CSS معمولاً عملکرد بهتری نسبت به استایل های درون خطی دارند. -### CSS-in-JS چیست؟ {#what-is-css-in-js} +### CSS در JS چیست ؟ {#what-is-css-in-js} "CSS-in-JS" اشاره دارد به یک الگو که در آن CSS توسط Javascript تشکیل شده است به جای اینکه داخل یک فایل خارجی تعریف شده باشد. مقایسه کتابخانه های CSS-in-JS را در [اینجا](https://github.com/MicheleBertoli/css-in-js) بخوانید.