管理员中带有图像的自定义标题休息
Custom title with image in admin on rest
我正在使用 admin-on-rest 构建我们的下一个仪表板。我希望能够在标题前面的 header 中添加一个 logo/image。这是否涉及自定义主题,或者是否有侵入性较小的方法?
我找到了这个问题的答案,我想我会在 Whosebug 上分享给下一个面临这个问题的开发者。
<Admin />
上的 title
属性接受一个节点。所以这有效:
import {Admin} from 'admin-on-rest';
const App = () => (
<Admin title={<AppTitle />}>
// Resources
</Admin>
);
// Default styles
const appTitleStyles = {
whiteSpace : 'nowrap',
overflow : 'hidden',
WebkitTextOverflow: 'ellipsis',
textOverflow : 'ellipsis',
margin : 0,
letterSpacing : 0,
fontSize : 24,
fontWeight : '400',
color : 'rgb(255, 255, 255)',
height : 44,
paddingTop : 10,
paddingBottom : 10,
WebkitFlex : '1 1 0%',
MsFlex : '1 1 0%',
flex : '1 1 0%'
};
const AppTitle = () => (
<img style={appTitleStyles} src="./my-cool-logo.png" />
);
export default App;
我正在使用 admin-on-rest 构建我们的下一个仪表板。我希望能够在标题前面的 header 中添加一个 logo/image。这是否涉及自定义主题,或者是否有侵入性较小的方法?
我找到了这个问题的答案,我想我会在 Whosebug 上分享给下一个面临这个问题的开发者。
<Admin />
上的 title
属性接受一个节点。所以这有效:
import {Admin} from 'admin-on-rest';
const App = () => (
<Admin title={<AppTitle />}>
// Resources
</Admin>
);
// Default styles
const appTitleStyles = {
whiteSpace : 'nowrap',
overflow : 'hidden',
WebkitTextOverflow: 'ellipsis',
textOverflow : 'ellipsis',
margin : 0,
letterSpacing : 0,
fontSize : 24,
fontWeight : '400',
color : 'rgb(255, 255, 255)',
height : 44,
paddingTop : 10,
paddingBottom : 10,
WebkitFlex : '1 1 0%',
MsFlex : '1 1 0%',
flex : '1 1 0%'
};
const AppTitle = () => (
<img style={appTitleStyles} src="./my-cool-logo.png" />
);
export default App;