t-banner
A component to display stateful messages where you can control their status from a parent component or an outer context by providing a reference to the status property. It uses the t-inkwell component internally and has most of its options in addition to a few new options.
Control Banner
To control the banner status, you need to define a reference that can be used and passed to other components. Later on, you can control the status of the banner by changing the reference value.
Update your account information
It is a long established fact that a reader will be distracted by the readable content.
// define a reference for banner status
const status = ref(true);
// Toggle the current status of the banner
const onClick = () => {
status.value = !status.value;
};
return () => (
<>
<TButton design="raised" onClick={onClick} centered>
{status.value ? "Hide" : "Show"}
</TButton>
<TDivider my />
<TBanner
status={status.value}
onChange={(v) => (status.value = v)}
icon="mdi:account"
label="Update your account information"
sublabel="It is a long established fact that a reader will be distracted by the readable content."
closeable
/>
</>
);
Basic Usage
Update your account information
It is a long established fact that a reader will be distracted by the readable content.
<TBanner
icon="mdi:account"
label="Update your account information"
sublabel="It is a long established fact that a reader will be distracted by the readable content."
/>
Raised Design and Closeable
Update your account information
It is a long established fact that a reader will be distracted by the readable content.
const status = ref(true);
return () => (
<TBanner
status={status.value}
icon="mdi:account"
design="raised"
label="Update your account information"
sublabel="It is a long established fact that a reader will be distracted by the readable content."
closeable
/>
);
Text Design, Color and Elevation
Update your account information
It is a long established fact that a reader will be distracted by the readable content.
const status = ref(true);
return () => (
<TBanner
status={status.value}
icon="mdi:account"
sides={["start"]}
color="success"
label="Update your account information"
sublabel="It is a long established fact that a reader will be distracted by the readable content."
closeable
elevated
rounded
/>
);
Outlined Design and Rounded
Update your account information
It is a long established fact that a reader will be distracted by the readable content.
const status = ref(true);
return () => (
<TBanner
status={status.value}
icon="mdi:account"
sides={["start"]}
design="outlined"
color="alert"
label="Update your account information"
sublabel="It is a long established fact that a reader will be distracted by the readable content."
closeable
rounded
/>
);
Single Line and Medium Size
Update your account information
<TBanner
icon="mdi:account"
sides={["start"]}
size="md"
color="danger"
label="Update your account information" //
/>
Complex Layout
Your Account
Update your account information
export default defineComponent({
setup() {
const status = ref(true);
return () => (
<TCard
design="text"
size="lg"
prepend={() => (
<TFlex align="center" justify="between" px py>
<TIcon color="primary" icon="mdi:home" />
<TText size="md" color="custom">
Your Account
</TText>
</TFlex>
)}
append={() => (
<TFlex align="center" justify="between" px py>
<TButton design="flat" icon="mdi:check" onClick={() => {}}>
Save
</TButton>
</TFlex>
)}
elevated
rounded
>
<TBanner
status={status.value}
icon="mdi:account"
design="flat"
size="md"
color="danger"
label="Update your account information"
closeable
/>
<TCell p="xl">
<TInputText label="Email" placeholder="Email" value="[email protected]" mb />
<TInputText label="Password" placeholder="Password" value="[email protected]" />
</TCell>
</TCard>
);
},
});
API
No options available