- The shell is perhaps the most crucial piece of any UI built with
- Carbon. It contains the shared navigation framework for the entire
- design system and ties the products in IBM’s portfolio together in a
- cohesive and elegant way. The shell is the home of the topmost
- navigation, where users can quickly and dependably gain their bearings
- and move between pages.
-
-
- The shell was designed with maximum flexibility built in, to serve the
- needs of a broad range of products and users. Adopting the shell
- ensures compliance with IBM design standards, simplifies development
- efforts, and provides great user experiences. All IBM products built
- with Carbon are required to use the shell’s header.
-
-
- To better understand the purpose and function of the UI shell,
- consider the “shell” of MacOS, which contains the Apple menu,
- top-level navigation, and universal, OS-level controls at the top of
- the screen, as well as a universal dock along the bottom or side of
- the screen. The Carbon UI shell is roughly analogous in function to
- these parts of the Mac UI. For example, the app switcher portion of
- the shell can be compared to the dock in MacOS.
-
- As a header scales down to fit smaller screen sizes, headers with - persistent side nav menus should have the side nav collapse into - “hamburger” menu. See the example to better understand responsive - behavior of the header. -
-- The side-nav contains secondary navigation and fits below the header. - It can be configured to be either fixed-width or flexible, with only - one level of nested items allowed. Both links and category lists can - be used in the side-nav and may be mixed together. There are several - configurations of the side-nav, but only one configuration should be - used per product section. If tabs are needed on a page when using a - side-nav, then the tabs are secondary in hierarchy to the side-nav. -
-
+ The shell is perhaps the most crucial piece of any UI built with
+ Carbon. It contains the shared navigation framework for the entire
+ design system and ties the products in IBM’s portfolio together in a
+ cohesive and elegant way. The shell is the home of the topmost
+ navigation, where users can quickly and dependably gain their
+ bearings and move between pages.
+
+
+ The shell was designed with maximum flexibility built in, to serve
+ the needs of a broad range of products and users. Adopting the shell
+ ensures compliance with IBM design standards, simplifies development
+ efforts, and provides great user experiences. All IBM products built
+ with Carbon are required to use the shell’s header.
+
+
+ To better understand the purpose and function of the UI shell,
+ consider the “shell” of MacOS, which contains the Apple menu,
+ top-level navigation, and universal, OS-level controls at the top of
+ the screen, as well as a universal dock along the bottom or side of
+ the screen. The Carbon UI shell is roughly analogous in function to
+ these parts of the Mac UI. For example, the app switcher portion of
+ the shell can be compared to the dock in MacOS.
+
+ As a header scales down to fit smaller screen sizes, headers with + persistent side nav menus should have the side nav collapse into + “hamburger” menu. See the example to better understand responsive + behavior of the header. +
++ The side-nav contains secondary navigation and fits below the + header. It can be configured to be either fixed-width or flexible, + with only one level of nested items allowed. Both links and category + lists can be used in the side-nav and may be mixed together. There + are several configurations of the side-nav, but only one + configuration should be used per product section. If tabs are needed + on a page when using a side-nav, then the tabs are secondary in + hierarchy to the side-nav. +
+ariaLabel for the <input>.',
+ },
+ disabled: {
+ control: 'boolean',
+ description: 'true to disable this slider.',
+ },
+ hideTextInput: {
+ control: 'boolean',
+ description: 'true to hide the number input box.',
+ },
+ labelText: {
+ control: 'text',
+ description: 'Provide the text for the slider label.',
+ },
+ inputType: {
+ control: 'text',
+ description: 'The type attribute of the <input>.',
+ },
+ invalid: {
+ control: 'boolean',
+ description: 'Specify whether the Slider is currently invalid.',
+ },
+ invalidText: {
+ control: 'text',
+ description:
+ 'Provide the text that is displayed when the Slider is in an invalid state.',
+ },
+ name: {
+ control: 'text',
+ description: 'The name attribute of the <input>.',
+ },
+ max: {
+ control: 'number',
+ description: 'The maximum value.',
+ },
+ min: {
+ control: 'number',
+ description: 'The minimum value.',
+ },
+ maxLabel: {
+ control: 'text',
+ description: 'The label associated with the maximum value.',
+ },
+ minLabel: {
+ control: 'text',
+ description: 'The label associated with the minimum value.',
+ },
+ readOnly: {
+ control: 'boolean',
+ description: 'Whether the slider should be read-only.',
+ },
+ required: {
+ control: 'boolean',
+ description: 'true to specify if the control is required.',
+ },
+ step: {
+ control: 'number',
+ description:
+ 'A value determining how much the value should increase/decrease by moving the thumb by mouse. If a value other than 1 is provided and the input is not hidden, the new step requirement should be added to a visible label. Values outside the step increment will be considered invalid.',
+ },
+ stepMultiplier: {
+ control: 'number',
+ description:
+ 'A value determining how much the value should increase/decrease by Shift+arrow keys, which will be (max - min) / stepMultiplier.',
+ },
+ warn: {
+ control: 'boolean',
+ description: 'Specify whether the control is currently in warning state.',
+ },
+ warnText: {
+ control: 'text',
+ description:
+ 'Provide the text that is displayed when the control is in warning state.',
+ },
+ value: {
+ control: 'number',
+ description:
+ 'The value of the slider. When there are two handles, value is the lower bound.',
+ },
+ onAfterChange: {
+ action: `${prefix}-slider-changed`,
+ table: {
+ disable: true,
+ },
+ },
+};
+
+export const Default = {
+ render: () => {
+ return html`
+