reactstrap#CardText JavaScript Examples
The following examples show how to use
reactstrap#CardText.
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: request_utils.js From covidsos with MIT License | 7 votes |
|
displayRequestCardDetails = (title, content) => {
return (
<>
<CardText className="text-gray text-custom-small mb-0">
{title}
</CardText>
<CardText>{content || 'NA'}</CardText>
</>
)
}
Example #2
| Source File: JobFitment.js From GB-GCGC with MIT License | 6 votes |
|
render() {
return (
<div class="container-fluid">
<Card className="Rounded p-3">
<CardSubtitle align="left">Job Fitment</CardSubtitle>
<hr></hr>
<br></br>
<ReactSpeedometer responsive
maxValue={100}
value={this.state.result}
segments={6}
/>
<CardText>
Description : You are {this.state.result} % suitable to the industry with your
current performance in all the tests conducted by T&P
</CardText>
</Card>
</div>
);
}
Example #3
| Source File: JobFitment.js From GB-GCGC with MIT License | 6 votes |
|
render(){
return (
<div>
<Card className="Rounded p-3">
<CardSubtitle align="left">Job Fitment</CardSubtitle>
<hr></hr>
<br></br>
<ReactSpeedometer responsive
maxValue={100}
value={this.state.result}
segments={6}
/>
<CardText align='center'>
Description : You are {(this.state.result)} % suitable to the industry with your current
performance in all the tests conducted by GCGC
</CardText>
</Card>
</div>
);
}
Example #4
| Source File: AutoCompleteAddressFormGroup.js From covidsos with MIT License | 6 votes |
|
render() {
const {iconClass, placeholder, ...props} = this.props;
const {isSelected} = this.state;
return (
<FormGroup className={classnames({'has-danger': !isSelected})}>
<CardText className="text-gray text-custom-small mb-0">
{placeholder}
</CardText>
<InputGroup className="input-group-alternative mb-3"
style={{border: isSelected ? '0' : '1px solid red'}}>
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className={iconClass + (isSelected ? '' : ' text-red')}/>
</InputGroupText>
</InputGroupAddon>
<AutoCompleteAddress {...props}
onSelect={({geoaddress, latitude, longitude, place_id}) => {
this.setState({isSelected: true},
() => this.props.onSelect(
{geoaddress, latitude, longitude, place_id}))
}}/>
</InputGroup>
<div className="address-select-warning" hidden={isSelected}>
Please search and select from Google dropdown only
</div>
</FormGroup>
)
}
Example #5
| Source File: ProfileCard.js From ReactJS-Projects with MIT License | 6 votes |
|
ProfileCard = ({ details }) => {
return (
<Card>
<CardBody className='text-center'>
<img alt="profile_pic" height="150" width="150" className="rounded-circle img-thumbnail border-danger" src={details.picture?.large} />
<CardTitle className='text-primary'>
<h1>
<span>{details.name?.title}. {details.name?.first} {details.name?.last}</span>
</h1>
</CardTitle>
<CardText className='m-3'>
<span><FaMapMarkedAlt /> {details.location?.city}</span>
</CardText>
<CardText className='m-3'>
<span><FaPhone /> {details.phone}</span>
</CardText>
<CardText className='m-3'>
<span><FaEnvelope /> {details.email}</span>
</CardText>
</CardBody>
</Card>
)
}
Example #6
| Source File: CardItem.js From ReactJS-Projects with MIT License | 6 votes |
|
CardItem = ({ product, addToCart }) => {
return (
<Card className='mt-2 mb-1'>
<CardImg
top
height="300"
width="100%"
src={product.mediumImage}
/>
<CardBody className='text-center'>
<CardTitle>Name: {product.productName}</CardTitle>
<CardText className='secondary'>Price: $ {product.productPrice}</CardText>
<Button color='info' onClick={() => addToCart(product)} >Add to cart</Button>
</CardBody>
</Card>
)
}
Example #7
| Source File: ShowCard.js From master-en-code-g2 with MIT License | 6 votes |
|
ShowCard = ({ id, image, summary, name }) => {
return (
<div>
<Link to={`shows/${id}`} style={{ textDecoration: 'none' }}>
<Card style={{ width: '250px' }}>
<CardImg top width="100%" src={ image } alt="Show Image" />
<CardBody>
<CardTitle tag="h5">{ name }</CardTitle>
<CardSubtitle tag="h6" className="mb-2 text-muted">{ id }</CardSubtitle>
<CardText>{ summary }</CardText>
</CardBody>
</Card>
</Link>
</div>
);
}
Example #8
| Source File: MusicData.js From Music-Hoster-FrontEnd-Using-React with MIT License | 5 votes |
|
// download(id){
// var token = "Bearer " + localStorage.getItem("jwt");
// let url = '/getpostbyid/' + id;
// fetch(url,{
// headers :{
// "Authorization" : token,
// }
// })
// .then(response => {
// response.blob().then(blob => {
// let url = window.URL.createObjectURL(blob);
// let a = document.createElement('a');
// a.href = url;
// a.download = 'employees.json';
// a.click();
// });
// //window.location.href = response.url;
// });
// }
render(){
let peopleCards = this.state.files.map(data => {
return (
<Col xs="3" key = {data.musicId} className="col">
<div className="div">
<Card>
<i class="fas fa-file-alt"></i>
{/* <Button color="danger" className="btn" onClick={() => this.download(data.musicId)}>Download</Button> */}
<CardBody className="cbody">
<CardTitle><h4 className="tag">{data.tag}</h4></CardTitle>
<CardSubtitle className="name">{data.name}</CardSubtitle>
<CardText className="description">{data.description}</CardText>
<Button color="danger" className="btn" onClick={() => this.delete(data.musicId)}>Delete</Button>
</CardBody>
</Card>
</div>
</Col>
)
})
return (
<Container fluid="md" className="container">
<Row xs="3" className="row">
{peopleCards}
</Row>
<ToastContainer
position="top-center"
autoClose={5000}
hideProgressBar={false}
newestOnTop={false}
closeOnClick
rtl={false}
pauseOnFocusLoss
draggable
pauseOnHover
/>
</Container>
)
}
Example #9
| Source File: FormGroupTemplate.js From covidsos with MIT License | 5 votes |
|
render() {
const {iconClass, placeholder, type, optionsArray, optionGroupsArray, optionGroupsLabels, ...attributes} = this.props;
return (
<FormGroup>
<CardText className="text-gray text-custom-small mb-0">
{placeholder}
</CardText>
<InputGroup className="input-group-alternative mb-3">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className={iconClass}/>
</InputGroupText>
</InputGroupAddon>
{
type === 'select' && optionsArray ?
<Input {...attributes} placeholder={placeholder} type={type}>
<option value="">{placeholder}</option>
{optionsArray.map(option => {
return (
<option key={option.value} value={option.value}>{option.label}</option>);
})}
</Input>
:
type === 'select' && optionGroupsArray ?
<Input {...attributes} placeholder={placeholder} type={type}>
<option value="">{placeholder}</option>
{optionGroupsArray.map(optionGroup => {
return (
<optgroup label={optionGroup.label} key={optionGroup.label}>
{optionGroup.optionList.map(option => {
return (
<option key={option.value}
value={option.value}>{option.label}</option>);
})}
</optgroup>
)
})}
</Input>
:
<Input {...attributes} placeholder={placeholder} type={type}/>
}
</InputGroup>
</FormGroup>
);
}
Example #10
| Source File: RequestsSlide.js From covidsos with MIT License | 5 votes |
|
render() {
const {request} = this.state;
const {isAuthorisedUser, currentUserID} = this.props;
const name = request.requestor_name || 'Someone';
const location = request.full_address || request.location || request.geoaddress || request.where
|| 'NA';
const why = request.why || request.what;
const requestStr = request.request || 'NA';
const source = request.source_org || request.source || 'NA';
const helpText = this.getHelpText(name, location, why, requestStr);
const ownedTask = request.managed_by_id === currentUserID;
return (
<>
<Card className='full-height-card' key={(request.r_id || request.id)}>
<CardHeader hidden={!isAuthorisedUser}>
<div>
<CardText>Managed By: <Badge color={ownedTask ? "success" : "primary"}>{ownedTask
? 'You' : (request.managed_by || 'Admin')}</Badge></CardText>
<CardText>
<Button outline color={ownedTask ? "success" : "primary"} size="sm"
disabled={ownedTask}
onClick={() => this.handleAssignToMeAsManager(ownedTask, request,
parseInt(currentUserID))}>
{ownedTask ? "Assigned" : "Assign to me"}
</Button>
</CardText>
</div>
</CardHeader>
<CardBody>
<CardTitle className="h3 mb-0">{why || requestStr}</CardTitle>
<CardText className="text-gray text-custom-small">
Requested by {name} at {request.request_time}
</CardText>
{displayRequestCardDetails('Address', location)}
{displayRequestCardDetails('Received via', source)}
</CardBody>
<CardFooter className="pt-0 pb-2">
<Badge color="warning">{request.type}</Badge>
</CardFooter>
<CardFooter className="pt-2">
<Row>
<Col xs={6}>
{getShareButtons(request.accept_link, helpText)}
</Col>
<Col xs={{size: 3, offset: 1}} className="text-center">
<Button className="btn-link border-0 px-2 text-primary" size="md"
onClick={() => this.props.openPopup(request,
{name, location, why, requestStr, source, helpText})}>
See Details
</Button>
</Col>
</Row>
</CardFooter>
</Card>
</>
);
}
Example #11
| Source File: Cards.jsx From aglomerou with GNU General Public License v3.0 | 5 votes |
|
Cards = ({ data: { confirmed, recovered, deaths, lastUpdate } }) => {
if (!confirmed) {
return 'Carregando...';
}
return (
<div className={styles.container}>
<Row className={styles.row} container spacing={3} justify="center">
<Col sm="4">
<Card xs={12} md={3} className={cx(styles.card, styles.infected)}>
<CardTitle>CASOS ATIVOS</CardTitle>
<CardText variant="h5">
<CountUp start={0} end={confirmed.value} duration={2.5} separator="," />
</CardText>
<CardText color="textSecondary">{new Date(lastUpdate).toDateString()}</CardText>
<CardFooter variant="body2">Número de casos ativos de COVID-19</CardFooter>
</Card>
</Col>
<Col sm="4">
<Card xs={12} md={3} className={cx(styles.card, styles.recovered)}>
<CardTitle color="textSecondary">RECUPERADOS</CardTitle>
<CardText variant="h5">
<CountUp start={0} end={recovered.value} duration={2.5} separator="," />
</CardText>
<CardText color="textSecondary">{new Date(lastUpdate).toDateString()}</CardText>
<CardFooter variant="body2">Números de recuperados do COVID-19</CardFooter>
</Card>
</Col>
<Col sm="4">
<Card xs={12} md={3} className={cx(styles.card, styles.deaths)}>
<CardTitle color="textSecondary">MORTES</CardTitle>
<CardText variant="h5">
<CountUp start={0} end={deaths.value} duration={2.5} separator="," />
</CardText>
<CardText color="textSecondary">{new Date(lastUpdate).toDateString()}</CardText>
<CardFooter variant="body2">Número de mortes causadas pelo COVID-19</CardFooter>
</Card>
</Col>
</Row>
</div>
);
}
Example #12
| Source File: ViewYaml.js From gedge-platform with Apache License 2.0 | 5 votes |
|
render() {
return (
<React.Fragment>
<div className="page-content">
<TabPane tabId="8" className="p-3">
<Row>
<Col sm="12">
<CardText>
<AceEditor
placeholder="Placeholder Text"
mode="javascript"
theme="xcode"
name="blah2"
onLoad={this.onLoad}
onChange={this.onChange}
fontSize={14}
showPrintMargin={true}
showGutter={true}
highlightActiveLine={true}
value={`function onLoad(editor) {
console.log("seohwa yeonguwonnim babo melong~~~~~~~");
}`}
setOptions={{
enableBasicAutocompletion: false,
enableLiveAutocompletion: false,
enableSnippets: false,
showLineNumbers: true,
tabSize: 2,
}} />
</CardText>
</Col>
</Row>
</TabPane>
</div>
</React.Fragment>
);
}
Example #13
| Source File: view.js From hivemind with Apache License 2.0 | 5 votes |
|
PopperCard = ({ el, poppers }) => {
const data = el.data()
let path
if (!data.isRoot) {
path = getPath(el).join(' ⟶ ')
}
return (
<Card className="border-dark">
<CardBody>
<CardTitle
tag="h5"
className="mw-100 mb-4"
style={{ minWidth: '50vw' }}
>
{data.title}
<span>
<small className="text-muted">
({data.isRoot ? 'ROOT NODE' : path})
</small>
</span>
<CloseButton
divKey={`popper-${el.id()}`}
popperKey={el.id()}
poppers={poppers}
/>
</CardTitle>
<CardSubtitle>
<Row>
<Col className="mb4">Created By: {data.createdBy}</Col>
{data.lastUpdatedBy ? (
<Col className="mb4">Last Updated By: {data.lastUpdatedBy}</Col>
) : null}
</Row>
<hr />
</CardSubtitle>
<CardText tag="div">
{data.summary ? (
<>
<Row>
<h5>Summary</h5>
</Row>
<Row>{data.summary}</Row>
</>
) : null}
{data.content ? (
<>
<hr />
<Row>{data.content}</Row>
</>
) : null}
{data.audio ? (
<>
<Row>
<h5>Audio</h5>
</Row>
<Row>
<audio controls>
<source src={data.audio}/>
</audio>
</Row>
</>
) : null}
</CardText>
</CardBody>
</Card>
)
}
Example #14
| Source File: ExperienceCard.jsx From developer-portfolio with Apache License 2.0 | 5 votes |
|
ExperienceCard = ({ data }) => {
return (
<Col lg="6">
<Fade left duration={2000}>
<Card
style={{ flex: 1 }}
className="shadow-lg--hover mb-3 shadow border-0 text-center rounded"
>
<CardBody className="">
<img
src={data.companylogo}
style={{
objectFit: "cover",
left: 0,
right: 0,
top: "7rem",
marginLeft: "auto",
marginRight: "auto",
width: "8rem",
height: "8rem",
borderRadius: "50%",
}}
className="shadow mb-3"
alt={data.companylogo}
/>
<CardTitle tag="h4" className="mb-2">
{data.company}
</CardTitle>
<CardSubtitle tag="h5" className="mb-2">
{data.role}
</CardSubtitle>
<CardSubtitle>{data.date}</CardSubtitle>
<CardText
tag="div"
className="description my-3 text-left"
>
{data.desc}
<ul>
{data.descBullets
? data.descBullets.map((desc) => {
return <li key={desc}>{desc}</li>;
})
: null}
</ul>
</CardText>
</CardBody>
</Card>
</Fade>
</Col>
);
}
Example #15
| Source File: ProductCard.js From Merch-Dropper-fe with MIT License | 5 votes |
|
ProductCard = ({ product, addToCart }) => {
const [isAdded, setIsAdded] = useState(false);
console.log("product", product);
const showAdded = () => {
setIsAdded(true);
setTimeout(() => {
setIsAdded(false);
}, 2000);
};
return (
<Fragment>
<Col xs="6" lg="4">
<Card className="merchCard m-1">
<CardImg
top
width="100%"
height="auto"
src={product.fullSizeURL}
alt="T-shirt"
/>
<CardBody className="product-card-padding">
<CardTitle className="h5 text-center">{product.design}</CardTitle>
<CardText>
<small className="text-muted">{product.name}</small>
</CardText>
<CardText>${product.price}</CardText>
<button
className="btn-primary cardBtn"
size="sm"
onClick={() => {
addToCart(product);
showAdded();
}}
>
{isAdded ? "Added" : "Add to Cart"}
</button>
</CardBody>
</Card>
</Col>
</Fragment>
);
}
Example #16
| Source File: applicants.page.js From hiring-system with GNU General Public License v3.0 | 5 votes |
|
ApplicantsPage = () => {
return (
<div className="container mt-4 mb-4">
<Jumbotron fluid className="border-bottom rounded-top">
<Container fluid>
<h1 className="display-5">Applicants</h1>
<p className="lead float-right font-weight-bold">
<strong>Position</strong>: Senior Developer
</p>
</Container>
</Jumbotron>
<div>
<Row>
{/* Map through all the data */}
{listOfApplicants.map((applicant) => (
<Col sm="6 mt-4" key={applicant.id}>
<Card body>
<CardTitle>
<h3>{applicant.name}</h3>
<hr />
</CardTitle>
<CardText>
<Row className="mt-2">
<Col sm="6">
<strong>Email:</strong>
</Col>
<Col>{applicant.email}</Col>
</Row>
<Row className="mt-2">
<Col sm="6">
<strong>Contact:</strong>
</Col>
<Col>7{applicant.contact}</Col>
</Row>
<Row className="mt-2">
<Col sm="6">
<strong>Time Zone</strong>
</Col>
<Col>{applicant.timeZone}</Col>
</Row>
<Row className="mt-2">
<Col sm="6">
<strong>Availibility</strong>
</Col>
<Col>{applicant.availability}</Col>
</Row>
</CardText>
<ButtonToggle color="primary">View Resume</ButtonToggle>
</Card>
</Col>
))}
{/* end of data mapping */}
</Row>
</div>
</div>
);
}
Example #17
| Source File: UiCards.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Breadcrumbs title="Cards" breadcrumbItems={this.state.breadcrumbItems} />
<Row>
<Col mg={6} xl={3}>
<Card>
<CardImg top className="img-fluid" src={img1} alt="Skote" />
<CardBody>
<CardTitle className="mt-0">Card title</CardTitle>
<CardText>Some quick example text to build on the card title and make
up the bulk of the card's content.</CardText>
<Link to="#" className="btn btn-primary waves-effect waves-light">Button</Link>
</CardBody>
</Card>
</Col>
<Col mg={6} xl={3}>
<Card>
<CardImg top className="img-fluid" src={img2} alt="Skote" />
<CardBody>
<CardTitle className="mt-0">Card title</CardTitle>
<CardText>Some quick example text to build on the card title and make
up the bulk of the card's content.</CardText>
</CardBody>
<ul className="list-group list-group-flush">
<li className="list-group-item">Cras justo odio</li>
<li className="list-group-item">Dapibus ac facilisis in</li>
</ul>
<CardBody>
<Link to="#" className="card-link">Card link</Link>
<Link to="#" className="card-link">Another link</Link>
</CardBody>
</Card>
</Col>
<Col mg={6} xl={3}>
<Card>
<CardImg top className="img-fluid" src={img3} alt="Skote" />
<CardBody>
<CardText>Some quick example text to build on the card title and make
up the bulk of the card's content.</CardText>
</CardBody>
</Card>
</Col>
<Col md={6} xl={3}>
<Card>
<CardBody>
<CardTitle className="mt-0">Card title</CardTitle>
<CardSubtitle className="font-14 text-muted">Support card subtitle</CardSubtitle>
</CardBody>
<CardImg className="img-fluid" src={img4} alt="Skote" />
<CardBody>
<CardText>Some quick example text to build on the card title and make
up the bulk of the card's content.</CardText>
<Link to="#" className="card-link">Card link</Link>
<Link to="#" className="card-link">Another link</Link>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col md={6}>
<Card body>
<CardTitle className="mt-0">Special title treatment</CardTitle>
<CardText>With supporting text below as a natural lead-in to additional
content.</CardText>
<Link to="#" className="btn btn-primary waves-effect waves-light">Go somewhere</Link>
</Card>
</Col>
<Col md={6}>
<Card body>
<CardTitle className="mt-0">Special title treatment</CardTitle>
<CardText>With supporting text below as a natural lead-in to additional
content.</CardText>
<Link to="#" className="btn btn-primary waves-effect waves-light">Go somewhere</Link>
</Card>
</Col>
</Row>
<Row>
<Col lg={4}>
<Card body>
<CardTitle className="mt-0">Special title treatment</CardTitle>
<CardText>With supporting text below as a natural lead-in to additional
content.</CardText>
<Link to="#" className="btn btn-primary waves-effect waves-light">Go somewhere</Link>
</Card>
</Col>
<Col lg={4}>
<Card body className="text-center">
<CardTitle className="mt-0">Special title treatment</CardTitle>
<CardText>With supporting text below as a natural lead-in to additional
content.</CardText>
<Link to="#" className="btn btn-primary waves-effect waves-light">Go somewhere</Link>
</Card>
</Col>
<Col lg={4}>
<Card body className="text-right">
<CardTitle className="mt-0">Special title treatment</CardTitle>
<CardText>With supporting text below as a natural lead-in to additional
content.</CardText>
<Link to="#" className="btn btn-primary waves-effect waves-light">Go somewhere</Link>
</Card>
</Col>
</Row>
<Row>
<Col lg={4}>
<Card>
<CardHeader className="mt-0">Featured</CardHeader>
<CardBody>
<CardTitle className="mt-0">Special title treatment</CardTitle>
<CardText>With supporting text below as a natural lead-in to
additional content.</CardText>
<Link to="#" className="btn btn-primary">Go somewhere</Link>
</CardBody>
</Card>
</Col>
<Col lg={4}>
<Card>
<CardHeader>
Quote
</CardHeader>
<CardBody>
<blockquote className="card-blockquote mb-0">
<CardText>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
erat a ante.</CardText>
<footer className="blockquote-footer font-size-12">
Someone famous in <cite title="Source Title">Source Title</cite>
</footer>
</blockquote>
</CardBody>
</Card>
</Col>
<Col lg={4}>
<Card>
<CardHeader>Featured</CardHeader>
<CardBody>
<CardTitle className="mt-0">Special title treatment</CardTitle>
<CardText>With supporting text below as a natural lead-in to
additional content.</CardText>
<Link to="#" className="btn btn-primary waves-effect waves-light">Go somewhere</Link>
</CardBody>
<CardFooter className="text-muted">
2 days ago
</CardFooter>
</Card>
</Col>
</Row>
<Row>
<Col lg={4}>
<Card>
<CardImg top className="img-fluid" src={img5} alt="Skote" />
<CardBody>
<CardTitle className="mt-0">Card title</CardTitle>
<CardText>This is a wider card with supporting text below as a
natural lead-in to additional content. This content is a little bit
longer.</CardText>
<CardText>
<small className="text-muted">Last updated 3 mins ago</small>
</CardText>
</CardBody>
</Card>
</Col>
<Col lg={4}>
<Card>
<CardBody>
<CardTitle className="mt-0">Card title</CardTitle>
<CardText>This is a wider card with supporting text below as a
natural lead-in to additional content. This content is a little bit
longer.</CardText>
<CardText>
<small className="text-muted">Last updated 3 mins ago</small>
</CardText>
</CardBody>
<CardImg bottom className="img-fluid" src={img7} alt="Skote" />
</Card>
</Col>
<Col lg={4}>
<Card>
<CardImg className="img-fluid" src={img6} alt="Skote" />
<CardImgOverlay>
<CardTitle className="text-white mt-0">Card title</CardTitle>
<CardText className="text-light">This is a wider card with supporting text below as a
natural lead-in to additional content. This content is a little bit
longer.</CardText>
<CardText>
<small className="text-white">Last updated 3 mins ago</small>
</CardText>
</CardImgOverlay>
</Card>
</Col>
</Row>
<Row>
<Col lg={6}>
<Card>
<Row className="no-gutters align-items-center">
<Col md={4}>
<CardImg className="img-fluid" src={img2} alt="Skote" />
</Col>
<Col md={8}>
<CardBody>
<CardTitle>Card title</CardTitle>
<CardText>This is a wider card with supporting text below as a natural lead-in to additional content.</CardText>
<CardText><small className="text-muted">Last updated 3 mins ago</small></CardText>
</CardBody>
</Col>
</Row>
</Card>
</Col>
<Col lg={6}>
<Card>
<Row className="no-gutters align-items-center">
<Col md={8}>
<CardBody>
<CardTitle>Card title</CardTitle>
<CardText>This is a wider card with supporting text below as a natural lead-in to additional content.</CardText>
<CardText><small className="text-muted">Last updated 3 mins ago</small></CardText>
</CardBody>
</Col>
<Col md={4}>
<CardImg className="img-fluid" src={img3} alt="Skote" />
</Col>
</Row>
</Card>
</Col>
</Row>
<Row>
<Col lg={4}>
<Card color="primary" className="text-white-50">
<CardBody>
<CardTitle className="mb-4 text-white"><i className="mdi mdi-bullseye-arrow mr-3"></i> Primary Card</CardTitle>
<CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
</CardBody>
</Card>
</Col>
<Col lg={4}>
<Card color="success" className="text-white-50">
<CardBody>
<CardTitle className="mb-4 text-white"><i className="mdi mdi-check-all mr-3"></i> Success Card</CardTitle>
<CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
</CardBody>
</Card>
</Col>
<Col lg={4}>
<Card color="info" className="text-white-50">
<CardBody>
<CardTitle className="mb-4 text-white"><i className="mdi mdi-alert-circle-outline mr-3"></i>Info Card</CardTitle>
<CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col lg={4}>
<Card color="warning" className="text-white-50">
<CardBody>
<CardTitle className="mb-4 text-white"><i className="mdi mdi-alert-outline mr-3"></i>Warning Card</CardTitle>
<CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
</CardBody>
</Card>
</Col>
<Col lg={4}>
<Card color="danger" className="text-white-50">
<CardBody>
<CardTitle className="mb-4 text-white"><i className="mdi mdi-block-helper mr-3"></i>Danger Card</CardTitle>
<CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
</CardBody>
</Card>
</Col>
<Col lg={4}>
<Card color="dark" className="text-light">
<CardBody>
<CardTitle className="mb-4 text-white"><i className="mdi mdi-alert-circle-outline mr-3"></i>Dark Card</CardTitle>
<CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col lg={4}>
<Card outline color="primary" className="border">
<CardHeader className="bg-transparent">
<h5 className="my-0 text-primary"><i className="mdi mdi-bullseye-arrow mr-3"></i>Primary outline Card</h5>
</CardHeader>
<CardBody>
<CardTitle className="mt-0">card title</CardTitle>
<CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
</CardBody>
</Card>
</Col>
<Col lg={4}>
<Card outline color="danger" className="border">
<CardHeader className="bg-transparent">
<h5 className="my-0 text-danger"><i className="mdi mdi-block-helper mr-3"></i>Danger outline Card</h5>
</CardHeader>
<CardBody>
<CardTitle className="mt-0">card title</CardTitle>
<CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
</CardBody>
</Card>
</Col>
<Col lg={4}>
<Card outline color="success" className="border">
<CardHeader className="bg-transparent">
<h5 className="my-0 text-success"><i className="mdi mdi-check-all mr-3"></i>Success Card</h5>
</CardHeader>
<CardBody>
<CardTitle className="mt-0">card title</CardTitle>
<CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col xs={12} className="mb-4">
<h4 className="my-3">Decks</h4>
<CardDeck>
<Card>
<CardImg top className="img-fluid" src={img4} alt="Skote" />
<CardBody>
<CardTitle className="mt-0">Card title</CardTitle>
<CardText>This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
<CardText>
<small className="text-muted">Last updated 3 mins ago</small>
</CardText>
</CardBody>
</Card>
<Card>
<CardImg top className="img-fluid" src={img5} alt="Skote" />
<CardBody>
<CardTitle className="mt-0">Card title</CardTitle>
<CardText>This card has supporting text below as a natural lead-in to additional content.</CardText>
<CardText>
<small className="text-muted">Last updated 3 mins ago</small>
</CardText>
</CardBody>
</Card>
<Card>
<CardImg top className="img-fluid" src={img6} alt="Skote" />
<CardBody>
<CardTitle className="mt-0">Card title</CardTitle>
<CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</CardText>
<CardText>
<small className="text-muted">Last updated 3 mins ago</small>
</CardText>
</CardBody>
</Card>
</CardDeck>
</Col>
</Row>
<Row>
<Col sm={12}>
<h4 className="my-3">Cards Columns</h4>
<CardColumns>
<Card>
<CardImg top src={img3} alt="Skote" />
<CardBody>
<CardTitle>Card title that wraps to a new line</CardTitle>
<CardText>This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
</CardBody>
</Card>
<Card>
<CardBody>
<blockquote className="card-blockquote mb-0">
<CardText>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</CardText>
<footer className="blockquote-footer font-size-12">
Someone famous in <cite title="Source Title">Source Title</cite>
</footer>
</blockquote>
</CardBody>
</Card>
<Card>
<CardImg top src={img5} alt="Skote" />
<CardBody>
<CardTitle>Card title</CardTitle>
<CardText>This card has supporting text below as a natural lead-in to additional content.</CardText>
<CardText><small className="text-muted">Last updated 3 mins ago</small></CardText>
</CardBody>
</Card>
<Card color="primary" className="text-white text-center p-3">
<blockquote className="card-blockquote mb-0">
<CardText>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</CardText>
<footer className="blockquote-footer text-white font-size-12">Someone famous in <cite title="Source Title">Source Title</cite>
</footer>
</blockquote>
</Card>
<Card className="text-center">
<CardBody>
<CardTitle>Card title</CardTitle>
<CardText>This card has a regular title and short paragraphy of text below it.</CardText>
<CardText><small className="text-muted">Last updated 3 mins ago</small></CardText>
</CardBody>
</Card>
<Card>
<CardImg top src={img7} alt="Skote" />
</Card>
<Card className="p-3 text-right">
<blockquote className="blockquote mb-0">
<CardText>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</CardText>
<footer className="blockquote-footer">
<small className="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</Card>
<Card>
<CardBody>
<CardTitle>Card title</CardTitle>
<CardText>This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</CardText>
<CardText><small className="text-muted">Last updated 3 mins ago</small></CardText>
</CardBody>
</Card>
</CardColumns>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
}
Example #18
| Source File: editJob.page.js From hiring-system with GNU General Public License v3.0 | 4 votes |
|
EditJob = () => {
//Data Management
const { handleSubmit, watch, errors, control, getValues } = useForm();
const [selectedPostDate, setSelectedPostDate] = useState();
const watchDate = watch("jobPostDate");
useEffect(() => {
if (!getValues("jobPostDate")) {
return;
}
const selectedDate = new Date(getValues("jobPostDate"));
setSelectedPostDate(selectedDate.toDateString());
}, [watchDate]);
const onSubmit = (data) => console.log(data);
//sample data
const {
jobTitle,
jobDesc,
jobPostDate,
workLocation,
visaSelection,
skills,
benefits,
companyName,
} = jobData;
//Display output
const displaySection = () => (
<Card body className="shadow-sm p-3 mb-5 bg-white rounded border-0">
<CardTitle className="text-center">
<h3>Job Title: {jobTitle}</h3>
</CardTitle>
<CardText>
<Row className="mt-2">
<Col sm="3">
<strong>Job Description:</strong>
</Col>
<Col>
<p>{jobDesc}</p>
</Col>
</Row>
<Row className="mt-2">
<Col sm="3">
<strong>Skills:</strong>
</Col>
<Col>
{skills.map((skill, index) => (
<span id={index} class="badge badge-danger p-2 mr-2">
{skill.label}
</span>
))}
</Col>
</Row>
<Row className="mt-3">
<Col sm="3">
<strong>Company Name:</strong>
</Col>
<Col>{companyName}</Col>
</Row>
<Row className="mt-2">
<Col sm="3">
<strong>Job Post Date:</strong>
</Col>
<Col>{jobPostDate}</Col>
</Row>
<Row className="mt-2">
<Col sm="3">
<strong>Work Location:</strong>
</Col>
<Col>{workLocation}</Col>
</Row>
<Row className="mt-3">
<Col sm="3">
<strong>Benefits:</strong>
</Col>
<Col>
{benefits.map((benefit, index) => (
<span key={index} class="badge badge-warning p-2 mr-2">
{benefit.label}
</span>
))}
</Col>
</Row>
<Row className="mt-3">
<Col sm="3">
<strong>Will sponsor work visa:</strong>
</Col>
<Col>
<span class="badge badge-dark p-3">{visaSelection.label}</span>
</Col>
</Row>
</CardText>
</Card>
);
//Form Section
const formSection = () => (
<Card>
<CardBody>
<Form onSubmit={handleSubmit(onSubmit)}>
<FormGroup>
<Controller
as={Input}
defaultValue={jobTitle}
name="jobTitle"
placeholder="Job Title"
control={control}
rules={{ required: true }}
/>
{errors.jobTitle && (
<span className="error-text">This field is required</span>
)}
</FormGroup>
<FormGroup>
<Controller
as={Input}
type="text"
name="jobDesc"
defaultValue={jobDesc}
placeholder="Job Description"
control={control}
rules={{ required: true }}
/>
{errors.jobDesc && (
<span className="error-text">This field is required</span>
)}
</FormGroup>
<FormGroup>
<Controller
as={Select}
control={control}
defaultValue={skills}
isMulti
name="skills"
options={skillOptions}
className="basic-multi-select"
classNamePrefix="select"
rules={{ required: true }}
/>
{errors.skills && (
<span className="error-text">This field is required</span>
)}
</FormGroup>
<FormGroup>
<Controller
as={Input}
control={control}
defaultValue={companyName}
name="companyName"
placeholder="Company Name"
rules={{ required: true }}
/>
{errors.companyName && (
<span className="error-text">This field is required</span>
)}
</FormGroup>
<FormGroup style={styles.relativeEle}>
<Input
name="jobPostDateInput"
placeholder="Job Post Date"
defaultValue={jobPostDate}
value={selectedPostDate}
/>
<Controller
name="jobPostDate"
as={DatePicker}
control={control}
rules={{ required: true }}
maxDate={new Date()}
clearIcon={null}
className="app-date-custom-style"
/>
{errors.jobPostDate && (
<span className="error-text">This field is required</span>
)}
</FormGroup>
<FormGroup>
<Controller
as={Input}
control={control}
defaultValue={workLocation}
name="workLocation"
placeholder="Work Location"
rules={{ required: true }}
/>
{errors.workLocation && (
<span className="error-text">This field is required</span>
)}
</FormGroup>
<FormGroup>
<Controller
as={Select}
control={control}
isMulti
options={benefitOptions}
name="benefits"
defaultValue={benefits}
rules={{ required: true }}
/>
{errors.benefits && (
<span className="error-text">This field is required</span>
)}
</FormGroup>
<FormGroup>
<Controller
as={Select}
name="workVisa"
defaultValue={visaSelection}
options={visaSelectionOptions}
control={control}
rules={{ required: true }}
placeholder="Will Sponsor Work Visa"
/>
{errors.workVisa && (
<span className="error-text">This field is required</span>
)}
</FormGroup>
<Button color="success" className="mx-auto p-2">
Edit Job
</Button>
</Form>
</CardBody>
</Card>
);
//Render
return (
<div className="container mt-4 mb-4">
<div className="p-1 rounded-top border-bottom" style={styles.heading}>
<h1 className="text-center">Edit Job</h1>
</div>
{/* Display Section */}
<div className="mt-4">{displaySection()}</div>
{/* End of Section */}
{/* Form Section */}
<div className="mt-4 edit-job-container">{formSection()}</div>
{/* End of Section */}
</div>
);
}
Example #19
| Source File: blog.component.js From blogApp with MIT License | 4 votes |
|
render() {
return (
<div className='pt-2 px-3'>
<div className='row mr-auto ml-0 mb-4 mt-0'>
<Button
color='primary'
size='lg'
onClick={() => {
window.location.href = "/";
}}
style={{
width: "60px",
height: "60px",
borderRadius: "50%",
}}>
<FontAwesomeIcon icon={faArrowLeft} />
</Button>
</div>
{!this.state.loaded ? (
<ReactLoading
type={"spin"}
color={"orange"}
height={"100vh"}
width={"40%"}
className='loading'
/>
) : (
<Card id='blog' className='p-2 col-12 singleBlog'>
<CardImg
src={this.state.image}
alt='Card image cap'
className='img-thumbnail'
/>
<CardBody>
<CardTitle className='text-primary'>
<h5>
{this.state.title}
<span className='float-right text-secondary'>
{"-"}
<em>@{this.state.author.username}</em>
</span>
</h5>
</CardTitle>
{this.state.date !== "" && (
<CardSubtitle className='text-dark'>
<FontAwesomeIcon
icon={faCalendar}
className='mr-2'
/>
{new Intl.DateTimeFormat("en-US", {
month: "long",
day: "numeric",
year: "numeric",
hour: "numeric",
minute: "numeric",
}).format(Date.parse(this.state.date))}
<span className='float-right'>
<FontAwesomeIcon
className='text-danger'
icon={faHeart}
/>{" "}
{this.state.likes.length}
</span>
</CardSubtitle>
)}
<CardText>
<br />
{this.state.body}
</CardText>
</CardBody>
<CardFooter>
{this.props.user !== null &&
this.props.user._id ===
this.state.author.id && (
<div
style={{ display: "flex" }}
className='p-1'>
<Button
className='btn btn-danger mr-1'
style={{ width: "48%" }}
onClick={this.deleteBlog}>
Delete
</Button>{" "}
<Button
className='btn btn-warning ml-1'
style={{ width: "48%" }}
onClick={this.toggleModal}>
Edit
</Button>
</div>
)}
</CardFooter>
</Card>
)}
<Modal
isOpen={this.state.isModalOpen}
fade={false}
toggle={this.toggleModal}>
<ModalHeader toggle={this.toggleModal}>
Add a blog
</ModalHeader>
<Form onSubmit={this.onSubmit}>
<ModalBody>
<FormGroup>
<Label htmlFor='title'>title</Label>
<Input
type='text'
id='title'
onChange={this.ontitleChange}
value={this.state.title}
name='title'
/>
</FormGroup>
<FormGroup>
<Label htmlFor='imageURL'>imageURL</Label>
<Input
type='text'
id='imageURL'
onChange={this.onimgChange}
value={this.state.image}
name='imageURL'
/>
</FormGroup>
<FormGroup>
<Label htmlFor='body'>body</Label>
<Input
type='textarea'
id='body'
onChange={this.onbodyChange}
value={this.state.body}
name='body'
/>
</FormGroup>
</ModalBody>
<ModalFooter>
<Button
type='submit'
value='submit'
color='primary'>
UPDATE BLOG
</Button>
</ModalFooter>
</Form>
</Modal>
</div>
);
}
Example #20
| Source File: index.js From gobench with Apache License 2.0 | 4 votes |
|
render() {
return (
<div>
<h5 className="mb-4">
<strong>Default Cards</strong>
</h5>
<div>
<Card>
<CardImg
top
width="100%"
src="https://via.placeholder.com/1300x300/f0f2f4/e4e9f0"
alt="Card cap"
/>
<CardBody>
<CardTitle>Card title</CardTitle>
<CardSubtitle>Card subtitle</CardSubtitle>
<CardText>
Some quick example text to build on the card title and make up the bulk of the cards
content.
</CardText>
<Button color="primary">Button</Button>
</CardBody>
</Card>
</div>
<div className="mb-5">
<Card>
<CardBody>
<CardTitle>Card title</CardTitle>
<CardSubtitle>Card subtitle</CardSubtitle>
</CardBody>
<CardImg
top
width="100%"
src="https://via.placeholder.com/1300x300/f0f2f4/e4e9f0"
alt="Card cap"
/>
<CardBody>
<CardText>
Some quick example text to build on the card title and make up the bulk of the cards
content.
</CardText>
<CardLink>Card Link</CardLink>
<CardLink>Another Link</CardLink>
</CardBody>
</Card>
</div>
<h5 className="mb-4">
<strong>Colorful Cards</strong>
</h5>
<div className="row">
<div className="col-lg-6">
<Card body inverse style={{ backgroundColor: '#333', borderColor: '#333' }}>
<CardTitle>Special Title Treatment</CardTitle>
<CardText>
With supporting text below as a natural lead-in to additional content.
</CardText>
<Button>Button</Button>
</Card>
</div>
<div className="col-lg-6">
<Card body inverse color="primary">
<CardTitle>Special Title Treatment</CardTitle>
<CardText>
With supporting text below as a natural lead-in to additional content.
</CardText>
<Button color="light">Button</Button>
</Card>
</div>
<div className="col-lg-6">
<Card body inverse color="success">
<CardTitle>Special Title Treatment</CardTitle>
<CardText>
With supporting text below as a natural lead-in to additional content.
</CardText>
<Button color="light">Button</Button>
</Card>
</div>
<div className="col-lg-6">
<Card body inverse color="info">
<CardTitle>Special Title Treatment</CardTitle>
<CardText>
With supporting text below as a natural lead-in to additional content.
</CardText>
<Button color="light">Button</Button>
</Card>
</div>
<div className="col-lg-6">
<Card body inverse color="warning">
<CardTitle>Special Title Treatment</CardTitle>
<CardText>
With supporting text below as a natural lead-in to additional content.
</CardText>
<Button color="light">Button</Button>
</Card>
</div>
<div className="col-lg-6">
<Card body inverse color="danger">
<CardTitle>Special Title Treatment</CardTitle>
<CardText>
With supporting text below as a natural lead-in to additional content.
</CardText>
<Button color="light">Button</Button>
</Card>
</div>
</div>
</div>
)
}
Example #21
| Source File: blogList.component.js From blogApp with MIT License | 4 votes |
|
render() {
const blog = this.props.blog;
return (
<div
className='col-12 col-md-6 col-lg-4 col-xl-3 mb-5'
key={blog._id}>
<Card className='p-1 m-1 h-100' id='cards'>
<Card>
<CardImg
top
width='100%'
src={blog.image}
alt='Card image cap'
className='img-fluid'
/>
<CardImgOverlay>
<h3>
<FontAwesomeIcon
className='text-danger'
icon={faHeart}
/>{" "}
{this.state.likes}
</h3>
</CardImgOverlay>
</Card>
<CardBody className='d-flex flex-column'>
<CardTitle className='text-primary'>
<h5>
{blog.title}
{this.state.liked ? (
<span
className='float-right '
style={{ cursor: "pointer" }}
onClick={this.toggleLike}>
<FontAwesomeIcon
icon={faHeart}
className='text-danger'
/>
</span>
) : (
<span
className='float-right '
onClick={this.toggleLike}>
<FontAwesomeIcon
style={{
color: "rgba(0,0,0,0.2)",
cursor: "pointer",
}}
icon={faHeart}
className=''
/>
</span>
)}
</h5>
</CardTitle>
<CardSubtitle>
{"-"}
<em>@{blog.author.username}</em>
</CardSubtitle>
<br />
<CardText className=''>
{blog.body.substring(0, 70)}
{" ..."}
</CardText>
<Link
to={{
pathname: `/blog/${blog._id}`,
blog: { blog },
}}
className='text-decoration-none mt-auto'>
<Button className='btn btn-sm' color='success'>
Read More
</Button>
</Link>
</CardBody>
{blog.date && (
<CardFooter className='small '>
<FontAwesomeIcon
icon={faCalendar}
className='mr-2'
/>
{new Intl.DateTimeFormat("en-US", {
month: "long",
day: "numeric",
year: "numeric",
hour: "numeric",
minute: "numeric",
}).format(Date.parse(blog.date))}
{/* {blog.date} */}
</CardFooter>
)}
</Card>
</div>
);
}
Example #22
| Source File: PodDetail.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
const apilistinfo = this.state.apilistinfo;
const involveData = this.state.involveData;
const { params } = this.props.match;
let labels = []
let apitoData = [];
let annotations = [];
let restartCount = [];
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Breadcrumbs title="POD Detail" breadcrumbItems={this.state.breadcrumbItems} />
<Row>
<Col lg={4}>
<Card className="checkout-order-summary">
<CardBody>
<h5 className="text-dark font-weight-bold">
{params.name}
</h5>
<Card></Card>
<Row>
<div>
<Link onClick={() => this.setState({ isModal: !this.state.modal })} to="#" className="popup-form btn btn-primary" >VIEW YAML</Link>
</div>
<Modal size="xl" isOpen={this.state.isModal} centered={true} toggle={() => this.setState({ isModal: !this.state.isModal })}>
<ModalHeader toggle={() => this.setState({ isModal: !this.state.isModal })} > YAML </ModalHeader>
<ModalBody>
<TabPane tabId="8" className="p-3">
<Row>
<Col sm="12">
<CardText>
<AceEditor
placeholder="Placeholder Text"
mode="javascript"
theme="xcode"
name="blah2"
onLoad={this.onLoad}
onChange={this.onChange}
fontSize={14}
showPrintMargin={true}
showGutter={true}
highlightActiveLine={true}
value={`function onLoad(editor) {
console.log("seohwa yeonguwonnim babo melong~~~~~~~");
}`}
setOptions={{
enableBasicAutocompletion: false,
enableLiveAutocompletion: false,
enableSnippets: false,
showLineNumbers: true,
tabSize: 2,
}} />
</CardText>
</Col>
</Row>
</TabPane>
</ModalBody>
</Modal>
<Col sm={3}>
{/* 더보기 */}
<Dropdown isOpen={this.state.singlebtn} toggle={() =>
this.setState({ singlebtn: !this.state.singlebtn })
} >
<DropdownToggle color="primary" caret>
더보기 <i className="mdi mdi-chevron-down"></i>
</DropdownToggle>
<DropdownMenu>
<DropdownItem>삭제</DropdownItem>
</DropdownMenu>
</Dropdown>
</Col>
{/* <h4 className="card-title">Popup with form</h4> */}
</Row>
{/* </div> */}
<div className="table-responsive">
<PodDetail_detail apilistinfo={apilistinfo} />
</div>
</CardBody>
</Card>
</Col>
<Col lg={8}>
<Card>
<CardBody>
<Nav pills className="navtab-bg nav-justified">
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab1 === "5",
})}
onClick={() => {
this.toggle1("5");
}}
>
리소스 상태
</NavLink>
</NavItem>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab1 === "6",
})}
onClick={() => {
this.toggle1("6");
}}
>
메타 데이터
</NavLink>
</NavItem>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab1 === "7",
})}
onClick={() => {
this.toggle1("7");
}}
>
상태
</NavLink>
</NavItem>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab1 === "8",
})}
onClick={() => {
this.toggle1("8");
}}
>
모니터링
</NavLink>
</NavItem>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab1 === "9",
})}
onClick={() => {
this.toggle1("9");
}}
>
이벤트
</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={this.state.activeTab1}>
<TabPane tabId="5" className="p-3">
<Row>
<Col sm="12">
<div className="table-responsive">
{/* <PodDetailResorce apilistinfo={apilistinfo} /> */}
{Object.keys(apilistinfo).length !== 0 ? <PodDetailResorce apilistinfo={apilistinfo} /> : <></>}
</div>
</Col>
</Row>
</TabPane>
<TabPane tabId="6" className="p-3">
<Row>
<Col sm="12">
{/* <PoddetailMeta apilistinfo={apilistinfo} /> */}
{Object.keys(apilistinfo).length !== 0 ? <PoddetailMeta apilistinfo={apilistinfo} /> : <></>}
</Col>
</Row>
</TabPane>
<TabPane tabId="7" className="p-3">
<Row>
<Col sm="12">
{/* <PodStatus apilistinfo={apilistinfo} /> */}
{Object.keys(apilistinfo).length !== 0 ? <PodStatus apilistinfo={apilistinfo} /> : <></>}
</Col>
</Row>
</TabPane>
<TabPane tabId="8" className="p-3">
<Row>
<Col sm="12">
{Object.keys(apilistinfo).length !== 0 ? <PodDetailMonit apilistinfo={apilistinfo} /> : <></>}
{/* <PodDetailMonit apilistinfo={apilistinfo} /> */}
</Col>
</Row>
</TabPane>
<TabPane tabId="9" className="p-3">
<Row>
<Col sm="12">
<div className="table-responsive">
{/* <PodDetailEvent apilistinfo={apilistinfo} /> */}
{Object.keys(apilistinfo).length !== 0 ? <PodDetailEvent apilistinfo={apilistinfo} /> : <></>}
</div>
</Col>
</Row>
</TabPane>
</TabContent>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
}
Example #23
| Source File: PodDetail back.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
// console.log(this.props);
const apiList = this.state.apiList;
const { params } = this.props.match;
console.log(this.state.apiList, "poddetail");
let labels = []
let apitoData = [];
let annotations = [];
let restartCount = [];
// if (apiList.length > 0) {
// let dataFromApi = apiList.map((list, key) => {
// console.log(list, "list");
// if (list.metadata.annotations == undefined) {
// annotations = "-"
// } else {
// annotations = list.metadata.annotations;
// }
// if (list.metadata.labels == undefined) {
// labels = "-"
// } else {
// labels = list.metadata.labels;
// }
// if (list.status.containerStatuses == undefined) {
// restartCount = "-";
// } else {
// restartCount = list.status.containerStatuses[0].restartCount
// }
// return {
// name: list.metadata.name,
// namespace: list.metadata.namespace,
// labels: labels,
// phase: list.status.phase,
// podIP: list.status.podIP,
// nodeName: list.spec.nodeName,
// hostIP: list.status.hostIP,
// restartCount: restartCount,
// qosClass: list.status.qosClass,
// creationTimestamp: list.metadata.creationTimestamp,
// annotations: annotations
// };
// });
// apitoData = dataFromApi;
// console.log(apitoData)
// }
// const eventlist = this.state.eventlist;
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Breadcrumbs title="POD Detail" breadcrumbItems={this.state.breadcrumbItems} />
<Row>
<Col lg={4}>
<Card className="checkout-order-summary">
<CardBody>
<h5 className="text-dark font-weight-bold">
{params.name}
</h5>
<Card></Card>
<Row>
<div>
<Link onClick={() => this.setState({ isModal: !this.state.modal })} to="#" className="popup-form btn btn-primary" >VIEW YAML</Link>
</div>
<Modal size="xl" isOpen={this.state.isModal} centered={true} toggle={() => this.setState({ isModal: !this.state.isModal })}>
<ModalHeader toggle={() => this.setState({ isModal: !this.state.isModal })} > YAML </ModalHeader>
<ModalBody>
<TabPane tabId="8" className="p-3">
<Row>
<Col sm="12">
<CardText>
<AceEditor
placeholder="Placeholder Text"
mode="javascript"
theme="xcode"
name="blah2"
onLoad={this.onLoad}
onChange={this.onChange}
fontSize={14}
showPrintMargin={true}
showGutter={true}
highlightActiveLine={true}
value={`function onLoad(editor) {
console.log("seohwa yeonguwonnim babo melong~~~~~~~");
}`}
setOptions={{
enableBasicAutocompletion: false,
enableLiveAutocompletion: false,
enableSnippets: false,
showLineNumbers: true,
tabSize: 2,
}} />
</CardText>
</Col>
</Row>
</TabPane>
</ModalBody>
</Modal>
<Col sm={3}>
{/* 더보기 */}
<Dropdown isOpen={this.state.singlebtn} toggle={() =>
this.setState({ singlebtn: !this.state.singlebtn })
} >
<DropdownToggle color="primary" caret>
더보기 <i className="mdi mdi-chevron-down"></i>
</DropdownToggle>
<DropdownMenu>
<DropdownItem>삭제</DropdownItem>
</DropdownMenu>
</Dropdown>
</Col>
{/* <h4 className="card-title">Popup with form</h4> */}
</Row>
{/* </div> */}
<div className="table-responsive">
<Table responsive className="mb-0">
<thead>
<tr>
<th style={{ width: "100%" }} className="border-top-0">상세정보</th>
</tr>
</thead>
<tbody>
<tr></tr>
</tbody>
</Table>
<Table responsive className="mb-0">
<thead>
<tr>
</tr>
</thead>
{apitoData.map((test) => (
<tbody key={test.name}>
<tr>
<td >클러스터</td>
<td>{params.cluster}</td>
</tr>
<tr>
<td>프로젝트</td>
<td>{test.namespace}</td>
</tr>
<tr>
<td>APP</td>
<td>수정 필요</td>
</tr>
<tr>
<td>Status</td>
<td>{test.phase}</td>
</tr>
<tr>
<td>Pod IP</td>
<td>{test.podIP}</td>
</tr>
<tr>
<td>Node Name</td>
<td>{test.nodeName}</td>
</tr>
<tr>
<td>Node IP</td>
<td>{test.hostIP}</td>
</tr>
<tr>
<td>Restart Count</td>
<td>{test.restartCount}</td>
</tr>
<tr>
<td>Qos Class</td>
<td>{test.qosClass}</td>
</tr>
<tr>
<td>Created</td>
<td>{test.creationTimestamp}</td>
</tr>
</tbody>
))}
</Table>
</div>
</CardBody>
</Card>
</Col>
<Col lg={8}>
<Card>
<CardBody>
<Nav pills className="navtab-bg nav-justified">
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab1 === "5",
})}
onClick={() => {
this.toggle1("5");
}}
>
리소스 상태
</NavLink>
</NavItem>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab1 === "6",
})}
onClick={() => {
this.toggle1("6");
}}
>
메타 데이터
</NavLink>
</NavItem>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab1 === "7",
})}
onClick={() => {
this.toggle1("7");
}}
>
상태
</NavLink>
</NavItem>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab1 === "8",
})}
onClick={() => {
this.toggle1("8");
}}
>
모니터링
</NavLink>
</NavItem>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab1 === "9",
})}
onClick={() => {
this.toggle1("9");
}}
>
이벤트
</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={this.state.activeTab1}>
<TabPane tabId="5" className="p-3">
<Row>
<Col sm="12">
<div className="table-responsive">
<PodDetailResorce apiList={apiList} />
</div>
</Col>
</Row>
</TabPane>
<TabPane tabId="6" className="p-3">
<Row>
<Col sm="12">
<PoddetailMeta apiList={apiList} />
</Col>
</Row>
</TabPane>
<TabPane tabId="7" className="p-3">
<Row>
<Col sm="12">
<PodStatus apiList={apiList} />
</Col>
</Row>
</TabPane>
<TabPane tabId="8" className="p-3">
<Row>
<Col sm="12">
<div className="table-responsive">
</div>
</Col>
</Row>
</TabPane>
<TabPane tabId="9" className="p-3">
<Row>
<Col sm="12">
<div className="table-responsive">
</div>
</Col>
</Row>
</TabPane>
</TabContent>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
}
Example #24
| Source File: Appdetail.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
const { params } = this.props.match;
// <tr>
// <td>클러스터</td>
// <td>
// cluster1
// </td>
// </tr>
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Breadcrumbs title="App Detail" breadcrumbItems={this.state.breadcrumbItems} />
<Row>
<Col lg={4}>
<Card className="checkout-order-summary">
<CardBody>
{/* <div className="p-3 bg-light mb-4"> */}
<h5 className="text-dark font-weight-bold">{params.name} </h5>
<Card>
</Card>
<Row>
<div>
<Link
onClick={() =>
this.setState({ isModal: !this.state.modal })
}
to="#"
className="popup-form btn btn-primary"
>
정보수정
</Link>
</div>
<Modal
size="xl"
isOpen={this.state.isModal}
centered={true}
toggle={() =>
this.setState({ isModal: !this.state.isModal })
}
>
<ModalHeader
toggle={() =>
this.setState({ isModal: !this.state.isModal })
}
>
Form
</ModalHeader>
<ModalBody>
<Form>
<Row>
<Col lg={4}>
<FormGroup>
<Label htmlFor="name">Name</Label>
<Input
type="text"
className="form-control"
id="name"
placeholder="Enter Name"
required
/>
</FormGroup>
</Col>
<Col lg={4}>
<FormGroup>
<Label htmlFor="email">Email</Label>
<Input
type="email"
className="form-control"
id="email"
placeholder="Enter Email"
required
/>
</FormGroup>
</Col>
<Col lg={4}>
<FormGroup>
<Label htmlFor="password">Password</Label>
<Input
type="text"
className="form-control"
id="password"
placeholder="Enter Password"
required
/>
</FormGroup>
</Col>
</Row>
<Row>
<Col lg={12}>
<FormGroup>
<Label htmlFor="subject">Subject</Label>
<textarea
className="form-control"
id="subject"
rows="3"
></textarea>
</FormGroup>
</Col>
</Row>
<Row>
<Col lg={12}>
<div className="text-right">
<Button
type="submit"
color="primary"
>
Submit
</Button>
</div>
</Col>
</Row>
</Form>
</ModalBody>
</Modal>
<Col sm={3}>
{/* 정보 수정 */}
{/* 더보기 */}
<Dropdown
isOpen={this.state.singlebtn}
toggle={() =>
this.setState({ singlebtn: !this.state.singlebtn })
}
>
<DropdownToggle color="primary" caret>
더보기{" "}
<i className="mdi mdi-chevron-down"></i>
</DropdownToggle>
<DropdownMenu>
<DropdownItem>서비스 수정</DropdownItem>
<DropdownItem>접근 수정</DropdownItem>
<DropdownItem>수정(YAML)</DropdownItem>
<DropdownItem>삭제</DropdownItem>
</DropdownMenu>
</Dropdown>
</Col>
{/* <h4 className="card-title">Popup with form</h4> */}
</Row>
{/* </div> */}
<div className="table-responsive">
<Table responsive className="mb-0">
<thead>
<tr>
<th style={{ width: "100%" }}>상세정보</th>
{/* <th>Examples</th> */}
</tr>
</thead>
<tbody>
<tr>
<td>클러스터</td>
<td>
cluster1
</td>
</tr>
<tr>
<td>프로젝트</td>
<td>
test
</td>
</tr>
<tr>
<td>상태</td>
<td>
Running
</td>
</tr>
<tr>
<td>앱</td>
<td>
redis
</td>
</tr>
<tr>
<td>
버전
</td>
<td>
14.6.1
</td>
</tr>
<tr>
<td>
생성일
</td>
<td>
@@@@
</td>
</tr>
<tr>
<td>
업데이트일
</td>
<td>
@@@@
</td>
</tr>
<tr>
<td>
생성자
</td>
<td>
yby654
</td>
</tr>
</tbody>
</Table>
</div>
</CardBody>
</Card>
</Col>
<Col lg={8}>
<Card>
<CardBody>
{/* <h4 className="card-title">Justify Tabs</h4> */}
{/* <p className="card-title-desc">
Use the tab JavaScript plugin—include it individually or through the compiled{" "} <code className="highlighter-rouge">bootstrap.js</code> file—to extend our navigational tabs and pills to create tabbable panes of local content, even via dropdown menus.
</p> */}
<Nav pills className="navtab-bg nav-justified">
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab1 === "5"
})}
onClick={() => {
this.toggle1("5");
}}
>
리소스 상태
</NavLink>
</NavItem>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab1 === "8"
})}
onClick={() => {
this.toggle1("8");
}}
>
앱 Configurations
</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={this.state.activeTab1}>
<TabPane tabId="5" className="p-3">
<Row>
<Col sm="12">
<CardText>
<div className="table-responsive">
{/* <Table className=" table-centered mb-0 table-nowrap"> */}
<Table hover className=" mb-0 table-centered table-nowrap">
<thead>
<tr>
<th className="border-top-0" style={{ width: "110px" }} scope="col">서비스</th>
</tr>
</thead>
<tbody>
<tr>
<div class="div-content-detail">
<div class="div-content-detail-0">
<div className="avatar-xs">
<div className="avatar-title rounded-circle bg-light">
img
</div>
</div>
</div>
<div class="div-content-detail-1">
<div>
<div class="div-content-text-1"><a>redis-7qgzmk-headless</a></div>
<div class="div-contetn-text-2"><a>Headless</a></div>
</div>
</div>
<div class="div-content-detail-2">
<div>
<div class="div-content-text-1">Off</div>
<div class="div-content-text-2">Application Governance</div>
</div>
</div>
<div class="div-content-detail-2">
<div>
<div class="div-content-text-1">None</div>
<div class="div-content-text-2">ClusterIP</div>
</div>
</div>
</div>
</tr>
</tbody>
</Table>
</div>
<div className="table-responsive">
<Table hover className=" mb-0 table-centered table-nowrap">
<thead>
<tr>
<th className="border-top-0" style={{ width: "110px" }} scope="col">디플로이먼트</th>
</tr>
</thead>
<tbody>
<tr>
<div class="div-content-detail">
<div class="div-content-detail-0">
<div className="avatar-xs">
<div className="avatar-title rounded-circle bg-light">
img
</div>
</div>
</div>
<div class="div-content-detail-1">
<div>
<div class="div-content-text-1"><a>redis-7qgzmk-master</a></div>
<div class="div-contetn-text-2"><a>Updated at 21 hours ago</a></div>
</div>
</div>
<div class="div-content-detail-2">
<div>
<div class="div-content-text-1">Running (1/1)</div>
<div class="div-content-text-2">Status</div>
</div>
</div>
<div class="div-content-detail-2">
<div>
<div class="div-content-text-1">v1.0.0</div>
<div class="div-content-text-2">Version</div>
</div>
</div>
</div>
</tr>
</tbody>
</Table>
</div>
</CardText>
</Col>
</Row>
</TabPane>
<TabPane tabId="6" className="p-3">
<Row>
<Col sm="12">
<CardText>
</CardText>
</Col>
</Row>
</TabPane>
<TabPane tabId="7" className="p-3">
<Row>
<Col sm="12">
<CardText>
</CardText>
</Col>
</Row>
</TabPane>
<TabPane tabId="8" className="p-3">
<Row>
<Col sm="12">
<div className="table-responsive" style>
<AceEditor
placeholder="Placeholder Text"
mode="javascript"
theme="monokai"
name="blah2"
onLoad={this.onLoad}
onChange={this.onChange}
fontSize={14}
showPrintMargin={true}
showGutter={true}
highlightActiveLine={true}
value={`function onLoad(editor) {
console.log("seohwa yeonguwonnim babo melong~~~~~~~");
}`}
setOptions={{
enableBasicAutocompletion: false,
enableLiveAutocompletion: false,
enableSnippets: false,
showLineNumbers: true,
tabSize: 3,
}} />
</div>
</Col>
</Row>
</TabPane>
</TabContent>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
}
Example #25
| Source File: Overview.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
return (
<React.Fragment>
<Row className="justify-content-center">
<Col lg={12}>
<div>
<Nav pills className="pricing-nav-tabs">
<NavItem>
<NavLink
className={classnames({
active: this.state.activeTab === "1",
})}
onClick={() => {
this.toggleTab("1");
}}
>
APP 리소스
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames(
{ active: this.state.activeTab === "2" },
"ml-1"
)}
onClick={() => {
this.toggleTab("2");
}}
>
물리 리소스
</NavLink>
</NavItem>
</Nav>
</div>
</Col>
</Row>
<div></div>
<Row>
<Col xl={12} sm={12}>
<TabContent activeTab={this.state.activeTab}>
<TabPane tabId="1">
<Card>
<CardText>
<div className="table-responsive">
{/* <Table className=" table-centered mb-0 table-nowrap"> */}
<Table
hover
className=" mb-0 table-centered table-nowrap"
>
<thead>
<tr>
<th
className="border-top-0"
style={{ width: "110px" }}
scope="col"
>
서비스
</th>
</tr>
</thead>
<tbody>
<tr>
<div class="div-content-detail">
<div class="div-content-detail-0">
<div className="avatar-xs">
<div className="avatar-title rounded-circle bg-light">
{" "}
img
</div>
</div>
</div>
<div class="div-content-detail-1">
<div>
<div class="div-content-text-1">
<a>redis-7qgzmk-headless</a>
</div>
<div class="div-contetn-text-2">
<a>Headless</a>
</div>
</div>
</div>
<div class="div-content-detail-2">
<div>
<div class="div-content-text-1">Off</div>
<div class="div-content-text-2">
Application Governance
</div>
</div>
</div>
<div class="div-content-detail-2">
<div>
<div class="div-content-text-1">None</div>
<div class="div-content-text-2">
ClusterIP
</div>
</div>
</div>
</div>
</tr>
</tbody>
</Table>
</div>
<div className="table-responsive">
<Table
hover
className=" mb-0 table-centered table-nowrap"
>
<thead>
<tr>
<th
className="border-top-0"
style={{ width: "110px" }}
scope="col"
>
디플로이먼트
</th>
</tr>
</thead>
<tbody>
<tr>
<div class="div-content-detail">
<div class="div-content-detail-0">
<div className="avatar-xs">
<div className="avatar-title rounded-circle bg-light">
img
</div>
</div>
</div>
<div class="div-content-detail-1">
<div>
<div class="div-content-text-1">
<a>redis-7qgzmk-master</a>
</div>
<div class="div-contetn-text-2">
<a>Updated at 21 hours ago</a>
</div>
</div>
</div>
<div class="div-content-detail-2">
<div>
<div class="div-content-text-1">
Running (1/1)
</div>
<div class="div-content-text-2">Status</div>
</div>
</div>
<div class="div-content-detail-2">
<div>
<div class="div-content-text-1">v1.0.0</div>
<div class="div-content-text-2">Version</div>
</div>
</div>
</div>
</tr>
</tbody>
</Table>
</div>
</CardText>
</Card>
</TabPane>
</TabContent>
</Col>
</Row>
<Row>
<Col xl={12} sm={12}>
<TabContent activeTab={this.state.activeTab}>
<TabPane tabId="2">
{/* <LineApexChart /> */}
<EarningReports />
</TabPane>
</TabContent>
</Col>
</Row>
</React.Fragment>
);
}
Example #26
| Source File: NodeList.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
const apilistinfo = this.state.apilistinfo;
// let port = [];
// let port_multi = [];
// let port_bin = ""
// apilistinfo.map(list => {
// let portslist = list.metadata;
// if (portslist.images.length > 1) {
// portslist.images.forEach(images => {
// port_multi.push(images.names + ":" + images.sizeBytes);
// });
// port_bin = port_multi.toString();
// // port_bin = port_bin.replaceAll(",", "\n");
// console.log(port_bin)
// port.push(port_bin);
// } else {
// portslist.ports.forEach(ports => {
// port.push(portslist.clusterIP + ":" + ports.port + " / " + ports.protocol + " > " + ports.targetPort);
// });
// }
// console.log(port)
// console.log(port)
// })
// const rows = apilistinfo.map((test, index) => ({
return (
<React.Fragment>
{/* <div className="page-content"> */}
{/* <Container fluid> */}
{/* <Breadcrumbs title="Responsive Table" breadcrumbItems={this.state.breadcrumbItems} /> */}
<Row>
<Col xs={12}>
<Card>
<CardBody>
{/* <h4 className="card-title">노드</h4> */}
{/* <p className="card-title-desc">This is an experimental awesome solution for responsive tables with complex data.</p> */}
<CardText>
<div className="table-responsive">
{/* <Table className=" table-centered mb-0 table-nowrap"> */}
<Table hover className=" mb-0 table-centered table-nowrap">
<thead>
<tr>
<th className="border-top-0" style={{ width: "110px" }} scope="col">라벨</th>
</tr>
</thead>
<tbody>
<tr>
<tr>
<td style={{ width: "60px" }}>
<div className="avatar-xs">
<div className="avatar-title rounded-circle bg-light">
<img alt="" height="20" />
</div>
</div>
</td>
<td>
<h5 className="font-size-14 mb-0">Source 1</h5>
</td>
<td><div id="spak-chart1"></div></td>
<td>
{/* <div className="avatar-title rounded-circle bg-light">
{apilistinfo.map((test, index) => (
<tr key={test.metadata.name}>
<td>containerRuntimeVersion</td>
<td> key={index} {port[index]}</td>
</tr>
))}
</div> */}
</td>
</tr>
</tr>
</tbody>
</Table>
<Table hover className=" mb-0 table-centered table-nowrap">
<thead>
<tr>
<th className="border-top-0" style={{ width: "110px" }} scope="col">어노테이션</th>
</tr>
</thead>
<tbody>
<tr>
<tr>
<td style={{ width: "60px" }}>
<div className="avatar-xs">
<div className="avatar-title rounded-circle bg-light">
<img alt="" height="20" />
</div>
</div>
</td>
<td>
<h5 className="font-size-14 mb-0">Source 1</h5>
</td>
<td><div id="spak-chart1"> {apilistinfo.map((test) => (
<tr key={test.metadata.name}>
<td>containerRuntimeVersion</td>
<td>{test.metadata.name}</td>
</tr>
))}</div></td>
</tr>
</tr>
</tbody>
</Table>
</div>
</CardText>
<div className="table-rep-plugin">
<div className="table-responsive mb-0" data-pattern="priority-columns">
<Table >
<thead>
<tr>
<th className="border-top-0" style={{ width: "110px" }} scope="col">서비스</th>
</tr>
</thead>
<tbody>
<tr>
<div class="div-content-detail">
<div class="div-content-detail-0">
<div className="avatar-xs">
<div className="avatar-title rounded-circle bg-light">
{apilistinfo.map((test) => (
<tr key={test.metadata.name}>
<td>containerRuntimeVersion</td>
<td>{test.metadata.name}</td>
</tr>
))}
</div>
</div>
</div>
<div class="div-content-detail-1">
<div>
<div class="div-content-text-1"><a>redis-7qgzmk-headless</a></div>
<div class="div-contetn-text-2"><a>{apilistinfo.map((test) => (
<tr key={test.metadata.name}>
<td>containerRuntimeVersion</td>
<td>{test.metadata.name}</td>
</tr>
))}</a></div>
</div>
</div>
<div class="div-content-detail-2">
<div>
<div class="div-content-text-1">Off</div>
<div class="div-content-text-2">Application Governance</div>
</div>
</div>
<div class="div-content-detail-2">
<div>
<div class="div-content-text-1">None</div>
<div class="div-content-text-2">ClusterIP</div>
</div>
</div>
</div>
</tr>
</tbody>
</Table>
</div>
</div>
</CardBody>
</Card>
</Col>
</Row>
{/* </Container> */}
{/* </div> */}
</React.Fragment>
);
}
Example #27
| Source File: UiTabsAccordions.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Breadcrumbs title="Tabs & Accordions" breadcrumbItems={this.state.breadcrumbItems} />
<Row>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Default Tabs</h4>
<p className="card-title-desc">
Use the tab JavaScript plugin—include it individually or through the compiled{" "} <code className="highlighter-rouge">bootstrap.js</code> file—to extend our navigational tabs and pills to create tabbable panes of local content, even via dropdown menus.
</p>
<Nav tabs>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab === "1"
})}
onClick={() => {
this.toggle("1");
}}
>
Home
</NavLink>
</NavItem>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab === "2"
})}
onClick={() => {
this.toggle("2");
}}
>
Profile
</NavLink>
</NavItem>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab === "3"
})}
onClick={() => {
this.toggle("3");
}}
>
Messages
</NavLink>
</NavItem>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab === "4"
})}
onClick={() => {
this.toggle("4");
}}
>
Settings
</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={this.state.activeTab}>
<TabPane tabId="1" className="p-3">
<Row>
<Col sm="12">
<CardText>
Raw denim you probably haven't heard of them jean
shorts Austin. Nesciunt tofu stumptown aliqua, retro
synth master cleanse. Mustache cliche tempor,
williamsburg carles vegan helvetica. Reprehenderit
butcher retro keffiyeh dreamcatcher synth. Cosby
sweater eu banh mi, qui irure terry richardson ex
squid. Aliquip placeat salvia cillum iphone. Seitan
aliquip quis cardigan american apparel, butcher
voluptate nisi qui.
</CardText>
</Col>
</Row>
</TabPane>
<TabPane tabId="2" className="p-3">
<Row>
<Col sm="12">
<CardText>
Food truck fixie locavore, accusamus mcsweeney's
marfa nulla single-origin coffee squid. Exercitation
+1 labore velit, blog sartorial PBR leggings next
level wes anderson artisan four loko farm-to-table
craft beer twee. Qui photo booth letterpress,
commodo enim craft beer mlkshk aliquip jean shorts
ullamco ad vinyl cillum PBR. Homo nostrud organic,
assumenda labore aesthetic magna delectus mollit.
Keytar helvetica VHS salvia yr, vero magna velit
sapiente labore stumptown. Vegan fanny pack odio
cillum wes anderson 8-bit.
</CardText>
</Col>
</Row>
</TabPane>
<TabPane tabId="3" className="p-3">
<Row>
<Col sm="12">
<CardText>
Etsy mixtape wayfarers, ethical wes anderson tofu
before they sold out mcsweeney's organic lomo retro
fanny pack lo-fi farm-to-table readymade. Messenger
bag gentrify pitchfork tattooed craft beer, iphone
skateboard locavore carles etsy salvia banksy hoodie
helvetica. DIY synth PBR banksy irony. Leggings
gentrify squid 8-bit cred pitchfork. Williamsburg
banh mi whatever gluten-free, carles pitchfork
biodiesel fixie etsy retro mlkshk vice blog.
Scenester cred you probably haven't heard of them,
vinyl craft beer blog stumptown. Pitchfork
sustainable tofu synth chambray yr.
</CardText>
</Col>
</Row>
</TabPane>
<TabPane tabId="4" className="p-3">
<Row>
<Col sm="12">
<CardText>
Trust fund seitan letterpress, keytar raw denim
keffiyeh etsy art party before they sold out master
cleanse gluten-free squid scenester freegan cosby
sweater. Fanny pack portland seitan DIY, art party
locavore wolf cliche high life echo park Austin.
Cred vinyl keffiyeh DIY salvia PBR, banh mi before
they sold out farm-to-table VHS viral locavore cosby
sweater. Lomo wolf viral, mustache readymade
thundercats keffiyeh craft beer marfa ethical. Wolf
salvia freegan, sartorial keffiyeh echo park vegan.
</CardText>
</Col>
</Row>
</TabPane>
</TabContent>
</CardBody>
</Card>
</Col>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Justify Tabs</h4>
<p className="card-title-desc">
Use the tab JavaScript plugin—include it individually or through the compiled{" "} <code className="highlighter-rouge">bootstrap.js</code> file—to extend our navigational tabs and pills to create tabbable panes of local content, even via dropdown menus.
</p>
<Nav pills className="navtab-bg nav-justified">
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab1 === "5"
})}
onClick={() => {
this.toggle1("5");
}}
>
Home
</NavLink>
</NavItem>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab1 === "6"
})}
onClick={() => {
this.toggle1("6");
}}
>
Profile
</NavLink>
</NavItem>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab1 === "7"
})}
onClick={() => {
this.toggle1("7");
}}
>
Messages
</NavLink>
</NavItem>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTab1 === "8"
})}
onClick={() => {
this.toggle1("8");
}}
>
Settings
</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={this.state.activeTab1}>
<TabPane tabId="5" className="p-3">
<Row>
<Col sm="12">
<CardText>
Raw denim you probably haven't heard of them jean
shorts Austin. Nesciunt tofu stumptown aliqua, retro
synth master cleanse. Mustache cliche tempor,
williamsburg carles vegan helvetica. Reprehenderit
butcher retro keffiyeh dreamcatcher synth. Cosby
sweater eu banh mi, qui irure terry richardson ex
squid. Aliquip placeat salvia cillum iphone. Seitan
aliquip quis cardigan american apparel, butcher
voluptate nisi qui.
</CardText>
</Col>
</Row>
</TabPane>
<TabPane tabId="6" className="p-3">
<Row>
<Col sm="12">
<CardText>
Food truck fixie locavore, accusamus mcsweeney's
marfa nulla single-origin coffee squid. Exercitation
+1 labore velit, blog sartorial PBR leggings next
level wes anderson artisan four loko farm-to-table
craft beer twee. Qui photo booth letterpress,
commodo enim craft beer mlkshk aliquip jean shorts
ullamco ad vinyl cillum PBR. Homo nostrud organic,
assumenda labore aesthetic magna delectus mollit.
Keytar helvetica VHS salvia yr, vero magna velit
sapiente labore stumptown. Vegan fanny pack odio
cillum wes anderson 8-bit.
</CardText>
</Col>
</Row>
</TabPane>
<TabPane tabId="7" className="p-3">
<Row>
<Col sm="12">
<CardText>
Etsy mixtape wayfarers, ethical wes anderson tofu
before they sold out mcsweeney's organic lomo retro
fanny pack lo-fi farm-to-table readymade. Messenger
bag gentrify pitchfork tattooed craft beer, iphone
skateboard locavore carles etsy salvia banksy hoodie
helvetica. DIY synth PBR banksy irony. Leggings
gentrify squid 8-bit cred pitchfork. Williamsburg
banh mi whatever gluten-free, carles pitchfork
biodiesel fixie etsy retro mlkshk vice blog.
Scenester cred you probably haven't heard of them,
vinyl craft beer blog stumptown. Pitchfork
sustainable tofu synth chambray yr.
</CardText>
</Col>
</Row>
</TabPane>
<TabPane tabId="8" className="p-3">
<Row>
<Col sm="12">
<CardText>
Trust fund seitan letterpress, keytar raw denim
keffiyeh etsy art party before they sold out master
cleanse gluten-free squid scenester freegan cosby
sweater. Fanny pack portland seitan DIY, art party
locavore wolf cliche high life echo park Austin.
Cred vinyl keffiyeh DIY salvia PBR, banh mi before
they sold out farm-to-table VHS viral locavore cosby
sweater. Lomo wolf viral, mustache readymade
thundercats keffiyeh craft beer marfa ethical. Wolf
salvia freegan, sartorial keffiyeh echo park vegan.
</CardText>
</Col>
</Row>
</TabPane>
</TabContent>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Vertical Nav Tabs</h4>
<p className="card-title-desc">
Example of Vertical nav tabs
</p>
<Row>
<Col md={3}>
<Nav pills className="flex-column" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<NavLink id="v-pills-home-tab" style={{ cursor: "pointer" }}
className={classnames({
active: this.state.customActiveTab === "1"
}, "mb-2")}
onClick={() => {
this.toggleCustom("1");
}} aria-controls="v-pills-home" aria-selected="true">
Home
</NavLink>
<NavLink id="v-pills-profile-tab" style={{ cursor: "pointer" }}
className={classnames({
active: this.state.customActiveTab === "2"
}, "mb-2")}
onClick={() => {
this.toggleCustom("2");
}} aria-controls="v-pills-home" aria-selected="true">
Profile
</NavLink>
<NavLink id="v-pills-messages-tab" style={{ cursor: "pointer" }}
className={classnames({
active: this.state.customActiveTab === "3"
}, "mb-2")}
onClick={() => {
this.toggleCustom("3");
}} aria-controls="v-pills-home" aria-selected="true">
Messages
</NavLink>
<NavLink id="v-pills-settings-tab" style={{ cursor: "pointer" }}
className={classnames({
active: this.state.customActiveTab === "4"
})}
onClick={() => {
this.toggleCustom("4");
}} aria-controls="v-pills-home" aria-selected="true">
Settings
</NavLink>
</Nav>
</Col>
<Col md={9}>
<TabContent activeTab={this.state.customActiveTab} className="text-muted mt-4 mt-md-0" id="v-pills-tabContent">
<TabPane tabId="1" role="tabpanel" aria-labelledby="v-pills-home-tab">
<p>
Raw denim you probably haven't heard of them jean shorts Austin.
Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache
cliche tempor, williamsburg carles vegan helvetica. Reprehenderit
butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi,
qui irure terry richardson ex squid. Aliquip placeat salvia cillum
iphone. Seitan aliquip quis cardigan.
</p>
<p>Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi,
qui irure terry richardson ex squid.</p>
</TabPane>
<TabPane tabId="2" role="tabpanel" aria-labelledby="v-pills-profile-tab">
<p>
Food truck fixie locavore, accusamus mcsweeney's marfa nulla
single-origin coffee squid. Exercitation +1 labore velit, blog
sartorial PBR leggings next level wes anderson artisan four loko
farm-to-table craft beer twee. Qui photo booth letterpress,
commodo enim craft beer mlkshk.
</p>
<p className="mb-0"> Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna 8-bit</p>
</TabPane>
<TabPane tabId="3" role="tabpanel" aria-labelledby="v-pills-messages-tab">
<p>
Etsy mixtape wayfarers, ethical wes anderson tofu before they
sold out mcsweeney's organic lomo retro fanny pack lo-fi
farm-to-table readymade. Messenger bag gentrify pitchfork
tattooed craft beer, iphone skateboard locavore carles etsy
salvia banksy hoodie helvetica. DIY synth PBR banksy irony.
Leggings gentrify squid 8-bit cred.
</p>
<p className="mb-0">DIY synth PBR banksy irony.
Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh
mi whatever gluten-free.</p>
</TabPane>
<TabPane tabId="4" role="tabpanel" aria-labelledby="v-pills-settings-tab">
<p>
Trust fund seitan letterpress, keytar raw denim keffiyeh etsy
art party before they sold out master cleanse gluten-free squid
scenester freegan cosby sweater. Fanny pack portland seitan DIY,
art party locavore wolf cliche high life echo park Austin. Cred
vinyl keffiyeh DIY salvia PBR, banh mi before they sold out
farm-to-table.
</p>
<p className="mb-0">Fanny pack portland seitan DIY,
art party locavore wolf cliche high life echo park Austin. Cred
vinyl keffiyeh DIY salvia PBR, banh mi before they sold out
farm-to-table.
</p>
</TabPane>
</TabContent>
</Col>
</Row>
</CardBody>
</Card>
</Col>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Custom Tabs</h4>
<p className="card-title-desc">
Example of custom tabs
</p>
<Nav tabs className="nav-tabs-custom nav-justified">
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTabJustify === "5"
})}
onClick={() => {
this.toggleCustomJustified("5");
}}
>
<span className="d-none d-sm-block">Home</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTabJustify === "6"
})}
onClick={() => {
this.toggleCustomJustified("6");
}}
>
<span className="d-none d-sm-block">Profile</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTabJustify === "7"
})}
onClick={() => {
this.toggleCustomJustified("7");
}}
>
<span className="d-none d-sm-block">Messages</span>
</NavLink>
</NavItem>
<NavItem>
<NavLink
style={{ cursor: "pointer" }}
className={classnames({
active: this.state.activeTabJustify === "8"
})}
onClick={() => {
this.toggleCustomJustified("8");
}}
>
<span className="d-none d-sm-block">Settings</span>
</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={this.state.activeTabJustify}>
<TabPane tabId="5" className="p-3">
<Row>
<Col sm="12">
<CardText>
Raw denim you probably haven't heard of them jean
shorts Austin. Nesciunt tofu stumptown aliqua, retro
synth master cleanse. Mustache cliche tempor,
williamsburg carles vegan helvetica. Reprehenderit
butcher retro keffiyeh dreamcatcher synth. Cosby
sweater eu banh mi, qui irure terry richardson ex
squid. Aliquip placeat salvia cillum iphone. Seitan
aliquip quis cardigan american apparel, butcher
voluptate nisi qui.
</CardText>
</Col>
</Row>
</TabPane>
<TabPane tabId="6" className="p-3">
<Row>
<Col sm="12">
<CardText>
Food truck fixie locavore, accusamus mcsweeney's
marfa nulla single-origin coffee squid. Exercitation
+1 labore velit, blog sartorial PBR leggings next
level wes anderson artisan four loko farm-to-table
craft beer twee. Qui photo booth letterpress,
commodo enim craft beer mlkshk aliquip jean shorts
ullamco ad vinyl cillum PBR. Homo nostrud organic,
assumenda labore aesthetic magna delectus mollit.
Keytar helvetica VHS salvia yr, vero magna velit
sapiente labore stumptown. Vegan fanny pack odio
cillum wes anderson 8-bit.
</CardText>
</Col>
</Row>
</TabPane>
<TabPane tabId="7" className="p-3">
<Row>
<Col sm="12">
<CardText>
Etsy mixtape wayfarers, ethical wes anderson tofu
before they sold out mcsweeney's organic lomo retro
fanny pack lo-fi farm-to-table readymade. Messenger
bag gentrify pitchfork tattooed craft beer, iphone
skateboard locavore carles etsy salvia banksy hoodie
helvetica. DIY synth PBR banksy irony. Leggings
gentrify squid 8-bit cred pitchfork. Williamsburg
banh mi whatever gluten-free, carles pitchfork
biodiesel fixie etsy retro mlkshk vice blog.
Scenester cred you probably haven't heard of them,
vinyl craft beer blog stumptown. Pitchfork
sustainable tofu synth chambray yr.
</CardText>
</Col>
</Row>
</TabPane>
<TabPane tabId="8" className="p-3">
<Row>
<Col sm="12">
<CardText>
Trust fund seitan letterpress, keytar raw denim
keffiyeh etsy art party before they sold out master
cleanse gluten-free squid scenester freegan cosby
sweater. Fanny pack portland seitan DIY, art party
locavore wolf cliche high life echo park Austin.
Cred vinyl keffiyeh DIY salvia PBR, banh mi before
they sold out farm-to-table VHS viral locavore cosby
sweater. Lomo wolf viral, mustache readymade
thundercats keffiyeh craft beer marfa ethical. Wolf
salvia freegan, sartorial keffiyeh echo park vegan.
</CardText>
</Col>
</Row>
</TabPane>
</TabContent>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Default Collapse</h4>
<p className="card-title-desc">
You can use a link with the{" "} <code className="highlighter-rouge">href</code> attribute, or a button with the{" "} <code className="highlighter-rouge">data-target</code> attribute. In both cases, the{" "} <code className="highlighter-rouge"> data-toggle="collapse"</code> is required.
</p>
<p>
<Link
to="#"
onClick={this.t_col5}
style={{ cursor: "pointer" }}
className="btn btn-primary mo-mb-2"
>
Link with href </Link>{" "}
<button
onClick={this.t_col5}
className="btn btn-primary mo-mb-2"
type="button"
style={{ cursor: "pointer" }}
>
Button with data-target
</button>
</p>
<Collapse isOpen={this.state.col5}>
<Card>
<CardBody>
Anim pariatur cliche reprehenderit, enim eiusmod high
life accusamus terry richardson ad squid. Nihil anim
keffiyeh helvetica, craft beer labore wes anderson cred
nesciunt sapiente ea proident.
</CardBody>
</Card>
</Collapse>
</CardBody>
</Card>
</Col>
<Col xl={6}>
<Card>
<CardBody>
<div id="accordion">
<Card className="mb-1">
<Link to="#" onClick={this.t_col1} style={{ cursor: "pointer" }} className="text-dark" >
<CardHeader id="headingOne">
<h6 className="m-0 font-14">
Collapsible Group Item #1
<i className={this.state.col1 ? "mdi mdi-minus float-right accor-plus-icon" : "mdi mdi-plus float-right accor-plus-icon"}></i>
</h6>
</CardHeader>
</Link>
<Collapse isOpen={this.state.col1}>
<CardBody>
Anim pariatur cliche reprehenderit, enim eiusmod
high life accusamus terry richardson ad squid. 3
wolf moon officia aute, non cupidatat skateboard
dolor brunch. Food truck quinoa nesciunt laborum
eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put
a bird on it squid single-origin coffee nulla
assumenda shoreditch et. Nihil anim keffiyeh
helvetica, craft beer labore wes anderson cred
nesciunt sapiente ea proident. Ad vegan excepteur
butcher vice lomo. Leggings occaecat craft beer
farm-to-table, raw denim aesthetic synth nesciunt
you probably haven't heard of them accusamus labore
sustainable VHS.
</CardBody>
</Collapse>
</Card>
</div>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
}
Example #28
| Source File: UiLightbox.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
const { photoIndex } = this.state;
return (
<React.Fragment>
<div className="page-content">
<Container fluid={true}>
<Breadcrumbs title="Lightbox" breadcrumbItems={this.state.breadcrumbItems} />
{this.state.isFits ? (
<Lightbox
mainSrc={images[photoIndex]}
enableZoom={false}
imageCaption={
"Caption. Can be aligned it to any side and contain any HTML."
}
onCloseRequest={() => this.setState({ isFits: false })}
/>
) : null}
{this.state.isEffects ? (
<Lightbox
mainSrc={images[3]}
enableZoom={false}
onCloseRequest={() => this.setState({ isEffects: false })}
/>
) : null}
{this.state.isGallery ? (
<Lightbox
mainSrc={images[photoIndex]}
nextSrc={images[(photoIndex + 1) % images.length]}
prevSrc={
images[(photoIndex + images.length - 1) % images.length]
}
enableZoom={false}
onCloseRequest={() => this.setState({ isGallery: false })}
onMovePrevRequest={() =>
this.setState({
photoIndex: (photoIndex + images.length - 1) % images.length
})
}
onMoveNextRequest={() =>
this.setState({
photoIndex: (photoIndex + 1) % images.length
})
}
imageCaption={"Project " + parseFloat(photoIndex + 1)}
/>
) : null}
{this.state.isGalleryZoom ? (
<Lightbox
mainSrc={images[photoIndex]}
nextSrc={images[(photoIndex + 1) % images.length]}
prevSrc={
images[(photoIndex + images.length - 1) % images.length]
}
onCloseRequest={() => this.setState({ isGalleryZoom: false })}
onMovePrevRequest={() =>
this.setState({
photoIndex: (photoIndex + images.length - 1) % images.length
})
}
onMoveNextRequest={() =>
this.setState({
photoIndex: (photoIndex + 1) % images.length
})
}
/>
) : null}
<Row>
<Col xs={6}>
<Card>
<CardBody>
<h4 className="card-title">Single image lightbox</h4>
<p className="card-title-desc">Three simple popups with different scaling settings.</p>
<Row>
<Col xs={6}>
<div>
<h5 className="mt-0 font-size-14">
Fits (Horz/Vert)
</h5>
<img
onClick={() => this.setState({ isFits: true })}
className="img-fluid"
alt="Skote"
src={img2}
width="145"
/>
</div>
</Col>
<Col xs={6}>
<div>
<h5 className="mt-0 font-size-14">Effects</h5>
<img
onClick={() => this.setState({ isEffects: true })}
className="img-fluid"
alt=""
src={img3}
width="75"
/>
<CardText className="mt-2 mb-0 text-muted">
No gaps, zoom animation, close icon in top-right corner.
</CardText>
</div>
</Col>
</Row>
</CardBody>
</Card>
</Col>
<Col xs={6}>
<Card>
<CardBody>
<h4 className="card-title">Lightbox gallery</h4>
<p className="card-title-desc">
In this example lazy-loading of images is enabled for the
next image based on move direction.{" "}
</p>
<div className="popup-gallery">
<div className="img-fluid float-left">
<img
src={img1}
onClick={() =>
this.setState({ isGallery: true, photoIndex: 0 })
}
alt=""
width="120"
/>
</div>
<div className="img-fluid float-left">
<img
src={img2}
onClick={() =>
this.setState({ isGallery: true, photoIndex: 1 })
}
alt=""
width="120"
/>
</div>
<div className="img-fluid float-left">
<img
src={img3}
onClick={() =>
this.setState({ isGallery: true, photoIndex: 2 })
}
alt=""
width="120"
/>
</div>
<div className="img-fluid float-left">
<img
src={img4}
onClick={() =>
this.setState({ isGallery: true, photoIndex: 3 })
}
alt=""
width="120"
/>
</div>
<div className="img-fluid float-left">
<img
src={img5}
onClick={() =>
this.setState({ isGallery: true, photoIndex: 4 })
}
alt=""
width="120"
/>
</div>
<div className="img-fluid float-left">
<img
src={img6}
onClick={() =>
this.setState({ isGallery: true, photoIndex: 5 })
}
alt=""
width="120"
/>
</div>
</div>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col xs={6}>
<Card>
<CardBody>
<h4 className="card-title">Zoom Gallery</h4>
<p className="card-title-desc">
Zoom effect works only with images.
</p>
<div className="zoom-gallery">
<img
src={img3}
className="float-left"
onClick={() =>
this.setState({ isGalleryZoom: true, photoIndex: 2 })
}
alt=""
width="275"
/>
<img
src={img7}
className="float-left"
onClick={() =>
this.setState({ isGalleryZoom: true, photoIndex: 4 })
}
alt=""
width="275"
/>
</div>
</CardBody>
</Card>
</Col>
<Col xs={6}>
<Card>
<CardBody>
<h4 className="card-title">Popup with video</h4>
<p className="card-title-desc">
In this example lazy-loading of images is enabled for the next image based on move direction.{" "}
</p>
<Row>
<Col>
<Button
color="light"
onClick={this.openModal}
>
Open Youtube Video
</Button>{" "}
<Button
color="light"
onClick={this.openModal1}
>
Open Vimeo Video
</Button>{" "}
<ModalVideo
videoId='L61p2uyiMSo'
channel="youtube"
isOpen={this.state.isOpen}
onClose={() => this.setState({ isOpen: false })}
/>
<ModalVideo
videoId='L61p2uyiMSo'
channel="youtube"
isOpen={this.state.isOpen1}
onClose={() => this.setState({ isOpen1: false })}
/>
</Col>
</Row>
</CardBody>
</Card>
<Card>
<CardBody>
<h4 className="card-title">Popup with form</h4>
<div>
<Link
onClick={() =>
this.setState({ isModal: !this.state.modal })
}
to="#"
className="popup-form btn btn-primary"
>
Popup form
</Link>
</div>
<Modal
size="xl"
isOpen={this.state.isModal}
centered={true}
toggle={() =>
this.setState({ isModal: !this.state.isModal })
}
>
<ModalHeader
toggle={() =>
this.setState({ isModal: !this.state.isModal })
}
>
Form
</ModalHeader>
<ModalBody>
<Form>
<Row>
<Col lg={4}>
<FormGroup>
<Label htmlFor="name">Name</Label>
<Input
type="text"
className="form-control"
id="name"
placeholder="Enter Name"
required
/>
</FormGroup>
</Col>
<Col lg={4}>
<FormGroup>
<Label htmlFor="email">Email</Label>
<Input
type="email"
className="form-control"
id="email"
placeholder="Enter Email"
required
/>
</FormGroup>
</Col>
<Col lg={4}>
<FormGroup>
<Label htmlFor="password">Password</Label>
<Input
type="text"
className="form-control"
id="password"
placeholder="Enter Password"
required
/>
</FormGroup>
</Col>
</Row>
<Row>
<Col lg={12}>
<FormGroup>
<Label htmlFor="subject">Subject</Label>
<textarea
className="form-control"
id="subject"
rows="3"
></textarea>
</FormGroup>
</Col>
</Row>
<Row>
<Col lg={12}>
<div className="text-right">
<Button
type="submit"
color="primary"
>
Submit
</Button>
</div>
</Col>
</Row>
</Form>
</ModalBody>
</Modal>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
}
Example #29
| Source File: UiImages.js From gedge-platform with Apache License 2.0 | 4 votes |
|
render() {
return (
<React.Fragment>
<div className="page-content">
<Container fluid>
<Breadcrumbs title="Images" breadcrumbItems={this.state.breadcrumbItems} />
<Row>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Image Rounded & Circle</h4>
<p className="card-title-desc">Use classNames <code>.rounded</code> and <code>.rounded-circle</code>.</p>
<Row>
<Col md={6}>
<img className="rounded mr-2" alt="Nazox" width="200" src={img4} />
</Col>
<Col md={6}>
<div className="mt-4 mt-md-0">
<img className="rounded-circle avatar-xl" alt="Nazox" src={avatar4} />
</div>
</Col>
</Row>
</CardBody>
</Card>
<Card>
<CardBody>
<h4 className="card-title">Image thumbnails</h4>
<p className="card-title-desc">In addition to our border-radius utilities, you can use <code className="highlighter-rouge">.img-thumbnail</code> to give an image a rounded 1px border appearance.</p>
<Row>
<Col md={6}>
<img className="img-thumbnail" alt="Nazox" width="200" src={img3} />
</Col>
<Col md={6}>
<div className="mt-4 mt-md-0">
<img className="img-thumbnail rounded-circle avatar-xl" alt="Nazox" src={avatar3} />
</div>
</Col>
</Row>
</CardBody>
</Card>
</Col>
<Col xl={6}>
<Card>
<CardBody>
<h4 className="card-title">Responsive images</h4>
<p className="card-title-desc">Images in Bootstrap are made responsive with <code className="highlighter-rouge">.img-fluid</code>. <code className="highlighter-rouge">max-width: 100%;</code> and <code className="highlighter-rouge">height: auto;</code> are applied to the image so that it scales with the parent element.</p>
<CardImg className="img-fluid" src={img2} alt="Nazox" />
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col lg={12}>
<Card>
<CardBody>
<h4 className="card-title mb-4">Image Sizes</h4>
<Row>
<Col md={6}>
<Row>
<Col lg={4}>
<CardImg src={avatar3} alt="nazox" className="rounded avatar-sm" />
<CardText className="mt-2 mb-lg-0"><code>.avatar-sm</code></CardText>
</Col>
<Col lg={4}>
<CardImg src={avatar4} alt="Nazox" className="rounded avatar-md" />
<CardText className="mt-2 mb-lg-0"><code>.avatar-md</code></CardText>
</Col>
<Col lg={4}>
<CardImg src={avatar5} alt="Nazox" className="rounded avatar-lg" />
<CardText className="mt-2 mb-lg-0"><code>.avatar-lg</code></CardText>
</Col>
</Row>
</Col>
<Col md={6}>
<Row>
<Col lg={4}>
<CardImg src={avatar3} alt="Nazox" className="rounded-circle avatar-sm" />
<CardText className="mt-2 mb-lg-0"><code>.avatar-sm</code></CardText>
</Col>
<Col lg={4}>
<CardImg src={avatar4} alt="Nazox" className="rounded-circle avatar-md" />
<CardText className="mt-2 mb-lg-0"><code>.avatar-md</code></CardText>
</Col>
<Col lg={4}>
<CardImg src={avatar5} alt="Nazox" className="rounded-circle avatar-lg" />
<CardText className="mt-2 mb-lg-0"><code>.avatar-lg</code></CardText>
</Col>
</Row>
</Col>
</Row>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col xs={12}>
<Card>
<CardBody>
<h4 className="card-title">Default media object</h4>
<p className="card-title-desc">The default media displays a media
object (images, video, audio) to the left or right of a content
block.</p>
<Media className="mb-4">
<img className="avatar-sm mr-3 rounded-circle" src={avatar6} alt="Nazox"/>
<Media body>
<h5 className="mt-0 font-size-14">Media heading</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</Media>
</Media>
<Media className="mb-4">
<img className="avatar-sm mr-3 rounded-circle" src={avatar2} alt="Nazox"/>
<Media body>
<h5 className="mt-0 font-size-14">Media heading</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
<Media className="mt-3">
<Link className="pr-3" to="#">
<img src={avatar3} alt="Nazox" className="avatar-sm rounded-circle"/>
</Link>
<Media body>
<h5 className="mt-0 font-size-14">Media heading</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</Media>
</Media>
</Media>
</Media>
<Media>
<Media body>
<h5 className="mt-0 mb-1 font-size-14">Media object</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</Media>
<img className="avatar-sm ml-3 rounded-circle" src={avatar4} alt="Nazox"/>
</Media>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col xs={12}>
<Card>
<CardBody>
<h4 className="card-title">Media alignment</h4>
<p className="card-title-desc">The images or other media can be
aligned top, middle, or bottom. The default is top aligned.</p>
<Media className="mb-4">
<img className="avatar-sm align-self-start rounded mr-3" src={avatar3} alt="Nazox"/>
<Media body>
<h5 className="mt-0 font-size-14">Top-aligned media</h5>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
<p className="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</Media>
</Media>
<Media className="mb-4">
<img className="avatar-sm align-self-center rounded mr-3" src={avatar5} alt="Nazox"/>
<Media body>
<h5 className="mt-0 font-size-14">Center-aligned media</h5>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
<p className="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</Media>
</Media>
<Media>
<img className="avatar-sm align-self-end rounded mr-3" src={avatar1} alt="Nazox"/>
<Media body>
<h5 className="mt-0 font-size-14">Bottom-aligned media</h5>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
<p className="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</Media>
</Media>
</CardBody>
</Card>
</Col>
</Row>
</Container>
</div>
</React.Fragment>
);
}
