How to use the @storybook/addon-knobs.number function in @storybook/addon-knobs

To help you get started, we’ve selected a few @storybook/addon-knobs examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github cruise-automation / webviz / packages / regl-worldview / src / stories / cameraState.stories.js View on Github external
step: 0.01,
    });
    const orientationY = number("orientation - y", 0, {
      range: true,
      min: 0,
      max: 1,
      step: 0.01,
    });
    const orientationZ = number("orientation - z", 0, {
      range: true,
      min: 0,
      max: 1,
      step: 0.01,
    });

    const posX = number("target - x", 0, {
      range: true,
      min: 0,
      max: 20,
      step: 0.1,
    });
    const posY = number("target - y", 0, {
      range: true,
      min: 0,
      max: 20,
      step: 0.1,
    });
    const posZ = number("target - z", 0, {
      range: true,
      min: 0,
      max: 20,
      step: 0.1,
github zmitry / redux-form-antd / stories / TextInput.js View on Github external
.add("Slide Field", () => (
    
      <div style="{{">
        
      </div>
    
  ))
  .add("Switch Field", () =&gt; (
github elastic / elastic-charts / stories / axis.tsx View on Github external
function createThemeAction(title: string, min: number, max: number, value: number) {
  return number(
    title,
    value,
    {
      range: true,
      min,
      max,
      step: 1,
    },
    'theme',
  );
}
github metawin-m / vue-scroll-sync / stories / index.js View on Github external
.add('Proportional', () =&gt; {
        const containerHeight = number('Container Height', 500)
        const leftHeight = number('Left Content Height', 1000)
        const rightHeight = number('Right Content Height', 2000)
        const containerStyle = `height:${containerHeight}px;width:100px;`
        const topColor = color('Top Color', '#ff0000')
        const centerColor = color('Center Color', '#00ff00')
        const bottomColor = color('Bottom Color', '#0000ff')
        const bg = `linear-gradient(${topColor}, ${centerColor}, ${bottomColor})`
        return ({
            components: { ScrollSync },
            template: `
            <div style="display:flex;">
                
                    <div style="width:100px;height:${leftHeight}px;background:${bg};">
                
                
                    <div style="width:100px;height:${rightHeight}px;background:${bg};"></div></div></div>
github DivanteLtd / storefront-ui / packages / react / src / components / atoms / SfHeading / SfHeading.stories.js View on Github external
.add('Title', () =&gt; (
    
          
          {text('(prop) title', 'Show how YOU wear it')}
        
      }
      subtitle={text('(prop) subtitle', '#YOURLOOK')}
    /&gt;
  ))
  .add('SubTitle', () =&gt; (
github kalmhq / kalm / frontend / src / _stories / scenes / ComponentListPage.stories.tsx View on Github external
.add("Load Four Applications", () => {
    resetStore();

    const oneAppName = text("application1Name", "kalm-bookinfo1", "Application1");
    const twoAppName = text("application1Name", "kalm-bookinfo2", "Application2");
    const threeAppName = text("application1Name", "kalm-bookinfo3", "Application3");
    const fourAppName = text("application1Name", "kalm-bookinfo4", "Application4");

    const oneAppCreateTime = date("create Date", new Date("2020-06-17"), "Application1");
    const twoAppCreateTime = date("create Date", new Date("2020-06-18"), "Application2");
    const threeAppCreateTime = date("create Date", new Date("2020-06-19"), "Application3");
    const fourAppCreateTime = date("create Date", new Date("2020-06-11"), "Application4");

    const oneComponentCounter = number("pod counter", 2, undefined, "Application1");
    const twoComponentCounter = number("pod counter", 3, undefined, "Application2");
    const threeComponentCounter = number("pod counter", 4, undefined, "Application3");
    const fourComponentCounter = number("pod counter", 5, undefined, "Application4");

    const onePodCounter = number("pod counter", 2, undefined, "Application1");
    const twoPodCounter = number("pod counter", 3, undefined, "Application2");
    const threePodCounter = number("pod counter", 4, undefined, "Application3");
    const fourPodCounter = number("pod counter", 5, undefined, "Application4");

    createRoutes(store, [oneAppName, twoAppName, threeAppName, fourAppName]);

    let oneApp: ApplicationDetails = createApplication(oneAppName);
    const oneAppComponent = createApplicationComponent(
      oneAppName,
      oneComponentCounter,
      oneAppCreateTime,
      generateRandomIntList(onePodCounter, 0, 5),
    );
github IBM / carbon-addons-iot-react / src / components / Breadcrumb / Breadcrumb.story.jsx View on Github external
() =&gt; {
      const containerWidth = number('container width', 1056);
      return (
        &lt;&gt;
          <div style="{{">
            
              
                <a href="/#">Breadcrumb 1</a>
              
              Breadcrumb 2
              Breadcrumb 3
              Breadcrumb 4
              Breadcrumb 5
              Breadcrumb 6
            
          </div>
github influxdata / clockface / src / Components / FlexBox / Documentation / FlexBox.stories.tsx View on Github external
margin={
            ComponentSize[
              select(
                'margin',
                {None: '', ...mapEnumKeys(ComponentSize)},
                'Small'
              )
            ]
          }
          stretchToFitWidth={true}
        &gt;
          
            <div>A</div>
          
          
            <div>B</div>
github WordPress / gutenberg / packages / components / src / range-control / stories / index.js View on Github external
export const withMinimumAndMaximumLimits = () =&gt; {
	const label = text( 'Label', 'How many columns should this use?' );
	const min = number( 'Min Value', 2 );
	const max = number( 'Max Value', 10 );

	return (
		
	);
};