reactstrap#UncontrolledAlert JavaScript Examples
The following examples show how to use
reactstrap#UncontrolledAlert.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: CardAviso.js From covidAnalytics with MIT License | 6 votes |
|
render(){
return(
<div className="CardContainer" >
<UncontrolledAlert color="danger" className="AvisoCard">
Os dados utilizados nesta plataforma são fornecidos pelos boletins epidemiológicos
divulgados pelas Secretarias de Saúde Estaduais, disponíveis no site <a href="https://brasil.io/home" className="alert-link">Brasil.io</a>. Esses dados são atualizados
diariamente quando os boletins são divulgados às <b> 23:00 </b> no horário de Brasília.
Portanto, estes dados podem estar até <b>2 dias úteis</b> atrasados em relação aos
divulgados no boletim diário da prefeitura.
</UncontrolledAlert>
</div>
);
}
Example #2
| Source File: FileSavedAlert.jsx From watchmo with MIT License | 5 votes |
|
function FileSavedAlert() {
console.log('here');
return <UncontrolledAlert color="success">File saved!</UncontrolledAlert>;
}
Example #3
| Source File: Alerts.jsx From nodejs-rest-api-boilerplate with MIT License | 5 votes |
|
render() {
return (
<>
<h3 className="mt-lg mb-4">
<span>Alerts</span>
</h3>
<UncontrolledAlert color="success" fade={false}>
<span className="alert-inner--icon">
<i className="ni ni-like-2" />
</span>
<span className="alert-inner--text ml-1">
<strong>Success!</strong> This is a success alert—check it out!
</span>
</UncontrolledAlert>
<UncontrolledAlert color="info" fade={false}>
<span className="alert-inner--icon">
<i className="ni ni-bell-55" />
</span>
<span className="alert-inner--text ml-1">
<strong>Info!</strong> This is an info alert—check it out!
</span>
</UncontrolledAlert>
<UncontrolledAlert color="warning" fade={false}>
<span className="alert-inner--icon">
<i className="ni ni-bell-55" />
</span>
<span className="alert-inner--text ml-1">
<strong>Warning!</strong> This is a warning alert—check it out!
</span>
</UncontrolledAlert>
<UncontrolledAlert color="danger" fade={false}>
<span className="alert-inner--icon">
<i className="ni ni-support-16" />
</span>
<span className="alert-inner--text ml-1">
<strong>Danger!</strong> This is an error alert—check it out!
</span>
</UncontrolledAlert>
</>
);
}
Example #4
| Source File: Header.js From light-blue-react-template with MIT License | 4 votes |
|
render() {
return (
<Navbar className={`d-print-none `}>
<div className={s.burger}>
<NavLink
onClick={this.toggleSidebar}
className={`d-md-none ${s.navItem} text-white`}
href="#"
>
<BurgerIcon className={s.headerIcon} />
</NavLink>
</div>
<div className={`d-print-none ${s.root}`}>
<UncontrolledAlert
className={`${s.alert} mr-3 d-lg-down-none animate__animated animate__bounceIn animate__delay-1s`}
>
Check out Light Blue{" "}
<button
className="btn-link"
onClick={() => this.setState({ settingsOpen: true })}
>
<SettingsIcon className={s.settingsIcon} />
</button>{" "}
on the right!
</UncontrolledAlert>
<Collapse
className={`${s.searchCollapse} ml-lg-0 mr-md-3`}
isOpen={this.state.searchOpen}
>
<InputGroup
className={`${s.navbarForm} ${
this.state.searchFocused ? s.navbarFormFocused : ""
}`}
>
<InputGroupAddon addonType="prepend" className={s.inputAddon}>
<InputGroupText>
<i className="fa fa-search" />
</InputGroupText>
</InputGroupAddon>
<Input
id="search-input-2"
placeholder="Search..."
className="input-transparent"
onFocus={() => this.setState({ searchFocused: true })}
onBlur={() => this.setState({ searchFocused: false })}
/>
</InputGroup>
</Collapse>
<Form className="d-md-down-none mr-3 ml-3" inline>
<FormGroup>
<InputGroup className={`input-group-no-border ${s.searchForm}`}>
<InputGroupAddon addonType="prepend">
<InputGroupText className={s.inputGroupText}>
<SearchIcon className={s.headerIcon} />
</InputGroupText>
</InputGroupAddon>
<Input
id="search-input"
className="input-transparent"
placeholder="Search Dashboard"
/>
</InputGroup>
</FormGroup>
</Form>
<Nav className="ml-md-0">
<Dropdown
nav
isOpen={this.state.notificationsOpen}
toggle={this.toggleNotifications}
id="basic-nav-dropdown"
className={`${s.notificationsMenu}`}
>
<DropdownToggle nav caret style={{ color: "#C1C3CF", padding: 0 }}>
<span
className={`${s.avatar} rounded-circle thumb-sm float-left`}
>
<img src={avatar} alt="..." />
</span>
<span className={`small d-sm-down-none ${s.accountCheck}`}>Philip smith</span>
<Badge className={`d-sm-down-none ${s.badge}`} color="danger">
9
</Badge>
</DropdownToggle>
<DropdownMenu
right
className={`${s.notificationsWrapper} py-0 animate__animated animate__faster animate__fadeInUp`}
>
<Notifications />
</DropdownMenu>
</Dropdown>
<NavItem className="d-lg-none">
<NavLink
onClick={this.toggleSearchOpen}
className={s.navItem}
href="#"
>
<SearchIcon addId='header-search' className={s.headerIcon} />
</NavLink>
</NavItem>
<Dropdown
className="d-none d-sm-block"
nav
isOpen={this.state.messagesOpen}
toggle={this.toggleMessagesDropdown}
>
<DropdownToggle nav className={`d-sm-down-none ${s.navItem} text-white`}>
<MessageIcon className={s.headerIcon} />
</DropdownToggle>
<DropdownMenu className={`${s.dropdownMenu} ${s.messages}`}>
<DropdownItem>
<img className={s.image} src={sender1} alt="" />
<div className={s.details}>
<div>Jane Hew</div>
<div className={s.text}>Hey, John! How is it going? ...</div>
</div>
</DropdownItem>
<DropdownItem>
<img className={s.image} src={sender2} alt="" />
<div className={s.details}>
<div>Alies Rumiancaŭ</div>
<div className={s.text}>
I will definitely buy this template
</div>
</div>
</DropdownItem>
<DropdownItem>
<img className={s.image} src={sender3} alt="" />
<div className={s.details}>
<div>Michał Rumiancaŭ</div>
<div className={s.text}>
Is it really Lore ipsum? Lore ...
</div>
</div>
</DropdownItem>
<DropdownItem>
{/* eslint-disable-next-line */}
<a href="#" className="text-white">
See all messages <ArrowIcon className={s.headerIcon} maskName="messagesArrow" />
</a>
</DropdownItem>
</DropdownMenu>
</Dropdown>
<NavItem className={`${s.divider} d-none d-sm-block`} />
<Dropdown
className="d-none d-sm-block"
nav
isOpen={this.state.settingsOpen}
toggle={this.toggleSettingsDropdown}
>
<DropdownToggle nav className={`${s.navItem} text-white`}>
<SettingsIcon addId='header-settings' className={s.headerIcon} />
</DropdownToggle>
<DropdownMenu className={`${s.dropdownMenu} ${s.settings}`}>
<h6>Sidebar on the</h6>
<ButtonGroup size="sm">
<Button
color="primary"
onClick={() => this.moveSidebar("left")}
className={
this.props.sidebarPosition === "left" ? "active" : ""
}
>
Left
</Button>
<Button
color="primary"
onClick={() => this.moveSidebar("right")}
className={
this.props.sidebarPosition === "right" ? "active" : ""
}
>
Right
</Button>
</ButtonGroup>
<h6 className="mt-2">Sidebar</h6>
<ButtonGroup size="sm">
<Button
color="primary"
onClick={() => this.toggleVisibilitySidebar("show")}
className={
this.props.sidebarVisibility === "show" ? "active" : ""
}
>
Show
</Button>
<Button
color="primary"
onClick={() => this.toggleVisibilitySidebar("hide")}
className={
this.props.sidebarVisibility === "hide" ? "active" : ""
}
>
Hide
</Button>
</ButtonGroup>
</DropdownMenu>
</Dropdown>
<Dropdown
className="d-none d-sm-block"
nav
isOpen={this.state.supportOpen}
toggle={this.toggleSupportDropdown}
>
<DropdownToggle nav className={`${s.navItem} text-white`}>
<BellIcon className={s.headerIcon} />
<div className={s.count}></div>
</DropdownToggle>
<DropdownMenu right className={`${s.dropdownMenu} ${s.support}`}>
<DropdownItem>
<Badge color="danger">
<i className="fa fa-bell-o" />
</Badge>
<div className={s.details}>Check out this awesome ticket</div>
</DropdownItem>
<DropdownItem>
<Badge color="warning">
<i className="fa fa-question-circle" />
</Badge>
<div className={s.details}>What is the best way to get ...</div>
</DropdownItem>
<DropdownItem>
<Badge color="success">
<i className="fa fa-info-circle" />
</Badge>
<div className={s.details}>
This is just a simple notification
</div>
</DropdownItem>
<DropdownItem>
<Badge color="info">
<i className="fa fa-plus" />
</Badge>
<div className={s.details}>12 new orders has arrived today</div>
</DropdownItem>
<DropdownItem>
<Badge color="danger">
<i className="fa fa-tag" />
</Badge>
<div className={s.details}>
One more thing that just happened
</div>
</DropdownItem>
<DropdownItem>
{/* eslint-disable-next-line */}
<a href="#" className="text-white">
See all tickets <ArrowIcon className={s.headerIcon} maskName="bellArrow" />
</a>
</DropdownItem>
</DropdownMenu>
</Dropdown>
<NavItem>
<NavLink
onClick={this.doLogout}
className={`${s.navItem} text-white`}
href="#"
>
<PowerIcon className={s.headerIcon} />
</NavLink>
</NavItem>
</Nav>
</div>
</Navbar>
);
}
Example #5
| Source File: UiAlert.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Breadcrumbs title="Alerts" breadcrumbItems={this.state.breadcrumbItems} />
<Row>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Default Alerts </h4>
<p className="card-title-desc">
Alerts are available for any length of text, as well as an
optional dismiss button. For proper styling, for Example,{" "}
<strong>color = </strong>{" "}
<code className="highlighter-rouge">"success"</code>
</p>
<div className="">
<Alert color="primary" >
A simple primary alert—check it out!
</Alert>
<Alert color="secondary" role="alert">
A simple secondary alert—check it out!
</Alert>
<Alert color="success" role="alert">
A simple success alert—check it out!
</Alert>
<Alert ccolor="danger" role="alert">
A simple danger alert—check it out!
</Alert>
<Alert color="warning" role="alert">
A simple warning alert—check it out!
</Alert>
<Alert color="info" className="mb-0" role="alert">
A simple info alert—check it out!
</Alert>
</div>
</CardBody>
</Card>
</Col>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Link color </h4>
<p className="card-title-desc">
Use the{" "}
<code className="highlighter-rouge">.alert-link</code>{" "}
utility className to quickly provide matching colored
links within any alert.
</p>
<div className="">
<Alert color="primary">
A simple primary alert with <Link to="#" className="alert-link">an example link</Link>. Give it a click if you like.
</Alert>
<Alert color="secondary">
A simple secondary alert with <Link to="#" className="alert-link">an example link</Link>. Give it a click if you like.
</Alert>
<Alert colr="success">
A simple success alert with <Link to="#" className="alert-link">an example link</Link>. Give it a click if you like.
</Alert>
<Alert color="danger">
A simple danger alert with <Link to="#" className="alert-link">an example link</Link>. Give it a click if you like.
</Alert>
<Alert color="warning">
A simple warning alert with <Link to="#" className="alert-link">an example link</Link>. Give it a click if you like.
</Alert>
<Alert color="info" className="mb-0">
A simple info alert with <Link to="#" className="alert-link">an example link</Link>. Give it a click if you like.
</Alert>
</div>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Dismissing </h4>
<p className="card-title-desc">
You can see this in action with a live demo:
</p>
<div className="">
<UncontrolledAlert color="primary" >
A simple primary alert—check it out!
</UncontrolledAlert>
<UncontrolledAlert color="secondary" role="alert">
A simple secondary alert—check it out!
</UncontrolledAlert>
<UncontrolledAlert color="success" role="alert">
A simple success alert—check it out!
</UncontrolledAlert>
<UncontrolledAlert color="danger" role="alert">
A simple danger alert—check it out!
</UncontrolledAlert>
<UncontrolledAlert color="warning" role="alert">
A simple warning alert—check it out!
</UncontrolledAlert>
<UncontrolledAlert color="info" className="mb-0" role="alert">
A simple info alert—check it out!
</UncontrolledAlert>
</div>
</CardBody>
</Card>
</Col>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">With Icon </h4>
<div className="">
<UncontrolledAlert color="primary" className="alert-dismissible fade show" role="alert">
<i className="mdi mdi-bullseye-arrow mr-2"></i>
A simple primary alert—check it out!
</UncontrolledAlert>
<UncontrolledAlert color="secondary" className="alert-dismissible fade show" role="alert">
<i className="mdi mdi-grease-pencil mr-2"></i>
A simple secondary alert—check it out!
</UncontrolledAlert>
<UncontrolledAlert color="success" className="alert-dismissible fade show" role="alert">
<i className="mdi mdi-check-all mr-2"></i>
A simple success alert—check it out!
</UncontrolledAlert>
<UncontrolledAlert color="danger" className="alert-dismissible fade show" role="alert">
<i className="mdi mdi-block-helper mr-2"></i>
A simple danger alert—check it out!
</UncontrolledAlert>
<UncontrolledAlert color="warning" className="alert-dismissible fade show" role="alert">
<i className="mdi mdi-alert-outline mr-2"></i>
A simple warning alert—check it out!
</UncontrolledAlert>
<UncontrolledAlert color="info" className="alert-dismissible fade show mb-0" role="alert">
<i className="mdi mdi-alert-circle-outline mr-2"></i>
A simple info alert—check it out!
</UncontrolledAlert>
</div>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
}
