diff --git a/docs/src/modules/components/backers-aa.md b/docs/src/modules/components/backers-aa.md index bc70152fd7d43e..0b2ac7fd60fcbc 100644 --- a/docs/src/modules/components/backers-aa.md +++ b/docs/src/modules/components/backers-aa.md @@ -6,7 +6,7 @@ crwdns105431:0crwdne105431:0 crwdns105433:0crwdne105433:0 *crwdns105437:0crwdne105437:0* -crwdns105439:0crwdne105439:0 crwdns105441:0crwdne105441:0 +crwdns107397:0crwdne107397:0 crwdns105441:0crwdne105441:0 ### crwdns105443:0crwdne105443:0 @@ -23,7 +23,7 @@ crwdns105463:0crwdne105463:0 crwdns106857:0crwdne106857:0

-crwdns105481:0crwdne105481:0 +crwdns107399:0crwdne107399:0 ### crwdns105483:0crwdne105483:0 diff --git a/docs/src/modules/components/backers-de.md b/docs/src/modules/components/backers-de.md index 286c4a97f057de..6a60df23028712 100644 --- a/docs/src/modules/components/backers-de.md +++ b/docs/src/modules/components/backers-de.md @@ -6,7 +6,7 @@ The core of Material-UI is a [crowd-funded](/discover-more/backers/) open-source *3/3 slots available* -Diamond Sponsors are those who have pledged $2,000/month and more to Material-UI. Please contact us at diamond@material-ui.com to subscribe to this tier. +Diamond Sponsors are those who have pledged $2,000/month or more to Material-UI. Please contact us at diamond@material-ui.com to subscribe to this tier. ### Gold 🏆 @@ -23,7 +23,7 @@ Diamond Sponsors are those who have pledged $2,000/month and more to Material-UI call-em-all

-Gold-Sponsoren sind diejenigen, die $500 pro Monat und mehr für Material-UI gespendet haben. +Gold Sponsors are those who have pledged $500/month or more to Material-UI. ### Es gibt noch mehr! diff --git a/docs/src/modules/components/backers-es.md b/docs/src/modules/components/backers-es.md index 044fd975d45688..5e78d82a0fbfe1 100644 --- a/docs/src/modules/components/backers-es.md +++ b/docs/src/modules/components/backers-es.md @@ -6,7 +6,7 @@ The core of Material-UI is a [crowd-funded](/discover-more/backers/) open-source *%s espacios disponibles* -Los Patrocinadores Diamante son aquellos que se han comprometido $ 2,000 / mes o más a Material-UI. Por favor, póngase en contacto con nosotros en diamond@material-ui.com para suscribirse a este nivel. +Diamond Sponsors are those who have pledged $2,000/month or more to Material-UI. Por favor, póngase en contacto con nosotros en diamond@material-ui.com para suscribirse a este nivel. ### Oro 🏆 @@ -23,7 +23,7 @@ a través de [OpenCollective](https://opencollective.com/material-ui) call-em-all

-Los Patrocinadores Gold son aquellos que se han comprometido a donar $500/mes o más a Material-UI. +Gold Sponsors are those who have pledged $500/month or more to Material-UI. ### ¡Y aún hay más! diff --git a/docs/src/modules/components/backers-fr.md b/docs/src/modules/components/backers-fr.md index cf0660d947365a..0dee854a760e33 100644 --- a/docs/src/modules/components/backers-fr.md +++ b/docs/src/modules/components/backers-fr.md @@ -6,7 +6,7 @@ The core of Material-UI is a [crowd-funded](/discover-more/backers/) open-source *3/3 slots available* -Diamond Sponsors are those who have pledged $2,000/month and more to Material-UI. Please contact us at diamond@material-ui.com to subscribe to this tier. +Diamond Sponsors are those who have pledged $2,000/month or more to Material-UI. Please contact us at diamond@material-ui.com to subscribe to this tier. ### Gold 🏆 @@ -23,7 +23,7 @@ via [OpenCollective](https://opencollective.com/material-ui) call-em-all

-Les Gold Sponsors sont ceux qui ont promis 500 $ / mois et plus à Material-UI. +Gold Sponsors are those who have pledged $500/month or more to Material-UI. ### Il y en a plus ! diff --git a/docs/src/modules/components/backers-ja.md b/docs/src/modules/components/backers-ja.md index 6e9c7ee1eb500f..e408d2b0497577 100644 --- a/docs/src/modules/components/backers-ja.md +++ b/docs/src/modules/components/backers-ja.md @@ -6,7 +6,7 @@ The core of Material-UI is a [crowd-funded](/discover-more/backers/) open-source *3/3 slots available* -Diamond Sponsors are those who have pledged $2,000/month and more to Material-UI. Please contact us at diamond@material-ui.com to subscribe to this tier. +Diamond Sponsors are those who have pledged $2,000/month or more to Material-UI. Please contact us at diamond@material-ui.com to subscribe to this tier. ### Gold 🏆 @@ -23,7 +23,7 @@ Diamond Sponsors are those who have pledged $2,000/month and more to Material-UI call-em-all

-ゴールドスポンサーは、毎月500ドル以上をMaterial-UIに約束してくれた方々です。 +Gold Sponsors are those who have pledged $500/month or more to Material-UI. ### もっとあります! diff --git a/docs/src/modules/components/backers-pt.md b/docs/src/modules/components/backers-pt.md index 2d9969e1e560d2..7f7df357e8ae41 100644 --- a/docs/src/modules/components/backers-pt.md +++ b/docs/src/modules/components/backers-pt.md @@ -6,7 +6,7 @@ The core of Material-UI is a [crowd-funded](/discover-more/backers/) open-source *3/3 slots available* -Diamond Sponsors are those who have pledged $2,000/month and more to Material-UI. Please contact us at diamond@material-ui.com to subscribe to this tier. +Diamond Sponsors are those who have pledged $2,000/month or more to Material-UI. Please contact us at diamond@material-ui.com to subscribe to this tier. ### Gold 🏆 @@ -23,7 +23,7 @@ via [OpenCollective](https://opencollective.com/material-ui) call-em-all

-Patrocinadores de Ouro são os que apoiaram com $500 por mês ou mais o Material-UI. +Gold Sponsors are those who have pledged $500/month or more to Material-UI. ### E tem mais! diff --git a/docs/src/modules/components/backers-ru.md b/docs/src/modules/components/backers-ru.md index 45bf5e03447706..93d42ccf6efb97 100644 --- a/docs/src/modules/components/backers-ru.md +++ b/docs/src/modules/components/backers-ru.md @@ -4,9 +4,9 @@ Material-UI - это проект с открытым исходным кодо ### Алмазные 💎 -*3/3 свободных мест* +*3/3 мест свободно* -Алмазные спонсоры это те, кто жертвует ежемесячно 2000$ и более на развитие Material-UI. Пожалуйста, свяжитесь с нами по адресу diamond@material-ui.com, чтобы стать одни из них. +Diamond Sponsors are those who have pledged $2,000/month or more to Material-UI. Пожалуйста, свяжитесь с нами по адресу diamond@material-ui.com, чтобы стать одни из них. ### Золотые 🏆 @@ -23,7 +23,7 @@ Material-UI - это проект с открытым исходным кодо call-em-all

-Золотые спонсоры это те, кто жертвует ежемесячно 500$ и более на развитие Material-UI. +Gold Sponsors are those who have pledged $500/month or more to Material-UI. ### Узнать больше! diff --git a/docs/src/modules/components/backers-zh.md b/docs/src/modules/components/backers-zh.md index 85b3ed8d73f267..fd42a60de1e2fa 100644 --- a/docs/src/modules/components/backers-zh.md +++ b/docs/src/modules/components/backers-zh.md @@ -1,19 +1,19 @@ -

Material-UI's sponsors

+

Material-UI 的赞助商

-The core of Material-UI is a [crowd-funded](/discover-more/backers/) open-source project, licensed under the permissive MIT license. Sponsorship increases the rate of bug fixes, documentation improvements, and feature development. +Material-UI 是一个[众筹](/discover-more/backers/)的开源项目,根据MIT协议进行许可。 赞助可用加快我们错误修复,文档改进和功能开发的速度。 -### Diamond 💎 +### 钻石级💎 -*3/3 slots available* +*3/3 个位置可用* -Diamond Sponsors are those who have pledged $2,000/month and more to Material-UI. Please contact us at diamond@material-ui.com to subscribe to this tier. +Diamond Sponsors are those who have pledged $2,000/month or more to Material-UI. 请联系邮箱 diamond@material-ui.com 以订阅此级别。 -### Gold 🏆 +### 金杯级 🏆 通过 [Patreon](https://www.patreon.com/oliviertassinari)

- tidelift + tidelift bitsrc

@@ -23,7 +23,7 @@ Diamond Sponsors are those who have pledged $2,000/month and more to Material-UI call-em-all

-我们的金牌赞助商们每月向 Material-UI 至少捐赠500美元。 +Gold Sponsors are those who have pledged $500/month or more to Material-UI. ### 其实还有更多! diff --git a/docs/src/pages/company/about/about-aa.md b/docs/src/pages/company/about/about-aa.md new file mode 100644 index 00000000000000..d4dfdcd49d9736 --- /dev/null +++ b/docs/src/pages/company/about/about-aa.md @@ -0,0 +1,21 @@ +# crwdns107527:0crwdne107527:0 + +

crwdns107529:0crwdne107529:0

+ +## crwdns107531:0crwdne107531:0 + +crwdns107533:0crwdne107533:0 crwdns107535:0crwdne107535:0 crwdns107537:0crwdne107537:0 + +## crwdns107539:0crwdne107539:0 + +crwdns107541:0crwdne107541:0 crwdns107543:0crwdne107543:0 + +## crwdns107545:0crwdne107545:0 + +crwdns107547:0crwdne107547:0 + +## crwdns107549:0crwdne107549:0 + +crwdns107551:0crwdne107551:0 + +crwdns107553:0crwdne107553:0 diff --git a/docs/src/pages/company/about/about-de.md b/docs/src/pages/company/about/about-de.md new file mode 100644 index 00000000000000..a3b29726021227 --- /dev/null +++ b/docs/src/pages/company/about/about-de.md @@ -0,0 +1,21 @@ +# About Us + +

We’re on a mission to make building UIs with React fun.

+ +## Our Mission + +Our company is focused on making React UIs development easier, better, and accessible to more people. We build open source and commercial tools used by many hundreds of thousands of developers in production. We're proud not only of the products we make, but also the community and partnerships we've cultivated with other developers and companies. + +## Our Vision + +Our vision is to provide React components for faster and easier web development. [Read more](/discover-more/vision/). + +## Our Values + +Our core values include transparency (our work is public most of the time); creating a safe, high-trust team; building incredible developer experiences; maintaining a healthy working environment; and helping to deliver web experiences that feel amazing to use on every device and connection type. + +## Our Story + +Material-UI started back in 2014 to unify React and Material Design. + +Today, Material-UI has grown to become one of the world's most popular React UI libraries – backed by a vibrant community of more than 1M developers in over 180 countries. diff --git a/docs/src/pages/company/about/about-es.md b/docs/src/pages/company/about/about-es.md new file mode 100644 index 00000000000000..a3b29726021227 --- /dev/null +++ b/docs/src/pages/company/about/about-es.md @@ -0,0 +1,21 @@ +# About Us + +

We’re on a mission to make building UIs with React fun.

+ +## Our Mission + +Our company is focused on making React UIs development easier, better, and accessible to more people. We build open source and commercial tools used by many hundreds of thousands of developers in production. We're proud not only of the products we make, but also the community and partnerships we've cultivated with other developers and companies. + +## Our Vision + +Our vision is to provide React components for faster and easier web development. [Read more](/discover-more/vision/). + +## Our Values + +Our core values include transparency (our work is public most of the time); creating a safe, high-trust team; building incredible developer experiences; maintaining a healthy working environment; and helping to deliver web experiences that feel amazing to use on every device and connection type. + +## Our Story + +Material-UI started back in 2014 to unify React and Material Design. + +Today, Material-UI has grown to become one of the world's most popular React UI libraries – backed by a vibrant community of more than 1M developers in over 180 countries. diff --git a/docs/src/pages/company/about/about-fr.md b/docs/src/pages/company/about/about-fr.md new file mode 100644 index 00000000000000..a3b29726021227 --- /dev/null +++ b/docs/src/pages/company/about/about-fr.md @@ -0,0 +1,21 @@ +# About Us + +

We’re on a mission to make building UIs with React fun.

+ +## Our Mission + +Our company is focused on making React UIs development easier, better, and accessible to more people. We build open source and commercial tools used by many hundreds of thousands of developers in production. We're proud not only of the products we make, but also the community and partnerships we've cultivated with other developers and companies. + +## Our Vision + +Our vision is to provide React components for faster and easier web development. [Read more](/discover-more/vision/). + +## Our Values + +Our core values include transparency (our work is public most of the time); creating a safe, high-trust team; building incredible developer experiences; maintaining a healthy working environment; and helping to deliver web experiences that feel amazing to use on every device and connection type. + +## Our Story + +Material-UI started back in 2014 to unify React and Material Design. + +Today, Material-UI has grown to become one of the world's most popular React UI libraries – backed by a vibrant community of more than 1M developers in over 180 countries. diff --git a/docs/src/pages/company/about/about-ja.md b/docs/src/pages/company/about/about-ja.md new file mode 100644 index 00000000000000..a3b29726021227 --- /dev/null +++ b/docs/src/pages/company/about/about-ja.md @@ -0,0 +1,21 @@ +# About Us + +

We’re on a mission to make building UIs with React fun.

+ +## Our Mission + +Our company is focused on making React UIs development easier, better, and accessible to more people. We build open source and commercial tools used by many hundreds of thousands of developers in production. We're proud not only of the products we make, but also the community and partnerships we've cultivated with other developers and companies. + +## Our Vision + +Our vision is to provide React components for faster and easier web development. [Read more](/discover-more/vision/). + +## Our Values + +Our core values include transparency (our work is public most of the time); creating a safe, high-trust team; building incredible developer experiences; maintaining a healthy working environment; and helping to deliver web experiences that feel amazing to use on every device and connection type. + +## Our Story + +Material-UI started back in 2014 to unify React and Material Design. + +Today, Material-UI has grown to become one of the world's most popular React UI libraries – backed by a vibrant community of more than 1M developers in over 180 countries. diff --git a/docs/src/pages/company/about/about-pt.md b/docs/src/pages/company/about/about-pt.md new file mode 100644 index 00000000000000..a3b29726021227 --- /dev/null +++ b/docs/src/pages/company/about/about-pt.md @@ -0,0 +1,21 @@ +# About Us + +

We’re on a mission to make building UIs with React fun.

+ +## Our Mission + +Our company is focused on making React UIs development easier, better, and accessible to more people. We build open source and commercial tools used by many hundreds of thousands of developers in production. We're proud not only of the products we make, but also the community and partnerships we've cultivated with other developers and companies. + +## Our Vision + +Our vision is to provide React components for faster and easier web development. [Read more](/discover-more/vision/). + +## Our Values + +Our core values include transparency (our work is public most of the time); creating a safe, high-trust team; building incredible developer experiences; maintaining a healthy working environment; and helping to deliver web experiences that feel amazing to use on every device and connection type. + +## Our Story + +Material-UI started back in 2014 to unify React and Material Design. + +Today, Material-UI has grown to become one of the world's most popular React UI libraries – backed by a vibrant community of more than 1M developers in over 180 countries. diff --git a/docs/src/pages/company/about/about-ru.md b/docs/src/pages/company/about/about-ru.md new file mode 100644 index 00000000000000..a3b29726021227 --- /dev/null +++ b/docs/src/pages/company/about/about-ru.md @@ -0,0 +1,21 @@ +# About Us + +

We’re on a mission to make building UIs with React fun.

+ +## Our Mission + +Our company is focused on making React UIs development easier, better, and accessible to more people. We build open source and commercial tools used by many hundreds of thousands of developers in production. We're proud not only of the products we make, but also the community and partnerships we've cultivated with other developers and companies. + +## Our Vision + +Our vision is to provide React components for faster and easier web development. [Read more](/discover-more/vision/). + +## Our Values + +Our core values include transparency (our work is public most of the time); creating a safe, high-trust team; building incredible developer experiences; maintaining a healthy working environment; and helping to deliver web experiences that feel amazing to use on every device and connection type. + +## Our Story + +Material-UI started back in 2014 to unify React and Material Design. + +Today, Material-UI has grown to become one of the world's most popular React UI libraries – backed by a vibrant community of more than 1M developers in over 180 countries. diff --git a/docs/src/pages/company/about/about-zh.md b/docs/src/pages/company/about/about-zh.md new file mode 100644 index 00000000000000..a3b29726021227 --- /dev/null +++ b/docs/src/pages/company/about/about-zh.md @@ -0,0 +1,21 @@ +# About Us + +

We’re on a mission to make building UIs with React fun.

+ +## Our Mission + +Our company is focused on making React UIs development easier, better, and accessible to more people. We build open source and commercial tools used by many hundreds of thousands of developers in production. We're proud not only of the products we make, but also the community and partnerships we've cultivated with other developers and companies. + +## Our Vision + +Our vision is to provide React components for faster and easier web development. [Read more](/discover-more/vision/). + +## Our Values + +Our core values include transparency (our work is public most of the time); creating a safe, high-trust team; building incredible developer experiences; maintaining a healthy working environment; and helping to deliver web experiences that feel amazing to use on every device and connection type. + +## Our Story + +Material-UI started back in 2014 to unify React and Material Design. + +Today, Material-UI has grown to become one of the world's most popular React UI libraries – backed by a vibrant community of more than 1M developers in over 180 countries. diff --git a/docs/src/pages/company/contact/contact-aa.md b/docs/src/pages/company/contact/contact-aa.md new file mode 100644 index 00000000000000..78d1760b5d9de9 --- /dev/null +++ b/docs/src/pages/company/contact/contact-aa.md @@ -0,0 +1,9 @@ +# crwdns107555:0crwdne107555:0 + +

crwdns107557:0crwdne107557:0

+ +crwdns107559:0crwdne107559:0 + +- [crwdns107563:0crwdne107563:0](crwdns107561:0crwdne107561:0) +- crwdns107565:0crwdne107565:0 +- crwdns107567:0crwdne107567:0 diff --git a/docs/src/pages/company/contact/contact-de.md b/docs/src/pages/company/contact/contact-de.md new file mode 100644 index 00000000000000..6bef4930784bba --- /dev/null +++ b/docs/src/pages/company/contact/contact-de.md @@ -0,0 +1,9 @@ +# Contact Us + +

We’re all ears.

+ +Please choose a topic below related to your inquiry: + +- [Help & Support](/getting-started/support/) +- Email enquiries: [contact@material-ui.com](mailto:contact@material-ui.com) +- Our address:

**Material-UI SAS**
128 rue de la boetie
75008 Paris
France diff --git a/docs/src/pages/company/contact/contact-es.md b/docs/src/pages/company/contact/contact-es.md new file mode 100644 index 00000000000000..6bef4930784bba --- /dev/null +++ b/docs/src/pages/company/contact/contact-es.md @@ -0,0 +1,9 @@ +# Contact Us + +

We’re all ears.

+ +Please choose a topic below related to your inquiry: + +- [Help & Support](/getting-started/support/) +- Email enquiries: [contact@material-ui.com](mailto:contact@material-ui.com) +- Our address:

**Material-UI SAS**
128 rue de la boetie
75008 Paris
France diff --git a/docs/src/pages/company/contact/contact-fr.md b/docs/src/pages/company/contact/contact-fr.md new file mode 100644 index 00000000000000..6bef4930784bba --- /dev/null +++ b/docs/src/pages/company/contact/contact-fr.md @@ -0,0 +1,9 @@ +# Contact Us + +

We’re all ears.

+ +Please choose a topic below related to your inquiry: + +- [Help & Support](/getting-started/support/) +- Email enquiries: [contact@material-ui.com](mailto:contact@material-ui.com) +- Our address:

**Material-UI SAS**
128 rue de la boetie
75008 Paris
France diff --git a/docs/src/pages/company/contact/contact-ja.md b/docs/src/pages/company/contact/contact-ja.md new file mode 100644 index 00000000000000..6bef4930784bba --- /dev/null +++ b/docs/src/pages/company/contact/contact-ja.md @@ -0,0 +1,9 @@ +# Contact Us + +

We’re all ears.

+ +Please choose a topic below related to your inquiry: + +- [Help & Support](/getting-started/support/) +- Email enquiries: [contact@material-ui.com](mailto:contact@material-ui.com) +- Our address:

**Material-UI SAS**
128 rue de la boetie
75008 Paris
France diff --git a/docs/src/pages/company/contact/contact-pt.md b/docs/src/pages/company/contact/contact-pt.md new file mode 100644 index 00000000000000..6bef4930784bba --- /dev/null +++ b/docs/src/pages/company/contact/contact-pt.md @@ -0,0 +1,9 @@ +# Contact Us + +

We’re all ears.

+ +Please choose a topic below related to your inquiry: + +- [Help & Support](/getting-started/support/) +- Email enquiries: [contact@material-ui.com](mailto:contact@material-ui.com) +- Our address:

**Material-UI SAS**
128 rue de la boetie
75008 Paris
France diff --git a/docs/src/pages/company/contact/contact-ru.md b/docs/src/pages/company/contact/contact-ru.md new file mode 100644 index 00000000000000..6bef4930784bba --- /dev/null +++ b/docs/src/pages/company/contact/contact-ru.md @@ -0,0 +1,9 @@ +# Contact Us + +

We’re all ears.

+ +Please choose a topic below related to your inquiry: + +- [Help & Support](/getting-started/support/) +- Email enquiries: [contact@material-ui.com](mailto:contact@material-ui.com) +- Our address:

**Material-UI SAS**
128 rue de la boetie
75008 Paris
France diff --git a/docs/src/pages/company/contact/contact-zh.md b/docs/src/pages/company/contact/contact-zh.md new file mode 100644 index 00000000000000..6bef4930784bba --- /dev/null +++ b/docs/src/pages/company/contact/contact-zh.md @@ -0,0 +1,9 @@ +# Contact Us + +

We’re all ears.

+ +Please choose a topic below related to your inquiry: + +- [Help & Support](/getting-started/support/) +- Email enquiries: [contact@material-ui.com](mailto:contact@material-ui.com) +- Our address:

**Material-UI SAS**
128 rue de la boetie
75008 Paris
France diff --git a/docs/src/pages/components/alert/alert-aa.md b/docs/src/pages/components/alert/alert-aa.md new file mode 100644 index 00000000000000..ea07750206b4e2 --- /dev/null +++ b/docs/src/pages/components/alert/alert-aa.md @@ -0,0 +1,76 @@ +--- +title: crwdns107401:0crwdne107401:0 +components: crwdns107403:0crwdne107403:0 +--- + +# crwdns107405:0crwdne107405:0 + +

crwdns107407:0crwdne107407:0

+ +## crwdns107409:0crwdne107409:0 + +crwdns107411:0crwdne107411:0 + +crwdns107413:0crwdne107413:0 + +## crwdns107415:0crwdne107415:0 + +crwdns107417:0crwdne107417:0 + +crwdns107419:0crwdne107419:0 + +## crwdns107421:0crwdne107421:0 + +crwdns107423:0crwdne107423:0 crwdns107425:0crwdne107425:0 + +crwdns107427:0crwdne107427:0 crwdns107429:0crwdne107429:0 + +crwdns107431:0crwdne107431:0 + +### crwdns107433:0crwdne107433:0 + +crwdns107435:0crwdne107435:0 + +crwdns107437:0crwdne107437:0 + +## crwdns107439:0crwdne107439:0 + +crwdns107441:0crwdne107441:0 crwdns107443:0crwdne107443:0 + +crwdns107445:0crwdne107445:0 crwdns107447:0crwdne107447:0 + +crwdns107449:0crwdne107449:0 + +crwdns107451:0crwdne107451:0 + +## crwdns107453:0crwdne107453:0 + +crwdns107455:0crwdne107455:0 + +### crwdns107457:0crwdne107457:0 + +crwdns107459:0crwdne107459:0 + +### crwdns107461:0crwdne107461:0 + +crwdns107463:0crwdne107463:0 + +## crwdns107465:0crwdne107465:0 + +crwdns107467:0crwdne107467:0 + +## crwdns107469:0crwdne107469:0 + +crwdns107471:0crwdne107471:0 + +crwdns107473:0crwdne107473:0 + +## crwdns107475:0crwdne107475:0 + +crwdns107477:0crwdne107477:0 + +crwdns107479:0crwdne107479:0 crwdns107481:0crwdne107481:0 + +crwdns107483:0crwdne107483:0 crwdns107485:0crwdne107485:0 + +crwdns107487:0crwdne107487:0 diff --git a/docs/src/pages/components/alert/alert-de.md b/docs/src/pages/components/alert/alert-de.md new file mode 100644 index 00000000000000..92c0afcdbbbe66 --- /dev/null +++ b/docs/src/pages/components/alert/alert-de.md @@ -0,0 +1,76 @@ +--- +title: Alert React component +components: Alert +--- + +# Alert + +

An alert displays a short, important message in a way that attracts the user's attention without interrupting the user's task.

+ +## Simple alerts + +The alert offers four severity levels that set a distinctive icon and color. + +{{"demo": "pages/components/alert/SimpleAlerts.js"}} + +## Beschreibung + +You can use the `AlertTitle` component to display a formatted title above the content. + +{{"demo": "pages/components/alert/DescriptionAlerts.js"}} + +## Actions + +An alert can have an action, such as a close or undo button. It is rendered after the message, at the end of the alert. + +If an `onClose` callback is provided and no `action` prop is set, a close icon is displayed. The `action` prop can be used to provide an alternative action, for example using a Button or IconButton. + +{{"demo": "pages/components/alert/ActionAlerts.js"}} + +### Transition + +You can use a [transition component](/components/transitions/) such as `Collapse` to transition the appearance of the alert. + +{{"demo": "pages/components/alert/TransitionAlerts.js"}} + +## Icons + +The `icon` prop allows you to add an icon to the beginning of the alert component. This will override the default icon for the specified severity. + +You can change the default severity to icon mapping with the `iconMapping` prop. This can be defined globally using [theme customization](/customization/globals/#default-props). + +Setting the icon prop to false will remove the icon altogether. + +{{"demo": "pages/components/alert/IconAlerts.js"}} + +## Varianten + +Two additional variants are available – outlined, and filled: + +### Outlined + +{{"demo": "pages/components/alert/OutlinedAlerts.js"}} + +### Filled + +{{"demo": "pages/components/alert/FilledAlerts.js"}} + +## Toast + +You can use the Snackbar to [display a toast](/components/snackbars/#customized-snackbars) with the Alert. + +## Farbe (Color) + +The `color` prop will override the default color for the specified severity. + +{{"demo": "pages/components/alert/ColorAlerts.js"}} + +## Barrierefreiheit + +(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#alert) + +When the component is dynamically displayed, the content is automatically announced by most screen readers. At this time, screen readers do not inform users of alerts that are present when the page loads. + +Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (for example the visible text), or is included through alternative means, such as additional hidden text. + +Actions must have a tab index of 0 so that they can be reached by keyboard-only users. diff --git a/docs/src/pages/components/alert/alert-es.md b/docs/src/pages/components/alert/alert-es.md new file mode 100644 index 00000000000000..02b2fb037ebbdd --- /dev/null +++ b/docs/src/pages/components/alert/alert-es.md @@ -0,0 +1,76 @@ +--- +title: Alert React component +components: Alert +--- + +# Alert + +

An alert displays a short, important message in a way that attracts the user's attention without interrupting the user's task.

+ +## Simple alerts + +The alert offers four severity levels that set a distinctive icon and color. + +{{"demo": "pages/components/alert/SimpleAlerts.js"}} + +## Descripción + +You can use the `AlertTitle` component to display a formatted title above the content. + +{{"demo": "pages/components/alert/DescriptionAlerts.js"}} + +## Actions + +An alert can have an action, such as a close or undo button. It is rendered after the message, at the end of the alert. + +If an `onClose` callback is provided and no `action` prop is set, a close icon is displayed. The `action` prop can be used to provide an alternative action, for example using a Button or IconButton. + +{{"demo": "pages/components/alert/ActionAlerts.js"}} + +### Transition + +You can use a [transition component](/components/transitions/) such as `Collapse` to transition the appearance of the alert. + +{{"demo": "pages/components/alert/TransitionAlerts.js"}} + +## Iconos + +The `icon` prop allows you to add an icon to the beginning of the alert component. This will override the default icon for the specified severity. + +You can change the default severity to icon mapping with the `iconMapping` prop. This can be defined globally using [theme customization](/customization/globals/#default-props). + +Setting the icon prop to false will remove the icon altogether. + +{{"demo": "pages/components/alert/IconAlerts.js"}} + +## Variants + +Two additional variants are available – outlined, and filled: + +### Outlined + +{{"demo": "pages/components/alert/OutlinedAlerts.js"}} + +### Filled + +{{"demo": "pages/components/alert/FilledAlerts.js"}} + +## Toast + +You can use the Snackbar to [display a toast](/components/snackbars/#customized-snackbars) with the Alert. + +## Color + +The `color` prop will override the default color for the specified severity. + +{{"demo": "pages/components/alert/ColorAlerts.js"}} + +## Accesibilidad + +(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#alert) + +When the component is dynamically displayed, the content is automatically announced by most screen readers. At this time, screen readers do not inform users of alerts that are present when the page loads. + +Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (for example the visible text), or is included through alternative means, such as additional hidden text. + +Actions must have a tab index of 0 so that they can be reached by keyboard-only users. diff --git a/docs/src/pages/components/alert/alert-fr.md b/docs/src/pages/components/alert/alert-fr.md new file mode 100644 index 00000000000000..d17f314325e7af --- /dev/null +++ b/docs/src/pages/components/alert/alert-fr.md @@ -0,0 +1,76 @@ +--- +title: Alert React component +components: Alert +--- + +# Alert + +

An alert displays a short, important message in a way that attracts the user's attention without interrupting the user's task.

+ +## Simple alerts + +The alert offers four severity levels that set a distinctive icon and color. + +{{"demo": "pages/components/alert/SimpleAlerts.js"}} + +## Description + +You can use the `AlertTitle` component to display a formatted title above the content. + +{{"demo": "pages/components/alert/DescriptionAlerts.js"}} + +## Actions + +An alert can have an action, such as a close or undo button. It is rendered after the message, at the end of the alert. + +If an `onClose` callback is provided and no `action` prop is set, a close icon is displayed. The `action` prop can be used to provide an alternative action, for example using a Button or IconButton. + +{{"demo": "pages/components/alert/ActionAlerts.js"}} + +### Transition + +You can use a [transition component](/components/transitions/) such as `Collapse` to transition the appearance of the alert. + +{{"demo": "pages/components/alert/TransitionAlerts.js"}} + +## Icônes + +The `icon` prop allows you to add an icon to the beginning of the alert component. This will override the default icon for the specified severity. + +You can change the default severity to icon mapping with the `iconMapping` prop. This can be defined globally using [theme customization](/customization/globals/#default-props). + +Setting the icon prop to false will remove the icon altogether. + +{{"demo": "pages/components/alert/IconAlerts.js"}} + +## Variants + +Two additional variants are available – outlined, and filled: + +### Outlined + +{{"demo": "pages/components/alert/OutlinedAlerts.js"}} + +### Filled + +{{"demo": "pages/components/alert/FilledAlerts.js"}} + +## Toast + +You can use the Snackbar to [display a toast](/components/snackbars/#customized-snackbars) with the Alert. + +## Couleur + +The `color` prop will override the default color for the specified severity. + +{{"demo": "pages/components/alert/ColorAlerts.js"}} + +## Accessibilité + +(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#alert) + +When the component is dynamically displayed, the content is automatically announced by most screen readers. At this time, screen readers do not inform users of alerts that are present when the page loads. + +Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (for example the visible text), or is included through alternative means, such as additional hidden text. + +Actions must have a tab index of 0 so that they can be reached by keyboard-only users. diff --git a/docs/src/pages/components/alert/alert-ja.md b/docs/src/pages/components/alert/alert-ja.md new file mode 100644 index 00000000000000..bb8c7c3ff203a3 --- /dev/null +++ b/docs/src/pages/components/alert/alert-ja.md @@ -0,0 +1,76 @@ +--- +title: Alert React component +components: Alert +--- + +# Alert + +

An alert displays a short, important message in a way that attracts the user's attention without interrupting the user's task.

+ +## Simple alerts + +The alert offers four severity levels that set a distinctive icon and color. + +{{"demo": "pages/components/alert/SimpleAlerts.js"}} + +## Description + +You can use the `AlertTitle` component to display a formatted title above the content. + +{{"demo": "pages/components/alert/DescriptionAlerts.js"}} + +## Actions + +An alert can have an action, such as a close or undo button. It is rendered after the message, at the end of the alert. + +If an `onClose` callback is provided and no `action` prop is set, a close icon is displayed. The `action` prop can be used to provide an alternative action, for example using a Button or IconButton. + +{{"demo": "pages/components/alert/ActionAlerts.js"}} + +### Transition + +You can use a [transition component](/components/transitions/) such as `Collapse` to transition the appearance of the alert. + +{{"demo": "pages/components/alert/TransitionAlerts.js"}} + +## アイコン + +The `icon` prop allows you to add an icon to the beginning of the alert component. This will override the default icon for the specified severity. + +You can change the default severity to icon mapping with the `iconMapping` prop. This can be defined globally using [theme customization](/customization/globals/#default-props). + +Setting the icon prop to false will remove the icon altogether. + +{{"demo": "pages/components/alert/IconAlerts.js"}} + +## バリアント + +Two additional variants are available – outlined, and filled: + +### Outlined + +{{"demo": "pages/components/alert/OutlinedAlerts.js"}} + +### Filled + +{{"demo": "pages/components/alert/FilledAlerts.js"}} + +## Toast + +You can use the Snackbar to [display a toast](/components/snackbars/#customized-snackbars) with the Alert. + +## カラー + +The `color` prop will override the default color for the specified severity. + +{{"demo": "pages/components/alert/ColorAlerts.js"}} + +## アクセシビリティ + +(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#alert) + +When the component is dynamically displayed, the content is automatically announced by most screen readers. At this time, screen readers do not inform users of alerts that are present when the page loads. + +Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (for example the visible text), or is included through alternative means, such as additional hidden text. + +Actions must have a tab index of 0 so that they can be reached by keyboard-only users. diff --git a/docs/src/pages/components/alert/alert-pt.md b/docs/src/pages/components/alert/alert-pt.md new file mode 100644 index 00000000000000..356f4b0e0679c1 --- /dev/null +++ b/docs/src/pages/components/alert/alert-pt.md @@ -0,0 +1,76 @@ +--- +title: Alert React component +components: Alert +--- + +# Alert + +

An alert displays a short, important message in a way that attracts the user's attention without interrupting the user's task.

+ +## Simple alerts + +The alert offers four severity levels that set a distinctive icon and color. + +{{"demo": "pages/components/alert/SimpleAlerts.js"}} + +## Descrição + +You can use the `AlertTitle` component to display a formatted title above the content. + +{{"demo": "pages/components/alert/DescriptionAlerts.js"}} + +## Actions + +An alert can have an action, such as a close or undo button. It is rendered after the message, at the end of the alert. + +If an `onClose` callback is provided and no `action` prop is set, a close icon is displayed. The `action` prop can be used to provide an alternative action, for example using a Button or IconButton. + +{{"demo": "pages/components/alert/ActionAlerts.js"}} + +### Transition + +You can use a [transition component](/components/transitions/) such as `Collapse` to transition the appearance of the alert. + +{{"demo": "pages/components/alert/TransitionAlerts.js"}} + +## Ícones + +The `icon` prop allows you to add an icon to the beginning of the alert component. This will override the default icon for the specified severity. + +You can change the default severity to icon mapping with the `iconMapping` prop. This can be defined globally using [theme customization](/customization/globals/#default-props). + +Setting the icon prop to false will remove the icon altogether. + +{{"demo": "pages/components/alert/IconAlerts.js"}} + +## Variantes + +Two additional variants are available – outlined, and filled: + +### Outlined + +{{"demo": "pages/components/alert/OutlinedAlerts.js"}} + +### Filled + +{{"demo": "pages/components/alert/FilledAlerts.js"}} + +## Toast + +You can use the Snackbar to [display a toast](/components/snackbars/#customized-snackbars) with the Alert. + +## Cor + +The `color` prop will override the default color for the specified severity. + +{{"demo": "pages/components/alert/ColorAlerts.js"}} + +## Acessibilidade + +(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#alert) + +When the component is dynamically displayed, the content is automatically announced by most screen readers. At this time, screen readers do not inform users of alerts that are present when the page loads. + +Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (for example the visible text), or is included through alternative means, such as additional hidden text. + +Actions must have a tab index of 0 so that they can be reached by keyboard-only users. diff --git a/docs/src/pages/components/alert/alert-ru.md b/docs/src/pages/components/alert/alert-ru.md new file mode 100644 index 00000000000000..f9d474331edd5b --- /dev/null +++ b/docs/src/pages/components/alert/alert-ru.md @@ -0,0 +1,76 @@ +--- +title: Alert React component +components: Alert +--- + +# Alert + +

An alert displays a short, important message in a way that attracts the user's attention without interrupting the user's task.

+ +## Simple alerts + +The alert offers four severity levels that set a distinctive icon and color. + +{{"demo": "pages/components/alert/SimpleAlerts.js"}} + +## Описание + +You can use the `AlertTitle` component to display a formatted title above the content. + +{{"demo": "pages/components/alert/DescriptionAlerts.js"}} + +## Actions + +An alert can have an action, such as a close or undo button. It is rendered after the message, at the end of the alert. + +If an `onClose` callback is provided and no `action` prop is set, a close icon is displayed. The `action` prop can be used to provide an alternative action, for example using a Button or IconButton. + +{{"demo": "pages/components/alert/ActionAlerts.js"}} + +### Transition + +You can use a [transition component](/components/transitions/) such as `Collapse` to transition the appearance of the alert. + +{{"demo": "pages/components/alert/TransitionAlerts.js"}} + +## Иконки + +The `icon` prop allows you to add an icon to the beginning of the alert component. This will override the default icon for the specified severity. + +You can change the default severity to icon mapping with the `iconMapping` prop. This can be defined globally using [theme customization](/customization/globals/#default-props). + +Setting the icon prop to false will remove the icon altogether. + +{{"demo": "pages/components/alert/IconAlerts.js"}} + +## Variants + +Two additional variants are available – outlined, and filled: + +### Outlined + +{{"demo": "pages/components/alert/OutlinedAlerts.js"}} + +### Filled + +{{"demo": "pages/components/alert/FilledAlerts.js"}} + +## Toast + +You can use the Snackbar to [display a toast](/components/snackbars/#customized-snackbars) with the Alert. + +## Цвет + +The `color` prop will override the default color for the specified severity. + +{{"demo": "pages/components/alert/ColorAlerts.js"}} + +## Доступность + +(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#alert) + +When the component is dynamically displayed, the content is automatically announced by most screen readers. At this time, screen readers do not inform users of alerts that are present when the page loads. + +Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (for example the visible text), or is included through alternative means, such as additional hidden text. + +Actions must have a tab index of 0 so that they can be reached by keyboard-only users. diff --git a/docs/src/pages/components/alert/alert-zh.md b/docs/src/pages/components/alert/alert-zh.md new file mode 100644 index 00000000000000..c092878cd75771 --- /dev/null +++ b/docs/src/pages/components/alert/alert-zh.md @@ -0,0 +1,76 @@ +--- +title: Alert React component +components: Alert +--- + +# Alert + +

An alert displays a short, important message in a way that attracts the user's attention without interrupting the user's task.

+ +## Simple alerts + +The alert offers four severity levels that set a distinctive icon and color. + +{{"demo": "pages/components/alert/SimpleAlerts.js"}} + +## 描述 + +You can use the `AlertTitle` component to display a formatted title above the content. + +{{"demo": "pages/components/alert/DescriptionAlerts.js"}} + +## Actions + +An alert can have an action, such as a close or undo button. It is rendered after the message, at the end of the alert. + +If an `onClose` callback is provided and no `action` prop is set, a close icon is displayed. The `action` prop can be used to provide an alternative action, for example using a Button or IconButton. + +{{"demo": "pages/components/alert/ActionAlerts.js"}} + +### Transition + +You can use a [transition component](/components/transitions/) such as `Collapse` to transition the appearance of the alert. + +{{"demo": "pages/components/alert/TransitionAlerts.js"}} + +## Icons(图标) + +The `icon` prop allows you to add an icon to the beginning of the alert component. This will override the default icon for the specified severity. + +You can change the default severity to icon mapping with the `iconMapping` prop. This can be defined globally using [theme customization](/customization/globals/#default-props). + +Setting the icon prop to false will remove the icon altogether. + +{{"demo": "pages/components/alert/IconAlerts.js"}} + +## 变种(Variants) + +Two additional variants are available – outlined, and filled: + +### Outlined + +{{"demo": "pages/components/alert/OutlinedAlerts.js"}} + +### Filled + +{{"demo": "pages/components/alert/FilledAlerts.js"}} + +## Toast + +You can use the Snackbar to [display a toast](/components/snackbars/#customized-snackbars) with the Alert. + +## 颜色 + +The `color` prop will override the default color for the specified severity. + +{{"demo": "pages/components/alert/ColorAlerts.js"}} + +## 可访问性 + +(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#alert) + +When the component is dynamically displayed, the content is automatically announced by most screen readers. At this time, screen readers do not inform users of alerts that are present when the page loads. + +Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (for example the visible text), or is included through alternative means, such as additional hidden text. + +Actions must have a tab index of 0 so that they can be reached by keyboard-only users. diff --git a/docs/src/pages/components/app-bar/app-bar-aa.md b/docs/src/pages/components/app-bar/app-bar-aa.md index 1675f6c0dc877f..c79e7a122065ab 100644 --- a/docs/src/pages/components/app-bar/app-bar-aa.md +++ b/docs/src/pages/components/app-bar/app-bar-aa.md @@ -43,7 +43,7 @@ crwdns105195:0crwdne105195:0 ## crwdns103902:0crwdne103902:0 -crwdns103904:0crwdne103904:0 +crwdns107349:0crwdne107349:0 ## crwdns103906:0crwdne103906:0 @@ -70,19 +70,19 @@ crwdns103928:0crwdne103928:0 crwdns103930:0crwdne103930:0 -crwdns103932:0crwdne103932:0 +crwdns107351:0crwdne107351:0 ### crwdns89194:0crwdne89194:0 crwdns103934:0crwdne103934:0 -crwdns103936:0crwdne103936:0 +crwdns107353:0crwdne107353:0 ### crwdns100438:0crwdne100438:0 crwdns103938:0crwdne103938:0 -crwdns103940:0crwdne103940:0 +crwdns107355:0crwdne107355:0 ### `crwdns100444:0[options]crwdne100444:0` diff --git a/docs/src/pages/components/app-bar/app-bar-de.md b/docs/src/pages/components/app-bar/app-bar-de.md index 92f33713194bdd..17bfcc84614a45 100644 --- a/docs/src/pages/components/app-bar/app-bar-de.md +++ b/docs/src/pages/components/app-bar/app-bar-de.md @@ -43,7 +43,7 @@ A prominent app bar. ## Untere App-Bar -{{"demo": "pages/components/app-bar/BottomAppBar.js", "iframe": true, "maxWidth": 500}} +{{"demo": "pages/components/app-bar/BottomAppBar.js", "iframe": true, "maxWidth": 400}} ## Fixed placement @@ -93,19 +93,19 @@ Sie können den Hook `useScrollTrigger ()`, um auf Bildlauf Aktionen zu reagiere The app bar hides on scroll down to leave more space for reading. -{{"demo": "pages/components/app-bar/HideAppBar.js", "iframe": true, "maxWidth": 500}} +{{"demo": "pages/components/app-bar/HideAppBar.js", "iframe": true}} ### App-Bar anheben The app bar elevates on scroll to communicate that the user is not at the top of the page. -{{"demo": "pages/components/app-bar/ElevateAppBar.js", "iframe": true, "maxWidth": 500}} +{{"demo": "pages/components/app-bar/ElevateAppBar.js", "iframe": true}} ### Back to top A floating action buttons appears on scroll to make it easy to get back to the top of the page. -{{"demo": "pages/components/app-bar/BackToTop.js", "iframe": true, "maxWidth": 500}} +{{"demo": "pages/components/app-bar/BackToTop.js", "iframe": true}} ### `useScrollTrigger([options]) => trigger` diff --git a/docs/src/pages/components/app-bar/app-bar-es.md b/docs/src/pages/components/app-bar/app-bar-es.md index c67d4178d6f109..d7e0c480239893 100644 --- a/docs/src/pages/components/app-bar/app-bar-es.md +++ b/docs/src/pages/components/app-bar/app-bar-es.md @@ -43,7 +43,7 @@ Un App Bar prominente. ## App bar en pie de página -{{"demo": "pages/components/app-bar/BottomAppBar.js", "iframe": true, "maxWidth": 500}} +{{"demo": "pages/components/app-bar/BottomAppBar.js", "iframe": true, "maxWidth": 400}} ## Posición Fija @@ -93,19 +93,19 @@ Puede usar el `useScrollTrigger ()` para responder a las acciones de desplazamie La barra de aplicaciones se oculta al desplazarse hacia abajo para dejar más espacio para leer. -{{"demo": "pages/components/app-bar/HideAppBar.js", "iframe": true, "maxWidth": 500}} +{{"demo": "pages/components/app-bar/HideAppBar.js", "iframe": true}} ### Elevar App Bar La barra de la aplicación se eleva al desplazarse para comunicar que el usuario no está en la parte superior de la página. -{{"demo": "pages/components/app-bar/ElevateAppBar.js", "iframe": true, "maxWidth": 500}} +{{"demo": "pages/components/app-bar/ElevateAppBar.js", "iframe": true}} ### Ir arriba Aparece un botón de acción flotante al desplazarse para que sea fácil volver a la parte superior de la página. -{{"demo": "pages/components/app-bar/BackToTop.js", "iframe": true, "maxWidth": 500}} +{{"demo": "pages/components/app-bar/BackToTop.js", "iframe": true}} ### `useScrollTrigger([options]) => trigger` diff --git a/docs/src/pages/components/app-bar/app-bar-fr.md b/docs/src/pages/components/app-bar/app-bar-fr.md index 62d776852841f7..e8fd6c80f581fc 100644 --- a/docs/src/pages/components/app-bar/app-bar-fr.md +++ b/docs/src/pages/components/app-bar/app-bar-fr.md @@ -43,7 +43,7 @@ A prominent app bar. ## Barre inférieure -{{"demo": "pages/components/app-bar/BottomAppBar.js", "iframe": true, "maxWidth": 500}} +{{"demo": "pages/components/app-bar/BottomAppBar.js", "iframe": true, "maxWidth": 400}} ## Fixed placement @@ -93,19 +93,19 @@ You can use the `useScrollTrigger()` hook to respond to user scroll actions. The app bar hides on scroll down to leave more space for reading. -{{"demo": "pages/components/app-bar/HideAppBar.js", "iframe": true, "maxWidth": 500}} +{{"demo": "pages/components/app-bar/HideAppBar.js", "iframe": true}} ### Barre d'application élevable The app bar elevates on scroll to communicate that the user is not at the top of the page. -{{"demo": "pages/components/app-bar/ElevateAppBar.js", "iframe": true, "maxWidth": 500}} +{{"demo": "pages/components/app-bar/ElevateAppBar.js", "iframe": true}} ### Back to top A floating action buttons appears on scroll to make it easy to get back to the top of the page. -{{"demo": "pages/components/app-bar/BackToTop.js", "iframe": true, "maxWidth": 500}} +{{"demo": "pages/components/app-bar/BackToTop.js", "iframe": true}} ### `useScrollTrigger([options]) => trigger` diff --git a/docs/src/pages/components/app-bar/app-bar-ja.md b/docs/src/pages/components/app-bar/app-bar-ja.md index ffdb31d438e3b5..e7e47d061717ac 100644 --- a/docs/src/pages/components/app-bar/app-bar-ja.md +++ b/docs/src/pages/components/app-bar/app-bar-ja.md @@ -43,7 +43,7 @@ A prominent app bar. ## 下部アプリバー -{{"demo": "pages/components/app-bar/BottomAppBar.js", "iframe": true, "maxWidth": 500}} +{{"demo": "pages/components/app-bar/BottomAppBar.js", "iframe": true, "maxWidth": 400}} ## ラベルの配置 @@ -93,19 +93,19 @@ function App() { アプリバーは下にスクロールすると非表示になり、読み込めるスペースが増えます。 -{{"demo": "pages/components/app-bar/HideAppBar.js", "iframe": true, "maxWidth": 500}} +{{"demo": "pages/components/app-bar/HideAppBar.js", "iframe": true}} ### App Barを固定する アプリバーはスクロール時に上昇し、ユーザーがページの上部にいないことを伝えます。 -{{"demo": "pages/components/app-bar/ElevateAppBar.js", "iframe": true, "maxWidth": 500}} +{{"demo": "pages/components/app-bar/ElevateAppBar.js", "iframe": true}} ### トップへ戻る スクロール時にフローティングアクションボタンが表示され、ページの上部に簡単に戻ることができます。 -{{"demo": "pages/components/app-bar/BackToTop.js", "iframe": true, "maxWidth": 500}} +{{"demo": "pages/components/app-bar/BackToTop.js", "iframe": true}} ### `useScrollTrigger([options]) => trigger` diff --git a/docs/src/pages/components/app-bar/app-bar-pt.md b/docs/src/pages/components/app-bar/app-bar-pt.md index dff04cb156dad7..23339731a04819 100644 --- a/docs/src/pages/components/app-bar/app-bar-pt.md +++ b/docs/src/pages/components/app-bar/app-bar-pt.md @@ -43,7 +43,7 @@ Uma barra de aplicativos proeminente. ## Barra de Aplicativos inferior -{{"demo": "pages/components/app-bar/BottomAppBar.js", "iframe": true, "maxWidth": 500}} +{{"demo": "pages/components/app-bar/BottomAppBar.js", "iframe": true, "maxWidth": 400}} ## Local de filtros @@ -93,19 +93,19 @@ Você pode usar o hook `useScrollTrigger()` para responder às ações de rolage A barra de aplicativos sumirá ao descer a página para deixar mais espaço de leitura. -{{"demo": "pages/components/app-bar/HideAppBar.js", "iframe": true, "maxWidth": 500}} +{{"demo": "pages/components/app-bar/HideAppBar.js", "iframe": true}} ### Barra de aplicativos elevada A barra de aplicativos eleva-se na rolagem para comunicar que o usuário não está na parte superior da página. -{{"demo": "pages/components/app-bar/ElevateAppBar.js", "iframe": true, "maxWidth": 500}} +{{"demo": "pages/components/app-bar/ElevateAppBar.js", "iframe": true}} ### Voltar ao topo Um botão de ação flutuante aparece na rolagem para facilitar o retorno ao topo da página. -{{"demo": "pages/components/app-bar/BackToTop.js", "iframe": true, "maxWidth": 500}} +{{"demo": "pages/components/app-bar/BackToTop.js", "iframe": true}} ### `useScrollTrigger([options]) => trigger` diff --git a/docs/src/pages/components/app-bar/app-bar-ru.md b/docs/src/pages/components/app-bar/app-bar-ru.md index fbe952b27e011c..3108aef790070c 100644 --- a/docs/src/pages/components/app-bar/app-bar-ru.md +++ b/docs/src/pages/components/app-bar/app-bar-ru.md @@ -43,7 +43,7 @@ components: AppBar, Toolbar, Menu ## Нижняя панели навигации -{{"demo": "pages/components/app-bar/BottomAppBar.js", "iframe": true, "maxWidth": 500}} +{{"demo": "pages/components/app-bar/BottomAppBar.js", "iframe": true, "maxWidth": 400}} ## Фиксированное положение @@ -93,19 +93,19 @@ function App() { Панель навигации прячется при прокрутке вниз, освобождая место для чтения. -{{"demo": "pages/components/app-bar/HideAppBar.js", "iframe": true, "maxWidth": 500}} +{{"demo": "pages/components/app-bar/HideAppBar.js", "iframe": true}} ### Надвинуть панель навигации Панель навигации наползает на содержимое при прокрутке, сообщая пользователю, что он находится не в начале страницы. -{{"demo": "pages/components/app-bar/ElevateAppBar.js", "iframe": true, "maxWidth": 500}} +{{"demo": "pages/components/app-bar/ElevateAppBar.js", "iframe": true}} ### Вернуться в начало страницы Плавающая кнопка появляется при прокрутке, позволяя легко вернуться в начало страницы. -{{"demo": "pages/components/app-bar/BackToTop.js", "iframe": true, "maxWidth": 500}} +{{"demo": "pages/components/app-bar/BackToTop.js", "iframe": true}} ### `useScrollTrigger ([options]) => триггер` diff --git a/docs/src/pages/components/app-bar/app-bar-zh.md b/docs/src/pages/components/app-bar/app-bar-zh.md index 51af7472b05952..3b8ce8bb1e9450 100644 --- a/docs/src/pages/components/app-bar/app-bar-zh.md +++ b/docs/src/pages/components/app-bar/app-bar-zh.md @@ -43,7 +43,7 @@ components: AppBar, Toolbar, Menu ## 底部应用栏 -{{"demo": "pages/components/app-bar/BottomAppBar.js", "iframe": true, "maxWidth": 500}} +{{"demo": "pages/components/app-bar/BottomAppBar.js", "iframe": true, "maxWidth": 400}} ## 固定放置 @@ -93,19 +93,19 @@ function App() { 当向下滚动时,应用栏将会隐藏,这样一来会留有更多的空间进行阅读。 -{{"demo": "pages/components/app-bar/HideAppBar.js", "iframe": true, "maxWidth": 500}} +{{"demo": "pages/components/app-bar/HideAppBar.js", "iframe": true}} ### 变高的应用栏 The app bar elevates on scroll to communicate that the user is not at the top of the page. -{{"demo": "pages/components/app-bar/ElevateAppBar.js", "iframe": true, "maxWidth": 500}} +{{"demo": "pages/components/app-bar/ElevateAppBar.js", "iframe": true}} ### 回到顶部 在滚动的时候,会出现一个浮动操作按钮,这样以便于返回页面的顶部。 -{{"demo": "pages/components/app-bar/BackToTop.js", "iframe": true, "maxWidth": 500}} +{{"demo": "pages/components/app-bar/BackToTop.js", "iframe": true}} ### `useScrollTrigger([options]) => trigger` diff --git a/docs/src/pages/components/autocomplete/autocomplete-aa.md b/docs/src/pages/components/autocomplete/autocomplete-aa.md index 061f9198a553fb..f10fb45a6db557 100644 --- a/docs/src/pages/components/autocomplete/autocomplete-aa.md +++ b/docs/src/pages/components/autocomplete/autocomplete-aa.md @@ -78,7 +78,7 @@ crwdns104958:0crwdne104958:0 ## crwdns104554:0crwdne104554:0 -crwdns104962:0crwdne104962:0 +crwdns107221:0crwdne107221:0 crwdns104964:0crwdne104964:0 diff --git a/docs/src/pages/components/autocomplete/autocomplete-de.md b/docs/src/pages/components/autocomplete/autocomplete-de.md index fb8a86da14253c..badd4943767da9 100644 --- a/docs/src/pages/components/autocomplete/autocomplete-de.md +++ b/docs/src/pages/components/autocomplete/autocomplete-de.md @@ -78,7 +78,7 @@ For this demo, we need to load the [Google Maps JavaScript](https://developers.g ## Multiple values -Also knowned as tags, the user is allowed to enter more than 1 value. +Also known as tags, the user is allowed to enter more than one value. {{"demo": "pages/components/autocomplete/Tags.js"}} diff --git a/docs/src/pages/components/autocomplete/autocomplete-es.md b/docs/src/pages/components/autocomplete/autocomplete-es.md index d71bb1fdecdd8e..1587d5f6fe0357 100644 --- a/docs/src/pages/components/autocomplete/autocomplete-es.md +++ b/docs/src/pages/components/autocomplete/autocomplete-es.md @@ -78,7 +78,7 @@ For this demo, we need to load the [Google Maps JavaScript](https://developers.g ## Multiple values -Also knowned as tags, the user is allowed to enter more than 1 value. +Also known as tags, the user is allowed to enter more than one value. {{"demo": "pages/components/autocomplete/Tags.js"}} diff --git a/docs/src/pages/components/autocomplete/autocomplete-fr.md b/docs/src/pages/components/autocomplete/autocomplete-fr.md index 5f27378e25741a..cc1174cc21c37d 100644 --- a/docs/src/pages/components/autocomplete/autocomplete-fr.md +++ b/docs/src/pages/components/autocomplete/autocomplete-fr.md @@ -78,7 +78,7 @@ For this demo, we need to load the [Google Maps JavaScript](https://developers.g ## Multiple values -Also knowned as tags, the user is allowed to enter more than 1 value. +Also known as tags, the user is allowed to enter more than one value. {{"demo": "pages/components/autocomplete/Tags.js"}} diff --git a/docs/src/pages/components/autocomplete/autocomplete-ja.md b/docs/src/pages/components/autocomplete/autocomplete-ja.md index fb05181b9e13d7..2e493e5c7a27e5 100644 --- a/docs/src/pages/components/autocomplete/autocomplete-ja.md +++ b/docs/src/pages/components/autocomplete/autocomplete-ja.md @@ -78,7 +78,7 @@ For this demo, we need to load the [Google Maps JavaScript](https://developers.g ## Multiple values -Also knowned as tags, the user is allowed to enter more than 1 value. +Also known as tags, the user is allowed to enter more than one value. {{"demo": "pages/components/autocomplete/Tags.js"}} diff --git a/docs/src/pages/components/autocomplete/autocomplete-pt.md b/docs/src/pages/components/autocomplete/autocomplete-pt.md index 9c16b28edb3592..ab39ec4c55949f 100644 --- a/docs/src/pages/components/autocomplete/autocomplete-pt.md +++ b/docs/src/pages/components/autocomplete/autocomplete-pt.md @@ -78,7 +78,7 @@ For this demo, we need to load the [Google Maps JavaScript](https://developers.g ## Multiple values -Also knowned as tags, the user is allowed to enter more than 1 value. +Also known as tags, the user is allowed to enter more than one value. {{"demo": "pages/components/autocomplete/Tags.js"}} diff --git a/docs/src/pages/components/autocomplete/autocomplete-ru.md b/docs/src/pages/components/autocomplete/autocomplete-ru.md index e6ab558be13963..a90cd0e1171cd6 100644 --- a/docs/src/pages/components/autocomplete/autocomplete-ru.md +++ b/docs/src/pages/components/autocomplete/autocomplete-ru.md @@ -1,9 +1,9 @@ --- title: React-компонент Автозаполнение -components: TextField, Popper, автозаполнение +components: TextField, Popper, Autocomplete --- -# Автодополнение +# Autocomplete (Автодополнение)

Автодополнение - это обычный ввод текста, дополненный панелью предлагаемых опций.

@@ -46,13 +46,13 @@ components: TextField, Popper, автозаполнение ## `useAutocomplete` -For advanced customization use cases, we expose a `useAutocomplete()` hook. It accepts almost the same options as the Autocomplete component minus all the props related to the rendering of JSX. The Autocomplete component uses this hook internally. +Для продвинутой кастомизации используйте `useAutocomplete()` хук. It accepts almost the same options as the Autocomplete component minus all the props related to the rendering of JSX. The Autocomplete component uses this hook internally. ```jsx import useAutocomplete from '@material-ui/lab/useAutocomplete'; ``` -- 4.5 [1 кБ в сжатом виде](/size-snapshot). +- 4.5 [4,5 кБ в сжатом виде](/size-snapshot). {{"demo": "pages/components/autocomplete/UseAutocomplete.js", "defaultCodeOpen": false}} @@ -78,7 +78,7 @@ For this demo, we need to load the [Google Maps JavaScript](https://developers.g ## Множественные значения -Также известны как теги. Пользователь может ввести более 1 значения. +Also known as tags, the user is allowed to enter more than one value. {{"demo": "pages/components/autocomplete/Tags.js"}} @@ -112,7 +112,7 @@ The following demo relies on [autosuggest-highlight](https://github.com/moroshko {{"demo": "pages/components/autocomplete/Highlights.js"}} -## Custom filter +## Пользовательский фильтр The component exposes a factory to create a filter method that can provided to the `filerOption` prop. You can use it to change the default option filter behavior. @@ -155,9 +155,9 @@ const filterOptions = (options, { inputValue }) => ``` -## Virtualization +## Виртуализация -Search within 10,000 randomly generated options. The list is virtualized thanks to [react-window](https://github.com/bvaughn/react-window). +Поиск в 10000 случайно сгенерированных опций. Список виртуализирован благодаря [реагирующему окну](https://github.com/bvaughn/react-window). {{"demo": "pages/components/autocomplete/Virtualize.js"}} diff --git a/docs/src/pages/components/autocomplete/autocomplete-zh.md b/docs/src/pages/components/autocomplete/autocomplete-zh.md index f8500e484ba44c..c31e437020a429 100644 --- a/docs/src/pages/components/autocomplete/autocomplete-zh.md +++ b/docs/src/pages/components/autocomplete/autocomplete-zh.md @@ -78,7 +78,7 @@ For this demo, we need to load the [Google Maps JavaScript](https://developers.g ## Multiple values -Also knowned as tags, the user is allowed to enter more than 1 value. +Also known as tags, the user is allowed to enter more than one value. {{"demo": "pages/components/autocomplete/Tags.js"}} @@ -98,7 +98,7 @@ Fancy smaller inputs? Use the `size` prop. {{"demo": "pages/components/autocomplete/Sizes.js"}} -## Customized Autocomplete +## 定制的自动完成组件 This demo reproduces the GitHub's label picker: @@ -106,7 +106,7 @@ This demo reproduces the GitHub's label picker: Head to the [Customized hook](#customized-hook) section for a customization example with the `useAutocomplete` hook instead of the component. -## Highlights +## 高亮 The following demo relies on [autosuggest-highlight](https://github.com/moroshko/autosuggest-highlight), a small (1 kB) utility for highlighting text in autosuggest and autocomplete components. diff --git a/docs/src/pages/components/avatars/avatars-ru.md b/docs/src/pages/components/avatars/avatars-ru.md index 7f928a7d89202a..eebaf7fb05d096 100644 --- a/docs/src/pages/components/avatars/avatars-ru.md +++ b/docs/src/pages/components/avatars/avatars-ru.md @@ -9,19 +9,19 @@ components: Avatar, AvatarGroup, Badge ## Аватары изображений -Image avatars can be created by passing standard `img` props `src` or `srcSet` to the component. +Аватары можно создать, передав стандартные свойства компонента `img`, такие как `src` или `srcSet`. {{"demo": "pages/components/avatars/ImageAvatars.js"}} ## Буквенные аватары -Avatars containing simple characters can be created by passing a string as `children`. +Аватары, содержащие простые символы, можно создать, передав вашу строку как `children`. {{"demo": "pages/components/avatars/LetterAvatars.js"}} ## Размеры -You can change the size of the avatar with the `height` and `width` CSS properties. +Вы можете изменить размер аватара используя `height` и `width` свойств CSS. {{"demo": "pages/components/avatars/SizeAvatars.js"}} @@ -33,7 +33,7 @@ You can change the size of the avatar with the `height` and `width` CSS properti ## Variants -If you need square or rounded avatars, use the `variant` prop. +Если вам нужны квадратные или округлые аватары, используйте проп `variant`. {{"demo": "pages/components/avatars/VariantAvatars.js"}} @@ -49,10 +49,10 @@ If there is an error loading the avatar image, the component falls back to an al ## Сгруппированные -`AvatarGroup` renders its children as a stack. +`AvatarGroup` отображает дочерние элементы в виде стека. {{"demo": "pages/components/avatars/GroupAvatars.js"}} -## With badge +## Со значком {{"demo": "pages/components/avatars/BadgeAvatars.js"}} \ No newline at end of file diff --git a/docs/src/pages/components/backdrop/backdrop-zh.md b/docs/src/pages/components/backdrop/backdrop-zh.md index cd56bf3c6ecc11..b5428df360616b 100644 --- a/docs/src/pages/components/backdrop/backdrop-zh.md +++ b/docs/src/pages/components/backdrop/backdrop-zh.md @@ -5,8 +5,8 @@ components: Backdrop # Backdrop -

The backdrop component is used to provide emphasis on a particular element or parts of it.

+

Backdrop 组件用于提供对特定元素或其部分的强调。

-The overlay signals to the user of a state change within the application and can be used for creating loaders, dialogs and more. In its simplest form, the backdrop component will add a dimmed layer over your application. +Backdrop 组件向用户展示了应用程序内状态更改的标志,可用于创建加载器、对话框等。 最简单的形式,Backdrop 组件会在您的应用中显示一个暗淡的图层。 {{"demo": "pages/components/backdrop/SimpleBackdrop.js"}} diff --git a/docs/src/pages/components/badges/badges-aa.md b/docs/src/pages/components/badges/badges-aa.md index b83374ee9a1ef1..e3d7ae6aaba4f0 100644 --- a/docs/src/pages/components/badges/badges-aa.md +++ b/docs/src/pages/components/badges/badges-aa.md @@ -7,7 +7,7 @@ components: crwdns89312:0crwdne89312:0

crwdns89316:0crwdne89316:0

-## crwdns89318:0crwdne89318:0 +## crwdns107489:0crwdne107489:0 crwdns89320:0crwdne89320:0 crwdns89322:0crwdne89322:0 @@ -23,30 +23,32 @@ crwdns100714:0crwdne100714:0 crwdns100718:0crwdne100718:0 -crwdns100720:0crwdne100720:0 crwdns100722:0crwdne100722:0 +crwdns107491:0crwdne107491:0 -crwdns100724:0crwdne100724:0 +crwdns107493:0crwdne107493:0 crwdns107495:0crwdne107495:0 -## crwdns100726:0crwdne100726:0 +crwdns107497:0crwdne107497:0 -crwdns100728:0crwdne100728:0 +## crwdns107499:0crwdne107499:0 -crwdns100730:0crwdne100730:0 +crwdns107501:0crwdne107501:0 -## crwdns100732:0crwdne100732:0 +crwdns107503:0crwdne107503:0 -crwdns100734:0crwdne100734:0 crwdns100736:0crwdne100736:0 +## crwdns107505:0crwdne107505:0 -crwdns100738:0crwdne100738:0 +crwdns107507:0crwdne107507:0 crwdns107509:0crwdne107509:0 + +crwdns107511:0crwdne107511:0 ## crwdns100740:0crwdne100740:0 -crwdns100742:0crwdne100742:0 +crwdns107513:0crwdne107513:0 -crwdns100744:0crwdne100744:0 +crwdns107515:0crwdne107515:0 ## crwdns100746:0crwdne100746:0 -crwdns100748:0crwdne100748:0 +crwdns107517:0crwdne107517:0 -crwdns106595:0crwdne106595:0 \ No newline at end of file +crwdns107519:0crwdne107519:0 \ No newline at end of file diff --git a/docs/src/pages/components/badges/badges-de.md b/docs/src/pages/components/badges/badges-de.md index 5d6477277c8b35..39d73dfcda0579 100644 --- a/docs/src/pages/components/badges/badges-de.md +++ b/docs/src/pages/components/badges/badges-de.md @@ -7,7 +7,7 @@ components: Badge

Badge generiert ein kleines Abzeichen an der oberen rechten Ecke seiner Kinder.

-## Einfache Badges +## Basic badges Beispiele für Text Badges in Primär- und Sekundärfarben. The badge is applied to its children. @@ -23,17 +23,19 @@ Hier ist ein Beispiel zum Anpassen der Komponente. You can learn more about this Die Sichtbarkeit von Badges kann über die Eigenschaft `invisible` gesteuert werden. +{{"demo": "pages/components/badges/BadgeVisibility.js"}} + The badge auto hides with badgeContent is zero. You can override this with the `showZero` property. -{{"demo": "pages/components/badges/BadgeVisibility.js"}} +{{"demo": "pages/components/badges/ShowZeroBadge.js"}} -## Maximalwert +## Maximum value -Sie können die Eigenschaft `max` verwenden, um den Wert des Badge-Inhalts zu begrenzen. +You can use the `max` property to cap the value of the badge content. {{"demo": "pages/components/badges/BadgeMax.js"}} -## Punkt-Badge +## Dot badge The `dot` property changes a badge into a small dot. This can be used as a notification that something has changed without giving a count. @@ -47,6 +49,6 @@ You can use the `overlap` property to place the badge relative to the corner of ## Badge alignment -You can use the `horizontalAlignment` and `verticalAlignment` properties to move the badge to any corner of the wrapped element. +You can use the `anchorOrigin` prop to move the badge to any corner of the wrapped element. {{"demo": "pages/components/badges/BadgeAlignment.js", "hideHeader": true}} \ No newline at end of file diff --git a/docs/src/pages/components/badges/badges-es.md b/docs/src/pages/components/badges/badges-es.md index d88192baa6a336..b1682dc66efe68 100644 --- a/docs/src/pages/components/badges/badges-es.md +++ b/docs/src/pages/components/badges/badges-es.md @@ -7,7 +7,7 @@ components: Badge

El componente Badge genera un pequeño badge en la esquina superior derecha de su(s) hijo(s).

-## Emblemas Simples +## Basic badges Ejemplos de insignias que contienen texto, utilizando colores primarios y secundarios. La insignia se aplica a sus hijos. @@ -23,30 +23,32 @@ Here is an example of customizing the component. You can learn more about this i La visibilidad del badge puede ser controlada usando la propiedad `invisible`. -La insignia se oculta automáticamente con badgeContent es cero. Puede anular esto con la propiedad `showZero`. +{{"demo": "pages/components/badges/BadgeVisibility.js"}} -{{"demo": "pages/demos/badges/BadgeVisibility.js"}} +The badge auto hides with badgeContent is zero. You can override this with the `showZero` property. -## Valor Máximo +{{"demo": "pages/components/badges/ShowZeroBadge.js"}} -Puedes usar la propiedad `max` para limitar el valor máximo del contenido del badge. +## Maximum value + +You can use the `max` property to cap the value of the badge content. {{"demo": "pages/components/badges/BadgeMax.js"}} -## Badge de punto +## Dot badge -La propiedad `punto` cambia un badge a un pequeño punto. Esto se puede usar como una notificación de que algo ha cambiado sin contar. +The `dot` property changes a badge into a small dot. This can be used as a notification that something has changed without giving a count. {{"demo": "pages/components/badges/DotBadge.js"}} ## Superposición de insignia -Puede usar la propiedad `overlap` para colocar la insignia relativa a la esquina del elemento envuelto. +You can use the `overlap` property to place the badge relative to the corner of the wrapped element. {{"demo": "pages/components/badges/BadgeOverlap.js"}} ## Alineación de la insignia -Puede usar las propiedades `horizontalAlignment` y `verticalAlignment` para mover la insignia a cualquier esquina del elemento envuelto. +You can use the `anchorOrigin` prop to move the badge to any corner of the wrapped element. {{"demo": "pages/components/badges/BadgeAlignment.js", "hideHeader": true}} \ No newline at end of file diff --git a/docs/src/pages/components/badges/badges-fr.md b/docs/src/pages/components/badges/badges-fr.md index f5e1d5a9461aee..de8ec9b4baf9e4 100644 --- a/docs/src/pages/components/badges/badges-fr.md +++ b/docs/src/pages/components/badges/badges-fr.md @@ -7,7 +7,7 @@ components: Badge

Emblema gera um pequeno emblema para o canto superior direito do seu filho(s).

-## Badges simples +## Basic badges Exemples de badges contenant du texte, utilisant les couleurs primaires et secondaires. Le badge est appliqué aux enfants. @@ -23,19 +23,21 @@ Voici un exemple de personnalisation du composant. You can learn more about this La visibilité des badges peut être contrôlée à l'aide de la propriété `invisible`. -Le badge se cache automatiquement quand badgeContent est nul. Vous pouvez la remplacer avec la propriété `showZero`. - {{"demo": "pages/components/badges/BadgeVisibility.js"}} -## Valeur maximale +The badge auto hides with badgeContent is zero. You can override this with the `showZero` property. + +{{"demo": "pages/components/badges/ShowZeroBadge.js"}} + +## Maximum value -Vous pouvez utiliser la propriété `max` pour limiter la valeur du contenu du badge. +You can use the `max` property to cap the value of the badge content. {{"demo": "pages/components/badges/BadgeMax.js"}} -## Badge à points +## Dot badge -La propriété `dot` change un badge en petit point. Il peut être utilisé comme une notification indiquant que quelque chose a changé sans donner un nombre. +The `dot` property changes a badge into a small dot. This can be used as a notification that something has changed without giving a count. {{"demo": "pages/components/badges/DotBadge.js"}} @@ -47,6 +49,6 @@ You can use the `overlap` property to place the badge relative to the corner of ## Badge alignment -You can use the `horizontalAlignment` and `verticalAlignment` properties to move the badge to any corner of the wrapped element. +You can use the `anchorOrigin` prop to move the badge to any corner of the wrapped element. {{"demo": "pages/components/badges/BadgeAlignment.js", "hideHeader": true}} \ No newline at end of file diff --git a/docs/src/pages/components/badges/badges-ja.md b/docs/src/pages/components/badges/badges-ja.md index 57e0ca4dbcc6bf..3bed2570439d74 100644 --- a/docs/src/pages/components/badges/badges-ja.md +++ b/docs/src/pages/components/badges/badges-ja.md @@ -7,7 +7,7 @@ components: Badge

バッジは、その子供の右上に小さなバッジを生成します。

-## 簡単なバッジ +## Basic badges プライマリー色とセカンダリーを使用した、テキストを含むバッジの例。 バッジが子要素に適用されます。 @@ -23,30 +23,32 @@ components: Badge バッジの可視性は、 `invisible` プロパティを使用して制御できます。 -BadgeContentが0の場合、バッジは自動的に非表示になります。 `showZero` プロパティでこれをオーバーライドできます。 - {{"demo": "pages/components/badges/BadgeVisibility.js"}} -## 最大値 +The badge auto hides with badgeContent is zero. You can override this with the `showZero` property. + +{{"demo": "pages/components/badges/ShowZeroBadge.js"}} + +## Maximum value -バッジコンテンツの値に上限を設定するには、 `max` プロパティを使用します。 +You can use the `max` property to cap the value of the badge content. {{"demo": "pages/components/badges/BadgeMax.js"}} -## ドットバッジ +## Dot badge -`dot`プロパティは、バッジを小さなドットに変更します。 これは、何かが変更されたことをカウントせずに通知するために使用できます。 +The `dot` property changes a badge into a small dot. This can be used as a notification that something has changed without giving a count. {{"demo": "pages/components/badges/DotBadge.js"}} ## バッジの重複 -`オーバーラップ` プロパティを使用して、ラップされた要素の角を基準にしてバッジを配置できます。 +You can use the `overlap` property to place the badge relative to the corner of the wrapped element. {{"demo": "pages/components/badges/BadgeOverlap.js"}} ## バッジの配置 -`horizontalAlignment` および `verticalAlignment` プロパティを使用して、ラップされた要素の任意のコーナーにバッジを移動できます。 +You can use the `anchorOrigin` prop to move the badge to any corner of the wrapped element. {{"demo": "pages/components/badges/BadgeAlignment.js", "hideHeader": true}} \ No newline at end of file diff --git a/docs/src/pages/components/badges/badges-pt.md b/docs/src/pages/components/badges/badges-pt.md index 76b2d3d4c3667b..50b8504f367cae 100644 --- a/docs/src/pages/components/badges/badges-pt.md +++ b/docs/src/pages/components/badges/badges-pt.md @@ -7,7 +7,7 @@ components: Badge

Badge gera um pequeno emblema no canto superior direito de seu(s) filho(s).

-## Emblemas Simples +## Basic badges Exemplos de emblemas contendo texto, usando cores primárias e secundárias. O emblema é aplicado aos seus filhos. @@ -23,30 +23,32 @@ Aqui está um exemplo de customização do componente. Você pode aprender mais A visibilidade dos emblemas pode ser controlada usando a propriedade `invisible`. -O emblema se esconde automaticamente quando o badgeContent é zero. Você pode sobrescrever isso com a propriedade `showZero`. - {{"demo": "pages/components/badges/BadgeVisibility.js"}} -## Valor Máximo +The badge auto hides with badgeContent is zero. You can override this with the `showZero` property. + +{{"demo": "pages/components/badges/ShowZeroBadge.js"}} + +## Maximum value -Você pode usar a propriedade `max` para limitar o valor do conteúdo do emblema. +You can use the `max` property to cap the value of the badge content. {{"demo": "pages/components/badges/BadgeMax.js"}} -## Emblema com Ponto +## Dot badge -A propriedade `dot` altera um emblema para um pequeno ponto. Isto pode ser usado como uma notificação de que algo mudou sem fornecer uma contagem. +The `dot` property changes a badge into a small dot. This can be used as a notification that something has changed without giving a count. {{"demo": "pages/components/badges/DotBadge.js"}} ## Sobreposição de emblema -Você pode usar a propriedade `overlap` para colocar o emblema em relação ao canto do elemento envolvido. +You can use the `overlap` property to place the badge relative to the corner of the wrapped element. {{"demo": "pages/components/badges/BadgeOverlap.js"}} ## Alinhamento de emblema -Você pode usar as propriedades `horizontalAlignment` e `verticalAlignment` para mover o emblema para qualquer canto do elemento agrupado. +You can use the `anchorOrigin` prop to move the badge to any corner of the wrapped element. {{"demo": "pages/components/badges/BadgeAlignment.js", "hideHeader": true}} \ No newline at end of file diff --git a/docs/src/pages/components/badges/badges-ru.md b/docs/src/pages/components/badges/badges-ru.md index 5d29fba7576d09..86555dbab3d7a1 100644 --- a/docs/src/pages/components/badges/badges-ru.md +++ b/docs/src/pages/components/badges/badges-ru.md @@ -7,7 +7,7 @@ components: Badge

Значок генерирует маленький значок в правом верхнем углу своего дочернего(их) элемента(ов).

-## Простые значки +## Basic badges Примеры значков, содержащих текст, с использованием первичных и вторичных цветов. Знак применяется к своим детям. @@ -23,19 +23,21 @@ components: Badge Видимость значков можно контролировать с помощью свойства `invisible`. -Значок автоматически скрывается, когда свойство badgeContent равно нулю. You can override this with the `showZero` property. - {{"demo": "pages/components/badges/BadgeVisibility.js"}} -## Максимальное значение +The badge auto hides with badgeContent is zero. You can override this with the `showZero` property. + +{{"demo": "pages/components/badges/ShowZeroBadge.js"}} + +## Maximum value -Вы можете использовать свойство `max` чтобы ограничить значение содержимого значка. +You can use the `max` property to cap the value of the badge content. {{"demo": "pages/components/badges/BadgeMax.js"}} -## Точечный значок +## Dot badge -Свойство `точка` превращает значок в маленькую точку. Это можно использовать как уведомление о том, что что-то изменилось без подсчета. +The `dot` property changes a badge into a small dot. This can be used as a notification that something has changed without giving a count. {{"demo": "pages/components/badges/DotBadge.js"}} @@ -47,6 +49,6 @@ You can use the `overlap` property to place the badge relative to the corner of ## Выравнивание значка -You can use the `horizontalAlignment` and `verticalAlignment` properties to move the badge to any corner of the wrapped element. +You can use the `anchorOrigin` prop to move the badge to any corner of the wrapped element. {{"demo": "pages/components/badges/BadgeAlignment.js", "hideHeader": true}} \ No newline at end of file diff --git a/docs/src/pages/components/badges/badges-zh.md b/docs/src/pages/components/badges/badges-zh.md index d2fb3bc09d8ce7..18841dc11c346b 100644 --- a/docs/src/pages/components/badges/badges-zh.md +++ b/docs/src/pages/components/badges/badges-zh.md @@ -7,7 +7,7 @@ components: Badge

徽章会在其子项的右上角生成一个小徽章。

-## 简单的徽章 +## Basic badges 这个示例是个包含了文本的徽章,同时使用了主色和副色。 徽章会对其子元素生效。 @@ -23,30 +23,32 @@ components: Badge 徽章组件的隐显可以通过 `invisible` 属性来设置。 -当 badgeContent 为零时,徽章组件将会自动隐藏。 您可以通过 `showZero` 属性来覆盖它。 - {{"demo": "pages/components/badges/BadgeVisibility.js"}} -## 最大值 +The badge auto hides with badgeContent is zero. You can override this with the `showZero` property. + +{{"demo": "pages/components/badges/ShowZeroBadge.js"}} + +## Maximum value -您可以使用 `max` 属性来限制徽章组件内容的取值。 +You can use the `max` property to cap the value of the badge content. {{"demo": "pages/components/badges/BadgeMax.js"}} -## 圆点徽章组件 +## Dot badge -`dot` 属性会徽章组件渲染成一个小点。 这样的组件可以作为一个提示的工具,来说明有些值已经改变,但是不需要计数。 +The `dot` property changes a badge into a small dot. This can be used as a notification that something has changed without giving a count. {{"demo": "pages/components/badges/DotBadge.js"}} ## 徽章组件的覆盖 -您可以使用 `overlap` 这个属性,在封装的元素相对的一角来显示徽章组件。 +You can use the `overlap` property to place the badge relative to the corner of the wrapped element. {{"demo": "pages/components/badges/BadgeOverlap.js"}} ## 徽章组件的校准 -您可以使用 `horizontalAlignment` 和 `verticalAlignment` 这两个属性,在封装的组件任意角落显示徽章组件。 +You can use the `anchorOrigin` prop to move the badge to any corner of the wrapped element. {{"demo": "pages/components/badges/BadgeAlignment.js", "hideHeader": true}} \ No newline at end of file diff --git a/docs/src/pages/components/box/box-ru.md b/docs/src/pages/components/box/box-ru.md index 2c076c30c91180..0811e31b3f338a 100644 --- a/docs/src/pages/components/box/box-ru.md +++ b/docs/src/pages/components/box/box-ru.md @@ -1,5 +1,5 @@ --- -title: Box React component +title: React-компонент Box --- # Box @@ -36,13 +36,13 @@ Box компонент оборачивает ваш компонент. Соз ``` -2. Use render props +2. Используйте render свойства The Box children accepts a render props function. You can pull out the `className`. ```jsx - {props => - } -/> -``` \ No newline at end of file +- By default, the snackbar won't auto-hide. However, if you decide to use the `autoHideDuration` prop, it's recommended to give the user [sufficient time](https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits.html) to respond. \ No newline at end of file diff --git a/docs/src/pages/components/snackbars/snackbars-es.md b/docs/src/pages/components/snackbars/snackbars-es.md index 081ab06c3acd95..657aeb96c11dc9 100644 --- a/docs/src/pages/components/snackbars/snackbars-es.md +++ b/docs/src/pages/components/snackbars/snackbars-es.md @@ -51,7 +51,7 @@ When multiple snackbar updates are necessary, they should appear one at a time. Snackbars should appear above FABs (on mobile). -{{"demo": "pages/components/snackbars/FabIntegrationSnackbar.js", "iframe": true, "maxWidth": 500}} +{{"demo": "pages/components/snackbars/FabIntegrationSnackbar.js", "iframe": true, "maxWidth": 400}} ### Cambiar transición @@ -81,27 +81,4 @@ This example demonstrates how to use [notistack](https://github.com/iamhosseindh (WAI-ARIA: https://www.w3.org/TR/wai-aria-1.1/#alert) -- Since alerts are not required to receive focus, content authors should not require users to close a Snackbar if the role is set to `alert` through the SnackbarContent `role` prop. This is the default role. -- If a Snackbar requires focus to close it, then content authors should use the `role` of `alertdialog`. - -```jsx - -``` - -```jsx -Archived} - action={ - - } -/> -``` \ No newline at end of file +- By default, the snackbar won't auto-hide. However, if you decide to use the `autoHideDuration` prop, it's recommended to give the user [sufficient time](https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits.html) to respond. \ No newline at end of file diff --git a/docs/src/pages/components/snackbars/snackbars-fr.md b/docs/src/pages/components/snackbars/snackbars-fr.md index d370c35995a1a9..d91d8d9a861b5f 100644 --- a/docs/src/pages/components/snackbars/snackbars-fr.md +++ b/docs/src/pages/components/snackbars/snackbars-fr.md @@ -51,7 +51,7 @@ When multiple snackbar updates are necessary, they should appear one at a time. Snackbars should appear above FABs (on mobile). -{{"demo": "pages/components/snackbars/FabIntegrationSnackbar.js", "iframe": true, "maxWidth": 500}} +{{"demo": "pages/components/snackbars/FabIntegrationSnackbar.js", "iframe": true, "maxWidth": 400}} ### Changer la transition @@ -81,27 +81,4 @@ This example demonstrates how to use [notistack](https://github.com/iamhosseindh (WAI-ARIA: https://www.w3.org/TR/wai-aria-1.1/#alert) -- Since alerts are not required to receive focus, content authors should not require users to close a Snackbar if the role is set to `alert` through the SnackbarContent `role` prop. This is the default role. -- If a Snackbar requires focus to close it, then content authors should use the `role` of `alertdialog`. - -```jsx - -``` - -```jsx -Archived} - action={ - - } -/> -``` \ No newline at end of file +- By default, the snackbar won't auto-hide. However, if you decide to use the `autoHideDuration` prop, it's recommended to give the user [sufficient time](https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits.html) to respond. \ No newline at end of file diff --git a/docs/src/pages/components/snackbars/snackbars-ja.md b/docs/src/pages/components/snackbars/snackbars-ja.md index c23b7f842b93bc..a3aa8d3e3cd1a3 100644 --- a/docs/src/pages/components/snackbars/snackbars-ja.md +++ b/docs/src/pages/components/snackbars/snackbars-ja.md @@ -51,7 +51,7 @@ Google Keepのスナックバーの動作を再現することを目的とした スナックバーはFAB(モバイル)の上に表示されます。 -{{"demo": "pages/components/snackbars/FabIntegrationSnackbar.js", "iframe": true, "maxWidth": 500}} +{{"demo": "pages/components/snackbars/FabIntegrationSnackbar.js", "iframe": true, "maxWidth": 400}} ### トランジションの変更 @@ -81,27 +81,4 @@ This example demonstrates how to use [notistack](https://github.com/iamhosseindh (WAI-ARIA: https://www.w3.org/TR/wai-aria-1.1/#alert) -- Since alerts are not required to receive focus, content authors should not require users to close a Snackbar if the role is set to `alert` through the SnackbarContent `role` prop. This is the default role. -- If a Snackbar requires focus to close it, then content authors should use the `role` of `alertdialog`. - -```jsx - -``` - -```jsx -Archived} - action={ - - } -/> -``` \ No newline at end of file +- By default, the snackbar won't auto-hide. However, if you decide to use the `autoHideDuration` prop, it's recommended to give the user [sufficient time](https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits.html) to respond. \ No newline at end of file diff --git a/docs/src/pages/components/snackbars/snackbars-pt.md b/docs/src/pages/components/snackbars/snackbars-pt.md index 639d6ca7822d52..f0e626fa45bb84 100644 --- a/docs/src/pages/components/snackbars/snackbars-pt.md +++ b/docs/src/pages/components/snackbars/snackbars-pt.md @@ -51,7 +51,7 @@ Quando várias atualizações de snackbar são necessárias, elas devem aparecer Snackbars devem aparecer acima de BAFs (no mobile). -{{"demo": "pages/components/snackbars/FabIntegrationSnackbar.js", "iframe": true, "maxWidth": 500}} +{{"demo": "pages/components/snackbars/FabIntegrationSnackbar.js", "iframe": true, "maxWidth": 400}} ### Modificando a transição @@ -81,27 +81,4 @@ This example demonstrates how to use [notistack](https://github.com/iamhosseindh (WAI-ARIA: https://www.w3.org/TR/wai-aria-1.1/#alert) -- Since alerts are not required to receive focus, content authors should not require users to close a Snackbar if the role is set to `alert` through the SnackbarContent `role` prop. This is the default role. -- If a Snackbar requires focus to close it, then content authors should use the `role` of `alertdialog`. - -```jsx - -``` - -```jsx -Archived} - action={ - - } -/> -``` \ No newline at end of file +- By default, the snackbar won't auto-hide. However, if you decide to use the `autoHideDuration` prop, it's recommended to give the user [sufficient time](https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits.html) to respond. \ No newline at end of file diff --git a/docs/src/pages/components/snackbars/snackbars-ru.md b/docs/src/pages/components/snackbars/snackbars-ru.md index e5c5b93fd9021d..0302e6231f4d3d 100644 --- a/docs/src/pages/components/snackbars/snackbars-ru.md +++ b/docs/src/pages/components/snackbars/snackbars-ru.md @@ -51,7 +51,7 @@ When multiple snackbar updates are necessary, they should appear one at a time. Snackbars should appear above FABs (on mobile). -{{"demo": "pages/components/snackbars/FabIntegrationSnackbar.js", "iframe": true, "maxWidth": 500}} +{{"demo": "pages/components/snackbars/FabIntegrationSnackbar.js", "iframe": true, "maxWidth": 400}} ### Изменить Transition @@ -81,27 +81,4 @@ This example demonstrates how to use [notistack](https://github.com/iamhosseindh (WAI-ARIA: https://www.w3.org/TR/wai-aria-1.1/#alert) -- Since alerts are not required to receive focus, content authors should not require users to close a Snackbar if the role is set to `alert` through the SnackbarContent `role` prop. This is the default role. -- If a Snackbar requires focus to close it, then content authors should use the `role` of `alertdialog`. - -```jsx - -``` - -```jsx -Archived} - action={ - - } -/> -``` \ No newline at end of file +- By default, the snackbar won't auto-hide. However, if you decide to use the `autoHideDuration` prop, it's recommended to give the user [sufficient time](https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits.html) to respond. \ No newline at end of file diff --git a/docs/src/pages/components/snackbars/snackbars-zh.md b/docs/src/pages/components/snackbars/snackbars-zh.md index 99717a3ba9ca5f..454b82992bfd03 100644 --- a/docs/src/pages/components/snackbars/snackbars-zh.md +++ b/docs/src/pages/components/snackbars/snackbars-zh.md @@ -51,7 +51,7 @@ Snackbars contain a single line of text directly related to the operation perfor 消息条应当显示在悬浮按钮的上方(这是在移动设备上)。 -{{"demo": "pages/components/snackbars/FabIntegrationSnackbar.js", "iframe": true, "maxWidth": 500}} +{{"demo": "pages/components/snackbars/FabIntegrationSnackbar.js", "iframe": true, "maxWidth": 400}} ### 更改过渡动画 @@ -81,27 +81,4 @@ This example demonstrates how to use [notistack](https://github.com/iamhosseindh (WAI-ARIA: https://www.w3.org/TR/wai-aria-1.1/#alert) -- Since alerts are not required to receive focus, content authors should not require users to close a Snackbar if the role is set to `alert` through the SnackbarContent `role` prop. This is the default role. -- If a Snackbar requires focus to close it, then content authors should use the `role` of `alertdialog`. - -```jsx - -``` - -```jsx -Archived} - action={ - - } -/> -``` \ No newline at end of file +- By default, the snackbar won't auto-hide. However, if you decide to use the `autoHideDuration` prop, it's recommended to give the user [sufficient time](https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits.html) to respond. \ No newline at end of file diff --git a/docs/src/pages/components/toggle-button/toggle-button-aa.md b/docs/src/pages/components/toggle-button/toggle-button-aa.md index c6868d28ae15b3..b6f096457e7c28 100644 --- a/docs/src/pages/components/toggle-button/toggle-button-aa.md +++ b/docs/src/pages/components/toggle-button/toggle-button-aa.md @@ -31,6 +31,6 @@ crwdns105831:0crwdne105831:0 ## crwdns101510:0crwdne101510:0 -crwdns101512:0crwdne101512:0 crwdns101514:0crwdne101514:0 +crwdns101512:0crwdne101512:0 crwdns107217:0crwdne107217:0 crwdns101516:0crwdne101516:0 crwdns101518:0crwdne101518:0 \ No newline at end of file diff --git a/docs/src/pages/components/toggle-button/toggle-button-de.md b/docs/src/pages/components/toggle-button/toggle-button-de.md index da9e26e962937b..75bc68f48583a5 100644 --- a/docs/src/pages/components/toggle-button/toggle-button-de.md +++ b/docs/src/pages/components/toggle-button/toggle-button-de.md @@ -31,6 +31,6 @@ Hier ist ein Beispiel zum Anpassen der Komponente. Mehr dazu erfahren Sie auf de ## Barrierefreiheit -ToggleButtonGroup has `role="group"`. You should provide an accessible label with `arial-label="label"`, `aria-labelledby="id"` or `