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 {Await, useAsync} from "../src/Async";
|
||||||
import {NotifyErrorsBoundary} from "../src/Components/Errors/NotifyErrorsBoundary";
|
import {NotifyErrorsBoundary} from "../src/Components/Errors/NotifyErrorsBoundary";
|
||||||
import {DemoFailingComponent, DemoResetComponent} from "./DemoFailingComponent";
|
import {DemoFailingComponent, DemoResetComponent} from "./DemoFailingComponent";
|
||||||
|
import {Tip} from "../src/Components/Tips/Tip";
|
||||||
|
|
||||||
export function DemoApp()
|
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>
|
||||||
<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={{
|
<Select options={{
|
||||||
"a": "AAAAAA",
|
"a": "AAAAAA",
|
||||||
"b": "BBBBBB",
|
"b": "BBBBBB",
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
{
|
{
|
||||||
"version": "1.6.3",
|
"version": "1.7.0",
|
||||||
"name": "@kernelui/core",
|
"name": "@kernelui/core",
|
||||||
"description": "Kernel UI Core.",
|
"description": "Kernel UI Core.",
|
||||||
"scripts": {
|
"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/_steps-counter";
|
||||||
@import "components/_subapp";
|
@import "components/_subapp";
|
||||||
@import "components/_table";
|
@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