@rio-cloud/uikit-mcp 1.0.0 → 1.1.0

package/dist/docs/components/spinners.md

@@ -0,0 +1,506 @@
+# Spinner
+
+*Category:* Components
+*Section:* Misc
+*Source:* https://uikit.developers.rio.cloud/#components/spinners
+*Captured:* 2025-12-12T12:39:01.156Z
+
+## Spinner
+
+### Example: Example 1
+
+Default Spinner
+
+Double sized Spinner
+
+With loading text
+
+Loading
+
+Full sized Spinner (doesn't render without "show")
+Inline Spinner
+
+#### Summary
+
+Default Spinner
+
+Double sized Spinner
+
+With loading text
+
+Loading
+
+Full sized Spinner (doesn't render without "show")
+Inline Spinner
+
+#### React (tsx)
+
+```tsx
+import Spinner from '@rio-cloud/rio-uikit/Spinner';
+
+export default () => (
+    <div>
+        <div className='form-group'>
+            <label>Default Spinner</label>
+            <Spinner />
+        </div>
+        <div className='form-group'>
+            <label>Double sized Spinner</label>
+            <Spinner isDoubleSized />
+        </div>
+        <div className='form-group'>
+            <label>With loading text</label>
+            <Spinner text='Loading' />
+        </div>
+        <div className='form-group'>
+            <label>Full sized Spinner (doesn't render without "show")</label>
+            <Spinner isFullSized />
+        </div>
+        <div className='form-group'>
+            <label>Inline Spinner</label>
+            <Spinner isInline />
+        </div>
+    </div>
+);
+```
+
+#### HTML (html)
+
+```html
+<div>
+    <div class="form-group">
+        <label>Default Spinner</label>
+        <div class="spinnerInfoBox display-flex justify-content-center align-items-center height-100pct">
+            <div class="spinner">
+                <div>
+                </div>
+                <div>
+                </div>
+                <div>
+                </div>
+                <div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="form-group">
+        <label>Double sized Spinner</label>
+        <div class="spinnerInfoBox display-flex justify-content-center align-items-center height-100pct">
+            <div class="spinner double">
+                <div>
+                </div>
+                <div>
+                </div>
+                <div>
+                </div>
+                <div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="form-group">
+        <label>With loading text</label>
+        <div class="spinnerInfoBox display-flex justify-content-center align-items-center height-100pct">
+            <div class="spinner">
+                <div>
+                </div>
+                <div>
+                </div>
+                <div>
+                </div>
+                <div>
+                </div>
+            </div>
+            <div class="spinnerText">Loading</div>
+        </div>
+    </div>
+    <div class="form-group">
+        <label>Full sized Spinner (doesn't render without "show")</label>
+    </div>
+    <div class="form-group">
+        <label>Inline Spinner</label>
+        <div class="spinner">
+            <div>
+            </div>
+            <div>
+            </div>
+            <div>
+            </div>
+            <div>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| isInverse | Boolean | false | Defines whether the spinner is shown on bright or dark background. |
+| isDoubleSized | Boolean | false | If set to "true" the spinner will be rendered twice as big. |
+| isFullSized | Boolean | false | Renders the spinner as overlay in full-size mode, relative to the parent container. Set the parent element to "position-relative" in this case. |
+| isFullScreen | Boolean | false | Renders the spinner in fullscreen mode, relative to the body. |
+| isInline | Boolean | false | Renders the spinner without centered wrapper. |
+| show | Boolean | false | Flag to control the visibility of the spinner. Only relevant in combination with isFullSized or isFullScreen to animate the appearance. |
+| text | String / Node | — | The text shown next to the spinner icon. |
+
+## Spinner in Buttons
+
+### Example: Example 2
+
+Spinner and text in button .btn-loading
+Default ButtonPrimary ButtonButton textButton text
+
+Colored Buttons
+Info ButtonSuccess ButtonWarning ButtonDanger Button
+
+Outline Buttons
+Info ButtonSuccess ButtonWarning ButtonDanger Button
+
+Spinner with same width as the button text .btn-loading-overlay
+Button textButton textButton textButton text
+
+Spinner in icon only button .btn-loading .btn-icon-only
+
+#### Summary
+
+Spinner and text in button .btn-loading
+Default ButtonPrimary ButtonButton textButton text
+
+Colored Buttons
+Info ButtonSuccess ButtonWarning ButtonDanger Button
+
+Outline Buttons
+Info ButtonSuccess ButtonWarning ButtonDanger Button
+
+Spinner with same width as the button text .btn-loading-overlay
+Button textButton textButton textButton text
+
+Spinner in icon only button .btn-loading .btn-icon-only
+
+#### React (tsx)
+
+```tsx
+export default () => (
+    <div>
+        <div className='form-group'>
+            <label>
+                {'Spinner and text in button '}
+                <b>.btn-loading</b>
+            </label>
+            <br />
+            <div className='btn-toolbar'>
+                <button className='btn btn-default btn-loading'>Default Button</button>
+                <button className='btn btn-primary btn-loading'>Primary Button</button>
+                <button className='btn btn-default btn-loading disabled'>Button text</button>
+                <button className='btn btn-primary btn-loading disabled btn-block max-width-300'>Button text</button>
+            </div>
+        </div>
+        <div className='form-group'>
+            <label>Colored Buttons</label>
+            <br />
+            <div className='btn-toolbar'>
+                <button className='btn btn-info btn-loading'>Info Button</button>
+                <button className='btn btn-success btn-loading'>Success Button</button>
+                <button className='btn btn-warning btn-loading'>Warning Button</button>
+                <button className='btn btn-danger btn-loading'>Danger Button</button>
+            </div>
+        </div>
+        <div className='form-group'>
+            <label>Outline Buttons</label>
+            <br />
+            <div className='btn-toolbar padding-10 bg-checkerboard rounded'>
+                <button className='btn btn-outline btn-info btn-loading'>Info Button</button>
+                <button className='btn btn-outline btn-success btn-loading'>Success Button</button>
+                <button className='btn btn-outline btn-warning btn-loading'>Warning Button</button>
+                <button className='btn btn-outline btn-danger btn-loading'>Danger Button</button>
+            </div>
+        </div>
+        <div className='form-group'>
+            <label>
+                {'Spinner with same width as the button text '}
+                <b>.btn-loading-overlay</b>
+            </label>
+            <br />
+            <div className='btn-toolbar'>
+                <button className='btn btn-default'>Button text</button>
+                <button className='btn btn-primary'>Button text</button>
+                <button className='btn btn-default btn-loading-overlay'>Button text</button>
+                <button className='btn btn-primary btn-loading-overlay'>Button text</button>
+            </div>
+        </div>
+        <div className='form-group'>
+            <label>
+                {'Spinner in icon only button '}
+                <b>.btn-loading .btn-icon-only</b>
+            </label>
+            <br />
+            <div className='btn-toolbar'>
+                <button className='btn btn-default btn-loading btn-icon-only' />
+                <button className='btn btn-primary btn-loading btn-icon-only' />
+                <button className='btn btn-muted btn-loading btn-icon-only' />
+                <button className='btn btn-default btn-loading btn-icon-only disabled' />
+                <button className='btn btn-primary btn-loading btn-icon-only disabled' />
+                <button className='btn btn-muted btn-loading btn-icon-only disabled' />
+                <button className='btn btn-primary btn-xs btn-loading btn-icon-only' />
+                <button className='btn btn-primary btn-sm btn-loading btn-icon-only' />
+                <button className='btn btn-primary btn-lg btn-loading btn-icon-only' />
+            </div>
+        </div>
+    </div>
+);
+```
+
+#### HTML (html)
+
+```html
+<div>
+    <div class="form-group">
+        <label>Spinner and text in button <b>.btn-loading</b>
+        </label>
+        <br>
+        <div class="btn-toolbar">
+            <button class="btn btn-default btn-loading">Default Button</button>
+            <button class="btn btn-primary btn-loading">Primary Button</button>
+            <button class="btn btn-default btn-loading disabled">Button text</button>
+            <button class="btn btn-primary btn-loading disabled btn-block max-width-300">Button text</button>
+        </div>
+    </div>
+    <div class="form-group">
+        <label>Colored Buttons</label>
+        <br>
+        <div class="btn-toolbar">
+            <button class="btn btn-info btn-loading">Info Button</button>
+            <button class="btn btn-success btn-loading">Success Button</button>
+            <button class="btn btn-warning btn-loading">Warning Button</button>
+            <button class="btn btn-danger btn-loading">Danger Button</button>
+        </div>
+    </div>
+    <div class="form-group">
+        <label>Outline Buttons</label>
+        <br>
+        <div class="btn-toolbar padding-10 bg-checkerboard rounded">
+            <button class="btn btn-outline btn-info btn-loading">Info Button</button>
+            <button class="btn btn-outline btn-success btn-loading">Success Button</button>
+            <button class="btn btn-outline btn-warning btn-loading">Warning Button</button>
+            <button class="btn btn-outline btn-danger btn-loading">Danger Button</button>
+        </div>
+    </div>
+    <div class="form-group">
+        <label>Spinner with same width as the button text <b>.btn-loading-overlay</b>
+        </label>
+        <br>
+        <div class="btn-toolbar">
+            <button class="btn btn-default">Button text</button>
+            <button class="btn btn-primary">Button text</button>
+            <button class="btn btn-default btn-loading-overlay">Button text</button>
+            <button class="btn btn-primary btn-loading-overlay">Button text</button>
+        </div>
+    </div>
+    <div class="form-group">
+        <label>Spinner in icon only button <b>.btn-loading .btn-icon-only</b>
+        </label>
+        <br>
+        <div class="btn-toolbar">
+            <button class="btn btn-default btn-loading btn-icon-only">
+            </button>
+            <button class="btn btn-primary btn-loading btn-icon-only">
+            </button>
+            <button class="btn btn-muted btn-loading btn-icon-only">
+            </button>
+            <button class="btn btn-default btn-loading btn-icon-only disabled">
+            </button>
+            <button class="btn btn-primary btn-loading btn-icon-only disabled">
+            </button>
+            <button class="btn btn-muted btn-loading btn-icon-only disabled">
+            </button>
+            <button class="btn btn-primary btn-xs btn-loading btn-icon-only">
+            </button>
+            <button class="btn btn-primary btn-sm btn-loading btn-icon-only">
+            </button>
+            <button class="btn btn-primary btn-lg btn-loading btn-icon-only">
+            </button>
+        </div>
+    </div>
+</div>
+```
+
+## Spinner inverse
+
+### Example: Example 3
+
+Loading
+
+#### Summary
+
+Loading
+
+#### React (tsx)
+
+```tsx
+import Spinner from '@rio-cloud/rio-uikit/Spinner';
+
+export default () => (
+    <div className='display-flex justify-content-center align-items-center bg-primary padding-25'>
+        <Spinner text='Loading' isInverse />
+    </div>
+);
+```
+
+#### HTML (html)
+
+```html
+<div class="display-flex justify-content-center align-items-center bg-primary padding-25">
+    <div class="spinnerInfoBox display-flex justify-content-center align-items-center height-100pct">
+        <div class="spinner inverse">
+            <div>
+            </div>
+            <div>
+            </div>
+            <div>
+            </div>
+            <div>
+            </div>
+        </div>
+        <div class="spinnerText">Loading</div>
+    </div>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| isInverse | Boolean | false | Defines whether the spinner is shown on bright or dark background. |
+| isDoubleSized | Boolean | false | If set to "true" the spinner will be rendered twice as big. |
+| isFullSized | Boolean | false | Renders the spinner as overlay in full-size mode, relative to the parent container. Set the parent element to "position-relative" in this case. |
+| isFullScreen | Boolean | false | Renders the spinner in fullscreen mode, relative to the body. |
+| isInline | Boolean | false | Renders the spinner without centered wrapper. |
+| show | Boolean | false | Flag to control the visibility of the spinner. Only relevant in combination with isFullSized or isFullScreen to animate the appearance. |
+| text | String / Node | — | The text shown next to the spinner icon. |
+
+## Spinner fullsized
+
+### Example: Example 4
+
+Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.
+
+Toggle loading spinner
+
+#### Summary
+
+Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.
+
+Toggle loading spinner
+
+#### React (tsx)
+
+```tsx
+import { useState } from 'react';
+
+import Spinner from '@rio-cloud/rio-uikit/Spinner';
+import { dummyText } from '../../../utils/data';
+
+export default () => {
+    const [toggled, setToggle] = useState(false);
+
+    return (
+        <div className='display-flex flex-column justify-content-center align-items-center margin-25'>
+            <div className='panel panel-default shadow-default position-relative'>
+                <div className='panel-heading'>Lorem ipsum dolor sit amet</div>
+                <div className='panel-body'>{dummyText}</div>
+                <Spinner show={toggled} text='Loading' isFullSized />
+            </div>
+            <button className='btn btn-default margin-top-25' type='button' onClick={() => setToggle(!toggled)}>
+                Toggle loading spinner
+            </button>
+        </div>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<div class="display-flex flex-column justify-content-center align-items-center margin-25">
+    <div class="panel panel-default shadow-default position-relative">
+        <div class="panel-heading">Lorem ipsum dolor sit amet</div>
+        <div class="panel-body">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.</div>
+    </div>
+    <button class="btn btn-default margin-top-25" type="button">Toggle loading spinner</button>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| isInverse | Boolean | false | Defines whether the spinner is shown on bright or dark background. |
+| isDoubleSized | Boolean | false | If set to "true" the spinner will be rendered twice as big. |
+| isFullSized | Boolean | false | Renders the spinner as overlay in full-size mode, relative to the parent container. Set the parent element to "position-relative" in this case. |
+| isFullScreen | Boolean | false | Renders the spinner in fullscreen mode, relative to the body. |
+| isInline | Boolean | false | Renders the spinner without centered wrapper. |
+| show | Boolean | false | Flag to control the visibility of the spinner. Only relevant in combination with isFullSized or isFullScreen to animate the appearance. |
+| text | String / Node | — | The text shown next to the spinner icon. |
+
+## Spinner fullscreen
+
+### Example: Example 5
+
+Toggle fullscreen loading spinnerexit fullscreen with esc key
+
+#### Summary
+
+Toggle fullscreen loading spinnerexit fullscreen with esc key
+
+#### React (tsx)
+
+```tsx
+import { useState } from 'react';
+
+import Spinner from '@rio-cloud/rio-uikit/Spinner';
+import useEsc from '@rio-cloud/rio-uikit/useEsc';
+
+export default () => {
+    const [toggled, setToggle] = useState(false);
+
+    useEsc(() => setToggle(false));
+
+    return (
+        <div className='display-flex flex-column justify-content-center align-items-center margin-25'>
+            <Spinner show={toggled} text='Loading' isFullScreen />
+            <button className='btn btn-default margin-top-25' type='button' onClick={() => setToggle(true)}>
+                Toggle fullscreen loading spinner
+            </button>
+            <p>exit fullscreen with esc key</p>
+        </div>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<div class="display-flex flex-column justify-content-center align-items-center margin-25">
+    <button class="btn btn-default margin-top-25" type="button">Toggle fullscreen loading spinner</button>
+    <p>exit fullscreen with esc key</p>
+</div>
+```
+
+#### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| isInverse | Boolean | false | Defines whether the spinner is shown on bright or dark background. |
+| isDoubleSized | Boolean | false | If set to "true" the spinner will be rendered twice as big. |
+| isFullSized | Boolean | false | Renders the spinner as overlay in full-size mode, relative to the parent container. Set the parent element to "position-relative" in this case. |
+| isFullScreen | Boolean | false | Renders the spinner in fullscreen mode, relative to the body. |
+| isInline | Boolean | false | Renders the spinner without centered wrapper. |
+| show | Boolean | false | Flag to control the visibility of the spinner. Only relevant in combination with isFullSized or isFullScreen to animate the appearance. |
+| text | String / Node | — | The text shown next to the spinner icon. |