@mui/icons-material APIs
- Close
- Add
- Delete
- ExpandMore
- Settings
- Check
- Update
- GitHub
- MoreVert
- HelpOutline
- ChevronRight
- ExpandLess
- Menu
- FileCopy
- CheckBox
- CheckBoxOutlineBlank
- ArrowBack
- DeleteForever
- Visibility
- VisibilityOff
- Save
- Person
- Edit
- People
- ChevronLeft
- PlayArrow
- Home
- ExitToApp
- MoreHoriz
- WbSunny
- Download
- Upload
- Search
- HighlightOffOutlined
- ContentCopy
- Calculate
- ShoppingCart
- AccountBalance
- BarChart
- Paid
- Clear
- Cancel
- ArrowDownward
- ArrowUpward
- PhotoCamera
- Folder
- InfoOutlined
- Code
- KeyboardArrowDown
- Lock
- LockOpen
- Replay
- Favorite
- Build
- Refresh
- AssignmentInd
- Pets
- Public
- Group
- Brush
- KeyboardTab
- Phone
- HelpOutlineOutlined
- NetworkWifi
- CompareArrows
- AdminPanelSettings
- BugReport
- Logout
- Message
- AddCircle
- LockOutlined
- HomeOutlined
- BarChartOutlined
- MusicNote
- MusicNoteOutlined
- Album
- AlbumOutlined
- PersonOutlined
- SettingsOutlined
- Share
- ShareOutlined
- FastRewind
- Help
- Loop
- VolumeDown
- VolumeUp
- PauseCircle
- PlayCircle
- VolumeOff
- ChatBubbleOutline
- LockRounded
- WifiOffRounded
- VideocamOutlined
- AddRounded
- MoreVertRounded
- SyncProblem
- VideoCallOutlined
- GetAppRounded
- SaveAlt
- ErrorRounded
- InsertDriveFileRounded
- CheckCircleOutline
- CloudOff
- ClearAll
- CloseOutlined
- Link
- AttachmentOutlined
- CodeOutlined
- MailOutlineRounded
- Brightness7Rounded
- MenuRounded
- NightsStayRounded
- ArrowForward
- BrushRounded
- VisibilityRounded
- FileCopyRounded
- FavoriteRounded
- DesktopMacRounded
- PhoneAndroidRounded
- TabletMac
- ThumbUpOutlined
- ThumbDownOutlined
- AssistantPhotoOutlined
- Publish
- Create
- WbCloudy
- Computer
- KeyboardArrowUp
- BusinessCenter
- FavoriteBorder
- Groups
- Shuffle
- Difference
- SwapHoriz
- Info
- KeyboardDoubleArrowDown
- KeyboardDoubleArrowUp
- PersonAdd
- Checkroom
- FactCheck
- ArrowRightAlt
- Scanner
- Brightness4
- Brightness7
- Translate
- Backpack
- SettingsBrightness
- Equalizer
- Handyman
- SentimentVerySatisfied
- SentimentDissatisfied
- SentimentSatisfied
- AccessTime
- Remove
- ArrowDropDown
- ArrowRight
- Undo
- Redo
- CreateNewFolder
- Description
- Outbox
- Inbox
- DriveFileRenameOutline
- ContentPaste
- Block
- Star
- StarBorder
- Security
- Today
- Event
- Login
- Sick
- FaceRetouchingOff
- Fireplace
- ErrorOutline
- Stop
- ViewList
- Send
- PlayCircleFilledWhite
- PlaylistAddCheck
- Telegram
- VerifiedUser
- Notifications
- MenuOpen
- GppGood
- ContactPhone
- Payment
- FolderShared
- Class
- Shield
- MoveUp
- VolunteerActivism
- DisplaySettings
- Apartment
- BusAlert
- Category
- FilterNone
- Forest
- MedicalServices
- School
- SportsTennis
- TheaterComedy
- ReportGmailerrorred
- ArrowCircleUp
- UploadFile
- YouTube
- Web
- AccountCircle
- AccessibilityNew
- Chat
- FolderOpen
- FileCopyOutlined
- KeyboardBackspace
- CheckCircleOutlined
- ReportProblemOutlined
- ManageAccounts
- PhotoLibrary
- SettingsBackupRestore
- SupervisorAccount
- Api
- FeaturedPlayList
- BugReportOutlined
- NewReleases
- ColorLens
- FolderOutlined
- Apps
- SpeakerNotes
- LocalCafe
- BurstModeSharp
- DevicesOther
- VideoLibrary
- AddOutlined
- DeleteOutlineOutlined
- EditOutlined
- MoreHorizOutlined
- Bookmarks
- CopyAll
- InsertComment
- KeyboardArrowRight
- FileDownload
- Done
- PendingOutlined
- HelpOutlineRounded
- ReportProblem
- HelpOutlined
Other Related APIs
@mui/icons-material#Done TypeScript Examples
The following examples show how to use
@mui/icons-material#Done.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: index.tsx From Search-Next with GNU General Public License v3.0 | 4 votes |
OtherApis: React.FC<PageProps> = (props) => {
const { route, children } = props;
const [iconApi, setIconApi] = React.useState('');
const [apiStatus, setApiStatus] = React.useState<ApiStatus>({});
const init = () => {
const account = localStorage.getItem('account');
const data = getOtherIconApi({
userId: account ?? '',
type: 'icon',
});
setIconApi(data.apiId);
let map = {} as ApiStatus;
websiteIconApis.forEach((i) => {
map[i.id] = 'warning';
});
setApiStatus(map);
};
const onChange = (event: SelectChangeEvent<any>) => {
const select = event.target.value;
setIconApi(select);
const account = localStorage.getItem('account');
setOtherIconApi({
userId: account ?? '',
apiId: select,
type: 'icon',
});
};
const StatusChip = (status: string) => {
const statusMap = {
warning: (
<>
<PendingOutlined /> 等待响应
</>
),
success: (
<>
<Done /> 成功
</>
),
error: (
<>
<Close /> 失败
</>
),
};
return (
<Chip
size="small"
color={status as any}
label={
<div className="text-sm flex items-center gap-1">
{(statusMap as any)[status as any]}
</div>
}
/>
);
};
React.useEffect(() => {
init();
}, []);
return (
<div>
<ContentList>
<Alert severity="info">
<AlertTitle>提示</AlertTitle>
不同地区,不同网络下各API的表现可能不同,请选择最适合的API以提高使用体验。
</Alert>
<ItemAccordion
title="Website Icon API"
desc="设置获取网站图标的api"
action={
<Select
label="API"
value={iconApi}
size="small"
onChange={onChange}
options={websiteIconApis.map((i) => ({
label: i.name,
value: i.id,
}))}
/>
}
>
<div className="flex items-center text-sm gap-1 pb-2">
<PendingOutlined /> <span>等待响应</span>
<Done /> <span>成功</span>
<Close /> <span>失败</span> 状态仅作参考,具体以实际使用为准
</div>
{websiteIconApis.map((i) => {
return (
<AccordionDetailItem
key={i.id}
disabledRightPadding
title={i.name}
action={
<>
{StatusChip(apiStatus[i.id])}
<img
className={css`
display: none;
`}
src={`${i.url}google.com`}
alt={i.name}
onLoad={(v) => {
setApiStatus({ ...apiStatus, [i.id]: 'success' });
}}
onError={(err) => {
setApiStatus({ ...apiStatus, [i.id]: 'error' });
}}
/>
</>
}
/>
);
})}
</ItemAccordion>
</ContentList>
</div>
);
}