/
AppBarTitle.tsx
59 lines (54 loc) · 1.45 KB
/
AppBarTitle.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
import { forwardRef, HTMLAttributes } from "react";
import cn from "classnames";
import { bem } from "@react-md/utils";
import { AppBarColorInherit, useInheritContext } from "./useInheritContext";
export interface AppBarTitleProps
extends HTMLAttributes<HTMLHeadingElement>,
AppBarColorInherit {
/**
* Boolean if the title should be placed at the `$rmd-app-bar-title-keyline`.
*/
keyline?: boolean;
/**
* Boolean if the title should not automatically try to wrap the content and
* span two lines if it is too big. This will automatically add trailing
* ellipsis for the text overflow as well.
*/
noWrap?: boolean;
}
const block = bem("rmd-app-bar");
/**
* This component is used to create a title for your application. If your app is
* not using the `AppBarNav` component, you can enable the `keyline` prop to
* ensure that your title aligns with the keyline of your navigation element.
*/
export const AppBarTitle = forwardRef<HTMLHeadingElement, AppBarTitleProps>(
function AppBarTitle(
{
noWrap = true,
keyline = false,
className,
children,
inheritColor,
...props
},
ref
) {
return (
<h6
{...props}
ref={ref}
className={cn(
block("title", {
"no-wrap": noWrap,
keyline,
inherit: useInheritContext(inheritColor),
}),
className
)}
>
{children}
</h6>
);
}
);