-
-
Notifications
You must be signed in to change notification settings - Fork 31.8k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge remote-tracking branch 'upstream/master' into componentsProps/menu
- Loading branch information
Showing
143 changed files
with
3,087 additions
and
1,766 deletions.
There are no files selected for viewing
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,17 @@ | ||
| import * as React from 'react'; | ||
| import AspectRatio from '@mui/joy/AspectRatio'; | ||
| import Sheet from '@mui/joy/Sheet'; | ||
| import Typography from '@mui/joy/Typography'; | ||
|
|
||
| export default function BasicRatio() { | ||
| return ( | ||
| <Sheet | ||
| variant="outlined" | ||
| sx={{ width: 300, borderRadius: 'md', overflow: 'auto' }} | ||
| > | ||
| <AspectRatio> | ||
| <Typography level="h2">16 : 9</Typography> | ||
| </AspectRatio> | ||
| </Sheet> | ||
| ); | ||
| } |
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,8 @@ | ||
| <Sheet | ||
| variant="outlined" | ||
| sx={{ width: 300, borderRadius: 'md', overflow: 'auto' }} | ||
| > | ||
| <AspectRatio> | ||
| <Typography level="h2">16 : 9</Typography> | ||
| </AspectRatio> | ||
| </Sheet> |
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,65 @@ | ||
| import * as React from 'react'; | ||
| import AspectRatio from '@mui/joy/AspectRatio'; | ||
| import Box from '@mui/joy/Box'; | ||
| import Typography from '@mui/joy/Typography'; | ||
| import Card from '@mui/joy/Card'; | ||
|
|
||
| const data = [ | ||
| { | ||
| src: 'https://images.unsplash.com/photo-1502657877623-f66bf489d236?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2369', | ||
| title: 'Night view', | ||
| description: '4.21M views', | ||
| }, | ||
| { | ||
| src: 'https://images.unsplash.com/photo-1527549993586-dff825b37782?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3270', | ||
| title: 'Lake view', | ||
| description: '4.74M views', | ||
| }, | ||
| { | ||
| src: 'https://images.unsplash.com/photo-1532614338840-ab30cf10ed36?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3270', | ||
| title: 'Mountain view', | ||
| description: '3.98M views', | ||
| }, | ||
| ]; | ||
|
|
||
| export default function FlexRowRatio() { | ||
| return ( | ||
| <Box | ||
| sx={{ | ||
| display: 'flex', | ||
| gap: 1, | ||
| py: 1, | ||
| overflow: 'auto', | ||
| width: 343, | ||
| scrollSnapType: 'x mandatory', | ||
| '& > *': { | ||
| scrollSnapAlign: 'center', | ||
| }, | ||
| '::-webkit-scrollbar': { display: 'none' }, | ||
| }} | ||
| > | ||
| {data.map((item) => ( | ||
| <Card | ||
| row | ||
| key={item.title} | ||
| variant="outlined" | ||
| sx={{ | ||
| gap: 2, | ||
| '--Card-padding': (theme) => theme.spacing(2), | ||
| }} | ||
| > | ||
| <AspectRatio | ||
| ratio="1" | ||
| sx={{ minWidth: 60, borderRadius: 'sm', overflow: 'auto' }} | ||
| > | ||
| <img src={item.src} alt={item.title} /> | ||
| </AspectRatio> | ||
| <Box sx={{ whiteSpace: 'nowrap' }}> | ||
| <Typography fontWeight="md">{item.title}</Typography> | ||
| <Typography level="body2">{item.description}</Typography> | ||
| </Box> | ||
| </Card> | ||
| ))} | ||
| </Box> | ||
| ); | ||
| } |
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,17 @@ | ||
| import * as React from 'react'; | ||
| import AspectRatio from '@mui/joy/AspectRatio'; | ||
| import Sheet from '@mui/joy/Sheet'; | ||
| import Typography from '@mui/joy/Typography'; | ||
|
|
||
| export default function CustomRatio() { | ||
| return ( | ||
| <Sheet | ||
| variant="outlined" | ||
| sx={{ width: 300, borderRadius: 'md', overflow: 'auto' }} | ||
| > | ||
| <AspectRatio ratio="4/3"> | ||
| <Typography level="h2">4 : 3</Typography> | ||
| </AspectRatio> | ||
| </Sheet> | ||
| ); | ||
| } |
8 changes: 8 additions & 0 deletions
8
docs/data/joy/components/aspect-ratio/CustomRatio.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,8 @@ | ||
| <Sheet | ||
| variant="outlined" | ||
| sx={{ width: 300, borderRadius: 'md', overflow: 'auto' }} | ||
| > | ||
| <AspectRatio ratio="4/3"> | ||
| <Typography level="h2">4 : 3</Typography> | ||
| </AspectRatio> | ||
| </Sheet> |
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,52 @@ | ||
| import * as React from 'react'; | ||
| import AspectRatio from '@mui/joy/AspectRatio'; | ||
| import Box from '@mui/joy/Box'; | ||
| import TextField from '@mui/joy/TextField'; | ||
| import Typography from '@mui/joy/Typography'; | ||
| import Sheet from '@mui/joy/Sheet'; | ||
|
|
||
| export default function FlexRowRatio() { | ||
| const [flexBasis, setFlexBasis] = React.useState(200); | ||
| return ( | ||
| <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}> | ||
| <Sheet | ||
| variant="outlined" | ||
| sx={{ | ||
| display: 'flex', | ||
| gap: 2, | ||
| p: 2, | ||
| minWidth: 300, | ||
| borderRadius: 'sm', | ||
| }} | ||
| > | ||
| <AspectRatio | ||
| sx={{ | ||
| flexBasis: flexBasis ? `${flexBasis}px` : undefined, | ||
| borderRadius: 'sm', | ||
| overflow: 'auto', | ||
| }} | ||
| > | ||
| <img | ||
| src="https://images.unsplash.com/photo-1502657877623-f66bf489d236?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2369" | ||
| alt="" | ||
| /> | ||
| </AspectRatio> | ||
| <Box> | ||
| <Typography fontWeight="md">Yosemite National Park</Typography> | ||
| <Typography level="body2">California, USA</Typography> | ||
| </Box> | ||
| </Sheet> | ||
| <br /> | ||
| <TextField | ||
| variant="outlined" | ||
| label="flexBasis" | ||
| placeholder="number" | ||
| endDecorator="px" | ||
| type="number" | ||
| value={flexBasis} | ||
| onChange={(event) => setFlexBasis(event.target.valueAsNumber)} | ||
| sx={{ mx: 'auto', width: '100%' }} | ||
| /> | ||
| </Box> | ||
| ); | ||
| } |
Oops, something went wrong.