You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I am new to IBM Carbon, but would like to use the web components. Trying to prototype a simple app with header nad left side drawer, but have some pain:
The documentation shows how to configure Shell UI , but does not show cleanly where to position the main content. Any better examples?
Can I control the showing/hiding responsive breakpoint for the side bar?
When the left-side drawer shows, it covers the main content. I would rather push it to the right. How?
The top hover covers my main area, I use a margin with a magic number to push my main area down, any better way?
Is it possible to make Shell UI work with moder CSS things like grid and flex?
Here is my sample code:
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8" />
<metaname="viewport" content="width=device-width, initial-scale=1.0" />
<scripttype="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/ui-shell.min.js"></script><linkrel="stylesheet"
href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
<style>
body {
height: 100vdh;
background-color: pink;
}
main{
margin: 3.5rem 0 0 0;
border: 1px solid red;
height: 100%;
}
</style><title>Document</title></head><body><header><cds-headeraria-label="IBM Platform Name"><cds-header-menu-buttonbutton-label-active="Close menu" button-label-inactive="Open menu"></cds-header-menu-button><cds-header-namehref="javascript:void 0" prefix="IBM">[Platform]</cds-header-name><cds-header-navmenu-bar-label="IBM [Platform]"><cds-header-nav-itemhref="javascript:void 0">Link 1</cds-header-nav-item><cds-header-nav-itemhref="javascript:void 0">Link 2</cds-header-nav-item><cds-header-nav-itemhref="javascript:void 0">Link 3</cds-header-nav-item><cds-header-menumenu-label="Link 4" trigger-content="Link 4"><cds-header-menu-itemhref="javascript:void 0">Sub-link 1</cds-header-menu-item><cds-header-menu-itemhref="javascript:void 0">Sub-link 2</cds-header-menu-item><cds-header-menu-itemhref="javascript:void 0">Sub-link 3</cds-header-menu-item></cds-header-menu></cds-header-nav></cds-header></header><main>
Lorem A ipsum dolor sit amet consectetur adipisicing elit. Et natus labore rerum, fugit, mollitia,
eius blanditiis vitae magni ipsa itaque ab. Laboriosam ex dolores fuga autem error minus deserunt officia.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Non expedita magni qui totam esse consectetur,
odit temporibus fuga! Quo quasi suscipit cupiditate exercitationem atque, est dignissimos illo eius aut ea!
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni ut ratione iure ipsa vel rerum voluptatum consequuntur,
libero mollitia ad eius totam animi distinctio saepe in, labore, quidem optio tenetur!
</main><divclass="left-sidebar"><cds-side-navaria-label="Side navigation" expanded><cds-side-nav-items><cds-side-nav-menutitle="L0 menu"><cds-side-nav-menu-itemhref="www.ibm.com">
L0 menu item
</cds-side-nav-menu-item><cds-side-nav-menu-itemhref="www.ibm.com">
L0 menu item
</cds-side-nav-menu-item><cds-side-nav-menu-itemhref="www.ibm.com">
L0 menu item
</cds-side-nav-menu-item></cds-side-nav-menu><cds-side-nav-menutitle="L0 menu"><cds-side-nav-menu-itemhref="www.ibm.com">
L0 menu item
</cds-side-nav-menu-item><cds-side-nav-menu-itemactivearia-current="page" href="www.ibm.com">
L0 menu item
</cds-side-nav-menu-item><cds-side-nav-menu-itemhref="www.ibm.com">
L0 menu item
</cds-side-nav-menu-item></cds-side-nav-menu><cds-side-nav-menutitle="L0 menu"><cds-side-nav-menu-itemhref="www.ibm.com">
L0 menu item
</cds-side-nav-menu-item><cds-side-nav-menu-itemhref="www.ibm.com">
L0 menu item
</cds-side-nav-menu-item><cds-side-nav-menu-itemhref="www.ibm.com">
L0 menu item
</cds-side-nav-menu-item></cds-side-nav-menu><cds-side-nav-divider></cds-side-nav-divider><cds-side-nav-linkhref="javascript:void(0)">L0 link</cds-side-nav-link><cds-side-nav-linkhref="javascript:void(0)">L0 link</cds-side-nav-link></cds-side-nav-items></cds-side-nav></div></body></html>
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
I am new to IBM Carbon, but would like to use the web components. Trying to prototype a simple app with header nad left side drawer, but have some pain:
The documentation shows how to configure Shell UI , but does not show cleanly where to position the main content. Any better examples?
Can I control the showing/hiding responsive breakpoint for the side bar?
When the left-side drawer shows, it covers the main content. I would rather push it to the right. How?
The top hover covers my main area, I use a margin with a magic number to push my main area down, any better way?
Is it possible to make Shell UI work with moder CSS things like grid and flex?
Here is my sample code:
Beta Was this translation helpful? Give feedback.
All reactions