mirror of
https://github.com/gradio-app/gradio.git
synced 2025-01-30 11:00:11 +08:00
Mobile responsive iframes in themes guide (#3562)
* make demos mobile responsive * changelog
This commit is contained in:
Ali Abdalla
GitHub
parent
6c8aeed58f
commit
ab95f0551e
@ -24,7 +24,8 @@ No changes to highlight.
|
||||
|
||||
## Full Changelog:
|
||||
|
||||
No changes to highlight.
|
||||
* Mobile responsive iframes in themes guide by[@aliabd](https://github.com/aliabd) in [PR 3562](https://github.com/gradio-app/gradio/pull/3562)
|
||||
|
||||
|
||||
## Contributors Shoutout:
|
||||
|
||||
|
||||
@ -10,12 +10,12 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
|
||||
...
|
||||
```
|
||||
|
||||
<div class="wrapper">
|
||||
<iframe
|
||||
src="https://gradio-theme-soft.hf.space?__theme=light"
|
||||
frameborder="0"
|
||||
width="850"
|
||||
height="450"
|
||||
></iframe>
|
||||
</div>
|
||||
|
||||
Gradio comes with a set of prebuilt themes which you can load from `gr.themes.*`. These are:
|
||||
|
||||
@ -54,13 +54,12 @@ or you could use the `Color` objects directly, like this:
|
||||
with gr.Blocks(theme=gr.themes.Default(primary_hue=gr.themes.colors.red, secondary_hue=gr.themes.colors.pink)) as demo:
|
||||
...
|
||||
```
|
||||
|
||||
<div class="wrapper">
|
||||
<iframe
|
||||
src="https://gradio-theme-extended-step-1.hf.space?__theme=light"
|
||||
frameborder="0"
|
||||
width="850"
|
||||
height="450"
|
||||
></iframe>
|
||||
</div>
|
||||
|
||||
Predefined colors are:
|
||||
|
||||
@ -110,13 +109,12 @@ or you could use the `Size` objects directly, like this:
|
||||
with gr.Blocks(theme=gr.themes.Default(spacing_size=gr.themes.sizes.spacing_sm, radius_size=gr.themes.sizes.radius_none)) as demo:
|
||||
...
|
||||
```
|
||||
|
||||
<div class="wrapper">
|
||||
<iframe
|
||||
src="https://gradio-theme-extended-step-2.hf.space?__theme=light"
|
||||
frameborder="0"
|
||||
width="850"
|
||||
height="450"
|
||||
></iframe>
|
||||
</div>
|
||||
|
||||
The predefined size objects are:
|
||||
|
||||
@ -147,13 +145,13 @@ with gr.Blocks(theme=gr.themes.Default(font=[gr.themes.GoogleFont("Inconsolata")
|
||||
...
|
||||
```
|
||||
|
||||
$demo_theme_extended_step_3
|
||||
<div class="wrapper">
|
||||
<iframe
|
||||
src="https://gradio-theme-extended-step-3.hf.space?__theme=light"
|
||||
frameborder="0"
|
||||
width="850"
|
||||
height="450"
|
||||
></iframe>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
## Extending Themes via `.set()`
|
||||
@ -260,12 +258,12 @@ Our new theme class will inherit from `gradio.themes.Base`, a theme that sets a
|
||||
|
||||
$code_theme_new_step_1
|
||||
|
||||
<div class="wrapper">
|
||||
<iframe
|
||||
src="https://gradio-theme-new-step-1.hf.space?__theme=light"
|
||||
frameborder="0"
|
||||
width="850"
|
||||
height="450"
|
||||
></iframe>
|
||||
</div>
|
||||
|
||||
|
||||
The Base theme is very barebones, and uses `gr.themes.Blue` as it primary color - you'll note the primary button and the loading animation are both blue as a result. Let's change the defaults core arguments of our app. We'll overwrite the constructor and pass new defaults for the core constructor arguments.
|
||||
@ -274,25 +272,24 @@ We'll use `gr.themes.Emerald` as our primary color, and set secondary and neutra
|
||||
|
||||
$code_theme_new_step_2
|
||||
|
||||
<div class="wrapper">
|
||||
<iframe
|
||||
src="https://gradio-theme-new-step-2.hf.space?__theme=light"
|
||||
frameborder="0"
|
||||
width="850"
|
||||
height="450"
|
||||
></iframe>
|
||||
</div>
|
||||
|
||||
See how the primary button and the loading animation are now green? These CSS variables are tied to the `primary_hue` variable.
|
||||
|
||||
Let's modify the theme a bit more directly. We'll call the `set()` method to overwrite CSS variable values explicitly. We can use any CSS logic, and reference our core constructor arguments using the `*` prefix.
|
||||
|
||||
$code_theme_new_step_3
|
||||
|
||||
<div class="wrapper">
|
||||
<iframe
|
||||
src="https://gradio-theme-new-step-3.hf.space?__theme=light"
|
||||
frameborder="0"
|
||||
width="850"
|
||||
height="450"
|
||||
></iframe>
|
||||
</div>
|
||||
|
||||
|
||||
Look how fun our theme looks now! With just a few variable changes, our theme looks completely different.
|
||||
@ -347,12 +344,12 @@ By calling `push_to_hub` or `upload_theme`, the theme assets will be stored in a
|
||||
|
||||
The theme preview for our seafoam theme is here: [seafoam preview](https://huggingface.co/spaces/gradio/seafoam).
|
||||
|
||||
<div class="wrapper">
|
||||
<iframe
|
||||
src="https://gradio-seafoam.hf.space?__theme=light"
|
||||
frameborder="0"
|
||||
width="850"
|
||||
height="450"
|
||||
></iframe>
|
||||
</div>
|
||||
|
||||
### Discovering Themes
|
||||
|
||||
@ -361,12 +358,12 @@ it will automatically show up in the theme gallery after a couple of minutes.
|
||||
|
||||
You can sort the themes by the number of likes on the space and from most to least recently created as well as toggling themes between light and dark mode.
|
||||
|
||||
<div class="wrapper">
|
||||
<iframe
|
||||
src="https://gradio-theme-gallery.hf.space"
|
||||
frameborder="0"
|
||||
width="850"
|
||||
height="450"
|
||||
></iframe>
|
||||
</div>
|
||||
|
||||
### Downloading
|
||||
To use a theme from the hub, use the `from_hub` method on the `ThemeClass` and pass it to your app:
|
||||
@ -390,4 +387,20 @@ with gr.Blocks(theme="gradio/seafoam@>=0.0.1,<0.1.0") as demo:
|
||||
```
|
||||
|
||||
Enjoy creating your own themes! If you make one you're proud of, please share it with the world by uploading it to the hub!
|
||||
If you tag us on [Twitter](https://twitter.com/gradio) we can give your theme a shout out!
|
||||
If you tag us on [Twitter](https://twitter.com/gradio) we can give your theme a shout out!
|
||||
|
||||
<style>
|
||||
.wrapper {
|
||||
position: relative;
|
||||
padding-bottom: 56.25%;
|
||||
padding-top: 25px;
|
||||
height: 0;
|
||||
}
|
||||
.wrapper iframe {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user