Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

More tutorials ? #1

Open
jamols09 opened this issue Oct 15, 2021 · 9 comments
Open

More tutorials ? #1

jamols09 opened this issue Oct 15, 2021 · 9 comments

Comments

@jamols09
Copy link

In case if you are interested in making more tutorial (I really hope so)

Can you do tutorial where we create a tag on an input and whenever we press enter a new tag will be added but if there are too many tags in the input the others will not be shown

@larxn
Copy link
Owner

larxn commented Oct 20, 2021

Hi, Oliver. Thanks for your kind words. Do you have an example of how that component would look like?

@jamols09
Copy link
Author

Somewhat like this I can also set the maximum number of tags so the input field would not expand when there are many tags. https://github.com/vueform/multiselect

@larxn
Copy link
Owner

larxn commented Oct 21, 2021

Oh, at first glance it looks like it would have this structure:

<div class="container">
  <div class="tag-list">
    <div class="tag"></div>
  </div>
  <input v-model="search">
</div>

And then the input disappears when .container is no longer focused. It doesn't seem that complicated. What do you think?

@jamols09
Copy link
Author

You're right think that is the main structure (also from the video I've seen).
I think the more complicated part is the making of dropdown ? (probably) because it has to be done from scratch and also the dynamic width input width size.

@larxn
Copy link
Owner

larxn commented Oct 27, 2021

Well, a <datalist> may be helpful:

<input id="color" list="suggestions">
<datalist id="suggestions">
    <option value="Black">
    <option value="Red">
    <option value="Green">
    <option value="Blue">
    <option value="White">
</datalist>

https://teamtreehouse.com/community/creating-a-suggestion-list-for-html-form-input-elements

@larxn
Copy link
Owner

larxn commented Oct 27, 2021

Having a good foundation of CSS can really untie your creativity.

@petrasvestartas
Copy link

Does it support videos?

@larxn
Copy link
Owner

larxn commented Dec 11, 2024

Hi, @petrasvestartas. You mean like thumbnails or actual video players? I think it should work on both cases, but haven't tried.

I would recommend you to use a professional grade library though; something like swiper.js.

@petrasvestartas
Copy link

Yesterday night I tried swiper, it worked quite well with version of swiper 6. Thank you for reference.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants