@iress-oss/ids-mcp-server 5.15.0 → 5.20.2

package/generated/docs/components_components-toggle-docs.md

@@ -0,0 +1,461 @@
+Toggle
+======
+
+Overview
+--------
+
+Toggles allow users to turn things on or off. When toggled, the associated change happens straight away.
+
+[](./iframe.html?id=components-toggle--default)
+
+Toggle
+
+Hide codedrawOpen in CodeSandbox
+
+<IressToggle
+  layout\="inline"
+\>
+  Toggle
+</IressToggle\>
+
+```
+
+Props
+-----
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| checked | 
+Sets the checked state of the Toggle.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | FalseTrue |
+| children\* | 
+
+Provides the label for the Toggle.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Toggle"
+
+ |
+| hiddenLabel | 
+
+Hides the label if true (label will still be read out by screen readers).
+
+boolean
+
+
+
+ | \- | FalseTrue |
+| layout | 
+
+Determines the layout of the label with respect to the control.
+
+union
+
+
+
+ | 
+
+'inline'
+
+ | 
+
+"inline"
+
+ |
+| onChange | 
+
+Emitted when the checked state changes.
+
+( checked: boolean, event: React.MouseEvent<HTMLButtonElement, MouseEvent>, ) => void
+
+ | \- | \- |
+
+Usage
+-----
+
+Toggles are typically on / off switches, similar to a household light switch. They allow users to choose between two mutually exclusive options, and will always have a default value.
+
+The `IressToggle` component should only be used for actions that happen immediately, for example switching a device's WiFi connection on or off.
+
+Don't use Toggles in forms
+--------------------------
+
+Toggles shouldn’t be used as part of a form as they don’t have the correct semantics, and won’t submit a value when the form data is submitted. If you need a toggleable component in a form, use a checkbox or radio group instead.
+
+### Labels
+
+Toggles should always have a label, which is set via its `children`.
+
+[](./iframe.html?id=components-toggle--default)
+
+Toggle
+
+Hide codedrawOpen in CodeSandbox
+
+<IressToggle
+  layout\="inline"
+\>
+  Toggle
+</IressToggle\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| checked | 
+Sets the checked state of the Toggle.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | FalseTrue |
+| children\* | 
+
+Provides the label for the Toggle.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Toggle"
+
+ |
+| hiddenLabel | 
+
+Hides the label if true (label will still be read out by screen readers).
+
+boolean
+
+
+
+ | \- | FalseTrue |
+| layout | 
+
+Determines the layout of the label with respect to the control.
+
+union
+
+
+
+ | 
+
+'inline'
+
+ | 
+
+"inline"
+
+ |
+| onChange | 
+
+Emitted when the checked state changes.
+
+( checked: boolean, event: React.MouseEvent<HTMLButtonElement, MouseEvent>, ) => void
+
+ | \- | \- |
+
+### Hidden labels
+
+Labels can be hidden via the `hiddenLabel` prop; this will hide the label from view, but it'll still be available to screen reader users.
+
+[](./iframe.html?id=components-toggle--hidden-label)
+
+Toggle
+
+Hide codedrawOpen in CodeSandbox
+
+<IressToggle
+  hiddenLabel
+  layout\="inline"
+\>
+  Toggle
+</IressToggle\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| checked | 
+Sets the checked state of the Toggle.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | FalseTrue |
+| children\* | 
+
+Provides the label for the Toggle.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Toggle"
+
+ |
+| hiddenLabel | 
+
+Hides the label if true (label will still be read out by screen readers).
+
+boolean
+
+
+
+ | \- | FalseTrue |
+| layout | 
+
+Determines the layout of the label with respect to the control.
+
+union
+
+
+
+ | 
+
+'inline'
+
+ | 
+
+"inline"
+
+ |
+| onChange | 
+
+Emitted when the checked state changes.
+
+( checked: boolean, event: React.MouseEvent<HTMLButtonElement, MouseEvent>, ) => void
+
+ | \- | \- |
+
+### Checked
+
+The on / off state of the toggle can be controlled by setting the `checked` prop.
+
+[](./iframe.html?id=components-toggle--checked)
+
+Toggle
+
+Hide codedrawOpen in CodeSandbox
+
+<IressToggle
+  checked
+  layout\="inline"
+\>
+  Toggle
+</IressToggle\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| checked | 
+Sets the checked state of the Toggle.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | FalseTrue |
+| children\* | 
+
+Provides the label for the Toggle.
+
+ReactNode
+
+
+
+ | \- | 
+
+"Toggle"
+
+ |
+| hiddenLabel | 
+
+Hides the label if true (label will still be read out by screen readers).
+
+boolean
+
+
+
+ | \- | FalseTrue |
+| layout | 
+
+Determines the layout of the label with respect to the control.
+
+union
+
+
+
+ | 
+
+'inline'
+
+ | 
+
+"inline"
+
+ |
+| onChange | 
+
+Emitted when the checked state changes.
+
+( checked: boolean, event: React.MouseEvent<HTMLButtonElement, MouseEvent>, ) => void
+
+ | \- | \- |
+
+### Layout
+
+The `layout` prop allows you to control the position of the label in relation to the control. The default layout is `inline`, but you can also choose the following options:',
+
+*   `inline-between` similar to inline, but this positions the label and control at opposite ends of their container
+*   `inline-reverse` renders the label after the control instead of before the control
+*   `stack` positions the label above the control
+
+[](./iframe.html?id=components-toggle--layout)
+
+Toggle
+
+Toggle
+
+Toggle
+
+Toggle
+
+Hide codedrawOpen in CodeSandbox
+
+<IressRow gutter\="lg"\>
+  <IressCol span\="12"\>
+    <IressPanel background\="alt"\>
+      <IressToggle
+        layout\="inline"
+      \>
+        Toggle      </IressToggle\>
+    </IressPanel\>
+  </IressCol\>
+  <IressCol span\="12"\>
+    <IressPanel background\="alt"\>
+      <IressToggle
+        checked
+        layout\="inline-between"
+      \>
+        Toggle      </IressToggle\>
+    </IressPanel\>
+  </IressCol\>
+  <IressCol span\="12"\>
+    <IressPanel background\="alt"\>
+      <IressToggle
+        layout\="inline-reverse"
+      \>
+        Toggle      </IressToggle\>
+    </IressPanel\>
+  </IressCol\>
+  <IressCol span\="12"\>
+    <IressPanel background\="alt"\>
+      <IressToggle
+        checked
+        layout\="stack"
+      \>
+        Toggle      </IressToggle\>
+    </IressPanel\>
+  </IressCol\>
+</IressRow\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| checked | 
+Sets the checked state of the Toggle.
+
+boolean
+
+
+
+ | 
+
+false
+
+ | \- |
+| children\* | 
+
+Provides the label for the Toggle.
+
+ReactNode
+
+
+
+ | \- | Set object |
+| hiddenLabel | 
+
+Hides the label if true (label will still be read out by screen readers).
+
+boolean
+
+
+
+ | \- | \- |
+| label | 
+
+\-
+
+ | \- | \- |
+| layout | 
+
+Determines the layout of the label with respect to the control.
+
+union
+
+
+
+ | 
+
+'inline'
+
+ | \- |
+| onChange | 
+
+Emitted when the checked state changes.
+
+( checked: boolean, event: React.MouseEvent<HTMLButtonElement, MouseEvent>, ) => void
+
+ | \- | \- |