内置包清单
React#
支持官方 react 中的所有 exports
import React, { lazy, forwardRef, ... } from '@blocklet/pages-kit/builtin/react'
React Router DOM#
支持官方 react-router-dom 中所有的 exports
import { useNavigate, ... } from '@blocklet/pages-kit/builtin/react-router-dom';
MUI#
MaterialUI
import {
Alert,
AlertTitle,
Autocomplete,
Avatar,
Box,
Button,
ButtonGroup,
Card,
CardActionArea,
CardActions,
CardContent,
CardHeader,
CardMedia,
CircularProgress,
ClickAwayListener,
Collapse,
Container,
Dialog,
DialogActions,
DialogContent,
DialogTitle,
Divider,
Fade,
GlobalStyles,
Grid,
Grow,
LinearProgress,
Link,
List,
ListItem,
ListItemAvatar,
ListItemButton,
ListItemIcon,
ListItemSecondaryAction,
ListSubheader,
Menu,
MenuItem,
MenuList,
Paper,
Popper,
Select,
Slide,
Stack,
Switch,
TextField,
ThemeProvider,
Tooltip,
Typography,
Zoom,
alpha,
createTheme,
styled,
useMediaQuery,
useTheme,
} from '@blocklet/pages-kit/builtin/mui/material';
Lab
import { LoadingButton } from '@blocklet/pages-kit/builtin/mui/lab';
styled#
⚠️注意:暂不支持 styled.div
,请使用 styled('div')
import { styled } from '@blocklet/pages-kit/builtin/mui/material'
const Div = styled('div')`
width: 100px;
height: 100px;
background-color: red;
`
Emotion#
css
import { css } from '@blocklet/pages-kit/builtin/emotion/css';
Iconify#
import { Icon } from '@blocklet/pages-kit/builtin/iconify/react';
React Hook Form#
支持官方 react-hook-form 中所有的 exports
import { useForm, ... } from '@blocklet/pages-kit/builtin/react-hook-form';
React Wrap Balancer#
import Balancer, { Provider } from '@blocklet/pages-kit/builtin/react-wrap-balancer';
Zustand#
zustand
import { create, ... } from '@blocklet/pages-kit/builtin/zustand';
immer middleware
import { immer } from '@blocklet/pages-kit/builtin/zustand/middleware/immer';
Stream#
import { EventSourceParserStream } from '@blocklet/pages-kit/builtin/stream';
Session#
import { useSessionContext } from '@blocklet/pages-kit/builtin/session';
Locale#
import { useLocaleContext } from '@blocklet/pages-kit/builtin/locale';
Call#
import { call } from '@blocklet/pages-kit/builtin/call';
Utils#
import { joinURL, withQuery, getQuery, getComponentMountPoint } from '@blocklet/pages-kit/builtin/utils';
React Scroll To Bottom#
⚠️:这是异步导出的,需要使用 React.lazy
引用组件
import ScrollToBottomAsync from '@blocklet/pages-kit/builtin/async/react-scroll-to-bottom';
const ScrollToBottom = React.lazy(() => ScrollToBottomAsync);
ArcBlock UX#
import { RelativeTime, DID } from '@blocklet/pages-kit/builtin/arcblock/ux';
Builtin Components#
import { LanguageField } from '@blocklet/pages-kit/builtin/components';