ra-compact-ui
Enhanced styling components for popular framework react-admin.
No extra dependencies are required except the ones react-admin is already using.
Why using?
- reduces styling boilerplate code
- eases layout customizations
- maintains native usage of built-in
react-admincomponents
Actively maintained and developed with monthly releases!
Installation
Available as a npm package. You can install it using:
npm install ra-compact-ui
#or
yarn add ra-compact-uiRun the Demo
npm run start-demo
#or
yarn start-demoTable of Content
Show View
Create & Edit View
Examples
Show View Components
Layouts
Layout components which allow building custom Show Layouts using unlimited nesting of material-ui's Box or Grid components while maintaining native use of all of the react-admin field-related components. Each layout can be used inside the Show component as well as inside the TabbedShowLayout's Tab component.
Important - In order for the layouts to work properly you should use the provided wrappers of the material-ui's layout components named relatively - RaBox and RaGrid. They receive and pass directly all the props provided by the material-ui's api.
BoxedShowLayout
Utilizes material-ui's Box component wrapped inside RaBox and provides easy access to common css and flex-box properties.
const useStyles = makeStyles(theme => ({
detailsBox: {
paddingRight: "50px",
borderRight: "solid thin",
marginRight: "50px",
},
}));
...
<BoxedShowLayout>
<RaBox display="flex" >
<RaBox display="flex" flexWrap="wrap" flexGrow={4} className={classes.detailsBox}>
<RaBox flex="0 0 100%" display="flex" justifyContent="space-between">
<ReferenceField label="Client Name" source="clientId" reference="clients">
<TextField source="name" />
</ReferenceField>
<ChipField source="progressStatus" label="Progress Status" />
<TextField source="priority" />
</RaBox>
<RaBox flex="0 0 100%" display="flex" justifyContent="space-between">
<DateField source="startDate" />
<TextField source="timeElapsed" />
<DateField source="deadline" />
</RaBox>
</RaBox>
<RaBox display="inline-flex" flexDirection="column" flexGrow={1}>
<ReferenceField label="Project Manager" source="managerId" reference="staff">
<UserChipField source="fullName" />
</ReferenceField>
<ReferenceField label="Product Owner" source="productOwnerId" reference="staff">
<UserChipField source="fullName" />
</ReferenceField>
<ReferenceField label="Marketing Specialist" source="marketingSpecialistId" reference="staff">
<UserChipField source="fullName" />
</ReferenceField>
</RaBox>
</RaBox>
<RaBox flex="0 0 100%" display="flex" mt="20px">
<ArrayField source="activityRecords">
<Datagrid>
<DateField source="date" />
<TextField source="description" />
<TextField source="memberNames" />
</Datagrid>
</ArrayField>
</RaBox>
</BoxedShowLayout>
GridShowLayout
Utilizes material-ui's Grid component wrapped inside RaGrid. Useful to align fields into rows and columns and make layout sections responsive.
Usage is asbolutely analogously to the BoxShowLayout.
CompactShowLayout
This layout is a more generic version allowing you to pass your own layout building blocks (components). It serves also as the base component wrapped by the above ones.
Pass to layoutComponents prop an array which specifies the used layout components to be escaped as non-field components while rendering.
Important - All layout components should have a specified displayName.
<CompactShowLayout layoutComponents={[CustomBox, RaBox]}>
<CustomBox>
<TextField source="name"/>
<RaBox>
<NumberInput source="age" />
</RaBox>
</CustomBox>
</CompactShowLayout>ShowSplitter
Need to mix up different layouts on the same page and separate different sections? The <ShowSplitter/> component helps you do just that with ease.
- Pass the component as single child to the
<Show/>component. - Then pass your different layouts to the
<ShowSplitter/>'s propsleftSideandrightSide.
hint - to escape the default <Card/> surface provided by the <Show/> component pass your custom value, e.g. component="div".
import { ShowSplitter } from 'ra-compact-ui';
...
const StaffShow = props => (
<Show
{...props}
component="div"
>
<ShowSplitter
leftSide={
<SimpleShowLayout>
<AvatarShowField />
<TextField source="full_name" />
<TextField source="email" />
<ArrayField source="skills">
<SingleFieldList>
<ChipField source="name" />
</SingleFieldList>
</ArrayField>
</SimpleShowLayout>
}
rightSide={
<TabbedShowLayout>
<Tab label="Overview">
<TextField source="description" />
</Tab>
<Tab label="Projects">
{/* add more fields here */}
</Tab>
</TabbedShowLayout>
}
/>
</Show>
);
Override and customize the way the layout is split using the leftSideProps and rightSideProps props. You can pass objects with props which will be destructed to the respective material-ui's Grid components which wrap the passed layouts.
The component prop is also supported by each side of the split layout. Example values:
<ShowSplitter
leftSideProps={{
md: 4,
component: 'div'
}}
rightSideProps={{
md: 8
}}
leftSide={...}
rightSide={...}
/>Create & Edit View Components
CompactForm
Provides form layout customization out of the box just like using the <SimpleForm/>.
Pass to layoutComponents prop an array which specifies the used layout components to be escaped as non-input components while rendering.
Important - All layout components should have a specified displayName.
import { CompactForm, RaBox } from 'ra-compact-ui';
...
const StaffEdit = props => (
<Edit {...props}>
<CompactForm layoutComponents={[RaBox]}>
<RaBox display="flex" justifyContent="space-around">
<TextInput source="full_name" />
<TextInput source="email" />
</RaBox>
<TextInput source="description" />
<TextInput source="avatar_url" />
</CompactForm>
</Edit>
);About Author
An enthusiast in
If you enjoy the library and want to support me, you can always
