组件的全局配置选项。
对于具有覆盖层的组件（如下拉列表），可以使用此选项将弹出窗口安装到组件或 DOM 元素实例中。有效值是任何 DOM 元素（如文档主体）和 self。默认情况下，所有弹出窗口都通过 Portals 追加到文档主体。
//_app.js
import { PrimeReactProvider } from 'primereact/api';
export default function MyApp({ Component }) {
const value = {
appendTo: 'self',
...
};
return (
<PrimeReactProvider value={value}>
<App />
</PrimeReactProvider>
);
}
此选项允许 useStyle 将动态 CSS 样式插入到特定容器中。当样式需要在诸如 Shadow DOM. 默认情况下，所有动态样式都附加到 document.head。
//_app.js
import { PrimeReactProvider } from 'primereact/api';
root.attachShadow({ mode: 'open' }); // Open the shadowRoot
const mountHere = root.shadowRoot;
const options = { appendTo: mountHere, styleContainer: mountHere};
ReactDOM.createRoot(mountHere).render(
<React.StrictMode>
<PrimeReactProvider value={options}>
<App />
</PrimeReactProvider>
</React.StrictMode>
);
PrimeReact 组件在内部使用 react-transition-group 来实现动画。将 cssTransition 设置为 false 将禁用所有动画。
//_app.js
import { PrimeReactProvider } from 'primereact/api';
export default function MyApp({ Component }) {
const value = {
cssTransition: false,
...
};
return (
<PrimeReactProvider value={value}>
<App />
</PrimeReactProvider>
);
}
要在数据表过滤器菜单上显示的默认过滤器模式。
//_app.js
import { PrimeReactProvider } from 'primereact/api';
export default function MyApp({ Component }) {
const value = {
filterMatchMode: {
text: [FilterMatchMode.STARTS_WITH, FilterMatchMode.CONTAINS, FilterMatchMode.NOT_CONTAINS, FilterMatchMode.ENDS_WITH, FilterMatchMode.EQUALS, FilterMatchMode.NOT_EQUALS],
numeric: [FilterMatchMode.EQUALS, FilterMatchMode.NOT_EQUALS, FilterMatchMode.LESS_THAN, FilterMatchMode.LESS_THAN_OR_EQUAL_TO, FilterMatchMode.GREATER_THAN, FilterMatchMode.GREATER_THAN_OR_EQUAL_TO],
date: [FilterMatchMode.DATE_IS, FilterMatchMode.DATE_IS_NOT, FilterMatchMode.DATE_BEFORE, FilterMatchMode.DATE_AFTER]
},
...
};
return (
<PrimeReactProvider value={value}>
<App />
</PrimeReactProvider>
);
}
定义在显示下拉列表或日历等覆盖面板时滚动浏览器窗口的行为。根据您组织的可访问性需求，有些人希望在滚动时关闭面板，有些人则希望覆盖层跟随滚动。默认值为 false。重要提示：您的 document.body 必须具有 overflow CSS 才能正常工作。
//_app.js
import { PrimeReactProvider } from 'primereact/api';
export default function MyApp({ Component }) {
const value = {
hideOverlaysOnDocumentScrolling: true,
...
};
return (
<PrimeReactProvider value={value}>
<App />
</PrimeReactProvider>
);
}
//_app.css
body {
margin: 0px;
min-height: 100%;
overflow-x: hidden;
overflow-y: auto;
}
输入字段有两种样式，默认样式为 outlined，即字段周围带有边框，而 filled 替代样式则为字段添加了背景颜色。将 p-input-filled 应用到输入的祖先会启用填充样式。如果您希望在整个应用程序中使用填充的输入，请使用全局容器（如文档主体或应用程序元素）来应用样式类。请注意，如果您将其添加到应用程序元素，则传送到文档主体的组件（如对话框）将无法显示填充的输入，因为它们不是 DOM 树中应用程序根元素的后代，要解决此问题，请在 PrimeReact 配置中将 inputStyle 设置为 filled。
//_app.js
import { PrimeReactProvider } from 'primereact/api';
export default function MyApp({ Component }) {
const value = {
inputStyle: 'filled',
...
};
return (
<PrimeReactProvider value={value}>
<App />
</PrimeReactProvider>
);
}
在动态生成的样式元素上使用的 nonce 值。
//_app.js
import { PrimeReactProvider } from 'primereact/api';
export default function MyApp({ Component }) {
const value = {
nonce: '.........',
...
};
return (
<PrimeReactProvider value={value}>
<App />
</PrimeReactProvider>
);
}
确定如何对 null 值进行排序。默认值 1 表示像 Excel 一样排序，所有 NULL 值都在列表的底部。值 -1 在升序模式下将 NULL 排序在列表的顶部，在降序模式下排序在列表的底部。
//_app.js
import { PrimeReactProvider } from 'primereact/api';
export default function MyApp({ Component }) {
const value = {
nullSortOrder: 1,
...
};
return (
<PrimeReactProvider value={value}>
<App />
</PrimeReactProvider>
);
}
涟漪效果是支持组件（如按钮）的可选动画。默认情况下处于禁用状态。
//_app.js
import { PrimeReactProvider } from 'primereact/api';
export default function MyApp({ Component }) {
const value = {
ripple: true,
...
};
return (
<PrimeReactProvider value={value}>
<App />
</PrimeReactProvider>
);
}
ZIndex 是自动管理的，以确保在组合多个组件时覆盖组件的图层无缝工作。仍然可能存在您希望配置默认值的情况，例如固定标头部分的自定义布局。在这种情况下，下拉列表需要显示在应用程序标头下方，但模态对话框应该显示在上方。PrimeReact 配置提供了 zIndex 属性来定制组件类别的默认值。默认值如下所述，可以在设置上下文值时进行定制。
所有组件的 ZIndex 根据其组彼此和谐地增加。当 autoZIndex 为 false 时，每个组都会在其自身内递增其 zIndex。
//_app.js
import { PrimeReactProvider } from 'primereact/api';
export default function MyApp({ Component }) {
const value = {
zIndex: {
modal: 1100, // dialog, sidebar
overlay: 1000, // dropdown, overlaypanel
menu: 1000, // overlay menus
tooltip: 1100 // tooltip
toast: 1200 // toast
},
autoZIndex: true,
...
};
return (
<PrimeReactProvider value={value}>
<App />
</PrimeReactProvider>
);
}
要为整个应用程序建立默认区域设置，可以使用 PrimeReactProvider。
//_app.js
import { PrimeReactProvider } from 'primereact/api';
export default function MyApp({ Component }) {
const value = {
locale: 'de',
...
};
return (
<PrimeReactProvider value={value}>
<App />
</PrimeReactProvider>
);
}
配置由从 primereact/api 导入的 Locale API 管理。
import { locale, addLocale, updateLocaleOption, updateLocaleOptions, localeOption, localeOptions } from 'primereact/api';
可以使用 locale 方法随时设置可用的区域设置。
locale('en');
可以使用 addLocale 方法添加新的区域设置。
addLocale('es', {
firstDayOfWeek: 1,
dayNames: ['domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado'],
dayNamesShort: ['dom', 'lun', 'mar', 'mié', 'jue', 'vie', 'sáb'],
dayNamesMin: ['D', 'L', 'M', 'X', 'J', 'V', 'S'],
monthNames: ['enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto', 'septiembre', 'octubre', 'noviembre', 'diciembre'],
monthNamesShort: ['ene', 'feb', 'mar', 'abr', 'may', 'jun', 'jul', 'ago', 'sep', 'oct', 'nov', 'dic'],
today: 'Hoy',
clear: 'Limpiar',
//...
});
可在社区支持的 PrimeLocale 存储库中获得区域设置的即用型设置。如果您可以通过拉取请求为该存储库做出贡献并与社区的其他成员分享，我们将不胜感激。