Commit e8979608 authored by Brady Pascoe's avatar Brady Pascoe
Browse files

feat: Add rough draft of Float docs

The Float functionality for our components should be properly
documented with its own page on the hosted webpage. It should
also include proper examples of how to use it.
parent 4e27a260
......@@ -103,7 +103,7 @@ const TocSubLink = styled(TocLink)`
const gettingStarted = ['introduction', 'theming', 'support'];
const layout = ['float', 'grid', 'media'];
const layout = ['grid', 'media'];
const components = [
'alerts',
......@@ -135,7 +135,12 @@ const components = [
'toasts',
];
const utilities = ['transitions', 'responsive-embed', 'react-overlays'];
const utilities = [
'float',
'transitions',
'responsive-embed',
'react-overlays',
];
// We need to configure this
function attachSearch(ref) {
......
<>
<Toast float={{ md: 'right' }}>
<Toast.Header>
<strong className="mr-auto">Bootstrap</strong>
<small>11 mins ago</small>
</Toast.Header>
<Toast.Body>
Hello, world! This is a toast message, using float right
</Toast.Body>
</Toast>
<Toast float={{ md: 'none' }}>
<Toast.Header>
<strong className="mr-auto">Bootstrap</strong>
<small>11 mins ago</small>
</Toast.Header>
<Toast.Body>
Hello, world! This is a toast message, using float none
</Toast.Body>
</Toast>
</>;
import ReactPlayground from '../../components/ReactPlayground';
import ToastExample from '../../examples/Float/ToastExample';
# Float
Bootstrap allows for floats to be toggled on any Bootstrap component,
so this re-implementation aims to provide the same support.
## Supported Components
TODO: Find all instances of components implementing `createBootstrapComponent`
## Basic Example
For the supported components, passing in an object to the `float` prop
with valid properties will allow to use the power of Bootstrap float classes
<ReactPlayground codeText={ToastExample} />
## Supported Props
These are the list of properties that can be in the `float` prop object:
- default
- sm
- md
- lg
- xl
Out of these properties, the following values can be passsed in:
- left
- right
- none
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment