Add a tip component.
This commit is contained in:
parent
06b2b9f5e1
commit
6252ed3045
5 changed files with 52 additions and 1 deletions
|
@ -38,6 +38,7 @@ import {Box} from "../src/Components/Box";
|
|||
import {Await, useAsync} from "../src/Async";
|
||||
import {NotifyErrorsBoundary} from "../src/Components/Errors/NotifyErrorsBoundary";
|
||||
import {DemoFailingComponent, DemoResetComponent} from "./DemoFailingComponent";
|
||||
import {Tip} from "../src/Components/Tips/Tip";
|
||||
|
||||
export function DemoApp()
|
||||
{
|
||||
|
@ -163,6 +164,10 @@ export function DemoApp()
|
|||
<Radio name={"radio-test"}>Radio box test</Radio>
|
||||
<Radio name={"radio-test"}>Radio box test</Radio>
|
||||
|
||||
<Tip>
|
||||
A tip component, very useful in forms which require some explanations.
|
||||
</Tip>
|
||||
|
||||
<Select options={{
|
||||
"a": "AAAAAA",
|
||||
"b": "BBBBBB",
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"version": "1.6.3",
|
||||
"version": "1.7.0",
|
||||
"name": "@kernelui/core",
|
||||
"description": "Kernel UI Core.",
|
||||
"scripts": {
|
||||
|
|
17
src/Components/Tips/Tip.tsx
Normal file
17
src/Components/Tips/Tip.tsx
Normal file
|
@ -0,0 +1,17 @@
|
|||
import React from "react";
|
||||
import {classes} from "../../Utils";
|
||||
import {Info} from "@phosphor-icons/react";
|
||||
|
||||
/**
|
||||
* Simple text tip component.
|
||||
*/
|
||||
export function Tip({className, children, ...props}: React.PropsWithChildren<React.HTMLAttributes<HTMLParagraphElement>>)
|
||||
{
|
||||
return (
|
||||
<p className={classes("tip", className)} {...props}>
|
||||
<Info weight={"duotone"} />
|
||||
|
||||
{children}
|
||||
</p>
|
||||
);
|
||||
}
|
|
@ -20,3 +20,4 @@
|
|||
@import "components/_steps-counter";
|
||||
@import "components/_subapp";
|
||||
@import "components/_table";
|
||||
@import "components/_tip";
|
||||
|
|
28
src/styles/components/_tip.less
Normal file
28
src/styles/components/_tip.less
Normal file
|
@ -0,0 +1,28 @@
|
|||
p.tip
|
||||
{
|
||||
position: relative;
|
||||
|
||||
margin: auto;
|
||||
width: 30em;
|
||||
padding: 0.3em 0.5em 0.3em 3em;
|
||||
border-radius: 0.3em;
|
||||
box-sizing: border-box;
|
||||
|
||||
border: solid var(--background-darkest) thin;
|
||||
color: var(--foreground-lightest);
|
||||
|
||||
svg
|
||||
{
|
||||
position: absolute;
|
||||
top: 0.3em;
|
||||
left: 0.5em;
|
||||
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
|
||||
color: var(--primary);
|
||||
font-size: 1.5em;
|
||||
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
Loading…
Reference in a new issue