forked from mui/material-ui
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Joy] Add
Divider component (mui#34403)
- Loading branch information
1 parent
ea3072e
commit abcf614
Showing
33 changed files
with
871 additions
and
53 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
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,29 @@ | ||
| import * as React from 'react'; | ||
| import Box from '@mui/joy/Box'; | ||
| import Divider from '@mui/joy/Divider'; | ||
| import Stack from '@mui/joy/Stack'; | ||
| import Slider from '@mui/joy/Slider'; | ||
| import Sheet from '@mui/joy/Sheet'; | ||
|
|
||
| export default function DividerChildPosition() { | ||
| const [position, setPosition] = React.useState(50); | ||
| return ( | ||
| <Box sx={{ width: '100%' }}> | ||
| <Stack spacing={1} sx={{ fontSize: 'sm' }}> | ||
| <Sheet variant="soft" sx={{ height: 40, borderRadius: 'xs' }} /> | ||
| <Divider sx={{ '--Divider-childPosition': `${position}%` }}> | ||
| Visual indicator | ||
| </Divider> | ||
| <Sheet variant="soft" sx={{ height: 40, borderRadius: 'xs' }} /> | ||
| </Stack> | ||
| <Slider | ||
| value={position} | ||
| min={0} | ||
| max={100} | ||
| step={1} | ||
| valueLabelDisplay="on" | ||
| onChange={(event, value) => setPosition(value)} | ||
| /> | ||
| </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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| import * as React from 'react'; | ||
| import Box from '@mui/joy/Box'; | ||
| import Button from '@mui/joy/Button'; | ||
| import Card from '@mui/joy/Card'; | ||
| import Checkbox from '@mui/joy/Checkbox'; | ||
| import Divider from '@mui/joy/Divider'; | ||
| import Typography from '@mui/joy/Typography'; | ||
| import ArrowForward from '@mui/icons-material/ArrowForward'; | ||
|
|
||
| export default function DividerInCard() { | ||
| const [row, setRow] = React.useState(false); | ||
| return ( | ||
| <Box> | ||
| <Checkbox | ||
| label="horizontal" | ||
| checked={row} | ||
| onChange={(event) => setRow(event.target.checked)} | ||
| sx={{ mb: 2 }} | ||
| /> | ||
| <Card | ||
| row={row} | ||
| variant="outlined" | ||
| sx={{ width: 400, maxWidth: '100%', gap: 1.5 }} | ||
| > | ||
| <Typography fontSize="lg" fontWeight="md"> | ||
| Headline | ||
| </Typography> | ||
| <Divider /> | ||
| <Box sx={{ display: row ? 'block' : 'contents' }}> | ||
| <Typography level="body2"> | ||
| Lorem Ipsum is simply dummy text of the printing and typesetting | ||
| industry. Lorem Ipsum has been the industry standard dummy text ever | ||
| since the 1500s | ||
| </Typography> | ||
| <Button | ||
| size="sm" | ||
| variant="soft" | ||
| color="neutral" | ||
| endDecorator={<ArrowForward />} | ||
| sx={{ width: '100%', mt: row ? 2 : 0 }} | ||
| > | ||
| See more | ||
| </Button> | ||
| </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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| import * as React from 'react'; | ||
| import Box from '@mui/joy/Box'; | ||
| import Button from '@mui/joy/Button'; | ||
| import ModalDialog from '@mui/joy/ModalDialog'; | ||
| import Divider from '@mui/joy/Divider'; | ||
| import Typography from '@mui/joy/Typography'; | ||
|
|
||
| export default function DividerInModalDialog() { | ||
| return ( | ||
| <ModalDialog | ||
| sx={{ | ||
| // this custom styles is for demonstration purpose, you might not need them in your app | ||
| position: 'static', | ||
| transform: 'none', | ||
| maxWidth: 300, | ||
| }} | ||
| > | ||
| <Typography fontSize="lg" fontWeight="lg"> | ||
| Modal Title | ||
| </Typography> | ||
| <Divider inset="none" sx={{ my: 1.5 }} /> | ||
| <Typography level="body2"> | ||
| Lorem Ipsum is simply dummy text of the printing and typesetting industry. | ||
| Lorem Ipsum has been the industry standard dummy text ever since the 1500s | ||
| </Typography> | ||
| <Divider sx={{ mt: 2 }} /> | ||
| <Box | ||
| sx={{ | ||
| bgcolor: 'background.level1', | ||
| px: 2, | ||
| py: 1.5, | ||
| m: 'calc(-1 * var(--ModalDialog-padding))', | ||
| mt: 0, | ||
| borderBottomLeftRadius: 'var(--ModalDialog-radius)', | ||
| borderBottomRightRadius: 'var(--ModalDialog-radius)', | ||
| textAlign: 'right', | ||
| }} | ||
| > | ||
| <Button size="sm">Got it!</Button> | ||
| </Box> | ||
| </ModalDialog> | ||
| ); | ||
| } |
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,29 @@ | ||
| import * as React from 'react'; | ||
| import Box from '@mui/joy/Box'; | ||
| import Stack from '@mui/joy/Stack'; | ||
| import Divider from '@mui/joy/Divider'; | ||
| import Chip from '@mui/joy/Chip'; | ||
|
|
||
| export default function DividerText() { | ||
| const content = ( | ||
| <Box sx={{ fontSize: 'sm', color: 'text.tertiary' }}> | ||
| {`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id dignissim justo. | ||
| Nulla ut facilisis ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus. | ||
| Sed malesuada lobortis pretium.`} | ||
| </Box> | ||
| ); | ||
|
|
||
| return ( | ||
| <Stack spacing={1}> | ||
| {content} | ||
| <Divider>Visual indicator</Divider> | ||
| {content} | ||
| <Divider> | ||
| <Chip variant="soft" color="neutral" size="sm"> | ||
| Visual indicator | ||
| </Chip> | ||
| </Divider> | ||
| {content} | ||
| </Stack> | ||
| ); | ||
| } |
Oops, something went wrong.