Тёмный

Component Overview: Accessible Accordion & Toggle 

AutomaticCSS & Frames
Подписаться 4,7 тыс.
Просмотров 3 тыс.
50% 1

Опубликовано:

 

10 окт 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 63   
@ReubenHochstetler
@ReubenHochstetler Год назад
Automatically adding the schema is literally amazing. I love Frames.
@AutomaticCSS
@AutomaticCSS Год назад
Yes sir!
@LupusDesign
@LupusDesign Год назад
Kevin & Team: what's so impressive is the attention given to every detail. Thank you for this very impressive accordion component and how to configure and style. Now back to your L15 lesson on Components and Templates!
@davidwalls2304
@davidwalls2304 Год назад
Kevin & ACSS/Frames team, this is EXCELLENT! Easy to understand, simple to configure, powerful output. It doesn't get much better than this.
@AutomaticCSS
@AutomaticCSS Год назад
🙏🙏🙏
@markpeters2254
@markpeters2254 Год назад
Besides the great content, I also admire the 'uhh' less presentation style. Gonna use this component today, thanks, Kevin!
@johnboyd8053
@johnboyd8053 Год назад
Kevin & Team, this Component is perfect timing. I have been struggling to try to make Bricks Accordion work and there are so many issues. This component is the perfect fit and very easy to mold into my project. Thanks, and keep them coming.
@AutomaticCSS
@AutomaticCSS Год назад
Our pleasure!
@suzannebaker8053
@suzannebaker8053 Год назад
One click schema! 🤯Amazing, implementing now!
@AutomaticCSS
@AutomaticCSS Год назад
Yep!
@ted-e-baer
@ted-e-baer Год назад
Very nice tutorial. Thank you, Kevin and the rest of the ACSS team. Job well done. But more importantly, well explained. I for one appreciate these tutorials. Cheers.
@AmandaLucaseu
@AmandaLucaseu Год назад
Absolutely fantastic Kevin 🤗 can’t wait to use it
@spaciaarchviz8486
@spaciaarchviz8486 Год назад
This is a great addition. Can the icon be changed from arrow to say + and toggle state as - ?
@AutomaticCSS
@AutomaticCSS Год назад
Yes it supports any icon.
@GregPerham
@GregPerham 15 дней назад
"Supports"? What does that mean? It appears not to provide UI for setting the icon
@isaurasotoca
@isaurasotoca Год назад
I have been using the accordion component on the very last two projects I have been working on! Everything is absolutely amazing... from the schema toggle to the non-intrusive styling! Nice one 😊
@AutomaticCSS
@AutomaticCSS Год назад
Good to hear!
@ScottMackey
@ScottMackey Год назад
Oh Boi, Kevin you and the dream team are helping keep the dream of correct done, front end dev alive! I’ve built accessible, well developed components in JS frameworks but usually they need some tweaking for reusablility but you’ve covered just about everything! Thanks again 😊
@toby-green
@toby-green 11 месяцев назад
The accordion is great to work with. Have set it up so that buttons in the 'Feature Card Romeo' on another page open specific sliders. The only niggle is that Close Previous is not closing the slider that was opened on navigating to the page when another slider is accessed ie. 2 are open simultaneously. The Close previous works on any manually opened sliders but not the one opened with a #id in the url.
@derekshort
@derekshort Год назад
Great video! Thanks!
@tolkienomics
@tolkienomics Год назад
Great video, nice to have this! In a query loop, how would you target a specific accordion in order to link to it or vary its settings from the rest?
@AutomaticCSS
@AutomaticCSS Год назад
Bricks would need to add a way to add custom IDs to query loop items. Or you can choose to not turn off the default IDs Bricks places on all elements.
@philipplunch8526
@philipplunch8526 Год назад
Nice! Is it possible to have different custom Icons for active/inactive? Can you please include the possibility to Style the active Border in the TOC component as well?
@thorsten-roever
@thorsten-roever 3 месяца назад
Thanks
@rubengarciajr
@rubengarciajr Год назад
Stop creating amazing content !!!
@AutomaticCSS
@AutomaticCSS Год назад
Can't stop, won't stop.
@GregPerham
@GregPerham 15 дней назад
Scroll to hash is good for a long list of faqs, but would be even better if it could scroll to the parent (or possibly even a heading/section before/around the component) and just open the appropriate item
@marshwebsolutions
@marshwebsolutions Год назад
Great work as always Kevin! For some reason, the FAQ schema isn't appearing when I run a page in Google's Rich Results Test. It appears in my Firefox Browser Inspector.
@AutomaticCSS
@AutomaticCSS Год назад
Feel free to post a link in the ACSS community so we can take a look.
@noe.galarza
@noe.galarza Год назад
Hi Kevin. Thank you. It's amazing. But could you use the Query Loop to display an ordered list of FAQs where their numbering would automatically reorder when you changed the order of the FAQ CPTs? I don't know if I explain myself. Also, would there be the possibility that the component assigns the subnumbering automatically for the possible contents of the body of each item according to the numbering of the item? That is to say: 1. First question. 1.1. First subquestion. 1.2. Second subquestion. 2. Second question. ... And so on. Thank you.
@AutomaticCSS
@AutomaticCSS Год назад
Yes, you can auto-number them. I'd have to look into auto-numbering the children, though. Not sure off the top of my head.
@kareem2928
@kareem2928 Год назад
Flexible element!!! Well done. When the components will be released?
@AutomaticCSS
@AutomaticCSS Год назад
They've been available for a while now!
@kareem2928
@kareem2928 Год назад
@@AutomaticCSS I know, but still it says Beta & RC!
@fabiamc
@fabiamc Год назад
Huge!
@davidnickson5043
@davidnickson5043 Год назад
Incredible video!! I am using a + for the icon, is there a way to make it change to a line when open?
@AutomaticCSS
@AutomaticCSS Год назад
Yes, with bricks interactions.
@PswACC
@PswACC 10 месяцев назад
1. Is it possible to change the FAQ icon? 2. Can accordions be set to toggle open and close individually upon clicking, without automatically closing the others when clicked?
@AutomaticCSS
@AutomaticCSS 10 месяцев назад
1. Yes. 2. Yes.
@BGdev305
@BGdev305 Год назад
Why is it your components thus far are so much more buttery smooth quick and easier than Bricks native elements? Like with your modal & trigger component I don't even look at Brick's own convoluted new or old nav menu. Now with this accordion, I have some use ideas for it that isn't even for "traditional" accordion use! That one click auto schema is MAJOR! Having to do that manually is very very time consuming. That ONE functionality alone is actually worth the cost of Frames just in the time saved from having to manually do this. One note / question, in ref to the 'scroll to hash'.. would be nice to also have url parameter functionality, ?accordian_item_title for us that MUST use query parameters / query strings ala tracking. For me, tracking from domain to domain and for campaign tracking ?parameter is a must.
@AutomaticCSS
@AutomaticCSS Год назад
That's our mission --- make the best components available anywhere. More features + better UX. Glad you're noticing!
@laufal
@laufal Год назад
Re- scroll hash, a target blank would be a nice addition Kevin. Also, if the destination url later redirects to another url, will the hash link still work? Best! EDIT: also, could we have a custom offset (because of various header heights)?
@AutomaticCSS
@AutomaticCSS Год назад
Offset is already part of ACSS. Target blank should already be possible as well.
@laufal
@laufal Год назад
@@AutomaticCSS I meant offset for the scroll hash (or do you mean the one from ACSS can be used here?). Also, I was surprised that putting a static URL before #id didn't bother you. Isn't it the definition of chump behaviour and can you do anything about it (i.e. dynamic page instead)? 😋
@AutomaticCSS
@AutomaticCSS Год назад
@@laufal I used a relative URL, not a static URL. And yes, ACSS's scroll offset will work with this by default.
@laufal
@laufal Год назад
@@AutomaticCSS Awesome. A relative url? Sure but if the URL is later modified, will it take into account automatically or will the link lead to a 404 or 301 but without a functioning hash scroll?
@AutomaticCSS
@AutomaticCSS Год назад
@@laufal That's what redirects are for. There are no tokens for URLs.
@muzik667
@muzik667 Год назад
Hay Kevin. In Icon Default, I'm missing the wrapper size field in ICON - DEFAULT. Is there any setting in Bricks that I should be change? I'm a member in your inner circle too. Thanks
@AutomaticCSS
@AutomaticCSS Год назад
I'm using a newer version than you are. You'll have the new version later in August and then you'll have control over all that stuff.
@muzik667
@muzik667 Год назад
@@AutomaticCSS Thanks man.. Appreciate it.
@SingaporeMathsAcademyUK
@SingaporeMathsAcademyUK Месяц назад
I know the documentation is being built but currently there is a message "Element "fr-accordion" doesn't exist?
@AutomaticCSS
@AutomaticCSS 10 дней назад
You have to enable the accordion component
@vigi1ante1
@vigi1ante1 Год назад
I don't see the Transform property in the accordion's "Head Styling > Icon - Active" section. Am I missing something?
@AutomaticCSS
@AutomaticCSS Год назад
You need the next version that isn't out yet ;) -- The one in this video is an unreleased Alpha. You'll have access very soon.
@markpeters2254
@markpeters2254 Год назад
@@AutomaticCSS Same for the ul TAG I guess?
@kappesante
@kappesante Год назад
insane
@JamesJosephFinn
@JamesJosephFinn Год назад
Un-styled, accessible, and semantically coded common web-design patterns as pluggable components in Frames introduces a heretofore unseen level of design capability to the WP dashboard. You're breaking new ground.
@AutomaticCSS
@AutomaticCSS Год назад
Thx, we think so, too!
@michaelvandinther
@michaelvandinther Год назад
Kevin/ACSS. I dont see Additional Settings > Tag?
@AutomaticCSS
@AutomaticCSS Год назад
Wait for the august update.
@GregPerham
@GregPerham 15 дней назад
The only documentation is this video. I was also concerned by not seeing an option for definition list.
@eucalyptech
@eucalyptech Год назад
Such powerful components, thank you Frames team ! But such a shame we cannot have Frames with Oxygen builder 🥲
Далее
ACSS 101.05: Smart Spacing
26:49
Просмотров 4,1 тыс.
Flipping Robot vs Heavier And Heavier Objects
00:34
Просмотров 2,5 млн
Building an Accessible Accordion
29:49
Просмотров 909
ACSS 101.08: Color Scheme & "Dark Mode"
31:45
Просмотров 3,3 тыс.
Builderius Alpha 1.0 is Finally Released
26:20
Просмотров 8 тыс.
ACSS 101.12: The Official ACSS Workflow (BEM + AUTOBEM)
40:58
ACSS 101.13: Traditional Grid Layouts
43:23
Просмотров 3,8 тыс.
Flipping Robot vs Heavier And Heavier Objects
00:34
Просмотров 2,5 млн