Alert
Alert
は、ユーザーに情報を伝達するコンポーネントです。
テーマ
Alert
は、複数パーツのコンポーネントです。
コンポーネントのスタイルを変更したい場合は、こちらをご覧ください。
export const Alert: ComponentMultiStyle<"Alert"> = {baseStyle: {container: {px: 4,py: 3,rounded: "md",},icon: {flexShrink: 0,marginEnd: 3,boxSize: 5,},loading: {flexShrink: 0,marginEnd: 3,fontSize: "xl",},title: {marginEnd: 2,fontWeight: "bold",lineHeight: 5,},description: {lineHeight: 5,},},variants: {basic: ({ theme: t, colorMode: m, colorScheme: c = "primary" }) => ({container: { bg: ["white", "black"], borderWidth: "1px" },icon: { color: [tintColor(`${c}.600`, 16)(t, m), `${c}.400`] },}),subtle: ({ theme: t, colorMode: m, colorScheme: c = "primary" }) => ({container: { bg: [`${c}.100`, shadeColor(`${c}.300`, 58)(t, m)] },icon: { color: [tintColor(`${c}.600`, 16)(t, m), `${c}.400`] },}),solid: ({ theme: t, colorMode: m, colorScheme: c = "primary" }) => ({container: {bg: [tintColor(`${c}.600`, 16)(t, m), shadeColor(`${c}.600`, 16)(t, m)],color: "white",},}),"island-accent": ({theme: t,colorMode: m,colorScheme: c = "primary",}) => ({container: {bg: ["white", "black"],borderWidth: "1px",pl: 7,_before: {content: '""',position: "absolute",top: "50%",left: 3,transform: "translateY(-50%)",w: 1,h: "calc(100% - 1.5rem)",bg: [tintColor(`${c}.600`, 16)(t, m), `${c}.400`],rounded: "full",},},icon: { color: [tintColor(`${c}.600`, 16)(t, m), `${c}.400`] },}),"left-accent": ({theme: t,colorMode: m,colorScheme: c = "primary",}) => ({container: {bg: [`${c}.100`, shadeColor(`${c}.300`, 58)(t, m)],pl: 3,borderLeft: "0.25rem solid",borderLeftColor: [tintColor(`${c}.600`, 16)(t, m), `${c}.400`],rounded: 4,},icon: { color: [tintColor(`${c}.600`, 16)(t, m), `${c}.400`] },}),"top-accent": ({ theme: t, colorMode: m, colorScheme: c = "primary" }) => ({container: {bg: [`${c}.100`, shadeColor(`${c}.300`, 58)(t, m)],pt: 3,borderTop: "0.25rem solid",borderTopColor: [tintColor(`${c}.600`, 16)(t, m), `${c}.400`],rounded: 4,},icon: { color: [tintColor(`${c}.600`, 16)(t, m), `${c}.400`] },}),},defaultProps: {variant: "basic",colorScheme: "primary",},}
GitHubでこのページを編集する