简体   繁体   中英

How can I make icon '+' on create button in react-admin?

I have some problem with default view of button create. When the screen is more than 900px width we will see button create with label "CREATE". When the screen is less than 900px we will see button create as icon "+". I'd like to see button create as icon "+" all the time. Please, help.

export function Content() {
    const dataProvider = useDataProvider();
    const sellerId = useSellerId();
    return (
        <Admin dataProvider={dataProvider} layout={CustomLayout}>
            <Resource
                name="seller"
                list={MenuItems}
                create={<CreateMenuItem sellerId={sellerId} />}
                edit={<EditMenuItem sellerId={sellerId} />}
                options={{ label: 'Menu' }}
            />
            <CustomRoutes>
                <Route path="/profile" element={<SellerInfo />} />
                <Route path="/images" element={<ImagesManager />} />
            </CustomRoutes>
        </Admin>
    );
}

Haven't tried this myself but you could try to create your own custom button because the Create label is on the CreateButton by default:

import { Admin, Resource, CreateButton, TopToolbar, List } from 'react-admin';

const CreateMenuItemButton = () => <CreateButton resource="seller" label="" />;

const MenuItemActions = () => (
    <TopToolbar>
        <CreateMenuItemButton />
    </TopToolbar>
);

const MenuItems = () => (
    <List actions={<MenuItemActions />}>
        ...
    </List>
);

export function Content() {
    const dataProvider = useDataProvider();
    const sellerId = useSellerId();
    return (
        <Admin dataProvider={dataProvider} layout={CustomLayout}>
            <Resource
                name="seller"
                list={MenuItems}
                create={<CreateMenuItem sellerId={sellerId} />}
                edit={<EditMenuItem sellerId={sellerId} />}
                options={{ label: 'Menu' }}
            />
            <CustomRoutes>
                <Route path="/profile" element={<SellerInfo />} />
                <Route path="/images" element={<ImagesManager />} />
            </CustomRoutes>
        </Admin>
    );
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM