-
-
Notifications
You must be signed in to change notification settings - Fork 32.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
cc1b56e
commit ad4cdac
Showing
44 changed files
with
2,660 additions
and
168 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,14 @@ | ||
| import * as React from 'react'; | ||
| import Select from '@mui/joy/Select'; | ||
| import Option from '@mui/joy/Option'; | ||
|
|
||
| export default function SelectBasic() { | ||
| return ( | ||
| <Select defaultValue="dog"> | ||
| <Option value="dog">Dog</Option> | ||
| <Option value="cat">Cat</Option> | ||
| <Option value="fish">Fish</Option> | ||
| <Option value="bird">Bird</Option> | ||
| </Select> | ||
| ); | ||
| } |
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,46 @@ | ||
| import * as React from 'react'; | ||
| import Select from '@mui/joy/Select'; | ||
| import Option from '@mui/joy/Option'; | ||
| import IconButton from '@mui/joy/IconButton'; | ||
| import CloseRounded from '@mui/icons-material/CloseRounded'; | ||
|
|
||
| export default function SelectBasic() { | ||
| const [value, setValue] = React.useState('dog'); | ||
| const action = React.useRef(null); | ||
| return ( | ||
| <Select | ||
| action={action} | ||
| value={value} | ||
| placeholder="Favorite pet…" | ||
| onChange={setValue} | ||
| {...(value && { | ||
| // display the button and remove select indicator | ||
| // when user has selected a value | ||
| endDecorator: ( | ||
| <IconButton | ||
| size="sm" | ||
| variant="plain" | ||
| color="neutral" | ||
| onMouseDown={(event) => { | ||
| // don't open the popup when clicking on this button | ||
| event.stopPropagation(); | ||
| }} | ||
| onClick={() => { | ||
| setValue(null); | ||
| action.current?.focusVisible(); | ||
| }} | ||
| > | ||
| <CloseRounded /> | ||
| </IconButton> | ||
| ), | ||
| indicator: null, | ||
| })} | ||
| sx={{ minWidth: 160 }} | ||
| > | ||
| <Option value="dog">Dog</Option> | ||
| <Option value="cat">Cat</Option> | ||
| <Option value="fish">Fish</Option> | ||
| <Option value="bird">Bird</Option> | ||
| </Select> | ||
| ); | ||
| } |
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,46 @@ | ||
| import * as React from 'react'; | ||
| import Avatar from '@mui/joy/Avatar'; | ||
| import ListItemDecorator from '@mui/joy/ListItemDecorator'; | ||
| import ListDivider from '@mui/joy/ListDivider'; | ||
| import Select from '@mui/joy/Select'; | ||
| import Option from '@mui/joy/Option'; | ||
|
|
||
| export default function SelectCustomOption() { | ||
| return ( | ||
| <Select | ||
| defaultValue="1" | ||
| componentsProps={{ | ||
| listbox: { | ||
| sx: { | ||
| '--List-decorator-width': '44px', | ||
| }, | ||
| }, | ||
| }} | ||
| sx={{ | ||
| '--List-decorator-width': '44px', | ||
| minWidth: 240, | ||
| }} | ||
| > | ||
| <Option value="1"> | ||
| <ListItemDecorator> | ||
| <Avatar size="sm" src="/static/images/avatar/1.jpg" /> | ||
| </ListItemDecorator> | ||
| Eric | ||
| </Option> | ||
| <ListDivider role="none" inset="startContent" /> | ||
| <Option value="2"> | ||
| <ListItemDecorator> | ||
| <Avatar size="sm" src="/static/images/avatar/2.jpg" /> | ||
| </ListItemDecorator> | ||
| Smith | ||
| </Option> | ||
| <ListDivider role="none" inset="startContent" /> | ||
| <Option value="3"> | ||
| <ListItemDecorator> | ||
| <Avatar size="sm" src="/static/images/avatar/3.jpg" /> | ||
| </ListItemDecorator> | ||
| Erika | ||
| </Option> | ||
| </Select> | ||
| ); | ||
| } |
67 changes: 67 additions & 0 deletions
67
docs/data/joy/components/select/SelectCustomValueAppearance.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,67 @@ | ||
| import * as React from 'react'; | ||
| import Avatar from '@mui/joy/Avatar'; | ||
| import Box from '@mui/joy/Box'; | ||
| import Chip from '@mui/joy/Chip'; | ||
| import ListItemDecorator from '@mui/joy/ListItemDecorator'; | ||
| import Select from '@mui/joy/Select'; | ||
| import Option from '@mui/joy/Option'; | ||
| import Typography from '@mui/joy/Typography'; | ||
|
|
||
| export default function SelectCustomValueAppearance() { | ||
| const people = [ | ||
| { name: 'Eric', role: 'PM', status: '2days ago' }, | ||
| { name: 'Smith', role: 'Engineer', status: 'secs ago' }, | ||
| { name: 'Erika', role: 'Designer', status: '10hrs ago' }, | ||
| ]; | ||
| const colors = { | ||
| PM: 'success', | ||
| Engineer: 'primary', | ||
| Designer: 'warning', | ||
| }; | ||
| return ( | ||
| <Select | ||
| defaultValue="Eric" | ||
| componentsProps={{ | ||
| listbox: { | ||
| sx: { | ||
| '--List-decorator-width': '48px', | ||
| }, | ||
| }, | ||
| }} | ||
| sx={{ | ||
| minWidth: 240, | ||
| }} | ||
| > | ||
| {people.map((data, index) => ( | ||
| <Option | ||
| key={data.name} | ||
| value={data.name} | ||
| label={data.name} // The appearance of the selected value will be a string | ||
| > | ||
| <ListItemDecorator> | ||
| <Avatar src={`/static/images/avatar/${index + 1}.jpg`} /> | ||
| </ListItemDecorator> | ||
| <Box component="span" sx={{ display: 'block' }}> | ||
| <Typography component="span">{data.name}</Typography> | ||
| <Typography level="body4">{data.status}</Typography> | ||
| </Box> | ||
| <Chip | ||
| size="sm" | ||
| variant="outlined" | ||
| color={colors[data.role]} | ||
| sx={{ | ||
| ml: 'auto', | ||
| borderRadius: '2px', | ||
| minHeight: '20px', | ||
| paddingInline: '4px', | ||
| fontSize: 'xs', | ||
| bgcolor: `${colors[data.role]}.softBg`, | ||
| }} | ||
| > | ||
| {data.role} | ||
| </Chip> | ||
| </Option> | ||
| ))} | ||
| </Select> | ||
| ); | ||
| } |
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,25 @@ | ||
| import * as React from 'react'; | ||
| import Select from '@mui/joy/Select'; | ||
| import Option from '@mui/joy/Option'; | ||
| import Chip from '@mui/joy/Chip'; | ||
| import FavoriteBorder from '@mui/icons-material/FavoriteBorder'; | ||
|
|
||
| export default function SelectDecorators() { | ||
| return ( | ||
| <Select | ||
| placeholder="Select a pet…" | ||
| startDecorator={<FavoriteBorder />} | ||
| endDecorator={ | ||
| <Chip size="sm" color="danger" variant="soft" sx={{ mr: -1 }}> | ||
| +5 | ||
| </Chip> | ||
| } | ||
| sx={{ width: 240 }} | ||
| > | ||
| <Option value="dog">Dog</Option> | ||
| <Option value="cat">Cat</Option> | ||
| <Option value="fish">Fish</Option> | ||
| <Option value="bird">Bird</Option> | ||
| </Select> | ||
| ); | ||
| } |
Oops, something went wrong.