-
-
Notifications
You must be signed in to change notification settings - Fork 31.7k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'master' of https://github.com/mui/material-ui into upda…
…te-contributing-file
- Loading branch information
Showing
1,437 changed files
with
9,502 additions
and
18,033 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| --- | ||
| product: base | ||
| title: Unstyled React badge | ||
| components: BadgeUnstyled | ||
| githubLabel: 'component: badge' | ||
| packageName: '@mui/base' | ||
| --- | ||
|
|
||
| # Unstyled badge | ||
|
|
||
| <p class="description">Badge generates a small badge to the top-right of its child(ren).</p> | ||
|
|
||
| ```js | ||
| import BadgeUnstyled from '@mui/base/BadgeUnstyled'; | ||
| ``` | ||
|
|
||
| {{"component": "modules/components/ComponentLinkHeader.js", "design": false}} | ||
|
|
||
| ## Basic usage | ||
|
|
||
| {{"demo": "UnstyledBadge.js", "defaultCodeOpen": false}} | ||
|
|
||
| ## Badge visibility | ||
|
|
||
| The visibility of badges can be controlled using the `invisible` prop. If a badge is invisible, it has the `MuiBadge-invisible` class. It is up to the developer to provide styles that actually hide the badge. | ||
|
|
||
| {{"demo": "BadgeVisibility.js"}} | ||
|
|
||
| The badge hides automatically when `badgeContent` is zero. You can override this with the `showZero` prop. | ||
|
|
||
| {{"demo": "ShowZeroBadge.js"}} | ||
|
|
||
| ## Maximum value | ||
|
|
||
| You can use the `max` prop to cap the value of the badge content. It is set to 99 by default. | ||
|
|
||
| Note that `badgeContent` should be a number (or convertible to a number) for this to work. | ||
|
|
||
| {{"demo": "BadgeMax.js"}} | ||
|
|
||
| ## Accessibility | ||
|
|
||
| You can't rely on the content of the badge to be announced correctly. You should provide a full description, for instance, with `aria-label`: | ||
|
|
||
| {{"demo": "AccessibleBadges.js", "defaultCodeOpen": false}} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| --- | ||
| product: base | ||
| title: 无样式的 React 徽章 | ||
| components: BadgeUnstyled | ||
| githubLabel: 'component: badge' | ||
| packageName: '@mui/base' | ||
| --- | ||
|
|
||
| # 无样式的徽章 | ||
|
|
||
| <p class="description">徽章组件会在其子项（们）的右上角生成一个小徽章。</p> | ||
|
|
||
| ```js | ||
| import BadgeUnstyled from '@mui/base/BadgeUnstyled'; | ||
| ``` | ||
|
|
||
| {{"component": "modules/components/ComponentLinkHeader.js", "design": false}} | ||
|
|
||
| ## 基本用法 | ||
|
|
||
| {{"demo": "UnstyledBadge.js", "defaultCodeOpen": false}} | ||
|
|
||
| ## 徽章的可见性 | ||
|
|
||
| 徽章组件的隐显可以通过 `invisible` 属性来设置。 如果徽章不可见，那么它会被应用 `MuiBadge-invisible` 类。 It is up to the developer to provide styles that actually hide the badge. | ||
|
|
||
| {{"demo": "BadgeVisibility.js"}} | ||
|
|
||
| The badge hides automatically when `badgeContent` is zero. You can override this with the `showZero` prop. | ||
|
|
||
| {{"demo": "ShowZeroBadge.js"}} | ||
|
|
||
| ## 最大值 | ||
|
|
||
| 您可以使用 `max` 属性来限制徽章内容的最大值。 默认被设置为 99。 | ||
|
|
||
| 请注意， `badgeContent` 应该是一个数字（或是一个可被转换为数字的值）才能工作。 | ||
|
|
||
| {{"demo": "BadgeMax.js"}} | ||
|
|
||
| ## 无障碍设计 | ||
|
|
||
| 如果徽章的内容无法被正确的读取。 那您应该提供一个完整的描述，例如， 使用 `aria-label`： | ||
|
|
||
| {{"demo": "AccessibleBadges.js", "defaultCodeOpen": false}} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
52 changes: 52 additions & 0 deletions
52
docs/data/base/components/button/UnstyledButtonsDisabledFocus.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| import * as React from 'react'; | ||
| import Stack from '@mui/material/Stack'; | ||
| import ButtonUnstyled, { buttonUnstyledClasses } from '@mui/base/ButtonUnstyled'; | ||
| import { styled } from '@mui/system'; | ||
|
|
||
| const blue = { | ||
| 500: '#007FFF', | ||
| 600: '#0072E5', | ||
| 700: '#0059B2', | ||
| }; | ||
|
|
||
| const CustomButton = styled(ButtonUnstyled)` | ||
| font-family: IBM Plex Sans, sans-serif; | ||
| font-weight: bold; | ||
| font-size: 0.875rem; | ||
| background-color: ${blue[500]}; | ||
| padding: 12px 24px; | ||
| border-radius: 8px; | ||
| color: white; | ||
| transition: all 150ms ease; | ||
| cursor: pointer; | ||
| border: none; | ||
| &:hover { | ||
| background-color: ${blue[600]}; | ||
| } | ||
| &.${buttonUnstyledClasses.active} { | ||
| background-color: ${blue[700]}; | ||
| } | ||
| &.${buttonUnstyledClasses.focusVisible} { | ||
| box-shadow: 0 4px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 5px rgba(0, 127, 255, 0.5); | ||
| outline: none; | ||
| } | ||
| &.${buttonUnstyledClasses.disabled} { | ||
| opacity: 0.5; | ||
| cursor: not-allowed; | ||
| } | ||
| `; | ||
|
|
||
| export default function UnstyledButtonsDisabledFocus() { | ||
| return ( | ||
| <Stack spacing={2} direction="row"> | ||
| <CustomButton disabled>focusableWhenDisabled = false</CustomButton> | ||
| <CustomButton disabled focusableWhenDisabled> | ||
| focusableWhenDisabled = true | ||
| </CustomButton> | ||
| </Stack> | ||
| ); | ||
| } |
52 changes: 52 additions & 0 deletions
52
docs/data/base/components/button/UnstyledButtonsDisabledFocus.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| import * as React from 'react'; | ||
| import Stack from '@mui/material/Stack'; | ||
| import ButtonUnstyled, { buttonUnstyledClasses } from '@mui/base/ButtonUnstyled'; | ||
| import { styled } from '@mui/system'; | ||
|
|
||
| const blue = { | ||
| 500: '#007FFF', | ||
| 600: '#0072E5', | ||
| 700: '#0059B2', | ||
| }; | ||
|
|
||
| const CustomButton = styled(ButtonUnstyled)` | ||
| font-family: IBM Plex Sans, sans-serif; | ||
| font-weight: bold; | ||
| font-size: 0.875rem; | ||
| background-color: ${blue[500]}; | ||
| padding: 12px 24px; | ||
| border-radius: 8px; | ||
| color: white; | ||
| transition: all 150ms ease; | ||
| cursor: pointer; | ||
| border: none; | ||
| &:hover { | ||
| background-color: ${blue[600]}; | ||
| } | ||
| &.${buttonUnstyledClasses.active} { | ||
| background-color: ${blue[700]}; | ||
| } | ||
| &.${buttonUnstyledClasses.focusVisible} { | ||
| box-shadow: 0 4px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 5px rgba(0, 127, 255, 0.5); | ||
| outline: none; | ||
| } | ||
| &.${buttonUnstyledClasses.disabled} { | ||
| opacity: 0.5; | ||
| cursor: not-allowed; | ||
| } | ||
| `; | ||
|
|
||
| export default function UnstyledButtonsDisabledFocus() { | ||
| return ( | ||
| <Stack spacing={2} direction="row"> | ||
| <CustomButton disabled>focusableWhenDisabled = false</CustomButton> | ||
| <CustomButton disabled focusableWhenDisabled> | ||
| focusableWhenDisabled = true | ||
| </CustomButton> | ||
| </Stack> | ||
| ); | ||
| } |
4 changes: 4 additions & 0 deletions
4
docs/data/base/components/button/UnstyledButtonsDisabledFocus.tsx.preview
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| <CustomButton disabled>focusableWhenDisabled = false</CustomButton> | ||
| <CustomButton disabled focusableWhenDisabled> | ||
| focusableWhenDisabled = true | ||
| </CustomButton> |
Oops, something went wrong.