coopax-search
v1.0.20
Published
## Install web component ``` npm install --save coopax-search ```
Readme
coopax-search
Install web component
npm install --save coopax-searchIn your main.js, or a similar entry point for your app:
import SearchComponent from 'coopax-search';
import Vue from 'vue';
Vue.component(SearchComponent);Now it's able to use anywhere in your app like this
<coopax-search
src="https://test-api.coopax.com" // only use for testing
text-input-type="input" // input or textarea
city-name-label="city name input label"
city-name-placeholder="city name input placeholder"
purpose-label="purpose input label"
purpose-placeholder="purpose placeholder"
attendees-label="attendee input label"
attendees-placeholder="attendee input placeholder"
search-text="search button text"
business-category-label="business radio button label"
other-category-label="other radio button label"
create-event-text="create event button text"
language-code="en" // default "br"
></coopax-search>You can change css by part name like this
coopax-search::part(web-comp-container) {
background-color: red;
}
We have these parts (each part is same as class of element):
web-comp-container
city-name-container
city-name-label
city-name-input
purposes-container
purposes-label
purpose-wrapper
purpose-placeholder
purpose-input
purposes-select-option
purpose-menu
purpose-categories-container
purpose-category-business
purpose-category-other
business-radio-button
business-label
other-radio-button
other-label
attendees-container
attendees-label
attendees-input
search-button-container
search-button
create-event-button-container
create-event-button
You can also style google-autocomplete, see more https://softauthor.com/google-places-autocomplete-api/ You can import directly to html file by add
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Coopax - Web Component</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://coopax-search-widget.s3.amazonaws.com/coopax-search.min.js"></script>
</head>
<body>
<coopax-search
city-name-label="City name"
city-name-placeholder="City placeholder"
>
</coopax-search>
</body>
<style>
coopax-search::part(web-comp-container) {
display: grid;
grid-template-columns: 1fr;
grid-column-gap: 20px;
}
coopax-search::part(city-name-input) {
height: 31px;
}
coopax-search::part(city-name-container) {
display: grid;
grid-template-columns: 1fr;
grid-gap: 10px;
}
coopax-search::part(purposes-container) {
display: grid;
grid-template-columns: 1fr;
grid-gap: 10px;
}
coopax-search::part(purpose-input) {
height: 31px;
}
coopax-search::part(attendees-container) {
display: grid;
grid-template-columns: 1fr;
grid-gap: 10px;
}
coopax-search::part(attendees-input) {
height: 31px;
}
coopax-search::part(search-button-container) {
margin-top: 20px;
}
</style>
</html>