Replies: 2 comments 9 replies
-
|
Possibly but framework-ui is going to be more like reusable components for consumers to use, and those sidebars aren't really in the state of being reusable at the moment, I'm not too worried about a little bit of duplication in the examples. Adding more abstraction also makes it a little bit harder for someone to directly comprehend the one example's source code |
Beta Was this translation helpful? Give feedback.
-
|
hyperui looks good. Yeah I could imagine someone taking that and running it through the html converter, and them doing a bit more manual cleanup / splitting to make it a bit more re-usable |
Beta Was this translation helpful? Give feedback.
-
I will give it a try on a fork. I was thinking if it works we can build a Web GUI that actually does what HyperUI does to show off things.. The reason being that they way they build their Demo Web site seems, to me, to be very much like how htmgo works. To get that far we will need the RTL / LTR and Screen size controls. Could we make an Issue for that ? These would be framework level so that everything can use it. It will mean that the 4 demos would also have that too as a result. We could built them in to the demos and / or have them as top level Designer Controls to allow developers playing with them toggle the LTR / RTL and Screen size. This, to me, fits in well with the way htmg works and its code generated router. |
Beta Was this translation helpful? Give feedback.
-
|
Agreed, having a components nav item on the main side where we have a grid of components like how HyperUI has it would be nice. Likely don't need to do all of them, but picking the most common use case ones would be best for now. If you're up for it, yeah just getting the components working on a fork (maybe just in htmgo-site project), and then I can help build a presentable UI for demo purposes if needed |
Beta Was this translation helpful? Give feedback.
-
|
https://preline.co/index.html also looks decent, but I do like hyperui better |
Beta Was this translation helpful? Give feedback.
-
https://github.com/htmlstreamofficial/preline does not have the HTML. It seems to be all wrapped up in complex JSX, with no HTML, so I dont see how we can easily leverage it. Correct me if I am missing something though .... preline accordion has no raw html we can use except generated in their Web site. https://preline.co/docs/accordion.html https://github.com/htmlstreamofficial/preline/blob/main/dist/accordion.mjs <div class="hs-accordion-group">
<div class="hs-accordion active" id="hs-basic-heading-one">
<button class="hs-accordion-toggle hs-accordion-active:text-blue-600 py-3 inline-flex items-center gap-x-3 w-full font-semibold text-start text-gray-800 hover:text-gray-500 focus:outline-none focus:text-gray-500 rounded-lg disabled:opacity-50 disabled:pointer-events-none dark:hs-accordion-active:text-blue-500 dark:text-neutral-200 dark:hover:text-neutral-400 dark:focus:text-neutral-400" aria-expanded="true" aria-controls="hs-basic-collapse-one">
<svg class="hs-accordion-active:hidden block size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 12h14"></path>
<path d="M12 5v14"></path>
</svg>
<svg class="hs-accordion-active:block hidden size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 12h14"></path>
</svg>
Accordion #1
</button>
<div id="hs-basic-collapse-one" class="hs-accordion-content w-full overflow-hidden transition-[height] duration-300" role="region" aria-labelledby="hs-basic-heading-one">
<p class="text-gray-800 dark:text-neutral-200">
<em>This is the third item's accordion body.</em> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
</p>
</div>
</div>
<div class="hs-accordion" id="hs-basic-heading-two">
<button class="hs-accordion-toggle hs-accordion-active:text-blue-600 py-3 inline-flex items-center gap-x-3 w-full font-semibold text-start text-gray-800 hover:text-gray-500 focus:outline-none focus:text-gray-500 rounded-lg disabled:opacity-50 disabled:pointer-events-none dark:hs-accordion-active:text-blue-500 dark:text-neutral-200 dark:hover:text-neutral-400 dark:focus:text-neutral-400" aria-expanded="false" aria-controls="hs-basic-collapse-two">
<svg class="hs-accordion-active:hidden block size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 12h14"></path>
<path d="M12 5v14"></path>
</svg>
<svg class="hs-accordion-active:block hidden size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 12h14"></path>
</svg>
Accordion #2
</button>
<div id="hs-basic-collapse-two" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region" aria-labelledby="hs-basic-heading-two">
<p class="text-gray-800 dark:text-neutral-200">
<em>This is the third item's accordion body.</em> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
</p>
</div>
</div>
<div class="hs-accordion" id="hs-basic-heading-three">
<button class="hs-accordion-toggle hs-accordion-active:text-blue-600 py-3 inline-flex items-center gap-x-3 w-full font-semibold text-start text-gray-800 hover:text-gray-500 focus:outline-none focus:text-gray-500 rounded-lg disabled:opacity-50 disabled:pointer-events-none dark:hs-accordion-active:text-blue-500 dark:text-neutral-200 dark:hover:text-neutral-400 dark:focus:text-neutral-400" aria-expanded="false" aria-controls="hs-basic-collapse-three">
<svg class="hs-accordion-active:hidden block size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 12h14"></path>
<path d="M12 5v14"></path>
</svg>
<svg class="hs-accordion-active:block hidden size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 12h14"></path>
</svg>
Accordion #3
</button>
<div id="hs-basic-collapse-three" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region" aria-labelledby="hs-basic-heading-three">
<p class="text-gray-800 dark:text-neutral-200">
<em>This is the third item's accordion body.</em> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
</p>
</div>
</div>
</div> |
Beta Was this translation helpful? Give feedback.
-
|
@gedw99 just fyi I pushed a release to the html to go tool to format the output better: https://github.com/maddalax/htmgo/releases/tag/framework%2Fv1.0.1 |
Beta Was this translation helpful? Give feedback.
-
|
Well done !! Good notes too . And like the banner on he main web site announcing it. |
Beta Was this translation helpful? Give feedback.
-
SideBar component so less reinventing of the wheel.
https://hn.htmgo.dev has one from https://github.com/maddalax/htmgo/blob/master/examples/hackernews/partials/sidebar.go
https://htmgo.dev/docs has one from https://github.com/maddalax/htmgo/blob/master/htmgo-site/partials/sidebar.go
Presumably it would go in https://github.com/maddalax/htmgo/tree/master/framework-ui/ui
Beta Was this translation helpful? Give feedback.
All reactions