1
Fork 0
mirror of https://github.com/Steffo99/bluelib.git synced 2024-12-22 19:44:21 +00:00

🗒 Idk documentation

This commit is contained in:
Steffo 2021-07-20 01:52:13 +02:00
parent a989c0164e
commit cbb7073e85
Signed by: steffo
GPG key ID: 6965406171929D01
6 changed files with 33 additions and 11 deletions

View file

@ -1,4 +1,4 @@
Align text horizontally. A `<div>` which changes the alignment of the contained text using the `align-*` Bluelib class.
```jsx ```jsx
import Bluelib from "../Bluelib"; import Bluelib from "../Bluelib";

View file

@ -1,11 +1,20 @@
An anchor, very similar to the `<a>` element. An `<a>` element using the `element-anchor` Bluelib class, to be used for anchors (`[href^="#"]`) and links (`[href^=http`).
Can be disabled using the `disabled` prop.
```jsx ```jsx
import Bluelib from "../Bluelib"; import Bluelib from "../Bluelib";
<Bluelib> <Bluelib>
<Anchor href={"https://example.org"}> <div>
Go to example.org! <Anchor href={"https://example.org"}>
</Anchor> Go to example.org!
</Anchor>
</div>
<div>
<Anchor href={"https://google.com"} disabled={true}>
Don't go to Google, it will track you!
</Anchor>
</div>
</Bluelib> </Bluelib>
``` ```

View file

@ -1,11 +1,14 @@
import React from "react" import React from "react"
import useBluelibClassNames from "../../hooks/useBluelibClassNames" import useBluelibClassNames from "../../hooks/useBluelibClassNames"
import PropTypes from "prop-types" import PropTypes from "prop-types"
import { disable, disableClass } from "../../utils/disable"
export default function Anchor({children, className, href, ...props}) { export default function Anchor({children, className, disabled, href, ...props}) {
className = useBluelibClassNames([`element-anchor`, disableClass(disabled)], [className])
return ( return (
<a className={useBluelibClassNames(`element-anchor`, className)} href={href} {...props}> <a href={disable(disabled, href)} {className} {...props}>
{children} {children}
</a> </a>
) )
@ -15,5 +18,6 @@ export default function Anchor({children, className, href, ...props}) {
Anchor.propTypes = { Anchor.propTypes = {
children: PropTypes.node, children: PropTypes.node,
className: PropTypes.string, className: PropTypes.string,
href: PropTypes.string disabled: PropTypes.bool,
href: PropTypes.string,
} }

View file

@ -5,7 +5,7 @@ import PropTypes from "prop-types"
export default function Aside({children, className, ...props}) { export default function Aside({children, className, ...props}) {
return ( return (
<aside className={useBluelibClassNames("panel panel-box panel-aside", className)} {...props}> <aside className={useBluelibClassNames(["panel", "panel-box", "panel-aside"], className)} {...props}>
{children} {children}
</aside> </aside>
) )

View file

@ -1,9 +1,11 @@
Makes the text bold (like a `<b>` element), while applying bold styles from the selected bluelib skin. A field where the user can input text.
Behaves like an `<input>` element, and automatically prevents propagation of `onChange` events if it is `disabled`.
```jsx ```jsx
import Bluelib from "../Bluelib"; import Bluelib from "../Bluelib";
<Bluelib> <Bluelib>
To <Bold>boldly</Bold> go where no library has gone before! <InputField placeholder={"Hello!"}/>
</Bluelib> </Bluelib>
``` ```

7
src/utils/disable.js Normal file
View file

@ -0,0 +1,7 @@
export function disable(isDisabled, thing, whenDisabled = null) {
return isDisabled ? whenDisabled : thing;
}
export function disableClass(isDisabled) {
return isDisabled ? `status-disabled` : null
}