コンポーネントのグローバルな設定オプション。
ドロップダウンのようなオーバーレイを持つコンポーネントの場合、このオプションを使用して、ポップアップをコンポーネントまたはDOM要素インスタンスにマウントできます。有効な値は、document.bodyやselfのような任意のDOM要素です。デフォルトでは、すべてのポップアップはポータルを介してdocument.bodyに追加されます。
//_app.js
import { PrimeReactProvider } from 'primereact/api';
export default function MyApp({ Component }) {
const value = {
appendTo: 'self',
...
};
return (
<PrimeReactProvider value={value}>
<App />
</PrimeReactProvider>
);
}
このオプションを使用すると、useStyleが特定のコンテナーに動的なCSSスタイルを挿入できます。これは、スタイルをスコープする必要がある場合に役立ちます。例： シャドウ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>
);
}
DataTableフィルターメニューに表示するデフォルトのフィルターモード。
//_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;
}
入力フィールドには、2つのスタイルがあります。デフォルトは、フィールドの周りに境界線があるoutlinedスタイルで、filledの代替スタイルは、フィールドに背景色を追加します。入力の祖先にp-input-filledを適用すると、filledスタイルが有効になります。アプリケーション全体でfilled入力を使用したい場合は、ドキュメントボディやアプリケーション要素などのグローバルコンテナーを使用してスタイルクラスを適用します。アプリケーション要素に追加した場合、ダイアログなど、ドキュメントボディにテレポートされるコンポーネントは、DOMツリー内でアプリケーションルート要素の子孫ではないため、filled入力を表示できないことに注意してください。この問題を解決するには、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リポジトリで入手できます。プルリクエストでこのリポジトリに貢献し、コミュニティの他のメンバーと共有していただけると幸いです。