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

按鈕群組,讓按鈕旁邊可以有副功能鈕 #865

Closed
YamiOdymel opened this issue Oct 15, 2022 · 1 comment
Closed

按鈕群組,讓按鈕旁邊可以有副功能鈕 #865

YamiOdymel opened this issue Oct 15, 2022 · 1 comment
Assignees
Labels
✨ 功能追加 基於某個元件而追加的新樣式或是功能。 🎨 CSS 與 CSS 和外觀設計上有關聯。 📦 新元件 討論的是新的 UI 元件。
Milestone

Comments

@YamiOdymel
Copy link
Member

YamiOdymel commented Oct 15, 2022

像 Tumblr 那樣

image

或 Bootstrap 的 Split Button

image

跟 Windows 的更新

image

image

<div class="ts-split" style="
    display: inline-flex;
    gap: 0.1rem;
">
    <button class="ts-button is-circuxlar is-short" style="
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
">送出</button>
    <button class="ts-button is-circulxar is-icon action" style="
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    width: calc(var(--height) * 0.9);
    font-size: var(--ts-font-size-13px);
">
    <span class="ts-icon is-caret-down-icon"></span>
</button>
    <div class="ts-dropdown is-visible is-bottom-right">
        <button class="item">下載</button>
        <button class="item">重新命名</button>
        <button class="item">刪除</button>
    </div>
</div>
@YamiOdymel YamiOdymel added 📦 新元件 討論的是新的 UI 元件。 🎨 CSS 與 CSS 和外觀設計上有關聯。 ✨ 功能追加 基於某個元件而追加的新樣式或是功能。 labels Oct 15, 2022
@YamiOdymel YamiOdymel added this to the Tocas 4.1.1 milestone Oct 15, 2022
@YamiOdymel YamiOdymel self-assigned this Oct 15, 2022
@YamiOdymel
Copy link
Member Author

sshot-2023-02-23-23
sshot-2023-02-23-25
sshot-2023-02-23-26

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
✨ 功能追加 基於某個元件而追加的新樣式或是功能。 🎨 CSS 與 CSS 和外觀設計上有關聯。 📦 新元件 討論的是新的 UI 元件。
Projects
None yet
Development

No branches or pull requests

1 participant