Top
We have provided a bunch of page layouts and menu layouts that can be implemented with just a options change to body! Please refer the below table for corresponding classes.
| RTL Layout | Class:rtl | If you want rtl layout add this predefine class to the body tag and also added dir="rtl" in html tag. |
| Light Layout | - | - |
| Dark Layout | Class:dark-layout | If you want dark layout add this predefine class to the body tag only. |
If you have to convert any header & menu into fixed header just added only one class! Please refer the below table for corresponding classes.
| Header | Class : fixed-header |
You can customise your theme using customiser. This tool lets you adjust the appearance and functionality of your website according to your preferences. One of the features you can modify is the text direction and color scheme of your theme.
You can find two toggle buttons in the customiser that allow you to switch between right-to-left and left-to-right text direction, as well as dark and light color schemes. You can see an example of these buttons in the image below, which is located in the page folder layouts/customizer folder.
Skeleton screen is a low fidelity UI into which information is gradually loaded. It gives users a visual cue that the content is being loaded into each UI element.
Skeleton Screen when used as the feature in the product make people perceive that app/website is loading fast. Improved perceived performance not only provide good UX but also helps in increasing conversion ratio.
If you want to disable the loader section that appears at the beginning of the HTML pages, you can simply delete that section from the code. The loader section is located in the folder layouts/loader/skeleton. There are different designs for the skeleton loader page, depending on the layout you choose.
<!-- loader start -->
<div className='skeleton_loader' >
...
</div>
<!-- loader end -->
We offers various loader options in Rica. Depending on the layout of your project, we can provide you with the most suitable loader for your needs. We have a range of layouts to choose from, and we ensure that our loaders are compatible with each one.
How to change loader?You can change loader according to your requirement. You need to change only one page which is layouts/layout.tsx. In that page we provide multiple loader options.choose any one as per you requirement. and add that loader in your theme. Here i shared with you screenshot for that change page.
You need to use this dependency react-360-view. which will help you to get the result.
"use client";
import React, { useMemo } from "react";
import View360, { EquirectProjection } from "@egjs/react-view360";
import "@egjs/react-view360/css/view360.min.css";
const BannerImage = () => {
const projection = useMemo(
() =>
new EquirectProjection({
src: "/assets/images/360/room.jpg",
}),
[],
);
return <View360 className="is-16by9" zoom={false} disableContextMenu={true} scrollable={false} wheelScrollable={true} autoResize={true} projection={projection} />;
};
export default BannerImage;