@aglyn/ shared- ui- snackstack( 共享)
堆叠的点心栏通知材料 UI:一个排队和显示点心栏的提供者,以及一个从下方任何地方排队并关闭点心栏的钩子. API跟随公关SnackbarProvider, (中文(简体) ), useSnackbar, (中文(简体) ), enqueueSnackbar) (中文(简体) ). Aglyn控制台,Besigner和插件控制台的页面用来做烤面包.
从Aglyn monorepo出版到npm. 随后的版本 语义版本。 。 。 .
安装
npm install @aglyn/shared-ui-snackstack
同伴依赖性 : react, (中文(简体) ), react-dom 财务报告和审定财务报表 @mui/material,加上三个Aglyn软件包,它们被宣布为对等方而不是依赖方,所以要同时安装:
npm install @aglyn/shared-ui-theme @aglyn/shared-util-tools @aglyn/shared-util-vendor
里面有什么东西
SnackbarProvider——包好显示小吃栏的应用部分. 道具( E)SnackbarProviderProps包括maxSnack(一次堆放多少个,默认3),dense, (中文(简体) ),hideIconVariant, (中文(简体) ),iconVariant, (中文(简体) ),domRoot财务报告和审定财务报表classes,加上共享的每斯纳克巴默认值.useSnackbar()——返回{ enqueueSnackbar, closeSnackbar }(单位:千美元)ProviderContext) (中文(简体) ).enqueueSnackbar(message, options?)返回小吃栏的id.options(单位:千美元)OptionsObject包括variant(单位:千美元)'default' | 'error' | 'success' | 'warning' | 'info', (中文(简体) ),persist财务报告和审定财务报表snackbarId。 。 。 .closeSnackbar(id?)关闭一个小吃栏,或者在没有身份证的情况下全部关闭.
withSnackbar(Component)——作为道具注入的同两种功能,为类组件.SnackbarContent——制作自定义小吃栏正文时需要使用的内容包装.- 类型 :
SnackbarId, (中文(简体) ),SnackbarMessage, (中文(简体) ),SnackbarAction, (中文(简体) ),VariantType, (中文(简体) ),CloseReason, (中文(简体) ),SnackbarOrigin, (中文(简体) ),OptionsObject, (中文(简体) ),SnackbarProviderProps, (中文(简体) ),ProviderContext, (中文(简体) ),WithSnackbarProps。 。 。 .
使用量
import { SnackbarProvider, useSnackbar } from '@aglyn/shared-ui-snackstack'
function SaveButton() {
const { enqueueSnackbar } = useSnackbar()
return (
<button onClick={() => enqueueSnackbar('Saved', { variant: 'success' })}>
Save
</button>
)
}
export function App() {
return (
<SnackbarProvider maxSnack={3}>
<SaveButton />
</SnackbarProvider>
)
}
怎样才合适
A 类 shared UI软件包. 其基础是 @aglyn/shared-ui-theme, (中文(简体) ), @aglyn/shared-util-tools 财务报告和审定财务报表 @aglyn/shared-util-vendor· ; @aglyn/besigner-ui 而特性插件依赖于它。 共享软件包是通用的:它们只导入其他共享软件包并持有没有插件的域名.
许可证
阿帕奇2.0 (英语). 资料来源: https://github.com/aglyn/aglyn/tree/main/libs/shared/ui/snackstack 页面存档备份,存于互联网档案馆