component-controls allows extensive customization of the user interface - from theming, SEO tags to toolbars, sidebars, and footer. Most of the user-interface customizations can be set up in your .config/runtime.js file.
In the following examples, you can play with control values and see live the source code changes to be copy/pasted in the buildtime.js configuration file.
The site meta settings are used both for SEO purposes as page <meta /> tags and displayed in the application user interface.
.config/runtime.js
export default {logo: 'https://upload.wikimedia.org/wikipedia/commons/b/b8/Netlify_logo.svg',copyright: 'Copyright © 2021',}
Name | Description | Default | Controls |
|---|---|---|---|
| title | Standalone site title. Default is "Component controls" text | ||
| logo | Custom logo url - set to null to remove the logo text | https://upload.wikimedia.org/wikipedia/commons/b/b8/Netlify_logo.svg | |
| description | Site description. Used in page "description" meta tag text | ||
| copyright | Copyright notice displayed in the footer text | Copyright © 2021 | |
| language | Site language, Default is "en" text | ||
| author | Site author. Default is "@component-controls" text |
You can wrap the application and create any additional components or insert styles.
.config/runtime.js
export default {app: ({ children }) => <div style={{ background: 'pink'}}>{children}</div>,}
You can use any theme-ui theme as a starting point for customizing the user interface. You can select below one of the themes shipping with the @theme-ui/presets package and observe the user interface changes.
.config/runtime.js
export default {theme: {},}
Name | Description | Default | Controls |
|---|---|---|---|
| theme | options | none |
The toolbar consists of two sections: left and right, where the left section is still displayed in responsive screen sizes, while the right section is hidden.
The toolbar items are ActionBar items that can be extended, overrriden and changed as usual ActionItems.
To add new items to the toolbar, you need to specify a left or right array of new items.
.config/runtime.js
import { Box, Text } from 'theme-ui';import { OctofaceIcon, MailIcon } from '@primer/octicons-react';export default {toolbar: {right: [{node: (<Link href="https://component-controls.com" ><Box sx={{ mr: 1, display: 'flex', flexDirection: 'row', alignItems: 'center'}} ><OctofaceIcon /><Text sx={{ ml: '2px'}}>first</Text></Box></Link>),},{node: (<Link href="https://component-controls.com" ><Box sx={{ mr: 1, display: 'flex', flexDirection: 'row', alignItems: 'center'}} ><MailIcon /><Text sx={{ ml: '2px'}}>second</Text></Box></Link>),}],}}
Name | Description | Default | Controls | |
|---|---|---|---|---|
first (5 properties) | ||||
| visible | boolean | true | ||
| type | options | link | ||
| side | options | right | ||
| text | text | first | ||
| icon | options | OctofaceIcon | ||
second (5 properties) | ||||
| visible | boolean | true | ||
| type | options | link | ||
| side | options | right | ||
| text | text | second | ||
| icon | options | MailIcon | ||
You can insert a toolbar item at any position, by specifying the order property.
.config/runtime.js
export default {toolbar: {left: [{order: -1,node: (<svg viewBox="0 0 24 20" xmlns="http://www.w3.org/2000/svg" width={32} height={32} fill="currentColor" ><path d="M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.951.555-2.005.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.722-.666 1.561-.666 2.475 0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-.39 0-.779-.023-1.17-.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548l-.047-.02z"></path></svg>),}]}}
Name | Description | Default | Controls |
|---|---|---|---|
| order | number | -1 |
The remove toolbar items, you can override them by id and set hidden: true.
.config/runtime.js
export default {}
Name | Description | Default | Controls |
|---|---|---|---|
| home | boolean | true | |
| search | boolean | true | |
| colormode | boolean | true |
The sidebar items are also ActionBar and can be customized as such. By default, a document type title and a filter input are displayed.
Name | Description | Default | Controls |
|---|---|---|---|
| logo order | number | 0 | |
| title | boolean | true | |
| filter | boolean | true |
The footer is also customizable with a left and right section as the toolbar.
Name | Description | Default | Controls | |
|---|---|---|---|---|
first (5 properties) | ||||
| visible | boolean | true | ||
| type | options | link | ||
| side | options | right | ||
| text | text | first | ||
| icon | options | OctofaceIcon | ||
second (5 properties) | ||||
| visible | boolean | true | ||
| type | options | link | ||
| side | options | right | ||
| text | text | second | ||
| icon | options | MailIcon | ||